How can I reduce the size of the icon and text under the Buy Now button?

Solved

How can I reduce the size of the icon and text under the Buy Now button?

LindiG
Visitor
3 0 0

 

Hello everyone! Just wanted to ask how do I decrease the size of the icon and text under the BUY NOW button? Would really appreciate if someone could help me with a custom CSS for making the icon and the text smaller. There is a picture below that shows how the icon with text are displayed.  

 

Screenshot (509).png

 

Accepted Solution (1)

Liqiud_xPert_SJ
Shopify Partner
1037 125 155

This is an accepted solution.

Hi @LindiG 

please place the below code into your theme customizer and adjust the font size and image width according to your need.

 

.product__info-wrapper ul.icon-with-text li.icon-with-text__item svg {
    width: 20px;
}
.product__info-wrapper ul.icon-with-text li.icon-with-text__item span {
    font-size: 12px;
}

 

Customizer:

2024-02-02 10_21_57-.png

 

 

Results:

 

2024-02-06 16_20_54-Window.png

 

Thanks

- If you need any technical assistance, feel free to send me a DM. You no longer have to search for answers without getting a response.
- Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
- Your Shopify Solution Specialist For further discussion contact: Email ID- Liqud_3xPert_SJ OR Whatsapp
- Buy a Coffee for me to get more frequently help 🙂
- Hire Me to unlock the full potential of your e-commerce store Now 🙂- If you need any technical assistance, feel free to send me a DM. You no longer have to search for answers without getting a response.
- Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
- Your Shopify Solution Specialist For further discussion contact: Email ID- Liqud_3xPert_SJ OR Whatsapp
- Buy a Coffee for me to get more frequently help 🙂
- Hire Me to unlock the full potential of your e-commerce store Now 🙂

View solution in original post

Replies 6 (6)

Liqiud_xPert_SJ
Shopify Partner
1037 125 155

Hi @LindiG welcome to the Shopify Community,

 

Can you please share the url of the store so that i can look into it.

 

Thanks

- If you need any technical assistance, feel free to send me a DM. You no longer have to search for answers without getting a response.
- Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
- Your Shopify Solution Specialist For further discussion contact: Email ID- Liqud_3xPert_SJ OR Whatsapp
- Buy a Coffee for me to get more frequently help 🙂
- Hire Me to unlock the full potential of your e-commerce store Now 🙂- If you need any technical assistance, feel free to send me a DM. You no longer have to search for answers without getting a response.
- Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
- Your Shopify Solution Specialist For further discussion contact: Email ID- Liqud_3xPert_SJ OR Whatsapp
- Buy a Coffee for me to get more frequently help 🙂
- Hire Me to unlock the full potential of your e-commerce store Now 🙂
LindiG
Visitor
3 0 0

Here it is. thank you. https://802a4e.myshopify.com/

gmeo
Shopify Partner
13 2 2

Hi, 

 

I'm not sure what theme you're using, but it looks like you're using the Refresh theme
To reduce the text size of the Image Wih Text below the add to cart button


In file: section-main-product.css


Find: .icon-with-text--horizontal .h4 (change text size)

 

Click to expand...
.icon-with-text--horizontal .h4 {
   padding-top: calc(var(--icon-size) + var(--icon-spacing));
   text-align: center;
   font-size: 1rem; //Please set the size you want here, in the Refresh theme, 1rem=10px
}

Find: .icon-with-text  (change icon size)

Click to expand...
.icon-with-text {
   --icon-size: calc(var(--font-heading-scale) * 3rem); //Change the number 3 to the size number you want
   --icon-spacing: calc(var(--font-heading-scale) * 1rem);
}

 

Trong Nguyen Quoc

Liqiud_xPert_SJ
Shopify Partner
1037 125 155

This is an accepted solution.

Hi @LindiG 

please place the below code into your theme customizer and adjust the font size and image width according to your need.

 

.product__info-wrapper ul.icon-with-text li.icon-with-text__item svg {
    width: 20px;
}
.product__info-wrapper ul.icon-with-text li.icon-with-text__item span {
    font-size: 12px;
}

 

Customizer:

2024-02-02 10_21_57-.png

 

 

Results:

 

2024-02-06 16_20_54-Window.png

 

Thanks

- If you need any technical assistance, feel free to send me a DM. You no longer have to search for answers without getting a response.
- Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
- Your Shopify Solution Specialist For further discussion contact: Email ID- Liqud_3xPert_SJ OR Whatsapp
- Buy a Coffee for me to get more frequently help 🙂
- Hire Me to unlock the full potential of your e-commerce store Now 🙂- If you need any technical assistance, feel free to send me a DM. You no longer have to search for answers without getting a response.
- Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
- Your Shopify Solution Specialist For further discussion contact: Email ID- Liqud_3xPert_SJ OR Whatsapp
- Buy a Coffee for me to get more frequently help 🙂
- Hire Me to unlock the full potential of your e-commerce store Now 🙂
LunaXLus
Visitor
2 0 0

Thank you so much! Worked on my sense theme. 

SkinGLowUp
Tourist
4 0 1

Also helped me with Sense theme, thank you!