Update your Product Page to Shopify 2.0 - Just like Dawn

Update your Product Page to Shopify 2.0 - Just like Dawn

Did you try to update your theme to Shopify 2.0 but your product page does not look like what Theme Dawn has?

Updating Product Page into Dynamic blocks Like Dawn Theme Shopify 2.0

 

  1. Go to Shopify Online store> Themes > Actions > Edit code
  2. Go to section folder and locate product-template.liquid
  3. Add a for statement after the class=”grid_item”, like code below

           {% for blocks in section.blocks %}

  1. Add a case statement after the for statement, like code below

           {% case blocks.type %}

  1. In product-template.liquid, locate and add the when statement before each of the following
    1. Product title
    2. Product price
    3. Product form
    4. Product description
    5. Product social
  2. Add a when statement before the following
    1. Product title = product-single__title 
       {% when product_title %}
    2. Product price = product__price
       {% when product_price %}
    3. Product form = form 'product'
       {% when product_form %}
    4. Product description = product-single__description
       {% when product_description %}
    5. Product social = include 'social-sharing
       {% when product_social %}
  3. Add a blocks in schema with the name and type of each blocks
 "blocks": [
{
"name": "product title",
"type": "product_title",
"limit": 1
},
{
"name": "product price",
"type": "product_price",
"limit": 1
},
{
"name": "product form",
"type": "product_form",
"limit": 1
},
{
"name": "product description",
"type": "product_description",
"limit": 1
},
{
"name": "product social",
"type": "product_social",
"limit": 1
}
]
  1. Open template folder and locate product.lquid
  2. Copy the bottom code from product.liquid, except the {% section %} and comments
  3. Go to product-template.liquid and paste the code before the {% schema %}
  4. Delete the product.liquid file in template folder
  5. Go to templates folder and add a new template
  6. Create a new template for product with a template type JSON
  7. Since, we deleted the product.liquid, we can just click the “Create Template” and keep the name product as is
  8. Create the section type and add the product-recommendation in the section. Also the block
 {
"sections": {
"product_page" : {
"type" : "product-template",
"blocks" : {
"title": {
"type": "product_title"
},
"price": {
"type": "product_price"
},
"form": {
"type": "product_form"
},
"description": {
"type": "product_description"
},
"social": {
"type": "product_social"
}
},
"block_order" : ["title", "price", "form", "description", " social"]
},
"product_recommendations": {
"type": "product-recommendations"
}
},
"order": ["product_page", "product_recommendations"]
}

 

 (",) If you have questions, please free to contact us at "Chat with us"

Color Swatch for Dawn with Images- No App or Subscription needed

Add a color swatch to your Dawn Theme for FREE. Color swatch comes with image. Multiple design av...

Add Custom Textfield / Dropdown in Dawn Theme Shopify 2.0 - No APP needed

Add a personalize textbox to Dawn product page. You can add dropdown, radio buttons and many more...

Convert Dawn Product Page Like Debut Theme with Product Slider

Product slider but counter does not make sense? See my way around. Transform your Dawn product pa...

How to make hero image the background for header - DAWN Theme

Hero image to be the background for header. It is possible. Just follow the steps below. I recomm...

Featured collection slider for Dawn Theme Shopify 2.0

Add a collection slider for your home page. This only works with Dawn Theme.

Adjust Main and Thumbnail Product Images in the Product Page for Dawn Theme

Dawn Theme issues with large images? Solve that using this video tutorial

Product Slider for Dawn Theme - No apps or subscript- Just a little bit of code

Add a product slider for Dawn theme, almost like Debut theme slider. No app or subscription neede...

Deixe um comentário