# Selos do produto

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

<figure><img src="https://799659513-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F30tSHvrN7e0UK3aUSC1K%2Fuploads%2FGiUE1TsaGRk98eT5jlzf%2Fimage.png?alt=media&#x26;token=1d2765f2-2599-4e7c-a146-27db67619aa7" alt=""><figcaption><p><strong>Exemplo de exibição dos selos</strong></p></figcaption></figure>

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.

```html
{#
# 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 <a href="#exemplo" id="exemplo"></a>

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`

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

&#x20;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**

```html
{% 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 %}
```