Border Around Variant Dropdown

Solved
Excursionist
21 1 1

I want to put a border around my variant drop downs on my product pages so that it stands out. I have been playing around with various files and came up with this (see photo) which is close, but I need it be around the drop down itself. I'd also like to have a little arrow on the right in the drop down to help people realize there are options to choose from. My theme is from a 3rd party. Website is www.gildedpress.com

Screen Shot 2019-07-24 at 1.45.11 PM.png

 

0 Likes

Success.

Shopify Staff
Shopify Staff
335 31 79

Hi, @Gena_Beck!

 

May here from Shopify.

 

Your store looks so pretty! I am not an expert in coding, but I do dabble in it, so I'd be more than happy to dig in. After looking into your store and inspecting the code, I found that you can edit your CSS file in order to add a border on the dropdown. Before making any changes to your code, I highly recommend making a duplicate of your theme, in case of any unintended results. After you make the duplicate, you'll want to go into your theme code ('Online store > Actions > Edit code'), and look for your CSS file, the file name should end in '.scss.liquid'. Depending on the theme it's usually called 'theme.scss.liquid' or 'timber.scss.liquid'. Once you find it, scroll down to the bottom of the code and paste this:

 

.single-option-selector {
  border: solid 0.5px !important;
}

Click 'Save'.

 

After you save your changes, you should be able to see a border around the dropdown. If you would like to add more styling, such as border color, border style, etc, you can look into this document from W3Schools on border properties.

 

As for adding the arrow, it looks like this will require a more advanced coding skill, which is outside of my support scope. If you haven't already, I highly recommend reaching out to the theme developers directly if they are able to assist or hopefully some of our experts here can give some insights. Alternatively, you can look into hiring a Shopify Expert for this task.

 

Let me know if you have any followup questions!

 

Cheers!

May | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes

Success.

Excursionist
21 1 1

Thank you so much!

0 Likes
New Member
1 0 0

Hi! Do you think you can help me create a drop down menu for my variants? I am using the Brooklyn theme. 

0 Likes