How to add a dropdown to your Shopify product page
Dropdowns on the Shopify product page can serve two functions: first to allow customers to select variants (such as Size, Color or Material from a product), and second to enable custom product options (such as engraving, gift wrapping, or warranty upgrades). While Shopify provides a dropdown for variant selection as part of the product experience, custom option dropdowns can either be created as line item properties or require the use of an app.
This guide covers variant dropdowns as well as custom dropdowns for non-variant options and generally when you should use a dropdown versus another picker method such as a swatch picker or buttons.
In this post
- Variant dropdowns (built-in)
- Custom dropdowns (line item properties)
- When to use dropdowns vs swatches vs buttons
- Styling Shopify dropdowns
- FAQ
Variant dropdowns (built-in)
Shopify themes all natively support variants and come with a variant picker. Most themes render the picker out for each option type as a dropdown list <select> by default. So if a product had two options, Color and Size, you’d see two dropdowns.
To switch between dropdown and button/pill style:
- Go to Online Store > Themes > Customize
- Navigate to a product page
- Click Product information
- Find Variant picker and choose “Dropdown” or “Pills/Buttons”
Dropdowns are great for lists of 15+ sizes or 20+ colors because they keep your product page real estate limited. Customers will still have a bad time because they can’t see all of the options at once and have to click then scroll, then select. This is particularly painful for color options because customers will expect to see “Ocean Blue” but not get to see what that looks like until after they have committed to selecting the option.
Swatches beat out dropdowns in conversion rates for colors. Display colors as swatches and use dropdowns for options where a visual preview of the swatch will add no value. Examples of these types of options are Size or Material.
Custom dropdowns (line item properties)
Sometimes you need a dropdown for an option that is not a Shopify variant (like gift wrapping (yes/no), warranty (1 year, 3 year, lifetime), engraving font, or delivery date (x days)). These do not create separate inventory-tracked variants and are just metadata that gets applied to the order line item.
Commonly referred to as “line item properties” by Shopify, these can be implemented in your Liquid templates on the product form:
<div class="custom-option">
<label for="gift-wrap">Gift wrapping</label>
<select name="properties[Gift Wrap]" id="gift-wrap">
<option value="">No thanks</option>
<option value="Standard ($5)">Standard ($5)</option>
<option value="Premium ($12)">Premium ($12)</option>
</select>
</div>Place this code inside the <form action=”/cart/add”> section of your product template. The selected value will be a line item property in the cart and order details. The name of this property is “Gift Wrap” and will appear in the order admin and also in the confirmation email to customer.
line item properties do not affect price or inventory. A “Premium ($12)” gift wrap option shows $12 in the label but does not actually add $12 to the cart total. To charge for custom options you will need a product option app or a custom checkout script (Shopify Plus only).
When to use dropdowns vs swatches vs buttons
| Option type | Best picker | Why |
|---|---|---|
| Color (3 to 10 values) | Color swatches | Visual preview, all options visible at once |
| Color (15+ values) | Swatches (scrollable) or dropdown | Swatches with scroll for visual, dropdown if space is tight |
| Size (S to XXL) | Buttons/pills | Few values, all visible, familiar format |
| Size (20+ values like shoes) | Dropdown | Too many values for buttons, dropdown keeps it compact |
| Material | Buttons/pills | Few values, text labels work fine |
| Pattern/texture | Image swatches | Need visual preview, text labels insufficient |
| Custom option (gift wrap, warranty) | Dropdown | Not a visual option, dropdown is compact and familiar |
Mix up your picker types on a product page. The Rubik Variant Images supports this: you can set the picker type for the Color and Size options, so for example you could use a color swatch for the Color option and a pill with the sizes for the Size option. The third option defaults to the native dropdown.
For stores that create separate products by color, it offers a solution that adds color swatches at the collection and product level, and also a variant picker at the product level, where the variant can be select using dropdown menus or buttons as well.
Styling Shopify dropdowns
Default Shopify dropdowns inherit the theme’s form styling. To customize:
/* Style the variant dropdown */
.product-form__input select {
border: 2px solid #ddd;
border-radius: 8px;
padding: 10px 16px;
font-size: 15px;
background-color: #fff;
cursor: pointer;
width: 100%;
max-width: 300px;
}
/* Focus state */
.product-form__input select:focus {
border-color: #000;
outline: none;
}
/* Custom arrow icon */
.product-form__input select {
appearance: none;
background-image: url("data:image/svg+xml,...");
background-repeat: no-repeat;
background-position: right 12px center;
padding-right: 40px;
}Replace .product-form__input select with your theme’s actual selector. Add this to Customize > Custom CSS.
If styling dropdowns with CSS feels like too much work, or if you want to skip dropdowns entirely and switch to a better picker type for color options, Rubik Variant Images replaces your theme’s variant picker with customizable swatches for color and keeps dropdowns or pills for size. No CSS or Liquid editing needed. Over 100 visual settings for borders, sizes, and shapes.
“This app is perfect. it is incredibly easy to set up and use. There are so many cool ways you can set up your variant images AND adjust your swatches. The youtube tutorials are super helpful. I got a bit stuck trying to set up one of my products and Zulf was super quick to respond and help. Definitely recommend it if you are reading this ;D”
Anonymous merchant, Rubik Variant Images on the Shopify App Store
Frequently asked questions
How do I change the Shopify variant picker to a dropdown?
Change Variant Picker to “Dropdown” within Customize > Product page > Product information. Most themes support switching between dropdown and buttons/pills.
Can I add a dropdown for a non-variant option like gift wrapping?
Yes. Create a select dropdown in your product form with Liquid like so: The selected option will display as a line item property in the cart and order, but this will not create inventory-tracked variants.
Should I use dropdowns or swatches for color selection?
Swatches for color, always. Swatches give you a visual preview of the options and allow all the different values to be visible at the same time. Dropdowns are less suitable for colors because the options are hidden behind a click and you only see the text name of the option. Use dropdowns for non-visual options like Size (when you have 20+ sizes) or Material.
Can I add extra charges with a custom dropdown?
Line item properties do not affect the cart total. To add charges, you need a product options app that supports price adjustments or Shopify Plus checkout scripts. Some apps create hidden variants behind the scenes to handle pricing for custom options.
Can I mix dropdowns and swatches on the same product?
Most themes will use a single type of picker for all of the options on your theme’s customization screen. To use a swatch for the color option and a dropdown for the size option, you can either use CSS to target each option individually, or use an app like Rubik Variant Images that supports different picker types for each option.
