Add to Cart button for Boundless

csadmin
Tourist
7 0 1

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!

0 Likes
Wahab_Ahmad
Shopify Partner
696 110 162

Hello @csadmin,

                                  Paste shopify store link. 

0 Likes
csadmin
Tourist
7 0 1

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!

0 Likes
WherezzWally
New Member
2 0 0

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

0 Likes
vever
New Member
1 0 0

Hi, Newbie here... i did copy paste the code on my boundless and it works great... thank you for that... my question is, when i view it on my phone or PC same as below. It say Default title... can i change that? tnx...

 

Screen Shot 2021-01-16 at 6.49.18 AM.jpg

0 Likes
WherezzWally
New Member
2 0 0

Hey, 

The only way I've found to fix that is by adding a varient to the product

0 Likes