Solved

Focal Theme - How To Reduce Padding On Combo Box?

hdkingy
Excursionist
22 0 7

My products have a lot of different variants & in Focal theme the combo box has so much padding between the different variant options that you end up having to scroll to see them all, rather than them all just showing on the page when you click the dropdown.

 

Can anyone help me with a code to reduce the padding significantly between the combo box options? I'm assuming the font size of the options will need to be reduced as well to fit in the narrower padding. (Which is fine)

 

I've attached some photos below to give a visual on exactly what im referring to. Here is a link to my site as well:

https://pondstream.com/products/scott-aerator-skyward-fountain

 

What I have now:

Screenshot 2024-01-16 105315.png

 

What I am looking to achieve:

Screenshot 2024-01-16 105521.png

Accepted Solution (1)

Moeed
Shopify Partner
3697 932 1166

This is an accepted solution.

Hey @hdkingy 

 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
.combo-box__option-item:not([hidden]) {
    padding: 0px 18px !important;
}
</style>

RESULT:

Moeed_0-1705427228443.png

 

If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

Best Regards,
Moeed

Need a Shopify developer? Chat on WhatsApp


- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️

View solution in original post

Replies 4 (4)

Natasha-Saed
Shopify Partner
411 45 71

1) Go to online store
2) Click on Edit Code
3) Open your theme.css file
4) Paste the below code at the bottom and save

.combo-box__option-item:not([hidden]) {padding: 0px 18px !important;}
You can change the 0px to your desired value.

If my solution helped you don't forget to accept it to help others.
===================================================================
And if you really like my support share a cup of coffee with me paypal.me/freemindsint

Moeed
Shopify Partner
3697 932 1166

This is an accepted solution.

Hey @hdkingy 

 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
.combo-box__option-item:not([hidden]) {
    padding: 0px 18px !important;
}
</style>

RESULT:

Moeed_0-1705427228443.png

 

If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

Best Regards,
Moeed

Need a Shopify developer? Chat on WhatsApp


- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️
Scentsational
Tourist
10 0 3

Hi, are you able to assist me with adding a next and previous button to my product pages please. This is my site: https://scentsationalhome.com

hdkingy
Excursionist
22 0 7

Thank you, that worked wonderfully for the desktop. Is there another piece of code I can add in to edit the padding for mobile separately?