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

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. 

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.

<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

gatillo: {

 product_page_class: 'button'

},
modal: {

 font_family: '"Archivo", serif;'

}

Dawn

gatillo: {

 product_page_class: 'button'

},
modal: {

font_family: '"Assistant", sans-serif;' 

}

Estudio

gatillo: {

 product_page_class: 'button'

},
modal: {

 font_family: '"Electra", serif;' 

}

Bloque de color

gatillo: {

 product_page_class: 'button'

},
modal: {

 font_family: '"Futura", sans-serif;' 

}

Sentido

gatillo: {

 product_page_class: 'button'

},
modal: {

 font_family: '"Harmonia Sans", sans-serif;'

}

Prueba

gatillo: {

 product_page_class: 'button'

},
modal: {

 font_family: '"Anonymous Pro", sans-serif;'

}

Artesanía

gatillo: {

 product_page_class: 'button'

},
modal: {

 font_family: '"Quattrocento Sans", sans-serif;'

}

Monta

gatillo: {

 product_page_class: 'button'

},
modal: {

 font_family: '"Avenir Next", sans-serif;'

}

Actualizar

gatillo: {

 product_page_class: 'button'

},
modal: {

 font_family: '"Questrial", sans-serif;'

}

Simple

Belleza

modal: {

 font_family: '"PT Serif",serif;'

}

Pop

Hueso

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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 has actualizado el estilo de tu botón y formulario de reposición de existencias en tu Shopify tienda, comercio. 

Recursos adicionales

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