Atualize sua página de produto para Shopify 2.0 - assim como Dawn

3 de setembro de 2021

Update your Product Page to Shopify 2.0 - Just like Dawn

Compatibilidade: todos os temas legados do Shopify

Você tentou atualizar seu tema para Shopify 2.0, mas a página do seu produto não se parece com o Theme Dawn?

Atualizando a página do produto em blocos dinâmicos como Dawn Theme Shopify 2.0

1. Vá para Loja online Shopify> Temas > Ações > Editar código
2. Vá para a pasta da seção e localize product-template.liquid
3. Adicione uma instrução for após class=”grid_item”, como o código abaixo

{% for blocks in section.blocks %}

4. Adicione uma instrução case após a instrução for, como o código abaixo

{% case blocks.type %}

5. Em product-template.liquid, localize e adicione a instrução quando antes de cada um dos seguintes

Título do produto
Preço do produto
Formulário do produto
Descrição do produto
Redes sociais do produto

6. Adicione uma instrução quando antes do seguinte

Título do produto = produto-single__title

{% when product_title %}

Preço do produto = produto__preço

{% when product_price %}

Formulário do produto = formulário 'produto'

{% when product_form %}

Descrição do produto = produto-single__description

{% when product_description %}

Produto social = inclui 'compartilhamento social

{% when product_social %}

7. Adicione blocos no esquema com o nome e tipo de cada bloco

"blocos" : [
 {
 "nome" : "título do produto" ,
 "tipo" : "título_do produto" ,
 "limite" : 1
 } ,
 {
 "nome" : "preço do produto" , 
"tipo" : "preço_produto" ,
 "limite" : 1
 } ,
 {
 "nome" : "formulário do produto" ,
 "tipo" : "formulário_produto" ,
 "limite" : 1
 } ,
 {
 "nome" : "descrição do produto" , 
"tipo" : "descrição_do produto" ,
 "limite" : 1
 } ,
 {
 "nome" : "produto social" ,
 "tipo" : "produto_social" ,
 "limite" : 1
 }
 ]

8. Abra a pasta de modelos e localize product.lquid
9. Copie o código inferior de product.liquid, exceto {% section %} e comentários
10. Vá para product-template.liquid e cole o código antes do {% schema %}
11. Exclua o arquivo product.liquid na pasta de modelos
12. Vá para a pasta de modelos e adicione um novo modelo
13. Crie um novo modelo para produto com um tipo de modelo JSON
14. Como excluímos product.liquid, podemos apenas clicar em “Criar modelo” e manter o nome produto como está
15. Crie o tipo de seção e adicione a recomendação do produto na seção. Também o bloco

{
 "Seções" : {
 "página_do_produto" : {
 "type" : "modelo de produto" , 
"blocos" : {
 "título" : {
 "tipo" : "título_do_produto"
 } ,
 "preço" : {
 "tipo" : "preço_produto"
 } ,
 "forma" : {
 "tipo" : "formulário_produto"
 } , 
"descrição" : {
 "tipo" : "descrição_do produto"
 } ,
 "sociais" : {
 "tipo" : "produto_social"
 }
 } , 
"block_order" : [ "título" , "preço" , "formulário" , "descrição" , "social" ]
 } ,
 "recomendações_de_produto" : {
 "type" : "recomendações de produtos"
 }
 } , 
"pedido" : [ "página_do_produto" , "recomendações_do_produto" ]
 }