Cómo dar estilo a los botones y formularios Back in Stock de los temas gratuitos de Shopify – Klaviyo - Help Center - ES

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

Cuando esté instalando su fragmento, encuentre el fragmento de estilo para su tema gratuito en este artículo.
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;'
Realice cualquier otra actualización de estilo que desee en las partidas como considere 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",{ 
    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

disparar: {

 product_page_class: 'button'

},
modal: {

 font_family: '"Archivo", serif;'

}

Dawn

disparar: {

 product_page_class: 'button'

},
modal: {

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

}

Estudio

disparar: {

 product_page_class: 'button'

},
modal: {

 font_family: '"Electra", serif;' 

}

Bloque de color

disparar: {

 product_page_class: 'button'

},
modal: {

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

}

Sentido

disparar: {

 product_page_class: 'button'

},
modal: {

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

}

Pruebe

disparar: {

 product_page_class: 'button'

},
modal: {

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

}

Artesanía

disparar: {

 product_page_class: 'button'

},
modal: {

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

}

Ride

disparar: {

 product_page_class: 'button'

},
modal: {

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

}

Actualice

disparar: {

 product_page_class: 'button'

},
modal: {

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

}

Simple

Belleza

modal: {

 font_family: '"PT Serif",serif;'

}

Pop

Hueso

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Recursos adicionales