Centro de ayuda
/
Integraciones
/
Shopify
/
Prácticas recomendadas de Shopify

Cómo dar estilo a los botones y formularios Back in Stock de los temas gratuitos de Shopify

Aprox. 2 minutos de lectura
|
Actualizado 7 jul 2025, 0:00 EST

Qué aprenderás

Aprenda qué cambios clave debe realizar en cada tema gratuito de Shopify para asegurarse rápidamente de que su botón y formulario de Volver a existencias coinciden con el estilo de su tema. El botón y el formulario de Klaviyo "Notifíqueme cuando esté disponible" son altamente configurables. Puede cambiar los colores, las fuentes, el texto y otros elementos según sus preferencias de diseño.

La instalación de back in stock sólo es compatible con ciertos temas gratuitos de Shopify, y no con tiendas Shopify que utilicen temas personalizados. En este momento, el soporte de Klaviyo no puede ayudar con la implementación de back in stock para las tiendas que utilizan temas personalizados. Para comprobar qué tema de Shopify está utilizando su tienda, puede utilizar un detector de temas de Shopify.

Antes de empezar

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

Para conocer más en general las funciones de la reposición de stock y cómo habilitarla, lee nuestra guía sobre la instalación de la reposición de stock Shopify para.

Cómo dar estilo al botón y al formulario

  1. Cuando esté instalando su fragmento, encuentre el fragmento de estilo para su tema gratuito en este artículo.
  2. A continuación se muestra el fragmento por defecto. Actualice (o añada) elementos de línea dentro de las secciones trigger: {} y modal: {} secciones del fragmento por defecto de acuerdo con lo que se muestra en el fragmento de estilo
    1. Por ejemplo, si tiene el tema Crave, sólo tiene que añadir la siguiente línea dentro de la sección modal: font_family: '"Archivo", serif;'
  3. Realice cualquier otra actualización de estilo que desee en las partidas como considere 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",{ 
    disparar: {
      product_page_text: "Notify Me When Available",
      product_page_class: "button",
      product_page_text_align: "center",
      product_page_margin: "0px",
      replace_anchor: false
    },
    modal: {
     titular: "{product_name}",
     body_content: "Regístrese para recibir una notificación cuando este artículo vuelva a estar disponible.",
     email_field_label: "Correo electrónico",
     button_label: "Notificarme cuando esté disponible",
     subscription_success_label: "¡Está dentro! Le avisaremos cuando esté de vuelta.",
     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>

Desee

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

Dawn

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

Estudio

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

Bloque de color

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

Sentido

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

Pruebe

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

Artesanía

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

Ride

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

Actualice

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

Simple

Belleza

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

Pop

Hueso

text 
disparar: {
 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 
disparar: {
 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 & Blanco

text 
disparar: {
 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 
disparar: {
 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 nieve

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

Luz

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

Luz

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

Luz

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

Ya ha actualizado el estilo de su botón y formulario de Volver a existencias en su tienda 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