How to add a new custom block in product info in product page

[NOT1]

Can someone please help me to create a block like this in product info section in dawn theme thanks

This should be vertical like the image. 1-3 icons and text

[Hardik2903]

@NOT1 Yes, I can help you with this one.

[NOT1]

@Hardik2903 How can I do it?

[Hardik2903]

@NOT1 I will need the access of the Shopify store to achieve this feature.

[NOT1]

Okay sure what to do

[WalkYourStyle]

Instructions

1. Go to ‘Online Store’ → Themes → Edit Code

2. In the sections folder locate the file ‘main-product.liquid’

3. Copy the above file’s contents

4. Create a new file in the sections folder called ‘main-product-backup.liquid’

5. Paste the contents in the new file

6. Go to the ‘main-product.liquid’ file

7. Scroll down until you find the {% schema %}

8. Inside the blocks property right after the:

{
      "type": "@app"
},

add the below code

{
  "type": "information_icon",
  "name": "Information with Icon",
  "settings": [
    {
      "type": "image_picker",
      "id": "custom_information_icon",
      "label": "Information Icon"
    },
    {
      "type": "richtext",
      "id": "custom_information",
      "label": "Information"
    }
  ]
},

9. After the added code it should look like this:

10. In the current file that you are ‘main-product.liquid’ search for this : {%- for block in section.blocks -%}

11. Inside that for loop just after this

{%- when '@app' -%}
   {% render block %}

add the below code

{%- when 'information_icon' %}
  
    
    

      

{{ block.settings.custom_information }}

    

  

12. After the added code it should look like this:

13. In the assets folder locate the file ‘base.css’

14. At the end of the file paste the below code

/* Product Custom Information Block */
.custom_information_container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
}
.product_custom_information {
    margin-left: 20px;
    line-height: 1.5em;
}
.product_custom_information p {
    margin: 0;
}
.product_custom_information a {
    color: inherit;
}

15. Now you can go to your theme’s customization and add blocks.

16. If you have a problem and it doesn’t work, please share the modifications you did to the code so I instantly check if there is a problem with the code.

[NOT1]

I truly appreciate everything you’ve done.

Thank you so much!

[WalkYourStyle]

If you don’t like how it looks and would prefer a different style, I’d be happy to help.

[NOT1]

No no its good but i would be happy if i had more options to customize it like A extra title option and ability to change font size (For font size it will be also ok if you just tell me which code to change). Thank you

[WalkYourStyle]

Solution:

1. Go back to step 8 and replace the code you’ve added with the below:

{
  "type": "information_icon",
  "name": "Information with Icon",
  "settings": [
    {
      "type": "header",
      "content": "Title Section"
    },
    {
      "type": "text",
      "id": "custom_information_title",
      "label": "Title"
    },
    {
      "type": "header",
      "content": "Image Section"
    },
    {
      "type": "image_picker",
      "id": "custom_information_icon",
      "label": "Information Icon"
    },
    {
      "type": "header",
      "content": "Text Section"
    },
    {
      "type": "font_picker",
      "id": "custom_information_font",
      "label": "Font",
      "default": "sans-serif"
    },
    {
      "type": "richtext",
      "id": "custom_information",
      "label": "Information"
    }
  ]
},

2. Then go to step 11 and replace the code with this:

{%- when 'information_icon' %}
  
    ## {{ block.settings.custom_information_title }}
    
      
      

        

{{ block.settings.custom_information }}

      

    

  

3. Lastly in step 14 replace the css code with the below:

/* Product Custom Information Block */
.custom_information_container {
}
.product_custom_information{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
}
.product_custom_information_text {
    margin-left: 20px;
    line-height: 1.5em;
}
.product_custom_information p {
    margin: 0;
}
.product_custom_information a {
    color: inherit;
}

[NOT1]

I am really sorry i think I have failed to tell you what I wanted I wanted like this

[WalkYourStyle]

Which section? The one with the icons or the one below?

[NOT1]

The one with Icons

[WalkYourStyle]

Yea that’s what I designed.

[NOT1]

Its looking like this

[WalkYourStyle]

can you please share your store’s URL? so I can see if the code you’ve added is correct? Or can you check from that the code I provided you the last time is the one you included in the implementation?

[NOT1]

Thank you

[WalkYourStyle]

It looks pretty similar to the one you shown. What don’t you like, so we can fix it to your requirements!

[NOT1]

I mean like the icon should be on the left and on the right there should be a title or heading whatever it is which I can make it bold and below that there will be some info or text like this (the icon should be in the center of the 2 texts

And thanks a lot for your patience I really very much appreciate it

[WalkYourStyle]

Yea In the text section you can bold text to make it look like the one in the image, and then enter a new line. That’s why it’s a rich text. Because you can bold, italic, etc. When you told me about title I thought you wanted title of the section in general.