Product Options

You add variants to a product that comes in more than one option, such as size or color. Each combination of option values for a product can be a variant for that product.

For example, suppose that you sell T-shirts with two options: size and color. The size option has three values: small, medium, and large. The color option has two values: blue and green. One specific variant from these options is a small, blue T-shirt. Read official documentation how to add variants ↗ (opens in a new tab).

Standard options from default themes show settings as dropdowns or pills with text option values. Our theme has extended the default script and is able to show separately uploaded pictures (futher pics) instead of text pills.

Pills default

Variant's featured image

Enabled by default: No
Sortable block: Yes
Visibility: Product page info

Feature is only available for one 1 out of 3 possible options in the product. We preset in the theme that this option is Color.

If you have a multilingual store, then you need to check if there is a translation of the word Color in Themes Settings > Product options > Color option name field. This field has already contained comma-separated translations into 21 languages. If your variant is not there, then you must definitely add it at the end, separated by comma.

Steps to enable

1. From your Shopify admin, go to Online Store > Themes.
2. Find the Lumia theme that you want to edit, and then click Customize.
3. Open the drop-down menu at the top of the page.
4. Select the Product page template that you want to edit from the dropdown menu.
5. Click the Main product section to view its settings.
6. Edit existing block Variant picker or Click + Add block and select a Variant picker block.
7. In the General fields group select Pills from the Type selectbox.
8. In the General fields group check Use featured variants images for 'Color' option checkbox.
9. Click Save.

Add an image to a new variant

1. From your Shopify admin, go to Products ↗ (opens in a new tab).
2. Click the name of the product that you want to edit.
3. In the Variants section, click Add variant.
4. While creating the variant, click Add image on the variant details page.
5. Select a product image or click Add file to add a new image.
6. Click Done.

Add images to existing variants

1. From your Shopify admin, go to Products ↗ (opens in a new tab).
2. Click the name of the product that you want to edit.
3. In the Variants section, click on the image icon to assign an image to that variant.

4. Select a product image or click Add image to upload a new image.
5. Click Save.

Group images by color

When a color swatch on the Product page is selected, it updates the image and thumbnails of the product gallery with that given color. For this, you need to group product images by color. Lumia offers two ways to do this: Grouping images in order and Using alt text.

1. Grouping images in order

In this way the product gallery scrolls to the first image from the color group. And the rest of the images (no selected color) follow after it. Look at the product example here ↗ (opens in a new tab). This method is quite simple and requires a minimum of action on your part.

1. From your Shopify admin, go to Products ↗ (opens in a new tab).
2. Click the name of the product that you want to edit.
3. Upload all images to the Media section.
4. Group images by color by dragging them. As a result, you will get several image groups of the same color.

5. Assign an image to each product color variant. But it is necessary to select the first image from each group.

6. Click Done.

2. Using alt text

In this way the product gallery shows only images associated with selected color. The rest of the images are hidden. Look at the product example here ↗ (opens in a new tab).

Steps to enable

1. From your Shopify admin, go to Products ↗ (opens in a new tab).
2. Click the name of the product that you want to edit.
3. Upload all images to Media section.
4. Assign an image to each product color variant.

5. Add the alt tex to each image in the Media section. How to add alt text you can read here ↗ (opens in a new tab)
   The alt text is the key to recognize that the image associated with one of the variants.
   The alt text pattern is as follows: color-value
   For example, alt text for images with red-coloured product would be color-red.

6. Click Done.

Pics

Enabled by default: No
Sortable block: Yes
Visibility: Product page info

Steps to enable

1. From your Shopify admin, go to Online Store > Themes.
2. Find the Lumia theme that you want to edit, and then click Customize.
3. Open the drop-down menu at the top of the page.
4. Select the Product page template that you want to edit from the dropdown menu.
5. Click the Main product section to view its settings.
6. Edit existing block Variant picker or Click + Add block and select a Variant picker block.
7. In the General fields group select Pills from the Type selectbox.
8. In the General fields group check the Use pics checkbox.
9. In the General fields group uncheck the Use featured variants images for 'Color' option checkbox.
10. Click Save.

Preapre pics for upload to store Settings / Files

To upload any pic instead of a text pill in any of the three options, you just need to name the picture correctly. It is the name of the picture that is the key recognizer for the product options script.

The photo name pattern is as follows: color-value-of-the-option.png where value-of-the-option is the only variable part of the pattern.

Let's say you have the following set of product options:

So you have to upload the following pictures (lower case name, 100 x 100 px size):

1. pill-pic-color-yellow.png
2. pill-pic-color-violet.png
3. pill-pic-color-blue.png
4. pill-pic-color-green.png
5. pill-pic-material-leather.png
6. pill-pic-material-wool.png
7. pill-pic-material-cotton.png
8. pill-pic-material-polyester-acryl.png

Upload

1. From your Shopify admin, go to Settings > Files.
2. Click Upload files.
3. Select files to upload (up to 20), and then click Open.

Text

Enabled by default: No
Sortable block: Yes
Visibility: Product page info

Steps to enable

1. From your Shopify admin, go to Online Store > Themes.
2. Find the Lumia theme that you want to edit, and then click Customize.
3. Open the drop-down menu at the top of the page.
4. Select the Product page template that you want to edit from the dropdown menu.
5. Clickthe Main product section to view its settings.
6. Edit existing block Variant picker or Click + Add block and select a Variant picker block.
7. In the General fields group select Pills from the Type selectbox.
8. In the General fields group uncheck the Use pics checkbox.
9. In the General fields group uncheck the Use featured variants images for 'Color' option checkbox.
10. Click Save.

Combined default

Enabled by default: Yes
Sortable block: Yes
Visibility: Product page info

This kind of product options can show variant image variant image, pic pic and text text pills. By priority, the featured photo of the variant is searched, if it is not there, then pic is searched, if it is not there, then the text value of the variant option is displayed.

Steps to enable

1. From your Shopify admin, go to Online Store > Themes.
2. Find the Lumia theme that you want to edit, and then click Customize.
3. Open the drop-down menu at the top of the page.
4. Select the Product page template that you want to edit from the dropdown menu.
5. Click the Main product section to view its settings.
6. Edit existing block Variant picker or Click + Add block and select a Variant picker block.
7. In the General fields group select Pills from the Type selectbox.
8. In the General fields group check the Use pics checkbox.
9. In the General fields group check the Use featured variants images for 'Color' option checkbox.
10. Click Save.

Dropdowns

Enabled by default: No
Sortable block: Yes
Visibility: Product page info

Steps to enable

1. From your Shopify admin, go to Online Store > Themes.
2. Find the Lumia theme that you want to edit, and then click Customize.
3. Open the drop-down menu at the top of the page.
4. Select the Product page template that you want to edit from the dropdown menu.
5. Click the Main product section to view its settings.
6. Edit existing block Variant picker or Click + Add block and select a Variant picker block.
7. In the General fields group select Dropdown from the Type selectbox.
8. Click Save.

Admin interface