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

[JoshuaStanley]

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!

[Jenny_HD]

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%}

[JoshuaStanley]

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?

[Jenny_HD]

Could you send your store URL? 🙂 

[JoshuaStanley]

www.lubanziwinesza.com

[JoshuaStanley]

www.lubanziwinesza.myshopify.com

[Jenny_HD]

@JoshuaStanley password?

[LanceAllison]

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?