In Shopify, Options and Variants allow you to offer multiple configurations of a single product (such as different colors, sizes, or specifications) on a single product details page.
BoltTheme automatically parses these options to render high-contrast interactive selectors (such as color swatches or selection pills) directly on your storefront.
️How to Configure
Follow these steps to set up options and variants in the Shopify Admin and configure them for BoltTheme:
Step 1: Open the Product Variants Editor
- In your Shopify Admin, go to Products and select the product you want to edit (e.g. Samsung Galaxy S23 5G).
- Scroll down to the Variants section card.
Step 2: Add Option Types and Values
Specify what options (like Color, Size, or Version) are available for your product.
- If your product does not have variants yet, click Add options like size or color.
- Define the Option name (e.g. Color).
- Enter the Option values (e.g. White, Graphite, Black), pressing enter after each value.
- Click Add another option if you have multiple criteria (e.g. Version -> US Version, ROM -> 128G, 256G).
- Click Done.
Step 3: Configure Variant Prices and Inventory
Shopify will automatically generate a row for every unique combination of your options.
- Scroll down to the generated variant list.
- Edit individual settings for each variant:
– Price: Set variant-specific pricing (e.g. charging more for higher storage capacities).
– Available: Enter the available stock quantities for each location.
– SKU & Barcode: Assign a unique stock-keeping unit number.
- Click Save at the top of the product page.
Step 4: Verify on the Storefront
- Navigate to the product page on your storefront.
- BoltTheme will dynamically render the selectors:
– Option names containing Color or Colour will render as visual color circle swatches.
– Standard options (like Version or Size) will render as clean, interactive selection pills.
- Clicking a selector will update the price display and variant image instantly.
Important Best Practices
Dynamic Color Swatches Lookup:
BoltTheme automatically converts variant names to CSS color swatches (e.g., a variant named Black will show a black circle). If you have custom colors (like Graphite), you can upload a matching graphic asset (e.g., graphite.png or custom-swatches.css configuration) to the theme assets folder to render a precise gradient or custom color code.
Unique SKUs:
Always assign a unique SKU to each individual variant row. Reusing the parent product SKU across multiple variants can break inventory tracking, checkout validation, and shipping integrations.