Shopify themes, liquid, logos, and UX
I would like to remove the Icon with Text block on my store, and replace it with a custom CSS code that will enable it to look like the attached. Although, I need to amend the text which is fine and I will need to be able to change the text for each product.
From the customizer add custom code block on product page and paste this below code there
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" rel="stylesheet">
<style>
.icon-section {
display: flex;
justify-content: space-around;
align-items: center;
background: #f8f8f8;
padding: 20px;
}
.icon-item {
text-align: center;
}
.icon-item i {
font-size: 40px;
margin-bottom: 10px;
}
.icon-item p {
margin: 5px 0;
font-size: 14px;
line-height: 1.2;
}
</style>
<div class="icon-section">
<div class="icon-item">
<i class="fas fa-tint"></i> <!-- Free Solid Icon -->
<p class="bold">WATERPROOF</p>
<p>(10 ATM)</p>
</div>
<div class="icon-item">
<i class="fas fa-plane"></i> <!-- Free Solid Icon -->
<p class="bold">FREE SHIPPING</p>
</div>
<div class="icon-item">
<i class="fas fa-shield-alt"></i> <!-- Free Solid Icon -->
<p class="bold">1 YEAR</p>
<p>GUARANTEE</p>
</div>
<div class="icon-item">
<i class="fas fa-undo"></i> <!-- Free Solid Icon -->
<p class="bold">30 DAYS</p>
<p>TO RETURN</p>
</div>
</div>
Thank you so much. However, is there anyway I can use these images: https://img.icons8.com/ios/50/000000/water.png
Hi @CBOfficial
.ani-item {
width: 30%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
div#ani-custom {
justify-content: space-around;
}
<div id="ani-custom" style="display: flex;">
<div class="ani-item">
<img src="https://img.icons8.com/ios/50/000000/water.png" style="width: 50px; height: 50px;"/>
<p>text</p>
</div>
<div class="ani-item">
<img src="https://img.icons8.com/ios/50/000000/shield.png" style="width: 50px; height: 50px;"/>
<p>text</p>
</div>
<div class="ani-item">
<img src="https://img.icons8.com/ios/50/000000/return-purchase.png" style="width: 50px; height: 50px;"/>
<p>text</p>
</div>
</div>
Hi @CBOfficial
.product__info-wrapper > product-info > ul.icon-with-text.icon-with-text--vertical.list-unstyled {
display: flex !important;
}
.product__info-wrapper > product-info > ul.icon-with-text.icon-with-text--vertical.list-unstyled > li.icon-with-text__item {
flex-direction: column !important;
}
.product__info-wrapper > product-info > ul.icon-with-text.icon-with-text--vertical.list-unstyled > li.icon-with-text__item img {
width: 50px !important;
height: 50px !important;
margin: 0 !important;
}
.product__info-wrapper > product-info > ul.icon-with-text.icon-with-text--vertical.list-unstyled > li.icon-with-text__item > span {
margin-top: 10px !important;
text-align: center !important;
}
.product__info-wrapper > product-info > ul.icon-with-text.icon-with-text--vertical.list-unstyled > li.icon-with-text__item > svg {
width: 50px !important;
height: 50px !important;
}
I hope this helps
Best,
Daisy
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025