Adicionar uma tabela de medidas às páginas de produto
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:
Nesta página
Criar uma página de tabela de medidas
- No admin da Shopify, acesse Loja virtual > Páginas.
- Clique em Adicionar página.
-
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, insiraGreat 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, insiraShoes 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
.
- Se você quiser criar uma tabela de medidas que seja exibida no site, insira
Na caixa Conteúdo, crie uma tabela com os dados para a tabela de medidas. Personalize-a com a aparência que você quer:
Na seção Visibilidade, confirme se a página está definida como Visível.
Clique em Salvar.
- No app da Shopify, toque no botão ….
- Na seção canais de vendas, toque em loja virtual.
- Toque em Páginas.
- Clique em Adicionar página.
-
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, insiraGreat 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, insiraShoes 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
.
- Se você quiser criar uma tabela de medidas que seja exibida no site, insira
Na caixa Conteúdo, crie uma tabela com os dados para a tabela de medidas. Personalize-a com a aparência que você quer:
Na seção Visibilidade, confirme se a página está definida como Visível.
Clique em Salvar.
- No app da Shopify, toque no botão ….
- Na seção canais de vendas, toque em loja virtual.
- Toque em Páginas.
- Clique em Adicionar página.
-
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, insiraGreat 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, insiraShoes 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
.
- Se você quiser criar uma tabela de medidas que seja exibida no site, insira
Na caixa Conteúdo, crie uma tabela com os dados para a tabela de medidas. Personalize-a com a aparência que você quer:
Na seção Visibilidade, confirme se a página está definida como Visível.
Clique em Salvar.
Navegar até o editor de códigos
- No admin da Shopify, acesse Loja virtual > Temas.
- Encontre o tema que você quer editar, clique no botão … para abrir o menu de ações e, depois, em Editar código.
- No app da Shopify, toque no botão ….
- Na seção canais de vendas, toque em loja virtual.
- Toque em gerenciar temas.
- Encontre o tema que você quer editar, clique no botão … para abrir o menu de ações e, depois, em Editar código.
- No app da Shopify, toque no botão ….
- Na seção canais de vendas, toque em loja virtual.
- Toque em gerenciar temas.
- 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
Criar um snippet de tabela de medidas
- No diretório Snippets, clique em Adicionar um novo snippet de código.
Dê ao snippet o nome de
size-chart
e clique em Criar snippet:Copie o seguinte para o snippet
size-chart
:
<div class="pop-up-modal">
<div class="pop-up-content">
<span class="close-button">×</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">×</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">×</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
- No diretório Layout, clique para abrir o arquivo
theme.liquid
. - 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
- No diretório Seções, clique no arquivo
product-template.liquid
para abri-lo ou no arquivoproduct.liquid
casoproduct-template.liquid
não exista. - 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.
Criar um snippet de tabela de medidas
- No diretório Snippets, clique em Adicionar um novo snippet de código.
Dê ao snippet o nome de
size-chart
e clique em Criar snippet: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">×</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>
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
- No diretório Layout, clique para abrir o arquivo
theme.liquid
. - 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
- No diretório Seções, clique no arquivo
product-template.liquid
para abri-lo ou no arquivoproduct.liquid
casoproduct-template.liquid
não exista. - 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.
Criar um snippet de tabela de medidas
- No diretório Snippets, clique em Adicionar um novo snippet de código.
Dê ao snippet o nome de
size-chart
e clique em Criar snippet: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">×</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>
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
- No diretório Layout, clique para abrir o arquivo
theme.liquid
. - 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
- No diretório Seções, clique no arquivo
product-template.liquid
para abri-lo ou no arquivoproduct.liquid
casoproduct-template.liquid
não exista. - 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.