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, nesse caso são exibidos somente textos.

{#
# 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 %}
            <div class="tag extra">
                Adicional
            </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

Snippet de exemplo de como exibir os selos do produto com as imagens cadastradas em Imagens padrões

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

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

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

        {% if product.free_shipping and Image('free_shipping') %}
            <div class="tag free-shipping">
                {{ Image('free_shipping') }}
            </div>
        {% endif %}

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

    </div>
{% endif %}