Drop-down Options

New Member
15 0 0

Is everyone else's the same? In my store, the drop-down option is not very clear, the buyer does not realise it's a drop-down selection, but went straight to the cart button without selecting. The end-arrow is not visible to see on the desktop. It's tiny, and very light grey needs to be darker and in bold black. The first line in the option should display inside the drop-down box (Select an option) to encourage the buyer to click the arrow as in the image below. How do I do this or is this to do with Shopify?IMG_1721.jpg

0 Likes

Hello ,

Please share your site url so that I will give you exact solution

Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
0 Likes
New Member
15 0 0

Hello OSC

 

Site URL https://www.azanaphotoframes.co.uk/collections/grandparents-photo-frames/products/surrounded-by-prec...

 

Buyer did not know this was a drop-down option, an arrow is not visibly clear, nor it says 'Select an option' in the first line of the drop-down

0 Likes

@Karen_D,

Are you talking about below dropdown

2019-12-10_20-43.jpg

Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
0 Likes
New Member
15 0 0

Yes

0 Likes

@Karen_D,

1. Go to Online Store->Theme->Edit code
2. Asset->styles.scss->paste bellow code in bottom of file

.shopify-product-form select {
border-color:#a8a939 !important;
background-position: 100% 50% !important;
background-size: 30px !important;
}

when you will add this css it will look like below screenshot

2019-12-11_13-43.jpg

Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
0 Likes
New Member
15 0 0

Fantastic, thank you so much!

 

How can I change the colour to black instead of the grey - the text & arrow, please? The black will stand out the grey.

0 Likes

@Karen_D ,

are you talking about this text and arrow

Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
0 Likes
New Member
15 0 0

Yes, currently in grey but want it black. I can't see this in the Theme settings 'Colours' - thank you.arrow-text.jpg

0 Likes

@Karen_D,

Please add below css to change the color of text

.shopify-product-form select {
	color: #000 !important;
}

You can not change the color of arrow..As you  are using arrow image...

So If you want to change the color of aarow then you have to change the image

2019-12-11_17-52.jpg

Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
0 Likes