How can I add custom text and Icons to my product page?

How can I add custom text and Icons to my product page?

CBOfficial
Excursionist
12 1 1

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. Screenshot 2025-01-12 120757.png

Replies 4 (4)

Asad-Mahmood
Navigator
309 53 61

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>

 

 

If my solution has been helpful, you can consider supporting me via Buy Me a Coffee.
Hire me: asadmahmood8470@gmail.com
WhatsApp
Fiver




CBOfficial
Excursionist
12 1 1
DaisyVo
Shopify Partner
3734 403 489

Hi @CBOfficial 

 

To complete your requests, please follow these steps:
  1. Go to Shopify Admin > Online Store > Theme > Customize > T

 

.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>

 

 
I hope this helps
 
Best,
 
Daisy
Please let us know if our reply is helpful by giving it a Like or marking it as a Solution!

Avada SEO & Image Optimizer - The #1 SEO solution

DaisyVo
Shopify Partner
3734 403 489

Hi @CBOfficial 

 

To complete your requests, please follow these steps:
  1. Go to Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS https://prnt.sc/i8ljAMlHJUKl
  2. Paste the code provided into the Custom CSS section.

 

.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;
}

 

Here is the result: image_720.png

 

I hope this helps 

 

Best,

 

Daisy

Please let us know if our reply is helpful by giving it a Like or marking it as a Solution!

Avada SEO & Image Optimizer - The #1 SEO solution