Solved

How can I reduce the size of variant selector pills in Dawn theme?

WWJDWR
Excursionist
24 0 3

Hi there, I’m running my store on Dawn theme and am trying to make the variant selector pills text smaller because right now the pills text is too large and it makes the pills too large. See image below. Does anyone know the code I can put in base CSS or somewhere to enable me to edit the pills? Thank you <3.

IMG_3900.png

Accepted Solution (1)

Made4uo-Ribe
Shopify Partner
6365 1527 1896

This is an accepted solution.

Hi @WWJDWR 

We can adjust the size cause it will be squeeze out but we can reduce the padding. 

Check this one. 

  • From your Shopify admin dashboard, click on "Online Store" and then "Themes".
  • Find the theme that you want to edit and click on "Actions" and then "Edit code".
  • In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

 

.product-form__input input[type='radio'] + label {
    padding: 0.7rem 1rem !important;
}

 

  • And Save. 
  • Result:
  • Made4uoRibe_0-1696436006568.png
If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.

View solution in original post

Replies 3 (3)

Made4uo-Ribe
Shopify Partner
6365 1527 1896

This is an accepted solution.

Hi @WWJDWR 

We can adjust the size cause it will be squeeze out but we can reduce the padding. 

Check this one. 

  • From your Shopify admin dashboard, click on "Online Store" and then "Themes".
  • Find the theme that you want to edit and click on "Actions" and then "Edit code".
  • In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

 

.product-form__input input[type='radio'] + label {
    padding: 0.7rem 1rem !important;
}

 

  • And Save. 
  • Result:
  • Made4uoRibe_0-1696436006568.png
If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.

oscprofessional
Shopify Partner
15905 2378 3087

Hello @WWJDWR 

You can try this code: it will be helpful to you

Go to the Online Store->Theme->Edit code->Assets->base.css>Add this code at the bottom.

.product-form__input input[type='radio'] + label {
    font-size: 1rem !important;
    margin: 0.5rem 0.5rem 0.3rem 0 !important;
    padding: 0.5rem 1rem !important;
}

 

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free
jkeef24
Visitor
3 0 0

I only have 3 options within my variant pills, and this option worked perfectly for me! It makes them fit into a single line.