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

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. 

Antes de empezar

Si aún no lo ha hecho, lea nuestra guía sobre Cómo empezar con Shopify para obtener instrucciones paso a paso sobre la integración, antes de continuar con este artículo.

Para saber más en general sobre la característica de Back in Stock y cómo habilitarla, lea nuestra guía Cómo instalar Back in Stock para Shopify.

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.

<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

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