Selos do produto

É possível exibir alguns selos junto ao produto nas listagens, sendo eles destaque, lançamento, frete grátis e selo adicional.

Exemplo de exibição dos selos

Lembrando que para o selo adicional, a imagem deve ser cadastrada em Minha loja > Aparência da loja > Imagens padrões > Botão Adicional.

E para os demais selos, pode ser usado somente um texto ou também utilizar das imagens cadastradas em Imagens padrões conforme comentado acima.

Snippet para exibir os selos junto ao produto.

{#
# Selos do produto
# elements/snippets/product-tags.html
#}

{% if product.new or product.featured or product.free_shipping or product.additional_button %}
    <div class="product-tags">

        {% if product.new %}
            <div class="tag new">
                Lançamento
            </div>
        {% endif %}

        {% if product.featured %}
            <div class="tag featured">
                Destaque
            </div>
        {% endif %}

        {% if product.free_shipping %}
            <div class="tag free-shipping">
                Frete Grátis
            </div>
        {% endif %}

        {% if product.additional_button and Image('additional_button') %}
            <div class="tag extra">
                {{ Image('additional_button') }}
            </div>
        {% endif %}

    </div>
{% endif %}

Como usar

Copie o código acima e crie um arquivo separado, ex: elements/snippets/product-tags.html.

Faça a sua chamada no arquivo responsável por exibir os produtos da loja, geralmente esse arquivo está nomeado como product.html no entanto pode variar de acordo com o tema utilizado. Ex: elements/snippets/product.html

{% element('snippets/product-tags') %}

Ou cole diretamente no arquivo que cria os produtos da listagem, ex: elements/snippets/product.html