Easy Variant Picker
The Easy Variant Picker app replaces the default variant dropdowns on product pages in your Shopify store with customizable selection buttons. Customers select options such as color, material, or size with a single click. The displayed options are based on app-owned metafields that you manage in the Admin interface. Appearance and spacing are controlled through the Theme Editor and can be further extended with custom CSS.
How It Works
The block is implemented as a Theme App Extension and is loaded as a section block on product templates. When a page loads, the Liquid template reads the configured variant options from the shop metafields and renders the available values per product variant as buttons. A best-match algorithm automatically selects the closest available variant when a selection changes and the previous combination is no longer available. Custom CSS configured in the Admin interface is stored in a shop metafield and embedded directly into the page.
Installation
The app is installed via the Shopify App Store. After installation, the Easy Variant Picker block automatically appears in the Theme Editor under Sections → Blocks. Add the block to your product template and configure it directly in the editor.
Managing Variant Options
Before the block can display options in the storefront, the desired variant options must be created in the Admin interface.
Adding an Option
- Open the app in the Shopify Admin
- Under Add new option, enter a Key (internal identifier, e.g.
material) and a Display name (e.g.Material) - Click Add
The app then creates a metafield definition of type Single line text in the $app namespace for product variants. Enter the desired option value on each product variant in Shopify afterwards.
Requirements:
- The key may only contain lowercase letters, digits, and underscores (e.g.
color,shoe_size) - Each key can only be created once
Deleting an Option
Options that are no longer needed can be removed under Current definitions using the Delete button. This deletes the metafield definition from Shopify along with all associated variant values.
Settings
All settings are configured directly on the block in the Shopify Theme Editor.
Colors
| Setting | Type | Default | Description |
|---|---|---|---|
| Primary color | Color | #008060 | Color for the hover state and selected option |
| Border color | Color | #c4c4c4 | Border color of buttons in the default state |
| Text color | Color | #202123 | Text color of button labels |
Typography
| Setting | Type | Default | Description |
|---|---|---|---|
| Font size | Range | 14 px | Font size of button labels (12–20 px, step: 1 px) |
Spacing
| Setting | Type | Default | Description |
|---|---|---|---|
| Horizontal padding | Range | 16 px | Left and right padding of buttons (8–32 px, step: 2 px) |
| Vertical padding | Range | 8 px | Top and bottom padding of buttons (4–16 px, step: 2 px) |
| Border radius | Range | 4 px | Corner radius of buttons (0–20 px, step: 2 px) |
Custom CSS
Custom CSS for the block can be added on the app settings page in the Shopify Admin. The CSS is stored in the shop metafield $app:custom_css and embedded directly into the <head> on each page load.
The admin interface validates CSS in real time using the css-tree library and shows syntax errors with line numbers before saving.
CSS Custom Properties
The block exposes the following CSS custom properties, set via the Theme Editor settings:
| Variable | Description | Default |
|---|---|---|
--evp-primary | Primary color (selection, hover) | #008060 |
--evp-primary-hover | Hover variant of the primary color | derived from --evp-primary |
--evp-border | Border color | #c4c4c4 |
--evp-bg | Background color of unselected buttons | #ffffff |
--evp-bg-selected | Background color of selected buttons | derived from --evp-primary |
--evp-text | Text color | #202123 |
--evp-text-selected | Text color of selected buttons | derived from --evp-primary |
--evp-radius | Corner radius | 4px |
--evp-gap | Spacing between buttons | 8px |
--evp-font-size | Font size | 14px |
CSS Classes
| Class | Element | Notes |
|---|---|---|
#easy-variant-picker | Main container of the block | Contains all option groups |
.evp-option | Individual selection button | Base class for all states |
.evp-option--selected | Selected button | Applied to the active variant value |
.evp-option--disabled | Unavailable button | Variant does not exist in this combination, is sold out, or inactive |
Example
#easy-variant-picker {
gap: 12px;
}
.evp-option {
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.evp-option--disabled {
opacity: 0.4;
text-decoration: line-through;
}
Accessibility and Keyboard Navigation
The block is fully accessible:
- Every option group has an
aria-labelattribute with the option name - Selected buttons are marked with
aria-pressed="true" - Unavailable buttons receive
aria-disabled="true" - The ← → arrow keys allow navigation between buttons within an option group
Metafield Structure
The app exclusively uses the app-owned $app namespace for metafields and does not access theme or custom metafields.
| Metafield | Type | Description |
|---|---|---|
Shop: $app:variant_option_keys | Text | Comma-separated list of created option keys |
Shop: $app:variant_option_labels | JSON | Mapping of key → display name |
Shop: $app:custom_css | Text | Custom CSS |
Variant: $app:<key> | Text | Option value of the respective variant |