Hi,
I'm trying to add an "Add to Cart" button for Boundless under the product photo (whether featured in Home page or Shop/Collection page), such that it would also reflect on side cart. Would someone have an idea how to add this? I can't seem to find code specific for Boundless.
Also, is it possible to move the Navigation/Action buttons to the top of the slideshow instead of after?
Thank you!
Hello,
Here it is (preview mode) -- https://1mwi1dcbpwflhvbd-6888063027.shopifypreview.com
Ideally after clicking the add to cart button, the side cart will appear (no need to redirect to product page)
Thanks for any help!
Okay I figured it out.
navigate to product-grid-item.liquid
after the last </div> add a new <div> and paste this in there
<link itemprop="availability" href="http://schema.org/{% if current_variant.available %}InStock{% else %}OutOfStock{% endif %}">
{%- capture 'form_id' -%}AddToCartForm-{{ section.id }}{%- endcapture -%}
{%- capture 'form_class' -%}
product__form--add-to-cart{% if section.settings.product_form_width == 'large' %} product__form--full-width{% endif %}
{%- endcapture -%}
{% form 'product', product, id:form_id, class:form_class, data-cart-form: '' %}
{% comment %}
Select element hidden when JS initializes. Safeguard for JS-disabled.
{% endcomment %}
<select name="id" id="ProductSelect-{{ section.id }}">
{% for variant in product.variants %}
<option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} {% unless variant.available %} disabled="disabled" {% endunless %} value="{{ variant.id }}" data-sku="{{ variant.sku }}">{{ variant.title }} - {% if variant.available %}{{ variant.price | money_with_currency }}{% else %}{{ 'products.product.sold_out' | t }}{% endif %}</option>
{% endfor %}
</select>
{% if section.settings.show_quantity_selector %}
<div class="product__quantity quantity-wrapper">
<label for="Quantity" class="product__quantity-label">{{ 'products.product.quantity' | t }}</label>
<input type="number" id="Quantity"
class="quantity-input"
name="quantity" value="1" min="1">
</div>
{% endif %}
{% assign price = current_variant.price | money_without_trailing_zeros %}
<p class="product__price{% if shop.taxes_included or shop.shipping_policy.body != blank %} product__price--has-policies{% endif %}">
<meta itemprop="priceCurrency" content="{{ cart.currency.iso_code }}">
<meta itemprop="price" content="{{ current_variant.price | divided_by: 100.00 }}">
{% if product.compare_at_price_max > product.price %}
<span class="visually-hidden">{{ 'products.general.regular_price' | t }}</span>
<span class="product__price--reg">{{ current_variant.compare_at_price | money_without_trailing_zeros }}</span>
<span class="product__price--sale">{{ 'products.general.now_price_html' | t: price: price }}</span>
{% else %}
<span class="visually-hidden">{{ 'products.general.regular_price' | t }}</span>
<span class="product__price--reg js-price">
{{ price }}
</span>
{% endif %}
{% include 'product-unit-price', variant: current_variant %}
</p>
{%- if shop.taxes_included or shop.shipping_policy.body != blank -%}
<div class="product__policies rte">
{%- if shop.taxes_included -%}
{{ 'products.general.include_taxes' | t }}
{%- endif -%}
{%- if shop.shipping_policy.body != blank -%}
{{ 'products.general.shipping_policy_html' | t: link: shop.shipping_policy.url }}
{%- endif -%}
</div>
{%- endif -%}
{% if product.available %}
<button id="AddToCart-{{ section.id }}" type="submit" name="add" class="btn btn--add-to-cart{% if section.settings.enable_payment_button %} btn--secondary-accent{% endif %}">
<span class="btn__text">{{ 'products.product.add_to_cart' | t }}</span>
</button>
{% else %}
<button type="button" class="btn btn--add-to-cart btn--disabled{% if section.settings.enable_payment_button %} btn--secondary-accent{% endif %}" disabled="disabled">
{{ 'products.product.sold_out' | t }}
</button>
{% endif %}
{% if section.settings.enable_payment_button %}
{{ form | payment_button }}
{% endif %}
{% endform %}
User | Count |
---|---|
431 | |
195 | |
99 | |
90 | |
87 |