Cómo personalizar los botones y formularios de reposición de stock de los temas gratuitos de Shopify

Aprox. 2 minutos de lectura

Actualizado 7 jul 2025, 0:00 EST

Qué aprenderás

Descubre qué cambios clave debes hacer en cada tema gratuito de Shopify para asegurarte rápidamente de que el botón y el formulario de reposición de stock coincidan con el estilo de tu tema. El botón y el formulario de Klaviyo «Notificarme cuando esté disponible» son muy configurables. Puedes cambiar los colores, las tipografías, el texto y otros elementos de acuerdo con tus preferencias de diseño.

La instalación de la reposición de stock solo es compatible con ciertos temas gratuitos de Shopify, y no con tiendas de Shopify que utilicen temas personalizados. En estos momentos, la asistencia de Klaviyo no puede ayudar con la implementación de esta función para las tiendas que utilizan temas personalizados. Para comprobar qué tema de Shopify usa tu tienda, puedes usar un detector de temas de Shopify.

Antes de empezar

Si aún no lo has hecho, antes de seguir leyendo este artículo consulta nuestra guía sobre la introducción a Shopify para saber cómo realizar la integración.

Para obtener más información general sobre la función de reposición de stock y cómo habilitarla, lee nuestra guía sobre instalar reposición de stock para Shopify.

Cómo personalizar tu botón y formulario

Cuando estés instalando tu snippet, busca el snippet de estilo para tu tema gratuito en este artículo.
El fragmento predeterminado se muestra a continuación. Actualiza (o añade) elementos de línea dentro de las secciones trigger: {} y modal: {} del fragmento predeterminado según lo que se muestra en el fragmento de estilo
1. Por ejemplo, si tienes el tema Crave, solo necesitas añadir la siguiente línea dentro de la sección modal: font_family: '"Archivo", serif;'
Realiza cualquier otra actualización de estilo que quieras en los elementos de línea, como consideres oportuno.

<script src="https://a.klaviyo.com/media/js/onsite/onsite.js"></script>
<script>
    var klaviyo = klaviyo || [];
    klaviyo.init({
      account: "PUBLIC_API_KEY",
      platform: "shopify"
    });
    klaviyo.enable("backinstock",{ 
    trigger: {
      product_page_text: "Notify Me When Available",
      product_page_class: "button",
      product_page_text_align: "center",
      product_page_margin: "0px",
      replace_anchor: false
    },
    modal: {
     headline: "{product_name}",
     body_content: "Register to receive a notification when this item comes back in stock.",
     email_field_label: "Email",
     button_label: "Notify me when available",
     subscription_success_label: "You're in! We'll let you know when it's back.",
     footer_content: '',
     additional_styles: "@import url('https://fonts.googleapis.com/css2?family=Roboto+wght@400;700&display=swap');",
     drop_background_color: "#000",
     background_color: "#fff",
     text_color: "#222",
     button_text_color: "#fff",
     button_background_color: "#439fdb",
     close_button_color: "#ccc",
     error_background_color: "#fcd6d7",
     error_text_color: "#C72E2F",
     success_background_color: "#d3efcd",
     success_text_color: "#1B9500"
    }
  });
</script>

Crave

trigger: {
 product_page_class: 'button'
},
modal: {
 font_family: '"Archivo", serif;'
}

Dawn

trigger: {
 product_page_class: 'button'
},
modal: {
font_family: '"Assistant", sans-serif;' 
}

Studio

trigger: {
 product_page_class: 'button'
},
modal: {
 font_family: '"Electra", serif;' 
}

Bloque de color

trigger: {
 product_page_class: 'button'
},
modal: {
 font_family: '"Futura", sans-serif;' }

Sentido

trigger: {
 product_page_class: 'button'
},
modal: {
 font_family: '"Harmonia Sans", sans-serif;'
}

Sabor

trigger: {
 product_page_class: 'button'
},
modal: {
 font_family: '"Anonymous Pro", sans-serif;'
}

Crear

trigger: {
 product_page_class: 'button'
},
modal: {
 font_family: '"Quattrocento Sans", sans-serif;'
}

Trayecto

trigger: {
 product_page_class: 'button'
},
modal: {
 font_family: '"Avenir Next", sans-serif;'
}

Actualizar

trigger: {
 product_page_class: 'button'
},
modal: {
 font_family: '"Questrial", sans-serif;'
}

Sencillo

Belleza

modal: {
 font_family: '"PT Serif",serif;'
}

Pop

Hueso

trigger: {
 product_page_class: 'btn btn--full'
},
modal: {
 additional_styles: "@import url('https://fonts.googleapis.com/css?family=Raleway');",
 font_family: '"Raleway","HelveticaNeue","Helvetica Neue",sans-serif;'
}

Juguete

trigger: {
 product_page_class: 'btn btn--large btn--full'
},
modal: {
 additional_styles: "@import url('https://fonts.googleapis.com/css?family=Open+Sans');",
 font_family: '"Open Sans","HelveticaNeue","Helvetica Neue",sans-serif;'
}

Blanco y negro

trigger: {
 product_page_class: 'btn btn--large btn--full'
},
modal: {
 additional_styles: "@import url('https://fonts.googleapis.com/css?family=Open+Sans');",
 font_family: '"Open Sans","HelveticaNeue","Helvetica Neue",sans-serif;'
}

Vibrante

trigger: {
 product_page_class: 'btn btn--large btn--full'
},
modal: {
 additional_styles: "@import url('https://fonts.googleapis.com/css?family=Open+Sans');",
 font_family: '"Open Sans","HelveticaNeue","Helvetica Neue",sans-serif;'
}

Venture

Snowboards

trigger: {
 product_page_class: 'btn btn--full'
},
modal: {
 additional_styles: "@import url('https://fonts.googleapis.com/css?family=Karla');",
 font_family: '"Karla","HelveticaNeue","Helvetica Neue",sans-serif;'
}

Actividades al aire libre

trigger: {
 product_page_class: 'btn btn--full'
},
modal: {
 additional_styles: "@import url('https://fonts.googleapis.com/css?family=Roboto');",
 font_family: '"Roboto","HelveticaNeue","Helvetica Neue",sans-serif;'
}

Boxing

trigger: {
 product_page_class: 'btn btn--full'
},
modal: {
 additional_styles: "@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro');",
 font_family: '"Source Sans Pro","HelveticaNeue","Helvetica Neue",sans-serif;'
}

Debut

Predeterminado

trigger: {
 product_page_class: 'btn btn--full'
},
modal: {
 additional_styles: "@import url('https://fonts.googleapis.com/css?family=Work+Sans');",
 font_family: '"Work Sans","HelveticaNeue","Helvetica Neue",sans-serif;'
}

Claro

trigger: {
 product_page_class: 'btn btn--full'
},
modal: {
 additional_styles: "@import url('https://fonts.googleapis.com/css?family=Muli');",
 font_family: '"Muli","HelveticaNeue","Helvetica Neue",sans-serif;'
}

Supply

Claro

trigger: {
 product_page_class: 'btn btn--full'
},
modal: {
 additional_styles: "@import url('https://fonts.googleapis.com/css?family=Roboto');",
 font_family: '"Roboto","HelveticaNeue","Helvetica Neue",sans-serif;'
}

Azul

trigger: {
 product_page_class: 'btn btn--large btn--full'
},
modal: {
 additional_styles: "@import url('https://fonts.googleapis.com/css?family=Montserrat');",
 font_family: '"Montserrat","HelveticaNeue","Helvetica Neue",sans-serif;'
}

Narrativa

Calentamiento

trigger: {
 product_page_class: 'btn btn--full'
},
modal: {
 additional_styles: "@import url('https://fonts.googleapis.com/css?family=Avenir');",
 font_family: '"Avenir","HelveticaNeue","Helvetica Neue",sans-serif;'
}

Claro

trigger: {
 product_page_class: 'btn btn--full'
},
modal: {
 additional_styles: "@import url('https://fonts.googleapis.com/css?family=Open+Sans');",
 font_family: '"Open Sans","HelveticaNeue","Helvetica Neue",sans-serif;'
}

Frío

trigger: {
 product_page_class: 'btn btn--full'
},
modal: {
 additional_styles: "@import url('https://fonts.googleapis.com/css?family=Lato');",
 font_family: '"Lato","HelveticaNeue","Helvetica Neue",sans-serif;'
}

Brooklyn

Clásico

modal: {
 additional_styles: "@import url('https://fonts.googleapis.com/css?family=Arapey');",
 font_family: '"Arapey",serif;'
}

Mínimo

Moderno

modal: {
 font_family: '"PT Serif",serif;'
}

Vintage

modal: {
 additional_styles: "@import url('https://fonts.googleapis.com/css?family=PT+Sans');",
 font_family: '"PT Sans","HelveticaNeue","Helvetica Neue",sans-serif;'
}

Moda

modal: {
 additional_styles: "@import url('https://fonts.googleapis.com/css?family=PT+Sans');",
 font_family: '"PT Sans","HelveticaNeue","Helvetica Neue",sans-serif;'
}

Resultado

Ya has actualizado el estilo de tu botón y formulario de reposición de stock en tu tienda de Shopify.

Recursos adicionales

Cómo crear códigos de cupón únicos para Shopify
Aprende a crear códigos de cupón de un solo uso para tu tienda de Shopify, de forma que cada cliente reciba su propio código para una promoción determinada en el sitio web. Esta función ofrece la alternativa de crear un código de cupón genérico (o estático), por lo que no tendrás que preocuparte de que se compartan.

¿Te ha resultado útil este artículo?

Utiliza este formulario solo para enviar comentarios sobre el artículo. Más información sobre cómo contactar con el servicio de asistencia.

Descubre más sobre Klaviyo

Klaviyo Community

Conecta con compañeros, socios y expertos de Klaviyo para encontrar ideas, compartir información y resolver todas tus dudas.

Visitar Klaviyo Community

Socios

Contrata a un experto certificado por Klaviyo para ayudarte con una tarea específica o para la gestión continua de marketing.

Contratar un socio

Asistencia

Accede al servicio de asistencia a través de tu cuenta.

Asistencia por correo electrónico (prueba gratuita y cuentas de pago) Disponible 24/7

Asistencia por chat/virtual
La disponibilidad varía según la ubicación y el tipo de plan

Iniciar sesión