Sticky Add To Cart

The sticky add to cart is made to make it easier for a potential buyer to focus on the product description without losing sight of the buy button.

This is not the original Shopify theme option. It is made in many themes.

Advantages of our sticky add to cart:

1. Support adding subscription to the cart.
2. Support adding additional product fields to the cart(additional product fields are used to create more complex configurable products that have more than three options, herein Product / Additional Product Fields we have described in detail how to use our self-written additional fields generator for Lumia theme).
3. The main variant options selector is fully synchronized symmetrically with the options in the sticky add to cart. This means that if you chose red color and XS size, then exactly the same size and color will be selected in the sticky add to cart, the product photo will be changed both there and there. It works in one direction and the other.
4. Product variant options as pills, default dropdowns or information block (when there are no product variants).
5. Asynchronous block - 100% passes page speed insight metrics.

Desktop view

Pill product options default

Enabled by default: Yes
Visibility: Product page desktop

Steps to enable / disable

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 page.
5. To enable sticky add to cart, check the Enable sticky add to cart checkbox.
   To disable sticky add to cart, uncheck the Enable sticky add to cart checkbox.
6. Open the drop-down Sticky type and select Pills.
7. Click Save.
8. [Optional] Upload pics as described here.in Product Page / Product Options / Pics
9. [Optional] Upload photos as described here.in Product Page / Product Options / Variant's featured image

Dropdown product options

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

// 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 / disable

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 page.
5. To enable sticky add to cart, check the Enable sticky add to cart checkbox.
   To disable sticky add to cart, uncheck the Enable sticky add to cart checkbox.
6. Open the drop-down Sticky type and select the Dropdown.
7. Click Save.

No product options

Enabled by default: Yes
Visibility: Product page desktop

Steps to enable / disable

Automatically turns on if the product has no options.

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 page.
5. To enable sticky add to cart, check the Enable sticky add to cart checkbox.
   To disable sticky add to cart, uncheck the Enable sticky add to cart checkbox.
6. Click Save.

Mobile view

Enabled by default: Yes
Visibility: Product page mobile

Steps to enable / disable

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 page.
5. To enable sticky add to cart, check the Enable sticky add to cart checkbox.
   To disable sticky add to cart, uncheck the Enable sticky add to cart checkbox.
6. Click Save.

Admin interface