# 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="/files/zfDtsMk1FnVO6TEE1Ky4" 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 %}
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://partners.tray.com.br/themes/construindo-seu-template/referencias/componentes/selos-do-produto.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.