Main Cards

Our fresh look at the product card that we use as the main one in our demo for its novelty, balance and compactness. Check it out on the live demo ↗ (opens in a new tab).

Passive state

Hover state

Enabled by default: Yes
Visibility: Product carousel sections, product grid sections, collection page grid and collection page sections, product page sections.

 

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. Click Theme settings.
4. Click Product card.
5. Select Modern from the Layout dropdown.
6. Click Save.

States

The state is an automatic type of card depending individually on the product itself that you create in the store control panel and the product card settings that you configure in our theme.

No Options

Passive state

Hover state

Enabled by default: Auto

Dropdown options

Passive state

Hover state

Enabled by default: No / Auto (auto means that if the product has many options, then the dropdown mode will be forced)

// Below is a theme LIQUID code for those who want to re-customize the AUTO mode logic
// Path of file snippets/variant_picker.liquid
// ...
if product.options.size == 1 and product.variants.size > 10
    assign picker_type = 'dropdown'
elsif product.options.size == 2 and product.variants.size > 36
    assign picker_type = 'dropdown'
elsif product.options.size == 3 and product.variants.size > 100 or layout == 'product-sticky'
    assign picker_type = 'dropdown'
endif
// ...

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. Click Theme settings.
4. Click Product card.
5. Select Dropdown from the Variant picker > Type selectbox.
6. Click Save.

Pics options

Passive state

Hover state

Enabled by default: No

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. Click Theme settings.
4. Click Product card.
5. In the Variant picker fields group select Pills from the Type selectbox.
6. In the Variant picker fields group check the Use pics checkbox.
7. In the Variant picker fields group uncheck the Use featured variants images for 'Color' option checkbox.
8. Click Save.
9. Upload pics as described here.in Product Page / Product Options / Pics

Variant's featured image options

Passive state

Hover state

Enabled by default: No

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. Click Theme settings.
4. Click Product card.
5. In the Variant picker fields group select Pills from the Type selectbox.
6. In the Variant picker fields group ucheck the Use pics checkbox.
7. In the Variant picker fields group check the Use featured variants images for 'Color' option checkbox.
8. Click Save.
9. Upload photos as described here.in Product Page / Product Options / Variant's featured image

Text options

Passive state

Hover state

Enabled by default: No / Auto (auto means that if the variant featured is absent and pic is not found then the text value will be forced to show)

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. Click Theme settings.
4. Click Product card.
5. In the Variant picker fields group select Pills from the Type selectbox.
6. In the Variant picker fields group ucheck the Use pics checkbox.
7. In the Variant picker fields group uncheck the Use featured variants images for 'Color' option checkbox.
8. Click Save.

Combined pill options default

By priority, the featured photo of the variant is searched, if it is not there, then the photo of the pic is searched, if it is not there, then the text value of the variant option is displayed.

Passive state

Hover state

Enabled by default: Yes

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. Click Theme settings.

4. Click Product card.

5. In the Variant picker fields group select Pills from the Type selectbox.

6. In the Variant picker fields group check the Use pics checkbox.

7. In the Variant picker fields group check the Use featured variants images for 'Color' option checkbox.

8. Click Save.

9. [ Optional ] Upload pics as described here.in Product Page / Product Options / Pics

10. [ Optional ] Upload photos as described here.in Product Page / Product Options / Variant's featured image

All options pics

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. Click Theme settings.
4. Click Product card.
5. In the Variant picker fields group select Pills from the Type selectbox.
6. In the Variant picker fields group check the Use pics checkbox.
7. In the Variant picker fields group uncheck the Use featured variants images for 'Color' option checkbox.
8. Click Save.
9. Upload pics as described here.in Product Page / Product Options / Pics

Subscription & One time purchase available new

Passive state

Hover state

Enabled by default: Auto
Supports Dropdowns and Pills: Yes

Only subscription new

Passive state

Hover state

Enabled by default: Auto
Supports Dropdowns and Pills: Yes

Products with additional fields

As you know, our theme supports additional option fields additional option fields for the products. But since their number is unlimited, in the hover state they may not fit, so a Quick Shop Quick Shop is automatically attached to the product card that has additional fields. All additional fields will be visible in the Quick Shop popup.

Passive state

Hover state

Enabled by default: Auto
Supports Dropdowns and Pills: Yes

List view on collection page

Pills

Enabled by default: Yes (inherits regular product card settings)

Dropdowns

Enabled by default: No (inherits regular product card settings)

Card aspect ratio

In tech support, the most common question used to be how to align all the cards to one another. For example, one card has two lines in the product name / the other has one, or one product has options, but the second does not. In our topic an equivalent height for all product cards in the same group is implemented.

Image aspect ratio

We calculate image aspect ratio automatically based on the image width and height and option Cover is enabled by default. The default aspect ratio for the image container is 235 x 282 px. It is a global aspect ratio. That is why all product cards have the same image sizes.

Steps to set your own image aspect ratio.

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. Click Theme settings.
4. Click General.
5. Enter value in the Physical width of the product featured image in px field.
6. Enter value in the Physical height of the product featured image in px field.
7. Click Save.

Admin interface