Produtos personalizados – Script Shopify

abril 26, 2023 fernando

1 – Acesse os arquivos do seu tema

2 – Na pasta modelo, crie um novo arquivo do tipo Product com o nome de product.personalizado.json

3 – Na pasta Seções, crie um arquivo chamado product-personalizado.liquid e copie o script que está no arquivo main-product.liquid

4 – No arquivo product.personalizado.json altere o Type de “main-product” para “product-personalizado”

5 – Acesse o arquivo product-personalizado.liquid e pesquise pela palavra inventory no CTRL + F

6 – Adicione o Script do campo do formulário a cima da linha do inventory

SCRIPT

<!-- INICIO - CAMPO PERSONALIZADO H2B -->
<div class="personalizado">
<label class="personalizado-label" for="personalizar1">Seu Texto</label> <br>
<input class="personalizado-input" type="text" id="personalizar1" form="{{product_form_id}}" name="properties[Seu Texto]" placeholder="Digite seu TEXTO"/>
</div>
<!-- FIM - CAMPO PERSONALIZADO H2B -->

7 – Acesse o arquivo base.css e adicione o código abaixo:

CSS

/* INICIO - CAMPO PERSONALIZADO H2B */
.personalizado-input { 
  width: 70%;
  display: block;
  padding: 10px 5px;
  border-radius: 15px;
}
/* FIM- CAMPO PERSONALIZADO H2B */

8 – Salve tudo e agora só acessar o editor do produtos e alterar o Modelo do Tema para: personalizado

Esse tutorial foi util?

Related articles