How to add a Quantity Selector Button to the Featured Collection on the Homepage - Dawn V2

JoshuaStanley
Tourist
6 0 1

Hi all,

 

I need some assistance. I am using Dawn V2 and would like to add a Quantity Selector Button to the Featured Collection on the Homepage. There's a theme based Quantity Selector  button for individual product pages. I want to insert this option on the homepage.

 

Please see photos below. 

 

Any help or a point in the right direction would be massively appreciated!

 

Screen Shot 2022-06-07 at 11.55.26 AM.png

Screen Shot 2022-06-07 at 11.55.36 AM.png

Replies 7 (7)

Jenny_HD
Shopify Partner
43 11 6

In your featured-collection.liquid add checkbox type schema block: "Show Quantity' with id "quantity_selector"; after that go to your card-product snippet and add 

 

  {%- if 'quantity_selector' -%}
            <div class="product-form__input product-form__quantity{% if settings.inputs_shadow_vertical_offset != 0 and settings.inputs_shadow_vertical_offset < 0 %} product-form__quantity-top{% endif %}" {{ block.shopify_attributes }}>
              <label class="form__label" for="Quantity-{{ section.id }}">
                {{ 'products.product.quantity.label' | t }}
              </label>

              <quantity-input class="quantity">
                <button class="quantity__button no-js-hidden" name="minus" type="button">
                  <span class="visually-hidden">{{ 'products.product.quantity.decrease' | t: product: product.title | escape }}</span>
                  {% render 'icon-minus' %}
                </button>
                <input class="quantity__input"
                    type="number"
                    name="quantity"
                    id="Quantity-{{ section.id }}"
                    min="1"
                    value="1"
                    form="{{ product_form_id }}"
                  >
                <button class="quantity__button no-js-hidden" name="plus" type="button">
                  <span class="visually-hidden">{{ 'products.product.quantity.increase' | t: product: product.title | escape }}</span>
                  {% render 'icon-plus' %}
                </button>
              </quantity-input>
            </div>

{%endif%}

 



 

Jenny Delibasic,

Shopify Developer
JoshuaStanley
Tourist
6 0 1

Thanks Jenny. That has worked but it has not accounted for the image banners and there is an overlap on the homepage.

 

Please see below. Do you have any suggestions for sorting the layout?

Screen Shot 2022-06-08 at 11.14.42 AM.png

Jenny_HD
Shopify Partner
43 11 6

Could you send your store URL? 🙂 

Jenny Delibasic,

Shopify Developer
JoshuaStanley
Tourist
6 0 1
JoshuaStanley
Tourist
6 0 1
Jenny_HD
Shopify Partner
43 11 6

@JoshuaStanley password?

Jenny Delibasic,

Shopify Developer
LanceAllison
Shopify Partner
54 2 11

Hi, inserted this code into main-collection-product-grid.liquid. Looks great and allows customer to select qty, but that qty not reflected in cart when they hit "add to cart'. Product inserted, but always just qty 1. Using latest Dawn. Any ideas?