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 del artículo

Descubre qué cambios clave hacer para cada tema gratis 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 "Avisarme cuando esté disponible" de Klaviyo son altamente configurables. Puedes cambiar los colores, las fuentes, el texto y otros elementos según tus preferencias de diseño.

La instalación de la reposición de stock solo es compatible con algunos temas gratuitos de Shopify y no con las tiendas de Shopify que usan temas personalizados. Por el momento, el equipo de asistencia de Klaviyo no puede ayudar con la implementación de la función de reposición de stock en tiendas que utilizan temas personalizados. Para comprobar qué tema de Shopify usa la tienda, puedes utilizar un detector de temas de Shopify.

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 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 dar estilo a tu botón y formulario

Cuando estés instalando tu snippet, busca el snippet de estilo de tu tema gratuito en este artículo.
El fragmento predeterminado se muestra a continuación. Actualiza (o agrega) elementos de línea en 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 agregar la siguiente línea dentro de la sección modal: font_family: '"Archivo", serif;'
Realiza cualquier otra actualización de estilo que desees en los artículos de línea, según lo consideres conveniente.

<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;'
}

Simple

Belleza

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

Emergente

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;'
}

Negro y blanco

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

Tablas de snowboard

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;'
}

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;'
}

Boxeo

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;'
}

Suministro

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

Cálido

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

Ahora actualizaste el estilo del botón y el formulario de reposición de stock en tu tienda de Shopify.

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