add icon with text section above the add to cart button (Testament Theme)

[dreamtechzone_5]

Hello Everyone!

This is the Shopify Testament theme. I haven't live the theme yet. I want to add icon with text section above the add to cart button on the product page, Is it possible? Thank you.

https://themes.shopify.com/themes/testament/styles/genesis/preview

Text Here:

. Accepting Payments Worldwide.

. Shipping Worldwide.

. Currencies are seamlessly converted to Philippine Pesos (₱) at checkout.

. We ensure secure transactions and safe delivery of your orders. 

Here

I would like to keep it this way

[BSSCommerce-B2B · Accepted solution]

Hi @dreamtechzone_5 

- You change change the code to new:

<div class="content-block">
   <img src="https://upload.wikimedia.org/wikipedia/commons/6/68/Twitter_Verified_Badge_Gray.svg" alt="Image">
   <ul>
      <li>Accepting Payments Worldwide.</li>
      <li>Shipping Worldwide.</li>
      <li>Currencies are seamlessly converted to Philippine Pesos (₱) at checkout.</li>
      <li>We ensure secure transactions and safe delivery of your orders.</li>
   </ul>
</div>
<style>
   .content-block {
   display: flex;
   align-items: center;
   border: 0.15em solid black;
   margin-top: 1em;
   padding: 0.5em;
   max-width: 75%;
   font-size: 14px;
   }
   .content-block img {
   width: 50%;
   max-height: 100px;
   margin-right: 20px;
   }
   .content-block ul {
   padding: 0;
   }
   .content-block ul li::before {
   margin-right: 5px;
   }
   @media only screen and (max-width: 900px) {
   .content-block {
   max-width: 100%;
   }
   .content-block ul {
   text-align: left;
   }
   }
</style>

- The result will look like:

- As I mentioned earlier, the icon I provided is just an example. To change the icon's color, you'll need to replace the URL in the "src" attribute of the <image> tag with the URL of your desired icon image.

<img src="..." alt="Image">

- I hope this will help you.

[BSSCommerce-B2B]

Hi @dreamtechzone_5 

Hope the following instructions can help you:

- Set 1: First, navigate to Theme => Customize => Select "Product" page:

- Set 2: Second, on the left sidebar, under Template -> Product Page, click "Add block" and choose "Custom liquid"

- Step 3: Then, a block will appear on the right side.

- Step 4: Third, paste the following code into this block:

<div class="content-block">
   <img src="https://upload.wikimedia.org/wikipedia/commons/6/68/Twitter_Verified_Badge_Gray.svg" alt="Image">
   <ul>
      <li>Accepting Payments Worldwide.</li>
      <li>Shipping Worldwide.</li>
      <li>Currencies are seamlessly converted to Philippine Pesos (₱) at checkout.</li>
      <li>We ensure secure transactions and safe delivery of your orders.</li>
   </ul>
</div>
<style>
   .content-block {
   display: flex;
   align-items: center;
   border: 0.2em solid black;
   margin-top: 1em;
   padding: 1.5em;
   }
   .content-block img {
   max-width: 50%;
   height: auto;
   margin-right: 20px;
   }
   .content-block ul {
   list-style-type: none;
   padding: 0;
   }
   .content-block ul li::before {
   content: "•";
   margin-right: 5px;
   }
</style>

- You can modify the image by changing the "src" attribute of the image tag, as well as the text.

<img src="..." alt="Image">

- Don't forget to click "Save" to apply your changes.

- Fourth, drag the block you just created to position it right above the 'Buy buttons' as illustrated in the following image:

- Step 5: Finally, save change and see what happend.

The result can look like:

-------------------------------------------------------------------------------------------------------

If you have more specific requests, please comment further to let me know.

Hope it helps!

If it helpful, please mark as a solution. Thanks and have a nice day sir! 

[BSSCommerce-B2B]

Hi @dreamtechzone_5 

Hope the following instructions can help you:

- Step 1: First, navigate to Theme => Customize => Select "Product" page:

- Step 2: Second, on the left sidebar, under Template -> Product Page, click "Add block" and choose "Custom liquid"

- Then, a block will appear on the right side.

- Step 3: Third, paste the following code into this block:

<div class="content-block">
   <img src="https://upload.wikimedia.org/wikipedia/commons/6/68/Twitter_Verified_Badge_Gray.svg" alt="Image">
   <ul>
      <li>Accepting Payments Worldwide.</li>
      <li>Shipping Worldwide.</li>
      <li>Currencies are seamlessly converted to Philippine Pesos (₱) at checkout.</li>
      <li>We ensure secure transactions and safe delivery of your orders.</li>
   </ul>
</div>
<style>
   .content-block {
   display: flex;
   align-items: center;
   border: 0.2em solid black;
   margin-top: 1em;
   padding: 1.5em;
   }
   .content-block img {
   max-width: 50%;
   height: auto;
   margin-right: 20px;
   }
   .content-block ul {
   list-style-type: none;
   padding: 0;
   }
   .content-block ul li::before {
   content: "•";
   margin-right: 5px;
   }
</style>

- You can modify the image by changing the "src" attribute of the image tag, as well as the text.

<img src="..." alt="Image">

- Don't forget to click "Save" to apply your changes.

- Step 4: Fourth, drag the block you just created to position it right above the 'Buy buttons' as illustrated in the following image:

- Step 5: Finally, save change and see what happend.

- The result can look like:

-----------------------------------------------------------------------------------------------------------

I hope these instructions will help you. If they are helpful, don't forget to like and mark as the solution.

Have a nice day sir! 

[dreamtechzone_5]

Really Great. I appreciate it. Thank you so much. Can the max width and height of the section be reduced? Doesn't look good because it looks too big. Also, the mobile mode is not going well. It would be nice if the icons and text were kept small. Can the color of the icon be kept as my icon color?

Desktop Mode

Mobile Mode

[BSSCommerce-B2B · Accepted solution]

Hi @dreamtechzone_5 

- You change change the code to new:

<div class="content-block">
   <img src="https://upload.wikimedia.org/wikipedia/commons/6/68/Twitter_Verified_Badge_Gray.svg" alt="Image">
   <ul>
      <li>Accepting Payments Worldwide.</li>
      <li>Shipping Worldwide.</li>
      <li>Currencies are seamlessly converted to Philippine Pesos (₱) at checkout.</li>
      <li>We ensure secure transactions and safe delivery of your orders.</li>
   </ul>
</div>
<style>
   .content-block {
   display: flex;
   align-items: center;
   border: 0.15em solid black;
   margin-top: 1em;
   padding: 0.5em;
   max-width: 75%;
   font-size: 14px;
   }
   .content-block img {
   width: 50%;
   max-height: 100px;
   margin-right: 20px;
   }
   .content-block ul {
   padding: 0;
   }
   .content-block ul li::before {
   margin-right: 5px;
   }
   @media only screen and (max-width: 900px) {
   .content-block {
   max-width: 100%;
   }
   .content-block ul {
   text-align: left;
   }
   }
</style>

- The result will look like:

- As I mentioned earlier, the icon I provided is just an example. To change the icon's color, you'll need to replace the URL in the "src" attribute of the <image> tag with the URL of your desired icon image.

<img src="..." alt="Image">

- I hope this will help you.

[dreamtechzone_5]

I can't get the icon color I want to keep. What do I have to do for this?

[BSSCommerce-B2B]

The request you made is not straightforward, as the content has been adjusted to fit the displayed size. As you have noticed, because one line is not wide enough for two words, it automatically wraps to the next line. To minimize this, you can try reducing the font-size by try the following code snippet:

<div class="content-block">
   <img src="https://upload.wikimedia.org/wikipedia/commons/6/68/Twitter_Verified_Badge_Gray.svg" alt="Image">
   <ul>
      <li>Accepting Payments Worldwide.</li>
      <li>Shipping Worldwide.</li>
      <li>Currencies are seamlessly converted to Philippine Pesos (₱) at checkout.</li>
      <li>We ensure secure transactions and safe delivery of your orders.</li>
   </ul>
</div>
<style>
   .content-block {
   display: flex;
   align-items: center;
   border: 0.15em solid black;
   margin-top: 1em;
   padding: 0.5em;
   max-width: 75%;
   font-size: 13px;
   }
   .content-block img {
   width: 50%;
   max-height: 100px;
   margin-right: 20px;
   }
   .content-block ul {
   padding: 0;
   }
   .content-block ul li {
   overflow: hidden;
   text-overflow: ellipsis;
   }
   .content-block ul li::before {
   margin-right: 5px;
   }
   @media only screen and (max-width: 900px) {
   .content-block {
   max-width: 100%;
   }
   .content-block ul {
   text-align: left;
   }
   }
</style>

[dreamtechzone_5]

I understand. Thank you so much. Can the width of the text be kept according to the size of the icon in desktop and mobile mode?

Want

[dreamtechzone_5]

Hello BSS-TechFusion!

Are you there? Please solve it. Thank you so much.

[BSSCommerce-B2B]

Hi @dreamtechzone_5,

Sorry for the late reply.

For the desktop you can use this code:

<div class="content-block">
   <img src="https://upload.wikimedia.org/wikipedia/commons/6/68/Twitter_Verified_Badge_Gray.svg" alt="Image">
   <ul>
      <li>Accepting Payments Worldwide.</li>
      <li>Shipping Worldwide.</li>
      <li>Currencies are seamlessly converted to Philippine Pesos (₱) at checkout.</li>
      <li>We ensure secure transactions and safe delivery of your orders.</li>
   </ul>
</div>
<style>
   .content-block {
   display: flex;
   align-items: center;
   border: 0.15em solid black;
   margin-top: 1em;
   padding: 0.5em;
   max-width: 75%;
   font-size: 13px;
   }
   .content-block img {
   width: 30%;
   margin-right: 20px;
   }
   .content-block ul {
   padding: 0;
   }
.content-block ul li {
    overflow: hidden;
    text-overflow: ellipsis;
}
   .content-block ul li::before {
   margin-right: 5px;
   }
   @media only screen and (max-width: 900px) {
   .content-block {
   max-width: 100%;
   }
   .content-block ul {
   text-align: left;
   }
   }
</style>

I'm just try in mobile device, but there're an issue. If making the icon the same size as that text list, the icon would appear very large and occupy the space of the text on the right, causing the block to extend, similar to the issue you mentioned above. It would result in the text width being shortened, making it prone to wrapping. Therefore, I do not recommend you to do this on the mobile view.

 

[BSSCommerce-B2B · Accepted solution]

Hi @dreamtechzone_5,

Sorry for the late reply.

For the desktop you can use this code:

<div class="content-block">
   <img src="https://upload.wikimedia.org/wikipedia/commons/6/68/Twitter_Verified_Badge_Gray.svg" alt="Image">
   <ul>
      <li>Accepting Payments Worldwide.</li>
      <li>Shipping Worldwide.</li>
      <li>Currencies are seamlessly converted to Philippine Pesos (₱) at checkout.</li>
      <li>We ensure secure transactions and safe delivery of your orders.</li>
   </ul>
</div>
<style>
   .content-block {
   display: flex;
   align-items: center;
   border: 0.15em solid black;
   margin-top: 1em;
   padding: 0.5em;
   max-width: 75%;
   font-size: 13px;
   }
   .content-block img {
   width: 30%;
   margin-right: 20px;
   }
   .content-block ul {
   padding: 0;
   }
.content-block ul li {
    overflow: hidden;
    text-overflow: ellipsis;
}
   .content-block ul li::before {
   margin-right: 5px;
   }
   @media only screen and (max-width: 900px) {
   .content-block {
   max-width: 100%;
   }
   .content-block ul {
   text-align: left;
   }
   }
</style>

I'm just try in mobile device, but there're an issue. If making the icon the same size as that text list, the icon would appear very large and occupy the space of the text on the right, causing the block to extend, similar to the issue you mentioned above. It would result in the text width being shortened, making it prone to wrapping. Therefore, I do not recommend you to do this on the mobile view

 

[dreamtechzone_5]

Awesome. It worked. Looks good now. Thank you so much.