How to enable drop down arrow for product variant

Store Design
1

Hey there everyone!

Any way to have an arrow down for the product variant drop box? As shown in the image below.

InsideScoop_Dropdown_Variant.png
InsideScoop_Dropdown_Variant.png749×459 10.1 KB

Feel free to ask for any details,
link: https://insidescoop.com.my/collections/pints/products/twin-pack-1
Shopify: https://the-inside-scoop-sdn-bhd.myshopify.com/

2

Hi @InsideScoop ,

You can follow the instruction below:

  1. Go to Online Store->Theme->Edit code
  2. Asset->/timber.scss->paste below code at the bottom of the file:
.product-form--full .single-option-selector {
    background-image: linear-gradient(45deg, transparent 50%, gray 50%), linear-gradient(135deg, gray 50%, transparent 50%), linear-gradient(to right, #ccc, #ccc);
    background-position: calc(100% - 20px) calc(1em + 2px), calc(100% - 15px) calc(1em + 2px), calc(100% - 2.5em) 0.5em;
    background-size: 5px 5px, 5px 5px, 1px 1.5em;
    background-repeat: no-repeat;
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

1 Like
3

Thank you so much @AvadaCommerce !

Solved the problem perfectly