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

Estimado 4 min de leitura
|
Atualizado 11 de fev. de 2025, 20:31 EST
O que você vai aprender

O que você vai aprender

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

Antes de começar

Antes de ler este artigo, é importante conhecer nosso guia de Introdução à Shopify para ver instruções passo a passo sobre a integração.

Para saber mais sobre os recursos de reposição de estoque e como habilitá-los, leia nosso guia sobre como instalar a reposição de estoque para Shopify.

Como estilizar seu botão e formulário

Como estilizar seu botão e formulário

  1. Quando estiver instalando seu snippet, encontre o snippet de estilo para seu tema gratuito neste artigo.
  2. 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;'
  3. 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

Desejo

acionamento: {

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

Amanhecer

acionamento: {

product_page_class: 'button'
}, modal: {
font_family: '"Assistant", sans-serif;'
}
Estúdio

Estúdio

acionamento: {

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

Colorblock

acionamento: {

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

}
Sentido

Sentido

acionamento: {

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

Gosto

acionamento: {

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

Artesanato

acionamento: {

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

Passeio

acionamento: {

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

Atualizar

acionamento: {

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

Simples

Beleza

Beleza

modal: {

font_family: '"PT Serif",serif;'
}
Pop

Pop

Osso

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

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

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

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

Empreendimento

Pranchas de snowboard

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

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

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

Estreia

Padrão

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

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

Fornecimento

Luz

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

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

Narrativa

Quente

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

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

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

Brooklyn

Clássico

Clássico

modal: {

additional_styles: "@import url('https://fonts.googleapis.com/css?family=Arapey');",
font_family: '"Arapey",serif;'
}
Mínimo

Mínimo

Moderno

Moderno

modal: {

font_family: '"PT Serif",serif;'
}
Vintage

Vintage

modal: {

additional_styles: "@import url('https://fonts.googleapis.com/css?family=PT+Sans');",
font_family: '"PT Sans","HelveticaNeue","Helvetica Neue",sans-serif;'
}
Moda

Moda

modal: {

additional_styles: "@import url('https://fonts.googleapis.com/css?family=PT+Sans');",
font_family: '"PT Sans","HelveticaNeue","Helvetica Neue",sans-serif;'
}
Resultado

Resultado

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

Recursos adicionais

Recursos adicionais

Esse artigo foi útil?
Use esse formulário somente para dar feedback sobre os artigos. Saiba como entrar em contato com o suporte.

Saiba mais sobre a Klaviyo

Community
Conecte-se com colegas, parceiros e especialistas da Klaviyo para ter ideias, compartilhar insights e tirar dúvidas.
Treinamentos ao vivo
Participe de uma sessão ao vivo com especialistas da Klaviyo para conhecer práticas recomendadas, saber como configurar os principais recursos e muito mais.
Suporte

Acesse o suporte na 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