Solved

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

dreamtechzone_5
Shopify Partner
256 1 30
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.
 
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
Screenshot 2024-05-04 181050.png
 
I would like to keep it this way
WhatsApp Image 2024-05-04 at 15.37.21_f32961a9.jpg
Accepted Solutions (2)
BSS-TechFusion
Shopify Expert
146 26 15

This is an 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:

view.png

view.png

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

 

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Wholesale Solution by BSS |
For adding product labels/badges, visit BSS: Product Labels & Badges

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

View solution in original post

BSS-TechFusion
Shopify Expert
146 26 15

This is an 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

view.png

 

 

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Wholesale Solution by BSS |
For adding product labels/badges, visit BSS: Product Labels & Badges

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

View solution in original post

Replies 11 (11)

BSS-TechFusion
Shopify Expert
146 26 15

Hi @dreamtechzone_5 

Hope the following instructions can help you:

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

view.png

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

view.png

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

view.png

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

view.png

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

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! 

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Wholesale Solution by BSS |
For adding product labels/badges, visit BSS: Product Labels & Badges

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

BSS-TechFusion
Shopify Expert
146 26 15

Hi @dreamtechzone_5 

Hope the following instructions can help you:

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

view.png

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

view.png

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

view.png

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

view.png

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

- The result can look like:

view.png

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

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! 

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Wholesale Solution by BSS |
For adding product labels/badges, visit BSS: Product Labels & Badges

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

dreamtechzone_5
Shopify Partner
256 1 30

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

BLOOM-EMBELLISHED-SKIRT-–-SHOP-VAVI.png

Mobile Mode

SHOP-VAVI-·-Customize-NEW-Copy-V-LIVE-May-24-·-Shopify.png

BSS-TechFusion
Shopify Expert
146 26 15

This is an 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:

view.png

view.png

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

 

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Wholesale Solution by BSS |
For adding product labels/badges, visit BSS: Product Labels & Badges

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

dreamtechzone_5
Shopify Partner
256 1 30

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

Screenshot 2024-05-06 134229.png

BSS-TechFusion
Shopify Expert
146 26 15

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>

 

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Wholesale Solution by BSS |
For adding product labels/badges, visit BSS: Product Labels & Badges

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

dreamtechzone_5
Shopify Partner
256 1 30

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?

Mobile Mode.png

Want

WhatsApp Image 2024-05-04 at 15.37.21_f32961a9.jpg

dreamtechzone_5
Shopify Partner
256 1 30

Hello BSS-TechFusion!

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

BSS-TechFusion
Shopify Expert
146 26 15

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.

view.png

 

 

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Wholesale Solution by BSS |
For adding product labels/badges, visit BSS: Product Labels & Badges

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

BSS-TechFusion
Shopify Expert
146 26 15

This is an 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

view.png

 

 

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Wholesale Solution by BSS |
For adding product labels/badges, visit BSS: Product Labels & Badges

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

dreamtechzone_5
Shopify Partner
256 1 30

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