Olá lojista, tudo bem?
Alguns sites têm uma funcionalidade legal que pode nortear o cliente a achar os produtos de um determinado tamanho apenas. Para isso, a customização abaixo é para o bloco:
Você pode inclusive, colocar mais de um bloc, basta trocar as informações. Para isso, adicione um bloco html, veja o tutorial no link. Nesse bloco, você irá inserir o seguinte código:
<div class="list-variations">
<h4>Compre por tamanhos</h4>
<ul>
<li><a href="/search?filters[]=tamanho:44">44</a></li>
<li> <a href="/search?filters[]=tamanho:46">46</a></li>
<li> <a href="/search?filters[]=tamanho:48">48</a></li>
<li> <a href="/search?filters[]=tamanho:50">50</a></li>
<li> <a href="/search?filters[]=tamanho:52">52</a></li>
<li> <a href="/search?filters[]=tamanho:54">54</a></li>
<li> <a href="/search?filters[]=tamanho:G">G</a></li>
<li> <a href="/search?filters[]=tamanho:GG">GG</a></li>
<li> <a href="/search?filters[]=tamanho:G1">G1</a></li>
</ul>
<div>
Veja que temos vários links, um deles é: /search?filters[]=tamanho:44, o termo tamanho é o grid id da grade. Onde fica o grid id da grade:
Ao acessar a url E-Com Plus Admin, você verá uma lista de grids criados, como é o caso de:
No caso, o ID do grid é a segunda coluna. Caso sua loja não tenha nenhum grid ainda criado e tiver variação de tamanho, o termo que precisará utilizar é size para tamanhos ou colors para cor.
Agora no seu editor css, você pode colocar o código abaixo:
.list-variations h4 {
text-align: center;
}
.list-variations ul {
display: flex;
list-style: none;
justify-content: center;
text-align: center;
margin-left: -45px;
}
.list-variations li {
padding: 5px;
width: 30px;
background-color: #000;
margin-right: 2px;
}
.list-variations li a {
color: #fff;
}