Adicionar uma tabela de medidas às páginas de produto

Aviso

Os temas vintage não estão disponíveis na Loja de temas. Esses temas não têm os recursos incluídos nos temas da Online Store 2.0 da Shopify, e os temas vintage gratuitos só recebem atualizações para correções de segurança.

Observação

Se você usa um tema gratuito da Shopify, entre em contato com o Atendimento ao cliente da Shopify para solicitar ajuda com o tutorial, que requer 15 minutos para o design. Para saber mais, consulte o Atendimento para temas.

Observação

Esta personalização se aplica a temas vintage da Shopify, e não aos temas da Online Store 2.0.

• Descubra a versão da arquitetura do tema da loja
• Conheça as personalizações para temas da Online Store 2.0.

Se você vende itens de vestuário que exigem que os clientes saibam o tamanho antes de comprar, adicione uma tabela de medidas personalizada à página do produto.

Todos os produtos que requerem referência à tabela de medidas precisam ter a opção Tamanho:

Aviso

No tema Express, este tutorial só funciona com código adicional.

Talvez seja necessário ajustar o CSS para a tabela, dependendo do tema.

Além disso, uma tabela de medidas pode não funcionar em todos os dispositivos. A lateral da página pode ser cortada em dispositivos móveis caso sejam adicionadas colunas de informações demais.

Criar uma página de tabela de medidas

Desktop

1. No admin da Shopify, acesse Loja virtual > Páginas.
2. Clique em Adicionar página.

3. Insira o título da página.

   • Se você quiser criar uma tabela de medidas que seja exibida no site, insira Size Chart como título da página. Na seção Pré-visualização da listagem em mecanismo de pesquisa*, o URL da página deve terminar em /size-chart.
   • Se você quiser criar uma tabela que apareça apenas em produtos de um fabricante específico, insira o nome do fabricante seguido por Size Chart.
     Por exemplo, se o nome do fornecedor for Great Owls, insira Great Owls Size Chart como título da página. Na seção Pré-visualização da listagem em mecanismos de pesquisa, o URL da página deve terminar em /great-owls-size-chart.
   • Se você quiser criar uma tabela que apareça apenas em um tipo específico de produto, insira o tipo de produto seguido por Size Chart.
     Por exemplo, se você quer exibir uma tabela de medidas específica para calçados, insira Shoes Size Chart como título da página. Na seção Pré-visualização da listagem em mecanismos de pesquisa, o URL da página deve terminar em /shoes-size-chart.

4. Na caixa Conteúdo, crie uma tabela com os dados para a tabela de medidas. Personalize-a com a aparência que você quer:

   

5. Na seção Visibilidade, confirme se a página está definida como Visível.

6. Clique em Salvar.

iPhone

1. No app da Shopify, toque no botão ….
2. Na seção canais de vendas, toque em loja virtual.
3. Toque em Páginas.
4. Clique em Adicionar página.

5. Insira o título da página.

   • Se você quiser criar uma tabela de medidas que seja exibida no site, insira Size Chart como título da página. Na seção Pré-visualização da listagem em mecanismo de pesquisa*, o URL da página deve terminar em /size-chart.
   • Se você quiser criar uma tabela que apareça apenas em produtos de um fabricante específico, insira o nome do fabricante seguido por Size Chart.
     Por exemplo, se o nome do fornecedor for Great Owls, insira Great Owls Size Chart como título da página. Na seção Pré-visualização da listagem em mecanismos de pesquisa, o URL da página deve terminar em /great-owls-size-chart.
   • Se você quiser criar uma tabela que apareça apenas em um tipo específico de produto, insira o tipo de produto seguido por Size Chart.
     Por exemplo, se você quer exibir uma tabela de medidas específica para calçados, insira Shoes Size Chart como título da página. Na seção Pré-visualização da listagem em mecanismos de pesquisa, o URL da página deve terminar em /shoes-size-chart.

6. Na caixa Conteúdo, crie uma tabela com os dados para a tabela de medidas. Personalize-a com a aparência que você quer:

   

7. Na seção Visibilidade, confirme se a página está definida como Visível.

8. Clique em Salvar.

Android

1. No app da Shopify, toque no botão ….
2. Na seção canais de vendas, toque em loja virtual.
3. Toque em Páginas.
4. Clique em Adicionar página.

5. Insira o título da página.

   • Se você quiser criar uma tabela de medidas que seja exibida no site, insira Size Chart como título da página. Na seção Pré-visualização da listagem em mecanismo de pesquisa*, o URL da página deve terminar em /size-chart.
   • Se você quiser criar uma tabela que apareça apenas em produtos de um fabricante específico, insira o nome do fabricante seguido por Size Chart.
     Por exemplo, se o nome do fornecedor for Great Owls, insira Great Owls Size Chart como título da página. Na seção Pré-visualização da listagem em mecanismos de pesquisa, o URL da página deve terminar em /great-owls-size-chart.
   • Se você quiser criar uma tabela que apareça apenas em um tipo específico de produto, insira o tipo de produto seguido por Size Chart.
     Por exemplo, se você quer exibir uma tabela de medidas específica para calçados, insira Shoes Size Chart como título da página. Na seção Pré-visualização da listagem em mecanismos de pesquisa, o URL da página deve terminar em /shoes-size-chart.

6. Na caixa Conteúdo, crie uma tabela com os dados para a tabela de medidas. Personalize-a com a aparência que você quer:

   

7. Na seção Visibilidade, confirme se a página está definida como Visível.

8. Clique em Salvar.

Navegar até o editor de códigos

Desktop

1. No admin da Shopify, acesse Loja virtual > Temas.
2. Encontre o tema que você quer editar, clique no botão … para abrir o menu de ações e, depois, em Editar código.

iPhone

1. No app da Shopify, toque no botão ….
2. Na seção canais de vendas, toque em loja virtual.
3. Toque em gerenciar temas.
4. Encontre o tema que você quer editar, clique no botão … para abrir o menu de ações e, depois, em Editar código.

Android

1. No app da Shopify, toque no botão ….
2. Na seção canais de vendas, toque em loja virtual.
3. Toque em gerenciar temas.
4. Encontre o tema que você quer editar, clique no botão … para abrir o menu de ações e, depois, em Editar código.

Escolha uma das seguintes opções e crie um snippet para a tabela de medidas

Site-wide

Observação

Escolher "No site" exibe a tabela de medidas em todas as páginas de produto que têm a opção Tamanho.

Criar um snippet de tabela de medidas

1. No diretório Snippets, clique em Adicionar um novo snippet de código.

2. Dê ao snippet o nome de size-chart e clique em Criar snippet:

3. Copie o seguinte para o snippet size-chart:

<div class="pop-up-modal">
  <div class="pop-up-content">
    <span class="close-button">&times;</span>
    <span class="size-chart-content">{{ pages.size-chart.content }}</span>
  </div>
</div>

<script>
  const modal = document.querySelector('.pop-up-modal');
  const trigger = document.querySelector('.trigger-pop-up');
  const closeButton = document.querySelector('.close-button');

  function toggleModal() {
    modal.classList.toggle('show-pop-up');
  }

  function windowOnClick(event) {
    if (event.target === modal) {
      toggleModal();
    }
  }

  trigger.addEventListener('click', toggleModal);
  closeButton.addEventListener('click', toggleModal);
  window.addEventListener('click', windowOnClick);
</script>

<style>
  .pop-up-modal {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    display: none;
    transform: scale(1.1);
    transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;
    overflow:auto;
  }
  .pop-up-content {
    position: absolute;
    top: 8%;
    left: 50%;
    transform: translate(-50%, 0);
    background-color: white;
    padding: 1rem 1.5rem;
    width: auto;
    border-radius: 0.5rem;
  }
  .pop-up-content table {
    table-layout: auto;
  }
  .close-button {
    float: right;
    width: 1.5rem;
    line-height: 1.5rem;
    text-align: center;
    cursor: pointer;
    border-radius: 0.25rem;
    background-color: lightgray;
  }
  .close-button:hover {
    background-color: darkgray;
  }
  .show-pop-up {
    z-index: 12;
    opacity: 1;
    display: block;
    transform: scale(1);
    transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;
  }
  .trigger-pop-up {
    margin: 10px 0 10px 0;
    width: 100%;
  }
  @media only screen and (max-width: 749px) {
    .pop-up-content,
    .size-chart-content table {
      width: 100%;
    }
    .size-chart-content th,
    .size-chart-content td {
      padding: 10px;
    }
  }
</style>

{% block "note" %} É preciso fazer algumas alterações no estilo CSS para os temas Simple e Minimal. {% endblock %}

Se você estiver usando o tema Simple, use este código:

<div class="pop-up-modal">
  <div class="pop-up-content">
    <span class="close-button">&times;</span>
    <span class="size-chart-content">{{ pages.size-chart.content }}</span>
  </div>
</div>

<script>
  const modal = document.querySelector('.pop-up-modal');
  const trigger = document.querySelector('.trigger-pop-up');
  const closeButton = document.querySelector('.close-button');

  function toggleModal() {
    modal.classList.toggle('show-pop-up');
  }

  function windowOnClick(event) {
    if (event.target === modal) {
      toggleModal();
    }
  }

  trigger.addEventListener('click', toggleModal);
  closeButton.addEventListener('click', toggleModal);
  window.addEventListener('click', windowOnClick);
</script>

<style>
  .pop-up-modal {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    display: none;
    transform: scale(1.1);
    transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;
    overflow:auto;
  }
  .pop-up-content {
    position: absolute;
    top: 8%;
    left: 50%;
    transform: translate(-50%, 0);
    background-color: white;
    padding: 1rem 1.5rem;
    width: auto;
    border-radius: 0.5rem;
  }
  .pop-up-content table {
    table-layout: auto;
  }
  .close-button {
    float: right;
    width: 1.5rem;
    line-height: 1.5rem;
    text-align: center;
    cursor: pointer;
    border-radius: 0.25rem;
    background-color: lightgray;
  }
  .close-button:hover {
    background-color: darkgray;
  }
  .show-pop-up {
    z-index: 12;
    opacity: 1;
    display: block;
    transform: scale(1);
    transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;
  }
  .trigger-pop-up {
    margin: 10px 0 10px 8px;
    width: 50%;
  }
  @media only screen and (max-width: 749px) {
    .pop-up-content,
    .size-chart-content table {
      width: 100%;
    }
    .size-chart-content th,
    .size-chart-content td {
      padding: 10px;
    }
    .trigger-pop-up {
      width: 100%;
    }
  }
  </style>

Se você estiver usando o tema Minimal, use o seguinte código:

<div class="pop-up-modal">
  <div class="pop-up-content">
    <span class="close-button">&times;</span>
    <span class="size-chart-content">{{ pages.size-chart.content }}</span>
  </div>
</div>

<script>
  const modal = document.querySelector('.pop-up-modal');
  const trigger = document.querySelector('.trigger-pop-up');
  const closeButton = document.querySelector('.close-button');

  function toggleModal() {
    modal.classList.toggle('show-pop-up');
  }

  function windowOnClick(event) {
    if (event.target === modal) {
      toggleModal();
    }
  }

  trigger.addEventListener('click', toggleModal);
  closeButton.addEventListener('click', toggleModal);
  window.addEventListener('click', windowOnClick);
</script>

<style>
  .pop-up-modal {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    display: none;
    transform: scale(1.1);
    transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;
    overflow:auto;
  }
  .pop-up-content {
    position: absolute;
    top: 8%;
    left: 50%;
    transform: translate(-50%, 0);
    background-color: white;
    padding: 1rem 1.5rem;
    width: auto;
    border-radius: 0.5rem;
  }
  .pop-up-content table {
    table-layout: auto;
  }
  .close-button {
    float: right;
    width: 1.5rem;
    line-height: 1.5rem;
    text-align: center;
    cursor: pointer;
    border-radius: 0.25rem;
    background-color: lightgray;
  }
  .close-button:hover {
    background-color: darkgray;
  }
  .show-pop-up {
    z-index: 12;
    opacity: 1;
    display: block;
    transform: scale(1);
    transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;
  }
  .trigger-pop-up {
    margin: 10px 0 10px 0;
    width: 100%;
  }
  @media only screen and (max-width: 749px) {
    .pop-up-content,
    .size-chart-content table {
      width: 100%;
    }
    .size-chart-content th,
    .size-chart-content td {
      padding: 10px;
    }
  }
  @media only screen and (min-width: 750px) {
    .trigger-pop-up {
      width: 50%;
    }
  }
</style>

Adicionar o snippet da tabela de medidas ao theme.liquid

1. No diretório Layout, clique para abrir o arquivo theme.liquid.
2. Encontre a tag de fechamento </body>. Logo acima da tag de fechamento </body>, cole o código a seguir:

{% if request.page_type == 'product' %}
    {% if product.options contains 'Size' %}
        {% render 'size-chart' %}
    {% endif %}
{% endif %}

Adicionar um botão Tabela de medidas

1. No diretório Seções, clique no arquivo product-template.liquid para abri-lo ou no arquivo product.liquid caso product-template.liquid não exista.
2. Cole o seguinte código acima do botão Adicionar ao carrinho:

{% if product.options contains 'Size' %}
    <a class="trigger-pop-up btn">See Size Chart</a>
{% endif %}

O botão "Adicionar ao carrinho" costuma começa com algo como <button type="submit" name="add". Se o idioma de operação da loja não for o inglês, substitua See Size Chart pelo texto que você prefere usar.

Observação

No tema Narrative, é preciso inserir o código listado acima dentro do arquivo product-form.liquid, localizado no diretório Snippets.

Type

Observação

"Tipo de produto" exibe a tabela de medidas em todas as páginas de produto que têm a opção Tamanho e o tipo de produto especificado.

Criar um snippet de tabela de medidas

1. No diretório Snippets, clique em Adicionar um novo snippet de código.

2. Dê ao snippet o nome de size-chart e clique em Criar snippet:

3. Copie o seguinte para o snippet size-chart:

{% assign chart = product.type | handleize | append: "-size-chart" %} {% unless
pages[chart].empty? or pages[chart].content == blank %}
<div class="pop-up-modal">
  <div class="pop-up-content">
    <span class="close-button">&times;</span>
    <span class="size-chart-content">{{ pages[chart].content }}</span>
  </div>
</div>
{% endunless %}
<script>
  const modal = document.querySelector('.pop-up-modal');
  const trigger = document.querySelector('.trigger-pop-up');
  const closeButton = document.querySelector('.close-button');

  function toggleModal() {
    modal.classList.toggle('show-pop-up');
  }

  function windowOnClick(event) {
    if (event.target === modal) {
      toggleModal();
    }
  }

  trigger.addEventListener('click', toggleModal);
  closeButton.addEventListener('click', toggleModal);
  window.addEventListener('click', windowOnClick);
</script>

<style>
  .pop-up-modal {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    display: none;
    transform: scale(1.1);
    transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;
    overflow:auto;
  }
  .pop-up-content {
    position: absolute;
    top: 8%;
    left: 50%;
    transform: translate(-50%, 0);
    background-color: white;
    padding: 1rem 1.5rem;
    width: auto;
    border-radius: 0.5rem;
  }
  .pop-up-content table {
    table-layout: auto;
  }
  .close-button {
    float: right;
    width: 1.5rem;
    line-height: 1.5rem;
    text-align: center;
    cursor: pointer;
    border-radius: 0.25rem;
    background-color: lightgray;
  }
  .close-button:hover {
    background-color: darkgray;
  }
  .show-pop-up {
    z-index: 12;
    opacity: 1;
    display: block;
    transform: scale(1);
    transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;
  }
  .trigger-pop-up {
    margin: 10px 0 10px 0;
    width: 100%;
  }
  @media only screen and (max-width: 749px) {
    .pop-up-content,
    .size-chart-content table {
      width: 100%;
    }
    .size-chart-content th,
    .size-chart-content td {
      padding: 10px;
    }
  }
</style>

Observação

É preciso fazer algumas alterações no estilo CSS para os temas Simple e Minimal.

Se você estiver usando o tema Simple, substitua o código que começa em .trigger-pop-up e vai até logo acima de </style> por este outro:

.trigger-pop-up {
  margin: 10px 0 10px 8px;
  width: 50%;
}
@media only screen and (max-width: 749px) {
  .pop-up-content,
  .size-chart-content table {
    width: 100%;
  }
  .size-chart-content th,
  .size-chart-content td {
    padding: 10px;
  }
  .trigger-pop-up {
    width: 100%;
  }
}

Se você usa o tema Minimal, adicione o seguinte código acima da tag de fechamento </style>:

@media only screen and (min-width: 750px) {
  .trigger-pop-up {
    width: 50%;
  }
}

Adicionar o snippet da tabela de medidas ao theme.liquid

1. No diretório Layout, clique para abrir o arquivo theme.liquid.
2. Encontre a tag de fechamento </body>. Logo acima da tag de fechamento </body>, cole o código a seguir:

{% if request.page_type == 'product' %}
    {% if product.options contains 'Size' %}
      {% assign chart = product.type | handleize | append: "-size-chart" %}
      {% unless pages[chart].empty? or pages[chart].content == blank %}
        {% render 'size-chart' %}
      {% endunless %}
    {% endif %}
  {% endif %}

Adicionar um botão Tabela de medidas

1. No diretório Seções, clique no arquivo product-template.liquid para abri-lo ou no arquivo product.liquid caso product-template.liquid não exista.
2. Cole o seguinte código acima do botão Adicionar ao carrinho:

{% if product.options contains 'Size' %}
      {% assign chart = product.type | handleize | append: "-size-chart" %}
      {% unless pages[chart].empty? or pages[chart].content == blank %}
        <a class="trigger-pop-up btn">See Size Chart</a>
      {% endunless %}
    {% endif %}

O botão "Adicionar ao carrinho" costuma começa com algo como <button type="submit" name="add". Se o idioma de operação da loja não for o inglês, substitua See Size Chart pelo texto que você prefere usar.

Observação

No tema Narrative, é preciso inserir o código listado acima dentro do arquivo product-form.liquid, localizado no diretório Snippets.

Vendor

Observação

Quando o fabricante do produto é selecionado, a tabela de tamanhos passa a ser exibida em todas as páginas de produto que apresentarem a opção Tamanho e o fabricante especificado.

Criar um snippet de tabela de medidas

1. No diretório Snippets, clique em Adicionar um novo snippet de código.

2. Dê ao snippet o nome de size-chart e clique em Criar snippet:

3. Copie o seguinte para o snippet size-chart:

{% assign chart = product.vendor | handleize | append: "-size-chart" %} {%
unless pages[chart].empty? or pages[chart].content == blank %}
<div class="pop-up-modal">
  <div class="pop-up-content">
    <span class="close-button">&times;</span>
    <span class="size-chart-content">{{ pages[chart].content }}</span>
  </div>
</div>
{% endunless %}
<script>
  const modal = document.querySelector('.pop-up-modal');
  const trigger = document.querySelector('.trigger-pop-up');
  const closeButton = document.querySelector('.close-button');

  function toggleModal() {
    modal.classList.toggle('show-pop-up');
  }

  function windowOnClick(event) {
    if (event.target === modal) {
      toggleModal();
    }
  }

  trigger.addEventListener('click', toggleModal);
  closeButton.addEventListener('click', toggleModal);
  window.addEventListener('click', windowOnClick);
</script>

<style>
  .pop-up-modal {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    display: none;
    transform: scale(1.1);
    transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;
    overflow:auto;
  }
  .pop-up-content {
    position: absolute;
    top: 8%;
    left: 50%;
    transform: translate(-50%, 0);
    background-color: white;
    padding: 1rem 1.5rem;
    width: auto;
    border-radius: 0.5rem;
  }
  .pop-up-content table {
    table-layout: auto;
  }
  .close-button {
    float: right;
    width: 1.5rem;
    line-height: 1.5rem;
    text-align: center;
    cursor: pointer;
    border-radius: 0.25rem;
    background-color: lightgray;
  }
  .close-button:hover {
    background-color: darkgray;
  }
  .show-pop-up {
    z-index: 12;
    opacity: 1;
    display: block;
    transform: scale(1);
    transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;
  }
  .trigger-pop-up {
    margin: 10px 0 10px 0;
    width: 100%;
  }
  @media only screen and (max-width: 749px) {
    .pop-up-content,
    .size-chart-content table {
      width: 100%;
    }
    .size-chart-content th,
    .size-chart-content td {
      padding: 10px;
    }
  }
</style>

Observação

É preciso fazer algumas alterações no estilo CSS para os temas Simple e Minimal.

Se você estiver usando o tema Simple, substitua o código que começa em .trigger-pop-up e vai até logo acima de </style> por este outro:

.trigger-pop-up {
  margin: 10px 0 10px 8px;
  width: 50%;
}
@media only screen and (max-width: 749px) {
  .pop-up-content,
  .size-chart-content table {
    width: 100%;
  }
  .size-chart-content th,
  .size-chart-content td {
    padding: 10px;
  }
  .trigger-pop-up {
    width: 100%;
  }
}

Se você usa o tema Minimal, adicione o seguinte código acima da tag de fechamento </style>:

@media only screen and (min-width: 750px) {
  .trigger-pop-up {
    width: 50%;
  }
}

Adicionar o snippet da tabela de medidas ao theme.liquid

1. No diretório Layout, clique para abrir o arquivo theme.liquid.
2. Encontre a tag de fechamento </body>. Logo acima da tag de fechamento </body>, cole o código a seguir:

{% if request.page_type == 'product' %}
    {% if product.options contains 'Size' %}
      {% assign chart = product.vendor | handleize | append: "-size-chart" %}
      {% unless pages[chart].empty? or pages[chart].content == blank %}
        {% render 'size-chart' %}
      {% endunless %}
    {% endif %}
  {% endif %}

Adicionar um botão Tabela de medidas

1. No diretório Seções, clique no arquivo product-template.liquid para abri-lo ou no arquivo product.liquid caso product-template.liquid não exista.
2. Cole o seguinte código acima do botão Adicionar ao carrinho:

{% if product.options contains 'Size' %}
      {% assign chart = product.vendor | handleize | append: "-size-chart" %}
      {% unless pages[chart].empty? or pages[chart].content == blank %}
        <a class="trigger-pop-up btn">See Size Chart</a>
      {% endunless %}
    {% endif %}

O botão "Adicionar ao carrinho" costuma começa com algo como <button type="submit" name="add". Se o idioma de operação da loja não for o inglês, substitua See Size Chart pelo texto que você prefere usar.

Observação

No tema Narrative, é preciso inserir o código listado acima dentro do arquivo product-form.liquid, localizado no diretório Snippets.