Shopify themes, liquid, logos, and UX
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?
Yes,
sure I will help you to add the icon. please share your Website Url and if included the password.
Thank you
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%;}}
Sorry when you say open theme editor, where abouts is that?
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024