Como estilizar botões e formulários Back in Stock para temas gratuitos da Shopify

Estimado 4 minuto de leitura

Atualizado 22 de ago. de 2024, 10:32 EST

Saiba quais são as principais alterações a serem feitas em cada tema gratuito da Shopify para garantir rapidamente que o botão Back in Stock e o formulário correspondam ao estilo do seu tema. O botão e o formulário do Klaviyo "Notify Me When Available" são altamente configuráveis. O senhor pode alterar as cores, as fontes, o texto e outros elementos de acordo com suas preferências de design.

A instalação de volta ao estoque só é compatível com determinados temas gratuitos da Shopify, e não com lojas da Shopify que usam temas personalizados. No momento, o suporte da Klaviyo não pode ajudar a implementar a volta ao estoque para lojas que usam temas personalizados. Para verificar qual tema da Shopify sua loja está usando, o senhor pode usar um detector de temas da Shopify.

Antes de começar

Se o senhor ainda não o fez, leia nosso guia sobre Introdução à Shopify para obter instruções passo a passo sobre a integração, antes de continuar com este artigo.

Para saber mais sobre o recurso Back in Stock e como habilitá-lo, leia nosso guia How to Install Back in Stock for Shopify.

Como estilizar seu botão e formulário

Quando estiver instalando seu snippet, encontre o snippet de estilo para seu tema gratuito neste artigo.
O snippet padrão é mostrado abaixo. Atualize (ou adicione) itens de linha dentro das seções trigger: {} e modal: {} do snippet padrão de acordo com o que é mostrado no snippet de estilo
1. Por exemplo, se tiver o tema Crave, basta adicionar a seguinte linha na seção modal: font_family: '"Archivo", serif;'
Faça quaisquer outras atualizações de estilo desejadas para os itens de linha, conforme o senhor achar necessário.

<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",{ 
    acionamento: {
      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: "Registre-se para receber uma notificação quando este item estiver novamente em estoque.",
     email_field_label: "Email",
     button_label: "Notifique-me quando disponível",
     subscription_success_label: "O senhor está dentro! Avisaremos os senhores quando ele estiver de volta.",
     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>

Desejo

acionamento: {

 product_page_class: 'button'

},
modal: {

 font_family: '"Archivo", serif;'

}

Amanhecer

acionamento: {

 product_page_class: 'button'

},
modal: {

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

}

Estúdio

acionamento: {

 product_page_class: 'button'

},
modal: {

 font_family: '"Electra", serif;' 

}

Colorblock

acionamento: {

 product_page_class: 'button'

},
modal: {

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

}

Sentido

acionamento: {

 product_page_class: 'button'

},
modal: {

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

}

Gosto

acionamento: {

 product_page_class: 'button'

},
modal: {

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

}

Artesanato

acionamento: {

 product_page_class: 'button'

},
modal: {

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

}

Passeio

acionamento: {

 product_page_class: 'button'

},
modal: {

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

}

Atualizar

acionamento: {

 product_page_class: 'button'

},
modal: {

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

}

Simples

Beleza

modal: {

 font_family: '"PT Serif",serif;'

}

Pop

Osso

acionamento: {

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

}

Brinquedo

acionamento: {

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

}

Preto & Branco

acionamento: {

 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

acionamento: {

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

}

Empreendimento

Pranchas de snowboard

acionamento: {

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

}

Ao ar livre

acionamento: {

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

}

Boxe

acionamento: {

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

}

Estreia

Padrão

acionamento: {

 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

acionamento: {

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

}

Fornecimento

Luz

acionamento: {

 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

acionamento: {

 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

Quente

acionamento: {

 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

acionamento: {

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

}

Frio

acionamento: {

 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ássico

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

O senhor atualizou o estilo do botão Back in Stock e do formulário em sua loja da Shopify.

Recursos adicionais

Esse artigo foi útil?

Use esse formulário somente para fazer comentários sobre artigos. Saiba como entrar em contato com o suporte.

Saiba mais sobre a Klaviyo

Comunidade

Conecte-se com colegas, parceiros e especialistas da Klaviyo para encontrar inspiração, compartilhar percepções e obter respostas para todas as suas perguntas.

Visite a comunidade

Treinamentos ao vivo

Participe de uma sessão ao vivo com especialistas da Klaviyo para aprender sobre as práticas recomendadas, como configurar os principais recursos e muito mais.

Registre-se agora

Suporte

Acesse o suporte por meio da sua conta.

Suporte por e-mail (teste gratuito e contas pagas) Disponível 24 horas

Chat/assistência virtual
A disponibilidade varia conforme o local e o tipo de plano

Conectar