Centro de ayuda
/
Integraciones
/
Shopify
/
Mejores prácticas de Shopify

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

Aprox. 2 min. de lectura
|
Actualizado el 7 jul 2025, 12:00 a.m. EST

Objetivos de aprendizaje

Aprende qué cambios clave debes hacer en cada tema gratuito de Shopify para asegurarte rápidamente de que tu botón y formulario de reposición de existencias coinciden con el estilo de tu tema. El botón y el formulario de Klaviyo "Notifícame cuando esté disponible" son altamente configurables. Puedes cambiar los colores, fuentes, texto y otros elementos según tus preferencias de diseño.

La instalación de la reposición de stock sólo es compatible con determinados temas gratuitos de Shopify, y no con Shopify tienda, comercio que utiliza temas personalizados. En este momento, Klaviyo equipo de asistencia no puede ayudar con la implementación de reposición de stock para tienda, comercio utilizando temas personalizados. Para comprobar qué tema de Shopify está utilizando tu tienda, comercio, puedes utilizar un detector de temas deShopify .

Antes de empezar

Si aún no lo has hecho, lee nuestra guía sobre los primeros pasos con Shopify para obtener instrucciones paso a paso sobre la integración, antes de continuar con este artículo.

Para obtener más información general sobre las funciones/características de la reposición de stock y cómo activarla, lee nuestra guía sobre la instalación de la reposición de stock Shopify para.

Cómo dar estilo a tu botón y formulario

  1. Cuando estés instalando tu fragmento, busca el fragmento de estilo para tu tema gratuito en este artículo.
  2. A continuación se muestra el fragmento por defecto. actualizar (o añadir) elementos de línea dentro de las secciones trigger: {} y modal: {} del fragmento predeterminado de acuerdo con lo que se muestra en el fragmento de estilo
    1. Por ejemplo, si tienes el tema Crave, sólo tienes que añadir la siguiente línea dentro de la sección modal: font_family: '"Archivo", serif;'
  3. Realiza cualquier otra actualización de estilo deseada en las partidas como consideres oportuno.
text 
<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",{ 
    activador: {
      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: "Regístrate para recibir una notificación cuando este artículo se reponga de stock.",
     email_field_label: "correo electrónico",
 button_label: "Notificarme cuando esté disponible",
 subscription_success_label: "¡Estás dentro! Te avisaremos cuando vuelva.",
     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>

Ansía

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

Dawn

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

Estudio

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

Bloque de color

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

Sentido

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

Prueba

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

Artesanía

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

Monta

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

Actualizar

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

Simple

Belleza

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

Pop

Hueso

text 
gatillo: {
 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

text 
gatillo: {
 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;'
}

Negro y blanco

text 
gatillo: {
 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

text 
gatillo: {
 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;'
}

Empresa

Tablas de nieve

text 
gatillo: {
 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;'
}

Al aire libre

text 
gatillo: {
 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;'
}

Boxeo

text 
gatillo: {
 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

Por defecto

text 
gatillo: {
 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

text 
gatillo: {
 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;'
}

Suministro

Claro

text 
gatillo: {
 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

text 
gatillo: {
 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

Caliente

text 
gatillo: {
 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

text 
gatillo: {
 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

text 
gatillo: {
 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

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

Mínimo

Moderno

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

Vintage

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

Moda

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

Resultado

Ahora has actualizado el estilo de tu botón y formulario de reposición de existencias en tu Shopify tienda, comercio.

Recursos adicionales

  • Cómo crear códigos de cupón únicos para Shopify

    Descubre cómo crear cupones de un solo uso para tu tienda de Shopify, de modo que cada cliente reciba su propio código único para una promoción específica en tu sitio. Esta función ofrece una alternativa a crear un cupón genérico (también conocido como código de cupón estático), para que no tengas que preocuparte de que se compartan los códigos.

¿Te resultó útil este artículo?
Usa este formulario solo para enviar comentarios sobre el artículo. Más información sobre cómo contactar al equipo de asistencia.

Descubre más sobre Klaviyo

Comunidad
Conecta con colegas, socios y expertos de Klaviyo para inspirarte, compartir ideas y resolver todas tus dudas.
Visita la comunidad
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 a la asistencia a través de tu cuenta.

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

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

Iniciar sesión