Icon with text & left align product page

[Tolunay]

  
Could someone help me with getting the icons with text like this on my product page, i have the impulse theme, but i can't seem to find how to make it like this.

Also everything on my store is aligned in the middle, is there someone that can help me with aligning everything to the left.

[LizHoang]

Hi @Tolunay 

You can follow the instuction here: 

1. Go to Theme > Customize > Select the Text Column with Icons section on theme

2. On the right-hand side, change the Text alignment to Center. You can take a look into this image: https://prnt.sc/WJGpu7ptqg_E

I hope it helps

[Tolunay]

Hi,

Thanks for the reply, but this doesn't work unfortunately. If i use that i can't get 4 icons next to each other, and also the icons won't go on the left of the text.
If you could help me with that, it would be really great.

[Tolunay]

@LizHoang Maybe if this helps, this is the site i saw it: https://thompson-oxford.com/collections/men/products/clay

[DaisyVo]

Hi @Tolunay 

Could you please share the link where you got the screenshot from? 

Looking forward to hearing from you soon. Thank you!

Best,
Daisy - Avada Support Team.

[DaisyVo]

Hi @Tolunay 

Could you please share your store link with me so that we can provide you with a suitable customization code? 

Looking forward to hearing from you soon. Thank you!

Best,
Daisy - Avada Support Team.

[DaisyVo]

Hi @Tolunay 

You can follow our instruction below: 

1/ Please download 4 icons from the sample link here: https://drive.google.com/drive/folders/1rywUPanrC46U305ICfESmQEcD2jwwfl7?usp=drive_link

2/ Upload these 4 images to your Shopify admin > Files: https://prnt.sc/WNK3J1Wv7i1R 

3/ Go to Shopify admin > Online store > Edit code: https://prnt.sc/M4p-gua99Uf4 

4/ Search "custom liquid" and add the code below to that file: https://prnt.sc/f_U9tn2Kjfdz 

<div class="page-width container ">
    <div class="row usp__section-container OURusp__section-container">
      <div class="usp__content usp-text_tUwGXa">
        <img height="70" width="70" class="usp__content-img" src="//thompson-oxford.com/cdn/shop/files/ICONOmarcassudorMOVIMIENTO_2.gif?v=1731845466" style="">
        <div class="">
          <h3>Maximum flexibility</h3>
          <p> Comfortable fit and made from high-quality fabrics with a focus on sustainability.</p>
        </div>
      </div>
      <div class="usp__content usp-text_UxCcGA">
        <img height="70" width="70" class="usp__content-img" src="//thompson-oxford.com/cdn/shop/files/ICONOplanchaMOVIMIENTO_1.gif?v=1731845458" style="">
        <div class="">
          <h3>Wrinkle-free</h3>
          <p>No more ironing: machine wash, hang up and you're done.</p>
        </div>
      </div>
      <div class="usp__content usp-text_44PC3U">
        <img height="70" width="70" class="usp__content-img" src="//thompson-oxford.com/cdn/shop/files/ICONOtranspirableMOVIMIENTo_2.gif?v=1731845455" style="">
        <div class="">
          <h3>Breathable and quick-drying fabric</h3>
          <p>Stay fresh and comfortable all day long.</p>
        </div>
      </div>
      <div class="usp__content usp-text_CfLVJr">
        <img height="70" width="70" class="usp__content-img" src="//thompson-oxford.com/cdn/shop/files/ICONOantibacterianoMOVIMIENTO_1.gif?v=1731845451" style="">
        <div class="">
          <h3>No odor</h3>
          <p>Neutralizes the bacteria that cause body odour when sweating.</p>
        </div>
      </div>
    </div>
    <style>
      .usp__content {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
      }
      @media screen and (min-width: 769px){
          .row.usp__section-container.OURusp__section-container {display: grid;grid-template-columns: repeat(4, 1fr);column-gap: 20px;justify-items: stretch;}
          .usp__content h3 {
              font-size: 18px;
              margin-bottom: 0;
              font-weight: bold;
          }
          .usp__content p {
              font-size: 14px;
              margin-top: 10px;
          }
      }
    </style>
  </div>

Note: There are 4 image links from the code I shared above https://prnt.sc/kEpI_CFXDP0m - Please replace it with the image links you have uploaded from Step 2. 

 

Please let me know if it works. Thank you!

Best,
Daisy - Avada Support Team.