Widgets da loja virtual

Três blocos desenham as suas ofertas por níveis na página do produto: a Quantity Break Table, o Quantity Break Picker e a tabela Spend More Save More. Você os coloca uma vez no seu tema; depois disso eles acompanham o desconto, mostrando os níveis dele e sumindo quando a oferta para.

Configuração

Ligue Show on storefront no desconto.

Abra o desconto — um desconto por quantidade, um gaste mais, economize mais ou uma lista de preços — e ligue Show on storefront. Ele vem ligado por padrão em um novo desconto por quantidade e em um novo gaste mais economize mais. A linha de status do cartão diz exatamente o que os compradores vão receber, ou por que o widget continua oculto.
Clique em Add ao lado do bloco que você quer.

O painel Add to your theme no fim desse cartão nomeia cada bloco exatamente como o editor de temas o nomeia, com uma linha sobre o que ele é, e um botão Add que abre o editor do seu tema com o bloco pronto para ser colocado.
Coloque o bloco no editor de temas e salve.

Solte o bloco onde ele deve ficar na página do produto — normalmente perto do preço ou do botão de compra — e clique em Save.
Ajuste as configurações do bloco no editor de temas.

Todo rótulo, cor e comportamento abaixo é um ajuste do próprio bloco no editor de temas.

Quantity Break Table

Lista todos os níveis de uma oferta de desconto por quantidade como uma tabela na página do produto: a quantidade, o que o comprador ganha e o preço.

General

Border color — a borda da tabela. Padrão #d9d9d9.
Roundness — raio dos cantos, 0–24 px. Padrão 8.
Borderless — desligado por padrão. Ligado, a borda some.

Header background — vazio usa o padrão do design.
Header text — a cor do texto do cabeçalho.

Body

Cell padding — 4–32 px. Padrão 14.
Body background
Body text
Highlight unlocked tier — ligado por padrão. Destaca a linha correspondente à quantidade selecionada.
Highlight color — padrão #e8f5e9.

Columns

Display quantities as range — desligado por padrão. Ligado, mostra “2–4” em vez de “2+”.
Quantity label template — por exemplo Buy {quantity}+; {quantity} é substituído automaticamente. Vazio mantém “2+”. Os intervalos não são afetados.
Quantity label — padrão “Buy”.
Show savings column — ligado por padrão. Sempre aparece em ofertas de valor de desconto.
Savings label — padrão “Get”.
Off-each label — padrão “off each”. Usado em ofertas percentuais.
Amount-off label — padrão “off”. Usado em ofertas de valor de desconto; o valor é o total dos itens que se qualificam, então o padrão faz uma afirmação de total, nunca por item.
Fixed-price label — padrão “each”. Usado em ofertas de preço fixo.
Show prices column — ligado por padrão. Fica oculto automaticamente em ofertas de valor de desconto e em produtos com mais de 50 variantes.
Price label — padrão “Price”.
Show original price — ligado por padrão. Risca o preço cheio ao lado de cada preço com desconto.
Show base row — ligado por padrão. Adiciona uma linha de preço cheio para as quantidades abaixo do primeiro nível.

Message

Code hint prefix — padrão “Use code”. Aparece só em descontos com código.
Linked message — texto opcional mostrado acima ou abaixo da tabela.
Message position — Above ou Below. Padrão Below.

Quantity Break Picker

A mesma oferta como cartões de oferta em que o comprador toca para escolher e adicionar ao carrinho de uma vez.

General

Heading — padrão “Choose your bundle”.
Card border — padrão #d9d9d9.
Selected accent — a cor da borda e do botão de seleção do cartão selecionado.
Roundness — 0–24 px. Padrão 8.
Card padding — 4–32 px. Padrão 14.
Card background
Card text

Cards

Show single-item card — ligado por padrão. Adiciona um cartão “Buy 1” acima dos níveis.
Single-item label — padrão “Buy 1”.
Pre-selected tier — 0–10. Padrão 0, que mantém a seleção padrão. Conta apenas os níveis que realmente aparecem, então um nível oculto nunca é pré-selecionado.
Tier label — padrão Buy {quantity}; {quantity} é substituído automaticamente.
Off-each label — padrão “off each”. Usado em ofertas percentuais.
Amount-off label — padrão “off”. Usado em ofertas de valor de desconto, como afirmação de total.
Fixed-price label — padrão “each”. Usado em ofertas de preço fixo (preço por item).
Per-product suffix — padrão “of the same product”. Aparece quando a oferta conta por produto.
Per-variant suffix — padrão “of the same variant”. Aparece quando a oferta conta por variante.
Show unit prices — ligado por padrão. Fica oculto automaticamente em ofertas de valor de desconto e em produtos com mais de 50 variantes.
Show original price — ligado por padrão. Risca o preço cheio acima de cada preço com desconto.
Each label — padrão “each”.
Most popular tier — 0–10. Padrão 0 = sem etiqueta; 1 = o primeiro nível.
Most popular text — padrão “Most popular”.
Most popular background — padrão #1a1a1a.
Most popular text color — padrão #ffffff.

Button

Button text — padrão “Add to cart”.
Added text — padrão “Added!”.
Unavailable text — padrão “Unavailable”.
After adding to cart — Go to the cart page (o padrão), Refresh the page (para o tema mostrar a nova contagem do carrinho) ou Stay on this page (mostra uma confirmação com um link para o carrinho).
In-cart text — padrão {count} in cart. Aparece depois de adicionar, quando se fica na página; {count} é quantos dos itens adicionados estão no carrinho.
Cart link text — padrão “View cart”.
Button background — padrão #1a1a1a.
Button text color — padrão #ffffff.

Message

Code hint prefix — padrão “Use code”. Aparece só em descontos com código.
Linked message — texto opcional mostrado acima ou abaixo dos cartões.

Bundle composer

Let shoppers mix variants per tier — desligado por padrão. Ligado, o nível selecionado mostra uma linha por item para os compradores montarem o pacote. Não aparece em ofertas por variante.
Bundle button text — padrão “Add bundle”.
Items word — padrão “items”. Usado quando um total em dinheiro não pode ser mostrado: “Add bundle • 3 items”.
Unresolved text — padrão “Choose options”.
Message position — Above ou Below. Padrão Below.

Spend More Save More

Lista todos os níveis de gasto de uma oferta de gaste mais economize mais na página do produto: gaste tanto, ganhe tanto de desconto.

General

Border color — padrão #d9d9d9.
Roundness — 0–24 px. Padrão 8.
Borderless — desligado por padrão.

Header

Header background — vazio usa o padrão do design.
Header text

Body

Cell padding — 4–32 px. Padrão 14.
Body background
Body text
Highlight unlocked tier — ligado por padrão. Destaca o nível mais alto que o carrinho já alcançou.
Highlight color — padrão #e8f5e9.

Columns

Spend label — padrão “Spend”.
Savings label — padrão “Get”.
Off-the-order label — padrão “off the order”.
Off eligible items label — padrão “off eligible items”. Usado no lugar do rótulo de desconto no pedido quando o desconto exclui alguns itens.

Message

Code hint prefix — padrão “Use code”. Aparece só em descontos com código.
Linked message — texto opcional mostrado acima ou abaixo da tabela.
Message position — Above ou Below. Padrão Below.

Seletores de tema personalizados

Os Sale Badges e os Price Drops encontram o lugar deles no seu tema automaticamente. Em um tema em que isso não funciona, Theme selectors na página Promotions abre uma janela com três seletores CSS opcionais que apontam o app para os elementos do seu próprio tema:

Badge container in product cards — o elemento dentro de cada cartão de produto em que os selos se fixam. Uma entrada cobre todas as páginas que mostram cartões de produto.
Price element on the product page — o elemento que contém o preço em uma página de produto, onde o preço com desconto aparece.
Price element in product cards — o elemento que contém o preço dentro de cada cartão de produto.

Deixe um campo vazio para manter o posicionamento automático. Cada seletor tem no máximo 200 caracteres e precisa ser um seletor CSS válido — o campo avisa ali mesmo se não for. Um seletor que não corresponde a nada volta ao posicionamento automático, e um seletor que não contém preço não pinta nada em vez de riscar um número errado.

Como aparece para o comprador

Cada bloco se renderiza na página do produto, no lugar em que você o colocou, com os níveis reais da oferta. O seletor também adiciona ao carrinho. Quando a oferta não cobre o produto que está na frente do comprador, ou a oferta está pausada ou acabou, o bloco não mostra nada em vez de uma afirmação vencida.

Limites e observações

Um widget por produto. Quando duas ofertas com exibição ligada cobrem o mesmo produto, só um widget aparece ali. O cartão Show on storefront do desconto as conta e oferece Choose which one shows. Cada desconto continua sendo aplicado nos termos dele.
Os preços somem acima de 50 variantes. A coluna de preço e os preços unitários do seletor ficam ocultos automaticamente em ofertas de valor de desconto e em produtos com mais de 50 variantes.
Pausar a oferta esconde o widget — o cartão então diz “Not shown (offer paused)” e deixa de oferecer o interruptor, para que uma oferta pausada nunca pareça ativa.
O interruptor de exibição é só exibição. Desligar Show on storefront esconde o widget; o desconto continua sendo aplicado. Para parar o desconto, pause a oferta.
Os seletores de tema valem para a loja inteira, não por promoção: salvá-los muda o posicionamento de todos os Sale Badges e Price Drops da loja.

Relacionado

Barra de meta do carrinho — o quarto bloco, que mostra o progresso rumo ao próximo nível de gasto.
Desconto por quantidade — o desconto por trás da tabela e do seletor.
Gaste mais, economize mais — o desconto por trás da tabela de gasto.
Lista de preços — o outro desconto que alimenta a tabela de níveis.
App embed — necessário para os selos e os Price Drops, não para estes blocos.