How to Create a Border Around the Color Drop Down Menu List for a Product Page

Shopify Discussion

Topic summary

A Shopify store owner using the Dawn theme seeks to customize their product page’s color dropdown menu and text styling.

Primary requests:

  • Add a black border around the color selection dropdown to match the existing borders on the Quantity selector and Add to Cart button
  • Make color option text (Black, White, Red, Orange, Yellow, etc.) bold and/or slightly larger for better visibility

Solution provided:
RockTechnolabs offered CSS code to be added to the theme.liquid file (above the tag). After initial implementation showed no changes, a revised code snippet was provided that successfully resolved the border issue.

Current status:
The border customization is complete and working. However, the user has follow-up requests:

  • Increase font size and boldness of “Colour” and “Quantity” headings
  • Similarly enhance the “Add to Cart” and “Buy it Now” button text for visual consistency

The discussion remains open, awaiting solutions for these additional styling adjustments.

Summarized with AI on November 16. AI used: claude-sonnet-4-5-20250929.
1

Hi,

I’m using Shopify Dawn theme and would like to make the following changes to my default product page:

(1.) I want to create a black border around the Color selection drop down menu list so that it looks like the borders around the “Quantity” selector and the “Add to Cart” selector below it.

(2.) I also want to make the color options list (Black, White, Red, Orange, Yellow, etc) either bold or/and with a slightly larger font to make them more legible and easily recognisable to buyers.

Here is the link to my product page:

https://silkygiftshop.com/products/personalised-accordion-gift-acrylic-keepsake-plaque

I would greatly appreciate your assistance and comments.

2

Hey @Macnet

please try this css

Thanks

3

Hello Azam,

Thank you for your assistance. Which file should I add this script to and also which section of the file should it be added?

4

Hi @Macnet

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 tag
  5. And paste the below code

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

Best Regards,
Rock Technolabs

5

Hello,

I applied the script as advised. However, it made no difference to either the font size or boldness of the colour drop down menu option text. Please advise.

6

Here is the link to the page:

https://silkygiftshop.com/products/personalised-accordion-gift-acrylic-keepsake-plaque

7

Hi @Macnet

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 tag
  5. And paste the below code

Result:

RockTechnolabs_0-1694495143269.png
RockTechnolabs_0-1694495143269.png1579×733 133 KB

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

Best Regards,
Rock Technolabs

1 Like
8

Hey!

It worked! Much appreciated. Thank you.

9

1.) Is there any way I can make the font size of the “Colour” and “Quantity” headings larger and bolder?

2.) I would also like to similarly increase the font size of the “Add to Cart” and “Buy it Now” wordings and make them bolder.

These adjustments will make the selections more uniform in font size and boldness. If you can provide solutions, it would be greatly appreciated.