Add custom icon section to debut theme

ZaDu
Explorer
69 0 22

Hello. I want to add a custom icon section to my store, just like the example Ive attached. What would the coding be for this?

Screen Shot 2021-02-17 at 2.44.17 pm.png

0 Likes
Zworthkey
Shopify Partner
333 18 57

Yes, 

sure I will help you to add the icon. please share your Website Url and if included the password.

Thank you

0 Likes
ZaDu
Explorer
69 0 22
Jasoliya
Shopify Expert
4224 568 1041

Hi @ZaDu 

follow this:

1. open theme editor and add "custom content" section, then add "custom HTML" section withing section.

2. add this html code:

<div class="product-reasons">
    <ul>
      <li>
        <img src="//cdn.shopify.com/s/files/1/0009/0266/0159/t/6/assets/topreasons_2_image_150x.png">
      </li>
      <li>
        <img src="//cdn.shopify.com/s/files/1/0009/0266/0159/t/6/assets/topreasons_2_image_150x.png">
      </li>
      <li>
        <img src="//cdn.shopify.com/s/files/1/0009/0266/0159/t/6/assets/topreasons_2_image_150x.png">
      </li>
      <li>
        <img src="//cdn.shopify.com/s/files/1/0009/0266/0159/t/6/assets/topreasons_2_image_150x.png">
      </li>
    </ul>
  </div>

Change image to your images,

3. Add this css in Asset->theme.scss or theme.css file at bottom:

  .product-reasons ul{list-style:outside none none;margin:0;padding:0;}
      .product-reasons{text-align:center;}
      .product-reasons ul>li{display:inline-block;margin-right:5px;width:95px;}
      @media only screen and (max-width:480px){.product-reasons ul>li{width:18.5%;}}

 

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
ZaDu
Explorer
69 0 22

Sorry when you say open theme editor, where abouts is that?

0 Likes
Jasoliya
Shopify Expert
4224 568 1041

Capture.PNG

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes