Edit product page for Boundless

Solved
NatalieNdlovu
Tourist
5 0 2

I would like to edit the product template code for my store so that on mobile version the product description comes before the add to cart button. How can I do this? Thank you for your help! 

0 Likes
dmwwebartisan
Shopify Partner
5673 1294 1656

@NatalieNdlovu 

Please share your Product template code . I help you.

Thanks!

If helpful then please Like and Accept Solution.
Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Advanced Shopify Page Builder to customize your pages - check here PageFly App
0 Likes
suyash1
Shopify Partner
2687 282 446

@NatalieNdlovu - can you please share website link?

You are welcome to contact me, my email - suyash.patankar@gmail.com
Free Shopify solutions/tutorials on youtube
#1 page builder app on Shopify - for FREE! PageFly
0 Likes
NatalieNdlovu
Tourist
5 0 2

Here is product template code 

 

<div itemscope itemtype="http://schema.org/Product" data-section-id="{{ section.id }}" data-section-type="product" data-history-state>

{% comment %}
Get first variant, or deep linked one
{% endcomment %}
{% assign current_variant = product.selected_or_first_available_variant %}

{% comment %}
Get first image
{% endcomment %}
{% assign featured_image = current_variant.featured_image | default: product.featured_image %}

<meta itemprop="url" content="{{ shop.url }}{{ product.url }}">
<meta itemprop="image" content="{{ featured_image | img_url: 'grande' }}">
<meta itemprop="name" content="{{ product.title }}{% if product.variants.size > 1 and product.selected_variant %} - {{ current_variant.title }}{% endif %}">

<div class="product grid grid--uniform grid--no-gutters" itemprop="offers" itemscope itemtype="http://schema.org/Offer">

{% assign first_image = featured_image %}

{% if product.images.size > 1 and section.settings.skip_first_product_image and first_image == product.featured_image %}
{% assign first_image = product.images[1] %}
{% endif %}

{% comment %}
Set variables for product image grid
{% endcomment %}
{% if section.settings.product_image_type == 'portrait' %}
{% if product.images.size == 1 %}
{% assign grid_item_width = '' %}
{% elsif product.images.size == 2 and section.settings.skip_first_product_image %}
{% assign grid_item_width = '' %}
{% else %}
{% assign grid_item_width = 'medium-up--one-half' %}
{% endif %}
{% assign is_portrait_image = true %}
{% else %}
{% assign grid_item_width = '' %}
{% endif %}

{% if product.images.size > 0 %}
<div class="product__photo grid__item {{ grid_item_width }}">
{% for image in product.images %}
{% assign img_url = image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}
<div data-image-id="{{ image.id }}" class="product__photo--single product__photo--variant-wrapper
{% if product.images.size > 1 and section.settings.skip_first_product_image %}
fade-in
{% if forloop.first == true %} hide{% endif %}
{% if forloop.index != 2 %} hide{% endif %}
{% else %}
{% unless featured_image == image %} hide{% endunless %}
{% endif %}" style="padding-top:{{ 1 | divided_by: image.aspect_ratio | times: 100}}%;">
<img class="product__photo--variant lazyload"
src="{{ image | img_url: '300x' }}"
data-src="{{ img_url }}"
data-widths="[360, 540, 720, 900, 1080, 1296, 1512, 1728, 1944, 2048, 4472]"
data-aspectratio="{{ image.aspect_ratio }}"
data-sizes="auto"
alt="{{ image.alt | escape }}">
</div>
{% endfor %}

<noscript>
<img class="product__photo--variant" src="{{ first_image | img_url: '2048x2048' }}" alt="{{ image.alt | escape }}">
</noscript>
</div>

{% comment %}
Counting images shown on the page
{% endcomment %}
{% assign index = 1 %}

{% comment %}
If we have portrait images, we show two per row, so let's get a second image.
That image will be moved down below the description on mobile, hence why we'll use
`small--hide`. The image moved down is stored in the variable `duplicate_image`.
{% endcomment %}

{% if is_portrait_image %}
{% for image in product.images %}
{% unless image == first_image %}
{% unless section.settings.skip_first_product_image and image == product.featured_image %}
<div class="product__photo grid__item small--hide {{ grid_item_width }}">
<noscript>
<img src="{{ image | img_url: '2048x2048' }}" alt="{{ image.alt | escape }}">
</noscript>
{% assign img_url = image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}
<div class="product__photo--single" style="padding-top:{{ 1 | divided_by: image.aspect_ratio | times: 100}}%;">
<img class="lazyload"
src="{{ image | img_url: '300x' }}"
data-src="{{ img_url }}"
data-widths="[360, 540, 720, 900, 1080, 1296, 1512, 1728, 1944, 2048, 4472]"
data-aspectratio="{{ image.aspect_ratio }}"
data-sizes="auto"
alt="{{ image.alt | escape }}">
</div>
</div>
{% assign index = index | plus: 1 %}
{% assign index_offset = forloop.index %}
{% assign duplicate_image = image %}
{% break %}
{% endunless %}
{% endunless %}
{% endfor %}
{% endif %}

{% endif %}

<div class="product__details grid__item">
<div class="grid grid--no-gutters product__details-content">
<div class="grid__item {% if section.settings.product_form_width == 'large' %}medium-up--three-twelfths medium-up--push-one-fifth{% else %}large-up--two-twelfths large-up--push-two-twelfths medium-up--three-twelfths medium-up--push-one-twelfth{% endif %}">
{% if section.settings.show_vendor %}
<p class="product-item__vendor small--text-center">{{ product.vendor }}</p>
{% endif %}
<h1 class="h2" itemprop="name">{{ product.title }}</h1>
<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 and product.selling_plan_groups == empty %} 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 %}
</div>
<div class="grid__item {% if section.settings.product_form_width == 'large' %}medium-up--four-twelfths medium-up--push-three-tenths{% else %}large-up--one-half large-up--push-three-twelfths medium-up--six-twelfths medium-up--push-two-twelfths{% endif %}">
<div class="product-single__errors"></div>
<div class="product-single__description rte" itemprop="description">
{{ product.description }}
</div>
{% if section.settings.social_sharing_products %}
{% include 'social-sharing', share_title: product.title, share_permalink: product.url, share_image: product %}
{% endif %}
</div>
</div>
</div>

{% comment %}
Show second product photo after description on mobile if
image setting style is 'portrait' and there is a duplicate_image to show
{% endcomment %}
{% if is_portrait_image and product.images.size > 1 and duplicate_image %}
<div class="product__photo grid__item medium-up--hide {{ grid_item_width }}">
<noscript>
<img src="{{ duplicate_image | img_url: '2048x2048' }}" alt="{{ duplicate_image.alt | escape }}">
</noscript>
{% assign img_url = duplicate_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}
<div class="product__photo--single" style="padding-top:{{ 1 | divided_by: duplicate_image.aspect_ratio | times: 100}}%;">
<img class="lazyload"
src="{{ duplicate_image | img_url: '300x' }}"
data-src="{{ img_url }}"
data-widths="[360, 540, 720, 900, 1080, 1296, 1512, 1728, 1944, 2048, 4472]"
data-aspectratio="{{ duplicate_image.aspect_ratio }}"
data-sizes="auto"
alt="{{ duplicate_image.alt | escape }}">
</div>
</div>
{% endif %}

{% comment %}
Show other product images below product info if there's any left to show
{% endcomment %}
{% if index < product.images.size %}
{% for image in product.images offset:index_offset %}
{% unless image == first_image %}
{% unless section.settings.skip_first_product_image and image == product.featured_image %}
<div class="product__photo grid__item {{ grid_item_width }}">
<noscript>
<img src="{{ image | img_url: '2048x2048' }}" alt="{{ image.alt | escape }}">
</noscript>
{% assign img_url = image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}
<div class="product__photo--single" style="padding-top:{{ 1 | divided_by: image.aspect_ratio | times: 100}}%;">
<img class="lazyload"
src="{{ image | img_url: '300x' }}"
data-src="{{ img_url }}"
data-widths="[360, 540, 720, 900, 1080, 1296, 1512, 1728, 1944, 2048, 4472]"
data-aspectratio="{{ image.aspect_ratio }}"
data-sizes="auto"
alt="{{ image.alt | escape }}">
</div>
</div>
{% endunless %}
{% endunless %}
{% endfor %}
{% endif %}
</div>
</div>

{% unless product == empty %}
<script type="application/json" id="ProductJson-{{ section.id }}">
{{ product | json }}
</script>
{% endunless %}

0 Likes
NatalieNdlovu
Tourist
5 0 2
0 Likes
dmwwebartisan
Shopify Partner
5673 1294 1656

Please share webshop URL !

Thanks!

If helpful then please Like and Accept Solution.
Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Advanced Shopify Page Builder to customize your pages - check here PageFly App
0 Likes
dmwwebartisan
Shopify Partner
5673 1294 1656

Please replace following code .

<div itemscope itemtype="http://schema.org/Product" data-section-id="{{ section.id }}" data-section-type="product" data-history-state>

{% comment %}
Get first variant, or deep linked one
{% endcomment %}
{% assign current_variant = product.selected_or_first_available_variant %}

{% comment %}
Get first image
{% endcomment %}
{% assign featured_image = current_variant.featured_image | default: product.featured_image %}

<meta itemprop="url" content="{{ shop.url }}{{ product.url }}">
<meta itemprop="image" content="{{ featured_image | img_url: 'grande' }}">
<meta itemprop="name" content="{{ product.title }}{% if product.variants.size > 1 and product.selected_variant %} - {{ current_variant.title }}{% endif %}">

<div class="product grid grid--uniform grid--no-gutters" itemprop="offers" itemscope itemtype="http://schema.org/Offer">

{% assign first_image = featured_image %}

{% if product.images.size > 1 and section.settings.skip_first_product_image and first_image == product.featured_image %}
{% assign first_image = product.images[1] %}
{% endif %}

{% comment %}
Set variables for product image grid
{% endcomment %}
{% if section.settings.product_image_type == 'portrait' %}
{% if product.images.size == 1 %}
{% assign grid_item_width = '' %}
{% elsif product.images.size == 2 and section.settings.skip_first_product_image %}
{% assign grid_item_width = '' %}
{% else %}
{% assign grid_item_width = 'medium-up--one-half' %}
{% endif %}
{% assign is_portrait_image = true %}
{% else %}
{% assign grid_item_width = '' %}
{% endif %}

{% if product.images.size > 0 %}
<div class="product__photo grid__item {{ grid_item_width }}">
{% for image in product.images %}
{% assign img_url = image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}
<div data-image-id="{{ image.id }}" class="product__photo--single product__photo--variant-wrapper
{% if product.images.size > 1 and section.settings.skip_first_product_image %}
fade-in
{% if forloop.first == true %} hide{% endif %}
{% if forloop.index != 2 %} hide{% endif %}
{% else %}
{% unless featured_image == image %} hide{% endunless %}
{% endif %}" style="padding-top:{{ 1 | divided_by: image.aspect_ratio | times: 100}}%;">
<img class="product__photo--variant lazyload"
src="{{ image | img_url: '300x' }}"
data-src="{{ img_url }}"
data-widths="[360, 540, 720, 900, 1080, 1296, 1512, 1728, 1944, 2048, 4472]"
data-aspectratio="{{ image.aspect_ratio }}"
data-sizes="auto"
alt="{{ image.alt | escape }}">
</div>
{% endfor %}

<noscript>
<img class="product__photo--variant" src="{{ first_image | img_url: '2048x2048' }}" alt="{{ image.alt | escape }}">
</noscript>
</div>

{% comment %}
Counting images shown on the page
{% endcomment %}
{% assign index = 1 %}

{% comment %}
If we have portrait images, we show two per row, so let's get a second image.
That image will be moved down below the description on mobile, hence why we'll use
`small--hide`. The image moved down is stored in the variable `duplicate_image`.
{% endcomment %}

{% if is_portrait_image %}
{% for image in product.images %}
{% unless image == first_image %}
{% unless section.settings.skip_first_product_image and image == product.featured_image %}
<div class="product__photo grid__item small--hide {{ grid_item_width }}">
<noscript>
<img src="{{ image | img_url: '2048x2048' }}" alt="{{ image.alt | escape }}">
</noscript>
{% assign img_url = image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}
<div class="product__photo--single" style="padding-top:{{ 1 | divided_by: image.aspect_ratio | times: 100}}%;">
<img class="lazyload"
src="{{ image | img_url: '300x' }}"
data-src="{{ img_url }}"
data-widths="[360, 540, 720, 900, 1080, 1296, 1512, 1728, 1944, 2048, 4472]"
data-aspectratio="{{ image.aspect_ratio }}"
data-sizes="auto"
alt="{{ image.alt | escape }}">
</div>
</div>
{% assign index = index | plus: 1 %}
{% assign index_offset = forloop.index %}
{% assign duplicate_image = image %}
{% break %}
{% endunless %}
{% endunless %}
{% endfor %}
{% endif %}

{% endif %}

<div class="product__details grid__item">
<div class="grid grid--no-gutters product__details-content">
<div class="grid__item {% if section.settings.product_form_width == 'large' %}medium-up--three-twelfths medium-up--push-one-fifth{% else %}large-up--two-twelfths large-up--push-two-twelfths medium-up--three-twelfths medium-up--push-one-twelfth{% endif %}">
{% if section.settings.show_vendor %}
<p class="product-item__vendor small--text-center">{{ product.vendor }}</p>
{% endif %}
<h1 class="h2" itemprop="name">{{ product.title }}</h1>
<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 -%}

<div class="product-single__description_mobile rte" itemprop="description">
{{ product.description }}
</div>


{% if product.available %}
<button id="AddToCart-{{ section.id }}" type="submit" name="add" class="btn btn--add-to-cart{% if section.settings.enable_payment_button and product.selling_plan_groups == empty %} 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 %}
</div>
<div class="grid__item {% if section.settings.product_form_width == 'large' %}medium-up--four-twelfths medium-up--push-three-tenths{% else %}large-up--one-half large-up--push-three-twelfths medium-up--six-twelfths medium-up--push-two-twelfths{% endif %}">
<div class="product-single__errors"></div>
<div class="product-single__description rte" itemprop="description">
{{ product.description }}
</div>
{% if section.settings.social_sharing_products %}
{% include 'social-sharing', share_title: product.title, share_permalink: product.url, share_image: product %}
{% endif %}
</div>
</div>
</div>

{% comment %}
Show second product photo after description on mobile if
image setting style is 'portrait' and there is a duplicate_image to show
{% endcomment %}
{% if is_portrait_image and product.images.size > 1 and duplicate_image %}
<div class="product__photo grid__item medium-up--hide {{ grid_item_width }}">
<noscript>
<img src="{{ duplicate_image | img_url: '2048x2048' }}" alt="{{ duplicate_image.alt | escape }}">
</noscript>
{% assign img_url = duplicate_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}
<div class="product__photo--single" style="padding-top:{{ 1 | divided_by: duplicate_image.aspect_ratio | times: 100}}%;">
<img class="lazyload"
src="{{ duplicate_image | img_url: '300x' }}"
data-src="{{ img_url }}"
data-widths="[360, 540, 720, 900, 1080, 1296, 1512, 1728, 1944, 2048, 4472]"
data-aspectratio="{{ duplicate_image.aspect_ratio }}"
data-sizes="auto"
alt="{{ duplicate_image.alt | escape }}">
</div>
</div>
{% endif %}

{% comment %}
Show other product images below product info if there's any left to show
{% endcomment %}
{% if index < product.images.size %}
{% for image in product.images offset:index_offset %}
{% unless image == first_image %}
{% unless section.settings.skip_first_product_image and image == product.featured_image %}
<div class="product__photo grid__item {{ grid_item_width }}">
<noscript>
<img src="{{ image | img_url: '2048x2048' }}" alt="{{ image.alt | escape }}">
</noscript>
{% assign img_url = image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}
<div class="product__photo--single" style="padding-top:{{ 1 | divided_by: image.aspect_ratio | times: 100}}%;">
<img class="lazyload"
src="{{ image | img_url: '300x' }}"
data-src="{{ img_url }}"
data-widths="[360, 540, 720, 900, 1080, 1296, 1512, 1728, 1944, 2048, 4472]"
data-aspectratio="{{ image.aspect_ratio }}"
data-sizes="auto"
alt="{{ image.alt | escape }}">
</div>
</div>
{% endunless %}
{% endunless %}
{% endfor %}
{% endif %}
</div>
</div>

{% unless product == empty %}
<script type="application/json" id="ProductJson-{{ section.id }}">
{{ product | json }}
</script>
{% endunless %}
If helpful then please Like and Accept Solution.
Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Advanced Shopify Page Builder to customize your pages - check here PageFly App
dmwwebartisan
Shopify Partner
5673 1294 1656

This is an accepted solution.

@NatalieNdlovu 

Please add the following code at the bottom of your assets/theme.scss.liquid file.

@media only screen and (max-width: 749px) {
.product-single__description{ display:none;}
.product-single__description_mobile{ display:block;}
}

@media only screen and (min-width: 750px) {
.product-single__description{ display:block;}
.product-single__description_mobile{ display:none;}
}

Hope this works.

Thanks!

If helpful then please Like and Accept Solution.
Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Advanced Shopify Page Builder to customize your pages - check here PageFly App
dmwwebartisan
Shopify Partner
5673 1294 1656

Thanks!

If helpful then please Like and Accept Solution.
Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Advanced Shopify Page Builder to customize your pages - check here PageFly App
0 Likes