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

Estimado 2 min de leitura

Atualizado 7 de jul. de 2025, 00:00 EST

O que você vai aprender

Saiba quais são as principais alterações a serem feitas em cada tema gratuito da Shopify para garantir rapidamente que o botão Back in Stock e o formulário correspondam ao estilo do seu tema. O botão e o formulário do Klaviyo "Notify Me When Available" são altamente configuráveis. O senhor pode alterar as cores, as fontes, o texto e outros elementos de acordo com suas preferências de design.

A instalação de volta ao estoque só é compatível com determinados temas gratuitos da Shopify, e não com lojas da Shopify que usam temas personalizados. No momento, o suporte da Klaviyo não pode ajudar a implementar a volta ao estoque para lojas que usam temas personalizados. Para verificar qual tema da Shopify sua loja está usando, o senhor pode usar um detector de temas da Shopify.

Antes de começar

Antes de ler este artigo, é importante conhecer nosso guia de Introdução à Shopify para ver instruções passo a passo sobre a integração.

Para saber mais sobre os recursos de reposição de estoque e como habilitá-los, leia nosso guia sobre como instalar a reposição de estoque para Shopify.

Como estilizar seu botão e formulário

Quando estiver instalando seu snippet, encontre o snippet de estilo para seu tema gratuito neste artigo.
O snippet padrão é mostrado abaixo. Atualize (ou adicione) itens de linha dentro das seções trigger: {} e modal: {} do snippet padrão de acordo com o que é mostrado no snippet de estilo
1. Por exemplo, se tiver o tema Crave, basta adicionar a seguinte linha na seção modal: font_family: '"Archivo", serif;'
Faça quaisquer outras atualizações de estilo desejadas para os itens de linha, conforme o senhor achar necessá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 notificação quando este item estiver novamente em estoque.",
     email_field_label: "Email",
     button_label: "Notifique-me quando disponível",
     subscription_success_label: "O senhor está 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;' 
}

Estú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

Padrã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

Clássico

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

Mí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 botão Back in Stock e do formulário em sua loja da Shopify.

Recursos adicionais

Como criar códigos de cupom únicos para a Shopify
Aprenda a criar códigos de cupom de uso único na Shopify, para que cada cliente receba um código para uma promoção na sua loja. Esse recurso é uma alternativa ao código de cupom genérico, também conhecido como código de cupom estático. Assim, você não precisa se preocupar com o compartilhamento de códigos.

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.

Visite a Klaviyo Community

Parceiros

Contrate um especialista certificado pela Klaviyo para ajudá-lo com uma tarefa específica ou para gerenciamento contínuo de marketing.

Contratar um parceiro

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

Entrar