Fazer com que os clientes escolham uma opção

Quando um cliente visita uma página de produto na loja virtual, a primeira variante disponível é selecionada por padrão. No entanto, é possível usar a personalização Fazer com que os clientes escolham uma opção para desabilitar a seleção automática da primeira variante disponível. Dessa forma, o cliente é solicitado a selecionar manualmente antes que uma variante apareça.

Se você usar a personalização Fazer com que os clientes escolham uma opção, seu tema pode não exibir o preço do produto até que o consumidor selecione uma variante. Itens com variantes não mostram o preço em destaque, já que o valor exibido é determinado pela variante escolhida.

Escolha uma opção

Temas com ou sem seções

Etapas para temas com seções

Selecionar seu tema

As etapas para essa personalização variam dependendo do seu tema. Clique no botão do seu tema antes de seguir as instruções abaixo:

Etapas para temas sem seções

Adicionar avisos a menus suspensos de variantes

  1. No diretório Snippets, clique em Adicionar um novo snippet de código.
  2. Nomeie seu novo snippet de código pick-an-option.
  3. Em seu novo arquivo de snippet de código, cole este código hospedado no GitHub.
  4. Clique em Salvar.
  5. No diretório Layout, clique em theme.liquid.
  6. Encontre a tag de fechamento </body> perto da parte inferior do arquivo. Em uma nova linha logo acima da tag de fechamento </body>, cole o seguinte código:
{% render 'pick-an-option' %}
  1. Clique em Salvar.
  2. Encontre o arquivo que contém o formulário de adicionar ao carrinho. Ele terá um atributo de action definido como /cart/add. Deve estar em um desses quatro arquivos:

    • o modelo product.liquid em Modelos
    • o layout theme.liquid em Layout
    • o snippet de código product.liquid em Snippets
    • o snippet de código single-product.liquid em Snippets
  3. Encontre este código dentro do formulário:

<option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}" value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money_with_currency }}</option>

Ou encontre este código no formulário:

<option {% if variant == current_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}" value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money_with_currency }}</option>

Substitua o código pelo seguinte bloco de código:

<option {% if forloop.length <= 1 and variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}" value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money_with_currency }}</option>

Se você usa os temas Minimal, Pop ou Supply, encontre todas as ocorrências deste código:

{% assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image %}

Substitua o código pelo seguinte bloco de código:

{% assign featured_image = product.selected_variant.featured_image | default: product.featured_image %}

Se você usa outro tema vintage da Shopify, encontre este código:

{% assign current_variant = product.selected_or_first_available_variant %}

Substitua o código pelo seguinte bloco de código:

{% assign current_variant = product.selected_variant %}

Clique em Salvar.

Alterar as configurações de idioma do botão Adicionar ao carrinho

É possível alterar as configurações de idioma do botão Adicionar ao carrinho para que produtos não apareçam como Indisponível antes que uma seleção seja feita.

Etapas:

  1. No admin da Shopify, acesse Loja virtual > Temas.
  2. Encontre o tema que você vai editar e depois clique em ... > Editar conteúdo do tema padrão.
  3. Na barra de pesquisa Filtrar itens, comece a digitar indisponível para exibir a tradução Indisponível.
  4. Substitua o texto Indisponível por Fazer uma seleção.
  5. Clique em Salvar.

Tudo pronto para começar a vender com a Shopify?

Experimente de graça