Product pages shows the wrong price

charlinectw
Tourist
13 0 3

Hi, I have a problem with my Shopify product pages. They show the wrong pricing (f.i. my product is $25, price shown on the product page is $30. Product is $425, price is shown as $500). It's only the product pages - The collection pages and checkout price are correct. Can anyone help with this?

Replies 13 (13)

Propero
Shopify Partner
895 101 160

@charlinectw ,

did anyone work on customisation of theme recently, looks like money format and roundup issue accidentally creeped in. Try to paste code where prices are displayed from product-template.liquid or product-price.liquid or equivalent files of your theme

- Was my reply helpful? Click Like or Click Accept as Solution
To hire: email us at shopify@propero.in
checkout our app https://apps.shopify.com/picamaze
charlinectw
Tourist
13 0 3

Not that I would know, unless someone else has touched it. Is this something you could help me with at all?

 

I have attached the file codes below:

product-template.liquid

 

 
Click to expand...
{%- render 'product-template',
  product: product,
  section_id: product.id,
 
  product_shipping_callout: section.settings.product_shipping_callout,
  image_container_width: section.settings.product_image_size,
  product_image_type: section.settings.product_image_type,
  product_zoom_enable: section.settings.product_zoom_enable,
  variant_type: section.settings.variant_type,
  variant_labels_enable: section.settings.variant_labels_enable,
  sku_enable: section.settings.sku_enable,
  quantity_enable: section.settings.quantity_enable,
  inventory_enable: section.settings.inventory_enable,
  inventory_threshold: section.settings.inventory_threshold,
  inventory_transfers_enable: section.settings.inventory_transfers_enable,
  surface_pickup_enable: section.settings.surface_pickup_enable,
  enable_payment_button: section.settings.enable_payment_button,
  social_enable: section.settings.social_enable,
  video_looping: section.settings.enable_video_looping,
  video_style: section.settings.product_video_style
-%}
 
{%- if settings.enable_product_reviews -%}
  <div id="Reviews-{{ product.id }}" class="index-section product-reviews product-reviews--full">
    <div class="page-width">
      <div id="shopify-product-reviews" data-id="{{product.id}}">{{ product.metafields.spr.reviews }}</div>
    </div>
  </div>
{%- endif -%}
 
{% schema %}
  {
    "name": "Product pages",
    "settings": [
      {
        "type": "header",
        "content": "Media"
      },
      {
        "type": "select",
        "id": "product_image_size",
        "label": "Image size",
        "default": "large",
        "options": [
          {
            "value": "small",
            "label": "Small"
          },
          {
            "value": "medium",
            "label": "Medium"
          },
          {
            "value": "large",
            "label": "Large"
          }
        ]
      },
      {
        "type": "select",
        "id": "product_image_type",
        "label": "Image style",
        "default": "stacked",
        "options": [
          {
            "value": "stacked",
            "label": "Stacked"
          },
          {
            "value": "slider",
            "label": "Fade"
          }
        ]
      },
      {
        "type": "checkbox",
        "id": "product_zoom_enable",
        "label": "Enable image zoom",
        "default": true
      },
      {
        "type": "checkbox",
        "id": "enable_video_looping",
        "label": "Enable video looping",
        "default": true
      },
      {
        "type": "select",
        "id": "product_video_style",
        "label": "Video style",
        "default": "muted",
        "options": [
          {
            "value": "muted",
            "label": "Video without sound"
          },
          {
            "value": "unmuted",
            "label": "Video with sound"
          }
        ],
        "info": "Video with sound will not autoplay"
      },
      {
        "type": "header",
        "content": "Product settings"
      },
      {
        "type": "checkbox",
        "id": "enable_payment_button",
        "label": "Show dynamic checkout button",
        "info": "Lets customers check out directly using a familiar payment method. [Learn more](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
        "default": true
      },
      {
        "type": "text",
        "id": "product_shipping_callout",
        "label": "Callout text",
        "info": "E.g. Free shipping + returns"
      },
      {
        "type": "select",
        "id": "variant_type",
        "label": "Variant picker style",
        "default": "button",
        "options": [
          {
            "value": "button",
            "label": "Buttons"
          },
          {
            "value": "dropdown",
            "label": "Dropdown"
          }
        ]
      },
      {
        "type": "checkbox",
        "id": "variant_labels_enable",
        "label": "Show variant labels",
        "default": true
      },
      {
        "type": "checkbox",
        "id": "sku_enable",
        "label": "Show SKU"
      },
      {
        "type": "checkbox",
        "id": "inventory_enable",
        "label": "Show inventory notice"
      },
      {
        "type": "range",
        "id": "inventory_threshold",
        "label": "Inventory threshold",
        "default": 10,
        "min": 0,
        "max": 20,
        "step": 2
      },
      {
        "type": "checkbox",
        "id": "inventory_transfers_enable",
        "label": "Show inventory transfer notice",
        "info": "Learn how to create inventory transfers [here](https://help.shopify.com/en/manual/products/inventory/transfers/create-transfer)"
      },
      {
        "type": "checkbox",
        "id": "quantity_enable",
        "label": "Show quantity field"
      },
      {
        "type": "checkbox",
        "id": "surface_pickup_enable",
        "label": "Enable pickup availability feature",
      },
      {
        "type": "checkbox",
        "id": "social_enable",
        "label": "Enable social sharing",
        "default": true
      }
    ]
  }
{% endschema %}
 
 
{% if product.metafields.loox.num_reviews %}
<script id="looxSchemaJson" type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "Product",
"@id": {{ canonical_url | json }},
"aggregateRating": {
"@type": "AggregateRating",
"ratingValue": "{{ product.metafields.loox.avg_rating }}",
"reviewCount": "{{ product.metafields.loox.num_reviews }}"
},
"name": {{ product.title | json }}
}
</script>
{% endif %}
 
 
<div id="looxReviews" data-product-id="{{product.id}}" class="loox-reviews-default">{{ product.metafields.loox.reviews }}</div>
 
 
product-template.liquid
 

{% comment %}
The contents of the product.liquid template can be found in /sections/product-template.liquid
{% endcomment %}

{% section 'product-template' %}
{% section 'product-recommendations' %}

{% if collection %}
<div class="text-center return-link-wrapper page-width">
<a href="{{ collection.url }}" class="btn btn--secondary btn--has-icon-before return-link">
{% include 'icon-arrow-left' %}
{{ 'products.product.back_to_collection' | t: title: collection.title }}
</a>
</div>
{% endif %}

<script>
// Override default values of shop.strings for each template.
// Alternate product templates can change values of
// add to cart button, sold out, and unavailable states here.
theme.productStrings = {
addToCart: {{ 'products.product.add_to_cart' | t | json }},
soldOut: {{ 'products.product.sold_out' | t | json }},
unavailable: {{ 'products.product.unavailable' | t | json }}
}
</script>

{% assign current_variant = product.selected_or_first_available_variant %}

<script type="application/ld+json">
{
"@context": "http://schema.org/",
"@type": "Product",
"name": {{ product.title | json }},
"url": {{ shop.url | append: product.url | json }},
{%- if product.featured_media -%}
{%- assign media_size = product.featured_media.preview_image.width | append: 'x' -%}
"image": [
{{ product.featured_media | img_url: media_size | prepend: "https:" | json }}
],
{%- endif -%}
"description": {{ product.description | strip_html | json }},
{%- if current_variant.sku != blank -%}
"sku": {{ current_variant.sku | json }},
{%- endif -%}
"brand": {
"@type": "Thing",
"name": {{ product.vendor | json }}
},
"offers": [
{%- for variant in product.variants -%}
{
"@type" : "Offer",
{%- if variant.sku != blank -%}
"sku": {{ variant.sku | json }},
{%- endif -%}
"availability" : "http://schema.org/{% if variant.available %}InStock{% else %}OutOfStock{% endif %}",
"price" : {{ variant.price | divided_by: 100.00 | json }},
"priceCurrency" : {{ cart.currency.iso_code | json }},
"url" : {{ shop.url | append: variant.url | json }}
}{% unless forloop.last %},{% endunless %}
{%- endfor -%}
]
}
</script>

 

 

Thanks so much!

Propero
Shopify Partner
895 101 160

There will be another product-template.liquid under snippets 

- Was my reply helpful? Click Like or Click Accept as Solution
To hire: email us at shopify@propero.in
checkout our app https://apps.shopify.com/picamaze
charlinectw
Tourist
13 0 3

 

Click to expand...

{%- liquid
assign current_variant = product.selected_or_first_available_variant

assign product_zoom_size = '1800x1800'
assign product_image_size = '620x'

case image_container_width
when 'small'
assign product_image_width = 'medium-up--two-fifths'
assign product_description_width = 'medium-up--three-fifths'
assign product_image_size = '480x'
when 'medium'
assign product_image_width = 'medium-up--one-half'
assign product_description_width = 'medium-up--one-half'
assign product_image_size = '620x'
when 'large'
assign product_image_width = 'medium-up--three-fifths'
assign product_description_width = 'medium-up--two-fifths'
assign product_image_size = '740x'
endcase
-%}

<div id="ProductSection-{{ section_id }}"
class="product-section"
data-section-id="{{ section_id }}"
data-section-type="product-template"
{% if isModal %}
data-subsection
{% endif %}
data-variant-type="{{ variant_type }}"
{% if inventory_enable %}
data-inventory="true"
data-inventory-threshold="{{ inventory_threshold }}"
{% endif %}
{% if inventory_transfers_enable %}
data-incoming-inventory="true"
{% endif %}
{% if product_image_type == 'stacked' %}
data-images-stacked="true"
{% endif %}
data-video-style="{{ video_style }}"
{% unless isModal %}
data-enable-history-state="true"
{% endunless %}>

{%- render 'product-template-variables', product: product, current_variant: current_variant -%}

<div class="page-content">
<div class="page-width">

<div class="grid">
<div class="grid__item {{ product_image_width }}">
{%- render 'product-images',
section_id: section_id,
product: product,
product_image_type: product_image_type,
product_zoom_enable: product_zoom_enable,
product_zoom_size: product_zoom_size,
product_image_size: product_image_size,
isModal: isModal,
video_looping: video_looping,
video_style: video_style
-%}
</div>

<div class="grid__item {{ product_description_width }}{% if product_image_type == 'stacked' %} product-single__sticky{% endif %}">
<div class="product-single__meta">
<div class="product-single__header small--text-center">
{%- if settings.vendor_enable -%}
<div class="product-single__vendor">
{{ product.vendor }}
</div>
{%- endif -%}

{%- if sku_enable -%}
<p class="product-single__sku" data-sku>
{%- if current_variant.sku -%}
{{ current_variant.sku }}
{%- endif -%}
</p>
{%- endif -%}

{%- if isModal -%}
<p class="h1 product-single__title">
{{ product.title }}
</p>
{%- else -%}
<h1 class="h1 product-single__title">
{{ product.title }}
</h1>
{%- endif -%}

{%- if settings.enable_product_reviews -%}
{%- liquid
if isModal
assign review_link = product.url | within: collection | append: '#Reviews-' | append: product.id
else
assign review_link = '#Reviews-' | append: product.id
endif
-%}
<a href="{{ review_link }}" class="product-single__review-link">
<span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>
</a>
{%- endif -%}

<div class="product-single__prices">
{%- if product.compare_at_price_max > product.price -%}
{%- liquid
assign hide_sale_price = true
if current_variant.compare_at_price
assign hide_sale_price = false
endif
-%}
<span
class="visually-hidden"
aria-hidden="{{ hide_sale_price }}"
data-price-a11y>
{{ 'products.general.regular_price' | times:1.20 | t }}
</span>
<span class="{% if hide_sale_price %} hide{% endif %}" data-price-wrapper>
<span class="product__price product__price--compare" data-product-price-compare>
{%- if current_variant.compare_at_price > current_variant.price -%}
{{ current_variant.compare_at_price | times:1.20 | money }}
{%- endif -%}
</span>
</span>
<span class="visually-hidden" data-compare-a11y>{{ 'products.general.sale_price' | t }}</span>
{%- else -%}
<span class="visually-hidden" data-price-a11y>{{ 'products.general.regular_price' | t }}</span>
{%- endif -%}

<span
class="product__price{% if current_variant.compare_at_price > current_variant.price %} sale-price{% endif %}"
data-product-price>
{{ current_variant.price | times:1.20 | money }}
</span>

{%- if product_shipping_callout != blank -%}
<span class="product__note">
{{ product_shipping_callout }}
</span>
{%- endif -%}

</div>

<div data-product-unit-wrapper class="product__unit-price{% unless current_variant.unit_price_measurement %} hide{% endunless %}">
{%- capture unit_price_base_unit -%}
{%- if current_variant.unit_price_measurement -%}
{%- if current_variant.unit_price_measurement.reference_value != 1 -%}
{{ current_variant.unit_price_measurement.reference_value }}
{%- endif -%}
{{ current_variant.unit_price_measurement.reference_unit }}
{%- endif -%}
{%- endcapture -%}

{{ current_variant.unit_price | times:1.20 | money }}/{{ unit_price_base_unit }}
</div>

{%- if shop.taxes_included or shop.shipping_policy.body != blank -%}
<div class="product__policies rte">
<small>
{%- if shop.taxes_included -%}
{{ 'products.product.include_taxes' | t }}
{%- endif -%}
{%- if shop.shipping_policy.body != blank -%}
{{ 'products.product.shipping_policy_html' | t: link: shop.shipping_policy.url }}
{%- endif -%}
</small>
</div>
{%- endif -%}

{%- if inventory_enable or inventory_transfers_enable -%}
{%- assign variants_with_inventory_tracking = product.variants | where: 'inventory_management', 'shopify' -%}

<script>
// Store inventory quantities in JS because they're no longer
// available directly in JS when a variant changes.
// Have an object that holds all potential products so it works
// with quick view or with multiple featured products.
window.inventories = window.inventories || {};
window.inventories['{{section_id}}'] = {};
{%- for variant in variants_with_inventory_tracking -%}
window.inventories['{{section_id}}'][{{variant.id}}] = {
'quantity': {{ variant.inventory_quantity | default: 0 }},
'incoming': {{ variant.incoming | default: false | json }},
'next_incoming_date': {{ variant.next_incoming_date | date: format: 'date' | json }}
};
{%- endfor -%}
</script>

{%- liquid
assign inventory_visible = false
if inventory_enable and current_variant.inventory_management == 'shopify'
if current_variant.inventory_quantity <= inventory_threshold and current_variant.inventory_quantity >= 0
assign inventory_visible = true
endif
endif
if current_variant.inventory_quantity == 0 or current_variant.inventory_policy == 'continue'
assign inventory_visible = false
endif
-%}

{%- if inventory_enable -%}
<p
data-product-inventory
class="product__inventory{% unless inventory_visible %} hide{% endunless %}"
>
{%- if current_variant.available -%}
{{ 'products.product.stock_label' | t: count: current_variant.inventory_quantity }}
{%- endif -%}
</p>
{%- endif -%}

{%- if inventory_transfers_enable -%}
<div
data-product-incoming-inventory
class="product__inventory{% if inventory_visible %} hide{% endif %}">
{%- if current_variant.incoming and inventory_visible == false -%}
{%- if current_variant.next_incoming_date -%}
{%- assign date = current_variant.next_incoming_date | date: format: 'date' -%}
{%- if current_variant.available -%}
{{ 'products.product.will_not_ship_until' | t: date: date }}
{%- else -%}
{{ 'products.product.will_be_in_stock_after' | t: date: date }}
{%- endif -%}
{%- else -%}
{{ 'products.product.waiting_for_stock' | t }}
{%- endif -%}
{%- endif -%}
</div>
{%- endif -%}
{%- endif -%}
</div>

{%- unless isModal -%}
{% comment %}
Shopify's product form attaches a number of tracking
scripts that cause slower load times and false statistics.
Quick view modals request these on-demand.
{% endcomment %}
{%- render 'product-form',
section_id: section_id,
product: product,
current_variant: current_variant,
variant_type: variant_type,
variant_labels_enable: variant_labels_enable,
quantity_enable: quantity_enable,
enable_payment_button: enable_payment_button
-%}
{%- else -%}
<div
id="ProductFormPlaceholder-{{ section_id }}"
data-url="{{ product.url | within: collection }}"
data-template="{{ product.template_suffix }}"
class="product-form-holder">
{%- if product.options.size > 0 -%}
{%- for i in (1..product.options.size) -%}
<div class="placeholder-content" style="min-height: 86px; max-width: 66%;"></div>
{%- endfor -%}
{%- endif -%}
<div class="placeholder-content" style="min-height: 86px;"></div>
</div>
{%- endunless -%}

{%- if settings.trust_image != blank -%}
<div class="aos-animate trust-image" style="max-width: {{ settings.trust_image.width }}px;">
<div class="image-wrap " style="height: 0; padding-bottom: {{ 100 | divided_by: settings.trust_image.aspect_ratio }}%;">
{%- assign img_url = settings.trust_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
<img class="lazyload"
data-src="{{ img_url }}"
data-widths="[360, 540]"
data-aspectratio="{{ settings.trust_image.aspect_ratio }}"
data-sizes="auto"
alt="{{ settings.trust_image.alt }}">
<noscript>
<img class="lazyloaded" src="{{ settings.trust_image | img_url: '540x' }}" alt="{{ settings.trust_image.alt }}">
</noscript>
</div>
</div>
{%- endif -%}

{%- if surface_pickup_enable -%}
<div data-store-availability
data-product-name="{{ product.title | escape }}"
data-base-url="{{ shop.url }}{{ routes.root_url }}"
></div>
{%- endif -%}

{%- if settings.additional_content_style == 'expandable' -%}
{%- render 'product-additional-content', product: product, section_id: section_id -%}
{%- else -%}
{%- render 'product-additional-tabs', product: product, section_id: section_id -%}
{%- endif -%}

{%- if social_enable -%}
{%- render 'social-sharing', share_title: product.title, share_permalink: product.url, share_image: product -%}
{%- endif -%}
</div>
</div>
</div>

</div>
</div>
</div>

 

Propero
Shopify Partner
895 101 160

@charlinectw ,

Please remove all instances of " | times:1.20 " this is basically increasing your product price by 20% by multiplying with 1.2 not sure why that should be the case.

Please create a backup of entire theme by duplicating it just in case things don't  go as expected,

All the best!

 

- Was my reply helpful? Click Like or Click Accept as Solution
To hire: email us at shopify@propero.in
checkout our app https://apps.shopify.com/picamaze
charlinectw
Tourist
13 0 3

 

Click to expand...

I seemed to have 'broken' the code / not removed enough:

 

{%- liquid
assign current_variant = product.selected_or_first_available_variant

assign product_zoom_size = '1800x1800'
assign product_image_size = '620x'

case image_container_width
when 'small'
assign product_image_width = 'medium-up--two-fifths'
assign product_description_width = 'medium-up--three-fifths'
assign product_image_size = '480x'
when 'medium'
assign product_image_width = 'medium-up--one-half'
assign product_description_width = 'medium-up--one-half'
assign product_image_size = '620x'
when 'large'
assign product_image_width = 'medium-up--three-fifths'
assign product_description_width = 'medium-up--two-fifths'
assign product_image_size = '740x'
endcase
-%}

<div id="ProductSection-{{ section_id }}"
class="product-section"
data-section-id="{{ section_id }}"
data-section-type="product-template"
{% if isModal %}
data-subsection
{% endif %}
data-variant-type="{{ variant_type }}"
{% if inventory_enable %}
data-inventory="true"
data-inventory-threshold="{{ inventory_threshold }}"
{% endif %}
{% if inventory_transfers_enable %}
data-incoming-inventory="true"
{% endif %}
{% if product_image_type == 'stacked' %}
data-images-stacked="true"
{% endif %}
data-video-style="{{ video_style }}"
{% unless isModal %}
data-enable-history-state="true"
{% endunless %}>

{%- render 'product-template-variables', product: product, current_variant: current_variant -%}

<div class="page-content">
<div class="page-width">

<div class="grid">
<div class="grid__item {{ product_image_width }}">
{%- render 'product-images',
section_id: section_id,
product: product,
product_image_type: product_image_type,
product_zoom_enable: product_zoom_enable,
product_zoom_size: product_zoom_size,
product_image_size: product_image_size,
isModal: isModal,
video_looping: video_looping,
video_style: video_style
-%}
</div>

<div class="grid__item {{ product_description_width }}{% if product_image_type == 'stacked' %} product-single__sticky{% endif %}">
<div class="product-single__meta">
<div class="product-single__header small--text-center">
{%- if settings.vendor_enable -%}
<div class="product-single__vendor">
{{ product.vendor }}
</div>
{%- endif -%}

{%- if sku_enable -%}
<p class="product-single__sku" data-sku>
{%- if current_variant.sku -%}
{{ current_variant.sku }}
{%- endif -%}
</p>
{%- endif -%}

{%- if isModal -%}
<p class="h1 product-single__title">
{{ product.title }}
</p>
{%- else -%}
<h1 class="h1 product-single__title">
{{ product.title }}
</h1>
{%- endif -%}

{%- if settings.enable_product_reviews -%}
{%- liquid
if isModal
assign review_link = product.url | within: collection | append: '#Reviews-' | append: product.id
else
assign review_link = '#Reviews-' | append: product.id
endif
-%}
<a href="{{ review_link }}" class="product-single__review-link">
<span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>
</a>
{%- endif -%}

<div class="product-single__prices">
{%- if product.compare_at_price_max > product.price -%}
{%- liquid
assign hide_sale_price = true
if current_variant.compare_at_price
assign hide_sale_price = false
endif
-%}
<span
class="visually-hidden"
aria-hidden="{{ hide_sale_price }}"
data-price-a11y>
{{ 'products.general.regular_price' t }}
</span>
<span class="{% if hide_sale_price %} hide{% endif %}" data-price-wrapper>
<span class="product__price product__price--compare" data-product-price-compare>
{%- if current_variant.compare_at_price > current_variant.price -%}
{{ current_variant.compare_at_price | times:1.20 | money }}
{%- endif -%}
</span>
</span>
<span class="visually-hidden" data-compare-a11y>{{ 'products.general.sale_price' | t }}</span>
{%- else -%}
<span class="visually-hidden" data-price-a11y>{{ 'products.general.regular_price' | t }}</span>
{%- endif -%}

<span
class="product__price{% if current_variant.compare_at_price > current_variant.price %} sale-price{% endif %}"
data-product-price>
{{ current_variant.price money }}
</span>

{%- if product_shipping_callout != blank -%}
<span class="product__note">
{{ product_shipping_callout }}
</span>
{%- endif -%}

</div>

<div data-product-unit-wrapper class="product__unit-price{% unless current_variant.unit_price_measurement %} hide{% endunless %}">
{%- capture unit_price_base_unit -%}
{%- if current_variant.unit_price_measurement -%}
{%- if current_variant.unit_price_measurement.reference_value != 1 -%}
{{ current_variant.unit_price_measurement.reference_value }}
{%- endif -%}
{{ current_variant.unit_price_measurement.reference_unit }}
{%- endif -%}
{%- endcapture -%}

{{ current_variant.unit_price money }}/{{ unit_price_base_unit }}
</div>

{%- if shop.taxes_included or shop.shipping_policy.body != blank -%}
<div class="product__policies rte">
<small>
{%- if shop.taxes_included -%}
{{ 'products.product.include_taxes' | t }}
{%- endif -%}
{%- if shop.shipping_policy.body != blank -%}
{{ 'products.product.shipping_policy_html' | t: link: shop.shipping_policy.url }}
{%- endif -%}
</small>
</div>
{%- endif -%}

{%- if inventory_enable or inventory_transfers_enable -%}
{%- assign variants_with_inventory_tracking = product.variants | where: 'inventory_management', 'shopify' -%}

<script>
// Store inventory quantities in JS because they're no longer
// available directly in JS when a variant changes.
// Have an object that holds all potential products so it works
// with quick view or with multiple featured products.
window.inventories = window.inventories || {};
window.inventories['{{section_id}}'] = {};
{%- for variant in variants_with_inventory_tracking -%}
window.inventories['{{section_id}}'][{{variant.id}}] = {
'quantity': {{ variant.inventory_quantity | default: 0 }},
'incoming': {{ variant.incoming | default: false | json }},
'next_incoming_date': {{ variant.next_incoming_date | date: format: 'date' | json }}
};
{%- endfor -%}
</script>

{%- liquid
assign inventory_visible = false
if inventory_enable and current_variant.inventory_management == 'shopify'
if current_variant.inventory_quantity <= inventory_threshold and current_variant.inventory_quantity >= 0
assign inventory_visible = true
endif
endif
if current_variant.inventory_quantity == 0 or current_variant.inventory_policy == 'continue'
assign inventory_visible = false
endif
-%}

{%- if inventory_enable -%}
<p
data-product-inventory
class="product__inventory{% unless inventory_visible %} hide{% endunless %}"
>
{%- if current_variant.available -%}
{{ 'products.product.stock_label' | t: count: current_variant.inventory_quantity }}
{%- endif -%}
</p>
{%- endif -%}

{%- if inventory_transfers_enable -%}
<div
data-product-incoming-inventory
class="product__inventory{% if inventory_visible %} hide{% endif %}">
{%- if current_variant.incoming and inventory_visible == false -%}
{%- if current_variant.next_incoming_date -%}
{%- assign date = current_variant.next_incoming_date | date: format: 'date' -%}
{%- if current_variant.available -%}
{{ 'products.product.will_not_ship_until' | t: date: date }}
{%- else -%}
{{ 'products.product.will_be_in_stock_after' | t: date: date }}
{%- endif -%}
{%- else -%}
{{ 'products.product.waiting_for_stock' | t }}
{%- endif -%}
{%- endif -%}
</div>
{%- endif -%}
{%- endif -%}
</div>

{%- unless isModal -%}
{% comment %}
Shopify's product form attaches a number of tracking
scripts that cause slower load times and false statistics.
Quick view modals request these on-demand.
{% endcomment %}
{%- render 'product-form',
section_id: section_id,
product: product,
current_variant: current_variant,
variant_type: variant_type,
variant_labels_enable: variant_labels_enable,
quantity_enable: quantity_enable,
enable_payment_button: enable_payment_button
-%}
{%- else -%}
<div
id="ProductFormPlaceholder-{{ section_id }}"
data-url="{{ product.url | within: collection }}"
data-template="{{ product.template_suffix }}"
class="product-form-holder">
{%- if product.options.size > 0 -%}
{%- for i in (1..product.options.size) -%}
<div class="placeholder-content" style="min-height: 86px; max-width: 66%;"></div>
{%- endfor -%}
{%- endif -%}
<div class="placeholder-content" style="min-height: 86px;"></div>
</div>
{%- endunless -%}

{%- if settings.trust_image != blank -%}
<div class="aos-animate trust-image" style="max-width: {{ settings.trust_image.width }}px;">
<div class="image-wrap " style="height: 0; padding-bottom: {{ 100 | divided_by: settings.trust_image.aspect_ratio }}%;">
{%- assign img_url = settings.trust_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
<img class="lazyload"
data-src="{{ img_url }}"
data-widths="[360, 540]"
data-aspectratio="{{ settings.trust_image.aspect_ratio }}"
data-sizes="auto"
alt="{{ settings.trust_image.alt }}">
<noscript>
<img class="lazyloaded" src="{{ settings.trust_image | img_url: '540x' }}" alt="{{ settings.trust_image.alt }}">
</noscript>
</div>
</div>
{%- endif -%}

{%- if surface_pickup_enable -%}
<div data-store-availability
data-product-name="{{ product.title | escape }}"
data-base-url="{{ shop.url }}{{ routes.root_url }}"
></div>
{%- endif -%}

{%- if settings.additional_content_style == 'expandable' -%}
{%- render 'product-additional-content', product: product, section_id: section_id -%}
{%- else -%}
{%- render 'product-additional-tabs', product: product, section_id: section_id -%}
{%- endif -%}

{%- if social_enable -%}
{%- render 'social-sharing', share_title: product.title, share_permalink: product.url, share_image: product -%}
{%- endif -%}
</div>
</div>
</div>

</div>
</div>
</div>

 

Propero
Shopify Partner
895 101 160
Please check back in an hour or so
- Was my reply helpful? Click Like or Click Accept as Solution
To hire: email us at shopify@propero.in
checkout our app https://apps.shopify.com/picamaze
Propero
Shopify Partner
895 101 160

Please copy and paste this 

 

Click to expand...
{%- liquid
assign current_variant = product.selected_or_first_available_variant

assign product_zoom_size = '1800x1800'
assign product_image_size = '620x'

case image_container_width
when 'small'
assign product_image_width = 'medium-up--two-fifths'
assign product_description_width = 'medium-up--three-fifths'
assign product_image_size = '480x'
when 'medium'
assign product_image_width = 'medium-up--one-half'
assign product_description_width = 'medium-up--one-half'
assign product_image_size = '620x'
when 'large'
assign product_image_width = 'medium-up--three-fifths'
assign product_description_width = 'medium-up--two-fifths'
assign product_image_size = '740x'
endcase
-%}

<div id="ProductSection-{{ section_id }}"
class="product-section"
data-section-id="{{ section_id }}"
data-section-type="product-template"
{% if isModal %}
data-subsection
{% endif %}
data-variant-type="{{ variant_type }}"
{% if inventory_enable %}
data-inventory="true"
data-inventory-threshold="{{ inventory_threshold }}"
{% endif %}
{% if inventory_transfers_enable %}
data-incoming-inventory="true"
{% endif %}
{% if product_image_type == 'stacked' %}
data-images-stacked="true"
{% endif %}
data-video-style="{{ video_style }}"
{% unless isModal %}
data-enable-history-state="true"
{% endunless %}>

{%- render 'product-template-variables', product: product, current_variant: current_variant -%}

<div class="page-content">
<div class="page-width">

<div class="grid">
<div class="grid__item {{ product_image_width }}">
{%- render 'product-images',
section_id: section_id,
product: product,
product_image_type: product_image_type,
product_zoom_enable: product_zoom_enable,
product_zoom_size: product_zoom_size,
product_image_size: product_image_size,
isModal: isModal,
video_looping: video_looping,
video_style: video_style
-%}
</div>

<div class="grid__item {{ product_description_width }}{% if product_image_type == 'stacked' %} product-single__sticky{% endif %}">
<div class="product-single__meta">
<div class="product-single__header small--text-center">
{%- if settings.vendor_enable -%}
<div class="product-single__vendor">
{{ product.vendor }}
</div>
{%- endif -%}

{%- if sku_enable -%}
<p class="product-single__sku" data-sku>
{%- if current_variant.sku -%}
{{ current_variant.sku }}
{%- endif -%}
</p>
{%- endif -%}

{%- if isModal -%}
<p class="h1 product-single__title">
{{ product.title }}
</p>
{%- else -%}
<h1 class="h1 product-single__title">
{{ product.title }}
</h1>
{%- endif -%}

{%- if settings.enable_product_reviews -%}
{%- liquid
if isModal
assign review_link = product.url | within: collection | append: '#Reviews-' | append: product.id
else
assign review_link = '#Reviews-' | append: product.id
endif
-%}
<a href="{{ review_link }}" class="product-single__review-link">
<span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>
</a>
{%- endif -%}

<div class="product-single__prices">
{%- if product.compare_at_price_max > product.price -%}
{%- liquid
assign hide_sale_price = true
if current_variant.compare_at_price
assign hide_sale_price = false
endif
-%}
<span
class="visually-hidden"
aria-hidden="{{ hide_sale_price }}"
data-price-a11y>
{{ 'products.general.regular_price' |  t }}
</span>
<span class="{% if hide_sale_price %} hide{% endif %}" data-price-wrapper>
<span class="product__price product__price--compare" data-product-price-compare>
{%- if current_variant.compare_at_price > current_variant.price -%}
{{ current_variant.compare_at_price | money }}
{%- endif -%}
</span>
</span>
<span class="visually-hidden" data-compare-a11y>{{ 'products.general.sale_price' | t }}</span>
{%- else -%}
<span class="visually-hidden" data-price-a11y>{{ 'products.general.regular_price' | t }}</span>
{%- endif -%}

<span
class="product__price{% if current_variant.compare_at_price > current_variant.price %} sale-price{% endif %}"
data-product-price>
{{ current_variant.price | money }}
</span>

{%- if product_shipping_callout != blank -%}
<span class="product__note">
{{ product_shipping_callout }}
</span>
{%- endif -%}

</div>

<div data-product-unit-wrapper class="product__unit-price{% unless current_variant.unit_price_measurement %} hide{% endunless %}">
{%- capture unit_price_base_unit -%}
{%- if current_variant.unit_price_measurement -%}
{%- if current_variant.unit_price_measurement.reference_value != 1 -%}
{{ current_variant.unit_price_measurement.reference_value }}
{%- endif -%}
{{ current_variant.unit_price_measurement.reference_unit }}
{%- endif -%}
{%- endcapture -%}

{{ current_variant.unit_price | money }}/{{ unit_price_base_unit }}
</div>

{%- if shop.taxes_included or shop.shipping_policy.body != blank -%}
<div class="product__policies rte">
<small>
{%- if shop.taxes_included -%}
{{ 'products.product.include_taxes' | t }}
{%- endif -%}
{%- if shop.shipping_policy.body != blank -%}
{{ 'products.product.shipping_policy_html' | t: link: shop.shipping_policy.url }}
{%- endif -%}
</small>
</div>
{%- endif -%}

{%- if inventory_enable or inventory_transfers_enable -%}
{%- assign variants_with_inventory_tracking = product.variants | where: 'inventory_management', 'shopify' -%}

<script>
// Store inventory quantities in JS because they're no longer
// available directly in JS when a variant changes.
// Have an object that holds all potential products so it works
// with quick view or with multiple featured products.
window.inventories = window.inventories || {};
window.inventories['{{section_id}}'] = {};
{%- for variant in variants_with_inventory_tracking -%}
window.inventories['{{section_id}}'][{{variant.id}}] = {
'quantity': {{ variant.inventory_quantity | default: 0 }},
'incoming': {{ variant.incoming | default: false | json }},
'next_incoming_date': {{ variant.next_incoming_date | date: format: 'date' | json }}
};
{%- endfor -%}
</script>

{%- liquid
assign inventory_visible = false
if inventory_enable and current_variant.inventory_management == 'shopify'
if current_variant.inventory_quantity <= inventory_threshold and current_variant.inventory_quantity >= 0
assign inventory_visible = true
endif
endif
if current_variant.inventory_quantity == 0 or current_variant.inventory_policy == 'continue'
assign inventory_visible = false
endif
-%}

{%- if inventory_enable -%}
<p
data-product-inventory
class="product__inventory{% unless inventory_visible %} hide{% endunless %}"
>
{%- if current_variant.available -%}
{{ 'products.product.stock_label' | t: count: current_variant.inventory_quantity }}
{%- endif -%}
</p>
{%- endif -%}

{%- if inventory_transfers_enable -%}
<div
data-product-incoming-inventory
class="product__inventory{% if inventory_visible %} hide{% endif %}">
{%- if current_variant.incoming and inventory_visible == false -%}
{%- if current_variant.next_incoming_date -%}
{%- assign date = current_variant.next_incoming_date | date: format: 'date' -%}
{%- if current_variant.available -%}
{{ 'products.product.will_not_ship_until' | t: date: date }}
{%- else -%}
{{ 'products.product.will_be_in_stock_after' | t: date: date }}
{%- endif -%}
{%- else -%}
{{ 'products.product.waiting_for_stock' | t }}
{%- endif -%}
{%- endif -%}
</div>
{%- endif -%}
{%- endif -%}
</div>

{%- unless isModal -%}
{% comment %}
Shopify's product form attaches a number of tracking
scripts that cause slower load times and false statistics.
Quick view modals request these on-demand.
{% endcomment %}
{%- render 'product-form',
section_id: section_id,
product: product,
current_variant: current_variant,
variant_type: variant_type,
variant_labels_enable: variant_labels_enable,
quantity_enable: quantity_enable,
enable_payment_button: enable_payment_button
-%}
{%- else -%}
<div
id="ProductFormPlaceholder-{{ section_id }}"
data-url="{{ product.url | within: collection }}"
data-template="{{ product.template_suffix }}"
class="product-form-holder">
{%- if product.options.size > 0 -%}
{%- for i in (1..product.options.size) -%}
<div class="placeholder-content" style="min-height: 86px; max-width: 66%;"></div>
{%- endfor -%}
{%- endif -%}
<div class="placeholder-content" style="min-height: 86px;"></div>
</div>
{%- endunless -%}

{%- if settings.trust_image != blank -%}
<div class="aos-animate trust-image" style="max-width: {{ settings.trust_image.width }}px;">
<div class="image-wrap " style="height: 0; padding-bottom: {{ 100 | divided_by: settings.trust_image.aspect_ratio }}%;">
{%- assign img_url = settings.trust_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
<img class="lazyload"
data-src="{{ img_url }}"
data-widths="[360, 540]"
data-aspectratio="{{ settings.trust_image.aspect_ratio }}"
data-sizes="auto"
alt="{{ settings.trust_image.alt }}">
<noscript>
<img class="lazyloaded" src="{{ settings.trust_image | img_url: '540x' }}" alt="{{ settings.trust_image.alt }}">
</noscript>
</div>
</div>
{%- endif -%}

{%- if surface_pickup_enable -%}
<div data-store-availability
data-product-name="{{ product.title | escape }}"
data-base-url="{{ shop.url }}{{ routes.root_url }}"
></div>
{%- endif -%}

{%- if settings.additional_content_style == 'expandable' -%}
{%- render 'product-additional-content', product: product, section_id: section_id -%}
{%- else -%}
{%- render 'product-additional-tabs', product: product, section_id: section_id -%}
{%- endif -%}

{%- if social_enable -%}
{%- render 'social-sharing', share_title: product.title, share_permalink: product.url, share_image: product -%}
{%- endif -%}
</div>
</div>
</div>

</div>
</div>
</div>

 

- Was my reply helpful? Click Like or Click Accept as Solution
To hire: email us at shopify@propero.in
checkout our app https://apps.shopify.com/picamaze
charlinectw
Tourist
13 0 3

Thank you, that did the job with the price! It's just that the image on the product page is huge now and covers almost the whole screen, rather than being on the left side of the text?

Propero
Shopify Partner
895 101 160

@charlinectw ,

Kindly check if first block of code starting with {% - liquid   is properly pasted

- Was my reply helpful? Click Like or Click Accept as Solution
To hire: email us at shopify@propero.in
checkout our app https://apps.shopify.com/picamaze
charlinectw
Tourist
13 0 3

yes all entered correctly

des4ang4
Visitor
1 0 0

 

Click to expand...

I am having the same issue and was wondering if you could assist and see if there's anything off in the code? Thank you in advance

Here is the code from product-template.liquid in Sections.

 

 

{% comment %}
** Product - default view **
- Product template
{% endcomment %}

<a name="pagecontent" id="pagecontent"></a>

<div class="container main content product-name--{{ product.handle }}">

<div class="sixteen columns">
{% if collection.previous_product or collection.next_product or section.settings.product_breadcrumb %}
<div class="clearfix breadcrumb-collection">
{% if collection.previous_product or collection.next_product %}
<div class="nav_arrows breadcrumb_text">
{% if collection.previous_product %}
<a href="{{ collection.previous_product }}" title="{{ 'products.general.previous_product_html' | t }}" class="breadcrumb_link"><span class="icon-left-arrow"> {{ 'products.general.previous_product_html' | t }}</span></a>
{% endif %}
{% if collection.previous_product and collection.next_product %}<span class="breadcrumb-divider"> | </span>{% endif %}

{% if collection.next_product %}
<a href="{{collection.next_product}}" title="{{ 'products.general.next_product_html' | t }}" class="breadcrumb_link">{{ 'products.general.next_product_html' | t }} <span class="icon-right-arrow"></span></a>
{% endif %}
</div>
{% endif %}

{% if section.settings.product_breadcrumb %}
{% render 'product__breadcrumb' %}
{% endif %}
</div>
{% endif %}
</div>

{% comment %}Check to see if sidebar should be enabled{% endcomment %}
{% if section.blocks.size > 0 %}
{% assign sidebar = true %}
{% else %}
{% assign sidebar = false %}
{% endif %}

<div class="product clearfix">
{% if sidebar %}
{% render 'sidebar' %}
<div class="twelve columns medium-down--one-whole sidebar--{{ sidebar }} product__container">
{% else %}
<div class="sixteen columns product__container">
{% endif %}

<div class="product-{{ product.id }}"
data-free-text="{{ settings.free_price_text }}"
>
<div class="section product_section clearfix js-product_section {% if section.settings.product_images_position == 'right' %}align_right--images{% endif %}" data-rv-handle="{{ product.handle }}">

<div class="nine product__images columns medium-down--one-whole {% if section.settings.product_images_position == 'left' %}alpha{% else %}omega{% endif %}">
{% render 'product-images',
product: product,
video_looping: section.settings.video_looping,
set_product_height: section.settings.set_product_height
%}
</div>

<div class="seven columns medium-down--one-whole {% if section.settings.product_images_position == 'left' %}omega{% else %}alpha{% endif %}">

{% assign collection_handles = product.collections | map: 'handle' %}
{% assign variant = product.selected_or_first_available_variant %}

{% if product.available %}
{% if settings.sale_banner_enabled and product.compare_at_price_max > product.price %}
<div class="sale_banner_product">{{ 'collections.general.sale' | t }}</div>
{% endif %}
{% endif %}
{% if collection_handles contains 'new' %}
<div class="new_banner_product">{{ 'collections.general.new' | t }}</div>
{% endif %}
{% if collection_handles contains 'pre-order' %}
<div class="preorder_banner_product">{{ 'collections.general.pre_order' | t }}</div>
{% endif %}

{% if section.settings.display_vendor %}
<p class="vendor">
<span class="vendor">{{ product.vendor | link_to_vendor }}</span>
</p>
{% endif %}

{% if variant.sku != blank and section.settings.display_sku %}
<p class="sku">
<span>{{ variant.sku }}</span>
</p>
{% endif %}
<h1 class="product_name">{{ product.title }}</h1>
{% if section.settings.enable_shopify_product_badges and settings.enable_shopify_review_comments %}
<span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>
{% endif %}
<div class="feature_divider"></div>

{% assign product_tags = product.tags | join: ' ' %}
{% if product_tags contains 'meta-size-chart-' %}
{% for tag in product.tags %}
{% if tag contains 'meta-size-chart-' %}
<a href="javascript&colon;;" class="size_chart" data-fancybox data-src="#size-chart{{product.id}}" data-type="inline" data-no-instant>{{ 'products.product.size_chart' | t }} <span class="icon-right-arrow"></span></a>
{% render 'popup-size-chart', product_id: product.id %}
{% endif %}
{% endfor %}
{% elsif settings.size_chart != blank %}
<a href="javascript&colon;;" class="size_chart" data-fancybox data-src="#size-chart{{product.id}}" data-type="inline" data-no-instant>{{ 'products.product.size_chart' | t }} <span class="icon-right-arrow"></span></a>
{% endif %}

{% if collection_handles contains 'coming-soon' %}
<p class="modal_price">{{ 'collections.general.coming_soon' | t }}</p>
{% else %}
<div class="modal_price">
{% unless product.available == false and settings.display_price == false %}
<div class="price__container price__container--display-price-{{ settings.display_price }} {% if settings.display_price %}has-margin-right{% endif %}">
<span content="{{ variant.price | money_without_currency | remove: "," }}" class="{% if variant.compare_at_price > variant.price %}sale{% endif %}">
<span class="current_price">
{% if variant.price > 0 %}
<span class="money">{% render 'price-element', price: variant.price %}</span>
{% else %}
{{ settings.free_price_text }}
{% endif %}
</span>
</span>
<span class="was_price">
{% if variant.price < variant.compare_at_price %}
<span class="money">{% render 'price-element', price: variant.compare_at_price %}</span>
{% endif %}
</span>
{% if section.settings.display_savings %}
<span class="sale savings">
{% if variant.price < variant.compare_at_price %}
{{ 'products.product.savings' | t }} {{ variant.compare_at_price | minus: variant.price | times: 100 | divided_by: variant.compare_at_price }}% (<span class="money">{% assign compare_at = variant.compare_at_price | minus: variant.price %}{% render 'price-element', price: compare_at %}</span>)
{% endif %}
</span>
{% endif %}
</div>
{% endunless %}
<div class="sold-out__container">
<span class="sold_out">{% if variant.available == false %}{{ settings.sold_out_text }}{% endif %}</span>
</div>
</div>
{% endif %}

{% if section.settings.product_description_position == "top" %}
{% if product.description != blank %}
<div class="description">
{{ product.description | split: '<!-- split -->' | first }}
</div>
{% endif %}
{% endif %}

{% unless collection_handles contains 'coming-soon' %}
{% render 'product-form',
context: 'product',
collection_handles: collection_handles
%}
{% render 'product-notify-me', product: product %}
{% endunless %}

{% if section.settings.product_description_position == "bottom" %}
{% if product.description != blank %}
<div class="description bottom">
{{ product.description | split: '<!-- split -->' | first }}
</div>
{% endif %}
{% endif %}

{% if section.settings.review_position == "next_to_gallery" %}
<div class="shopify-reviews reviewsVisibility--{{settings.enable_shopify_review_comments}}">
<div id="shopify-product-reviews" data-id="{{product.id}}">{{ product.metafields.spr.reviews }}</div>
</div>
{% endif %}

{% if section.settings.display_collections or section.settings.display_tags or section.settings.display_type %}
<div class="product_links">
{% if section.settings.display_collections %}
<p>
<span class="label">{{ 'products.product.collections' | t }}:</span>
<span>
{% for col in product.collections %}
<a href="{{ col.url }}" title="{{ col.title }}">{{ col.title }}</a>{% unless forloop.last %},{% endunless %}
{% endfor %}
</span>
</p>
{% endif %}

{% if section.settings.display_type %}
<p>
<span class="label">{{ 'products.product.product_types' | t }}:</span>
<span>{{ product.type | link_to_type }}</span>
</p>
{% endif %}

{% if section.settings.display_tags %}
<p>
{% for tag in product.tags %}
{% if forloop.first %}
<span class="label">{{ 'products.product.tags' | t }}:</span>
{% endif %}

{% unless tag contains 'meta-' %}
<span>
<a href="{{ routes.collections_url }}/{% if collection %}{{ collection.handle }}{% else %}all{% endif %}/{{ tag | handle }}" title="{{ 'products.product.products_tagged' | t: tag: tag }}">{{ tag }}</a>{% unless forloop.last %},{% endunless %}
</span>
{% endunless %}
{% endfor %}
</p>
{% endif %}
</div>
{% endif %}

<div class="meta">
{% if section.settings.display_social_buttons %}
{% render 'social-buttons', context: 'product' %}
{% endif %}
</div>
</div>
</div>

{% if product.description contains "<!-- split -->" %}
<br class="clear" />
<div class="section clearfix">
<div class="description">
{{ product.description | split: '<!-- split -->' | last }}
</div>
</div>
{% endif %}

{% if section.settings.review_position == "below_gallery" %}
<div class="shopify-reviews reviewsVisibility--{{settings.enable_shopify_review_comments}}">
<div id="shopify-product-reviews" data-id="{{product.id}}">{{ product.metafields.spr.reviews }}</div>
</div>
{% endif %}
</div>

{% if sidebar %}

{% if section.settings.display_recently_viewed %}
{% include 'include-recently-viewed' %}
{% endif %}

<div data-product-recommendations-container></div>
</div>
</div>
</div>

{% else %}

</div>
</div>
</div>

{% if section.settings.display_recently_viewed %}
{% include 'include-recently-viewed' %}
{% endif %}
<div data-product-recommendations-container></div>

{% endif %}

{% if section.settings.set_product_height %}
{% style %}
.gallery-wrap model-viewer {
min-height: {{ section.settings.product_height }}px;
}

.gallery-wrap .product_gallery img,
.gallery-wrap .product_gallery .plyr--html5 video,
.gallery-wrap .product_gallery .plyr--youtube {
max-height: {{ section.settings.product_height }}px;
}
{% endstyle %}
{% endif %}

{% comment %} Shopify-XR {% endcomment %}
{% if product.media %}
<script>
window.ShopifyXR=window.ShopifyXR||function(){(ShopifyXR.q=ShopifyXR.q||[]).push(arguments)}
{% assign models = product.media | where: 'media_type', 'model' | json %}
ShopifyXR('addModels', {{ models }});
</script>
{% endif %}

{% schema %}

{
"name": "Product",
"class": "product-template",
"settings": [
{
"type": "header",
"content": "Product gallery"
},
{
"type": "checkbox",
"id": "product_thumbs",
"label": "Show thumbnails",
"default": true
},
{
"type": "checkbox",
"id": "gallery_arrows",
"label": "Show arrows",
"default": true
},
{
"type": "checkbox",
"id": "enable_product_lightbox",
"label": "Enable lightbox",
"default": true
},
{
"type": "checkbox",
"id": "activate_zoom",
"label": "Magnify product images on hover"
},
{
"type": "range",
"id": "slideshow_speed",
"label": "Gallery speed",
"min": 0,
"max": 6,
"unit": "sec",
"default": 0,
"info": "Set to 0 to disable autoplay."
},
{
"type": "select",
"id": "slideshow_animation",
"label": "Transition",
"options": [
{
"value": "slide",
"label": "Slide"
},
{
"value": "fade",
"label": "Fade"
}
],
"default": "slide"
},
{
"type": "select",
"id": "thumbnail_position",
"label": "Thumbnails",
"default": "bottom",
"options": [
{
"value": "bottom",
"label": "Bottom"
},
{
"value": "left",
"label": "Left"
},
{
"value": "right",
"label": "Right"
}
]
},
{
"type": "checkbox",
"id": "enable_thumbnail_slider",
"label": "Enable thumbnail slider",
"default": true
},
{
"type": "header",
"content": "Product information"
},
{
"type": "checkbox",
"id": "display_vendor",
"label": "Show vendor"
},
{
"type": "checkbox",
"id": "product_breadcrumb",
"label": "Show breadcrumb links"
},
{
"type": "checkbox",
"id": "display_sku",
"label": "Show SKU"
},
{
"type": "checkbox",
"id": "display_collections",
"label": "Show collections"
},
{
"type": "checkbox",
"id": "display_type",
"label": "Show type"
},
{
"type": "checkbox",
"id": "display_tags",
"label": "Show tags"
},
{
"type": "checkbox",
"id": "display_social_buttons",
"label": "Show social media share icons",
"default": true
},
{
"type": "radio",
"id": "product_description_position",
"label": "Description position",
"options": [
{
"value": "top",
"label": "Above product form"
},
{
"value": "bottom",
"label": "Below product form"
}
]
},
{
"type": "checkbox",
"id": "display_savings",
"label": "Show price savings",
"default": true
},
{
"type": "header",
"content": "Dynamic checkout button"
},
{
"type": "checkbox",
"id": "show_payment_button",
"label": "Show dynamic checkout button",
"default": true,
"info": "Each customer will see their preferred payment method from those available on your store, such as PayPal or Apple Pay. [Learn more](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)"
},
{
"type": "header",
"content": "Media",
"info": "Learn more about [media types](https://help.shopify.com/en/manual/products/product-media)"
},
{
"type": "radio",
"id": "product_images_position",
"label": "Media position",
"options": [
{
"value": "left",
"label": "Left"
},
{
"value": "right",
"label": "Right"
}
]
},
{
"type": "checkbox",
"id": "set_product_height",
"label": "Set height of product media",
"default": false
},
{
"type": "range",
"id": "product_height",
"label": "Product media height",
"min": 200,
"max": 800,
"step": 10,
"default": 500,
"unit": "px"
},
{
"type": "checkbox",
"id": "video_looping",
"label": "Enable video looping",
"default": false
},
{
"type": "header",
"content": "Product reviews"
},
{
"type": "paragraph",
"content": "Reviews app must be enabled. [Learn more](https://help.outofthesandbox.com/hc/en-us/articles/360008549274#section2)"
},
{
"type": "checkbox",
"id": "enable_shopify_product_badges",
"label": "Display star rating on product",
"default": false
},
{
"type": "radio",
"id": "review_position",
"label": "Reviews position",
"default": "next_to_gallery",
"options": [
{
"value": "next_to_gallery",
"label": "In product description area"
},
{
"value": "below_gallery",
"label": "Below image\/description"
}
]
},
{
"type": "header",
"content": "Recently viewed products"
},
{
"type": "paragraph",
"content": "To test the recently viewed products, view your online store outside of the Editor and visit multiple product pages. [Learn more](https:\/\/help.outofthesandbox.com\/hc\/en-us\/articles\/115008765228)"
},
{
"type": "checkbox",
"id": "display_recently_viewed",
"label": "Show recently viewed products",
"default": false
},
{
"type": "text",
"id": "rv_title",
"label": "Title",
"default": "Recently Viewed Items"
},
{
"type": "radio",
"id": "rv_products_style",
"label": "Layout",
"default": "grid",
"options": [
{
"value": "slider",
"label": "Slider"
},
{
"value": "grid",
"label": "Grid"
}
]
},
{
"type": "range",
"id": "rv_max_display",
"label": "Products limit",
"min": 3,
"max": 10,
"step": 1,
"default": 4
},
{
"type": "range",
"id": "rv_per",
"label": "Products per row",
"min": 3,
"max": 5,
"step": 1,
"default": 4
},
{
"type": "header",
"content": "Sidebar"
},
{
"type": "paragraph",
"content": "Create a sidebar by adding content blocks."
},
{
"type": "checkbox",
"id": "toggle",
"label": "Toggle sidebar content",
"default": false
}
],
"blocks": [
{
"type": "filter_by_collection",
"name": "Collection list",
"limit": 1
},
{
"type": "menu",
"name": "Menu",
"settings": [
{
"type": "link_list",
"id": "custom_menu_linklist",
"label": "Menu"
}
]
},
{
"type": "page",
"name": "Page",
"settings": [
{
"type": "page",
"id": "content_page",
"label": "Page"
}
]
},
{
"type": "recently_viewed",
"name": "Recently viewed products",
"limit": 1,
"settings": [
{
"type": "paragraph",
"content": "To test the recently viewed products, view your online store outside of the Editor and visit multiple product pages. [Learn more](https:\/\/help.outofthesandbox.com\/hc\/en-us\/articles\/115008765228)"
},
{
"type": "text",
"id": "sidebar_rv_title",
"label": "Title",
"default": "Recently Viewed"
},
{
"type": "range",
"id": "sidebar_rv_per",
"label": "Products limit",
"min": 1,
"max": 4,
"step": 1,
"default": 3
}
]
},
{
"type": "filter_by_tag",
"name": "Tag list",
"limit": 1
},
{
"type": "text",
"name": "Text",
"settings": [
{
"type": "text",
"id": "title",
"label": "Heading",
"default": "Heading"
},
{
"type": "richtext",
"id": "text",
"label": "Text",
"default": "<p>Text area can be used for special announcements or general information.</p>"
}
]
},
{
"type": "filter_by_type",
"name": "Type list",
"limit": 1
},
{
"type": "filter_by_vendor",
"name": "Vendor list",
"limit": 1
}
],
"default": {
"settings": {

}
}
}

{% endschema %}

 

Patrik1
Shopify Partner
7 0 2

 

Click to expand...

Dear Sir! Can you help us here ! Our prices showing wrong on checkout its change to something which is not VAT EXCL . not vat INCLUDED... its change to number we dont know from where :(((((

Will be happy to pay for solution!!!Thank you 

our code

 

<script>
window.use_color_swatch = {{ section.settings.use_color_swatch }};
</script>
<style>
.logo-product{
display: flex;
align-items: center;
justify-content: space-between;
}

.logo-product .link-logo{
display: inline-block;
position: relative;
border-right: solid 3px #e8e8e8;
padding-right: 15px;
}

.logo-product img{
max-width: 200px;
}

#product-add-to-cart{
border-radius: 10px!important;
}
.logo-product .logo-product_link-content {
line-height: 16px;
text-decoration: underline;
font-weight: 400;
font-size: 12px;
color: #090;
max-width: 120px;
text-align: right;
}

.product-img-box{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}

.item-picture{
width: calc(50% - 5px);
margin-bottom: 10px;
}

.product-img-box-fist-child .item-picture{
width: 100%;
text-align: center;
}

@media(max-width: 767px){
.product-img-box-fist-child{
display: none;
}
}

#outer_container .item-picture{
width: 100%;
margin-bottom: 20px;
text-align: center;
}
#outer_container{
position: fixed;
height: 100%!important;
bottom: 0!important;
top: 0!important;
left: 0!important;
right: 0!important;
z-index: 9999;
background-color: #efeeee;
display: none;
overflow: scroll!important;
width: 100%;
margin: 0!important;
}

#outer_container .product-featured-image{
width: 100%;
max-height: 100%;
}

#close {
background-image: url('https://cdn.shopify.com/s/files/1/2088/5805/files/close.png?v=1645012394');
height: 39px;
width: 39px;
top: 10px;
right: 10px;
display: none;
background-position: center top;
position: fixed;
z-index: 99999;
background-repeat: no-repeat;
}

.product-description.active .text-description{
height: 100px;
overflow: hidden;
}

.product-description .more-info{
display: none;
margin-top: 15px;
}

.product-description.active .less-info{
display: block;
margin-top: 15px;
}

.product-description.active .more-info{
display: block;
}

.product-description.active .less-info{
display: none;
}

</style>
<!--script type="text/javascript" src="https://cdn.ywxi.net/js/1.js" async></script-->
<div class="mr_pro">

{% if settings.display_sidebar_detail_page %}
{% include 'product-sidebar' %}
{% endif %}
{%comment%}
{% if settings.display_sidebar_detail_page %}col-xs-9 {% endif %}
{%endcomment%}
<div class="col-main">
<div itemscope itemtype="http://schema.org/Product" class="product">
<meta itemprop="url" content="{{ shop.url }}{{ product.url }}">
<meta itemprop="image" content="{{ product.featured_image.src | product_img_url: 'grande' }}">
<!---PRODUCT FEATURE IMAGE--->
<div class="container wrap-center">
<div class="flexbox">
<div class="col-xs-12 col-sm-12 mobi-image-product">

{% comment %}
<div class="product-img-box{% if section.settings.style_moreview == 'vertical' and product.images.size > 1 %} has-jcarousel{% endif %}">
<div class="product-photo-container" data-item="3">
<figure class="picture-product">
{% for image in product.images %}
<div class="item-picture">
<a class="fancybox" rel="gallery1" href="{{ image.src | product_img_url: '1024x1024' }}" >
<img class="product-featured-image" src="{{ image.src | product_img_url: 'grande' }}" alt="{{ image.alt | escape }}" data-zoom-image="{{ image.src | product_img_url: '1024x1024' }}">
</a>
</div>
{% endfor %}
</figure>
</div>

{% if product.images.size > 0 %}
<div class="product-thumbnails {%if section.settings.disable_thumbnail %}hidden{%endif%} thumbl_horizontal">
<ul class="picture-thumbnails">
{% for image in product.images %}
<li class="item-thumbnails">
<a href="javascript&colon;void(0)" data-image="{{ image.src | product_img_url: 'grande' }}" data-zoom-image="{{ image.src | product_img_url: 'original' }}">
<img src="{{ image.src | product_img_url: 'compact' }}" alt="{{ image.alt | escape }}">
</a>
</li>
{% endfor %}
</ul>
</div>
{% endif %}

</div>
{% endcomment %}

<div class="product-img-box-fist-child">
{% for image in product.images %}
{% if forloop.index == 1 %}
<div class="item-picture" data-position="{{forloop.index}}">
<img class="product-featured-image" src="{{ image.src | product_img_url: 'master' }}" alt="{{ image.alt | escape }}">
</div>
{% endif %}
{% endfor %}
</div>

<div class="product-img-box">
{% for image in product.images %}
<div class="item-picture" data-position="{{forloop.index}}">
<img class="product-featured-image" src="{{ image.src | product_img_url: 'master' }}" alt="{{ image.alt | escape }}">
</div>
{% endfor %}

</div>
<div id="close"></div>
<div id="outer_container">
<div id="zoom-img"></div>
</div>
</div>
{% comment %}
<div class="social-left">
{%if section.settings.show_img_vendor %}
<a href="/collections/vendors?q={{ product.vendor }}">
<img src="{{ product.vendor | downcase | handle | append: '.png' | file_url }}" alt="{{ product.vendor }}"/>
</a>
{%else%}
<span class="vendor">{{ product.vendor | link_to_vendor }}</span>
{%endif%}
{%if section.settings.title_secure_checkout != blank%}
<div class="secure-checkout">
<h2>{%include 'multilang' with section.settings.title_secure_checkout %}</h2>
<hr/>
<p>{%include 'multilang' with section.settings.text_secure_checkout %}</p>
<div class="img-se">
<a href="//www.shopify.com/pci-compliant?utm_source=secure&utm_medium=shop" title="This online store is secured by Shopify" target="_blank"><img src="//cdn.shopify.com/s/images/badges/shopify-secure-badge-light-shadow.png" alt="Shopify secure badge" /></a>
</div>
</div>
{%endif%}
</div>
{% endcomment %}

<div class="product-right">
{% if section.settings.display_product_type %}
<p class="product-type">
<span>{{ product.type }}</span>
</p>
{% endif %}

<div class="logo-product">
{%if section.settings.show_img_vendor %}
<a href="/collections/vendors?q={{ product.vendor }}">
<img src="{{ product.vendor | downcase | handle | append: '.png' | file_url }}" alt="{{ product.vendor }}"/>
</a>
{%else%}
<span class="vendor">{{ product.vendor | link_to_vendor }}</span>
{%endif%}
<a class="logo-product_link-content" href="/pages/contact-us">{{section.settings.text_link_contact}}</a>
</div>
<header class="product-title {% if collection.previous_product or collection.next_product and section.settings.display_prev_next_product and collection %}has-btn{% endif %}">
<h1 itemprop="name">
{% if settings.enable_multilang %}
<span class="lang1">{{ product.title | split: '|' | first }}</span>
<span class="lang2">{{ product.title | split: '|' | last }}</span>
{% else %}
<span>{{ product.title | split: '|' | first }}</span>
{% endif %}
</h1>
{% if section.settings.display_prev_next_product and collection %}
{% if collection.previous_product %}
<a class="prev btn" href="{{ collection.previous_product }}" {% if settings.enable_multilang %}data-translate="collections.toolbar.previous"{%endif%}>{{ 'collections.toolbar.previous' | t }}</a>
{% endif %}
{% if collection.next_product %}
<a class="next btn" href="{{ collection.next_product }}" {% if settings.enable_multilang %}data-translate="collections.toolbar.next"{%endif%}>{{ 'collections.toolbar.next' | t }}</a>
{% endif %}
{% endif %}
</header>
{%if section.settings.display_product_sku%}
<p class="product-sku"><label>{% include 'multilang' with section.settings.product_sku_text %}</label> <strong>{{product.selected_or_first_available_variant.sku}}</strong></p>
{%endif%}

{% if section.settings.display_product_reviews %}
<span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>
{% endif %}


{%if section.settings.display_product_bar%}
{%if product.selected_or_first_available_variant.barcode != bla %}
<p class="product-barcode"><label>{% include 'multilang' with section.settings.product_bar_text %}</label><strong>{{product.selected_or_first_available_variant.barcode}}</strong></p>
{%endif%}
{%endif%}

{% if product.description contains '[countdown]' %}
{% assign count_down_first = product.description | split:'[/countdown]' | first %}
{% assign count_down_final = count_down_first | split:'[countdown]' | last %}
<div class="countdown">
{% if settings.enable_multilang %}
<span class="lang1">{{ section.settings.text_countdown | split: '|' | first }}</span>
<span class="lang2">{{ section.settings.text_countdown | split: '|' | last }}</span>
{% else %}
<span>{{ section.settings.text_countdown | split: '|' | first }}</span>
{% endif %}
<div id="clock"></div>
</div>
<script>
$(document ).ready(function() {
$("#clock").countdown('{{ count_down_final }}', function(event) {
$(this).html(event.strftime('%Dd %H:%M:%S'));
});
})
</script>
{% endif %}
<div class="product-form" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<span style="display:none;" itemprop="priceCurrency" content="{{ shop.currency }}">€</span>
<link itemprop="availability" href="http://schema.org/{% if product.available %}InStock{% else %}OutOfStock{% endif %}">

<form action="/cart/add" method="post" enctype="multipart/form-data" id="add-to-cart-form">
<div class="prices">
{% if product.compare_at_price > product.price %}
<span class="compare-price">{% assign geolizr_price = product.compare_at_price_max %}{% include 'geolizr-currency' with geolizr_price %}{{ product.compare_at_price_max | money | prepend: geolizr_prepend_code | append: geolizr_append_code }}</span>
<div class="on-sales">
<span class="price on-sale" itemprop="price" content="{{ product.price | divided_by: 100.00 }}">
{% assign geolizr_price = product.price %}
{% include 'geolizr-currency' with geolizr_price %}
{{ product.price | money | prepend: geolizr_prepend_code | append: geolizr_append_code }}
</span>
<p class="discount-percent">{% if product.compare_at_price_max > product.price %}-{{ product.compare_at_price_max | minus: product.price | times: 100.0 | divided_by: product.compare_at_price_max | money_without_currency | times: 100 | remove: '.0'}}%{% endif %}</p>
</div>
{% else %}
<span class="price" itemprop="price" content="{{ product.price | divided_by: 100.00 }}">{% assign geolizr_price = product.price %}{% include 'geolizr-currency' with geolizr_price %}{{ product.price | money | prepend: geolizr_prepend_code | append: geolizr_append_code }}</span>
{% endif %}
</div>
<p class="ship-costs">{{section.settings.ship_costs_text}} <a href="{{section.settings.page_url}}" alt="{{section.settings.ship_costs_text_url}}">{{section.settings.ship_costs_text_url}}</a></p>

<!--============= END ==================-->
<div id="product-variants">
{% assign variantCount = product.variants | size %}
{% if product.available %}
{% if variantCount > 0 %}
<select id="product-selectors" name="id" style="display:none">
{% for variant in product.variants %}
<option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} value="{{ variant.id }}">{{ variant.title }} - {% assign geolizr_price = variant.price %}{% include 'geolizr-currency' with geolizr_price %}{{ variant.price | money | prepend: geolizr_prepend_code | append: geolizr_append_code }}</option>
{% endfor %}
</select>

{% if section.settings.use_color_swatch %}
{% for option in product.options %}
{% if option == 'Color' %}
{% include 'swatch' with option %}
{% endif %}
{% endfor %}

{% for option in product.options %}
{% if option != 'Color' %}
{% include 'swatch' with option %}
{% endif %}
{% endfor %}

{% endif %}
{% else %}
<input type="hidden" name="id" value="{{ product.variants[0].id }}" />
{% endif %}
{% endif %}
</div>
<div class="deliver-day">
<div class="deliver-text">
<span style="color:#009900; display: block;"><svg class="zds-icon RC794g _98USAM DlJ4rT H3jvU7 pVrzNP" focusable="false" fill="currentColor" viewBox="0 0 24 24" aria-hidden="false" aria-labelledby="truck-7qmqh" role="img" style="width: 28px;display: inline-block;margin-bottom: 0px;vertical-align: bottom;margin-right: 7px;"><title id="truck-7qmqh">truck</title><path d="M23.8 11.5l-3.36-3.74a.75.75 0 00-.56-.25h-3.37V4.5a.75.75 0 00-.75-.75H3.01a.75.75 0 00-.75.75v12c0 .42.33.76.75.76h1.47a3 3 0 006 0h6.03a3 3 0 006 0h.74c.41 0 .75-.34.75-.75V12a.75.75 0 00-.2-.5zM19.56 9l2.95 3.28v3.47h-.4a2.99 2.99 0 00-5.18 0h-.4V9h3.03zM3.75 5.25h11.26v10.51h-4.95a2.99 2.99 0 00-5.17 0H3.76V5.25zm3.72 13.5a1.5 1.5 0 110-3 1.5 1.5 0 010 3zm12.04 0a1.5 1.5 0 110-3 1.5 1.5 0 010 3z"></path></svg>Immediate Availability</span>
<div class="deliver-info">
<span>Estimated delivery</span>
<span class="shipping_date">{% if product.selected_or_first_available_variant.inventory_quantity > 0 %}{{section.settings.delivery_date_for_available}} - {% else %} {{section.settings.delivery_date_for_preorder}} - {% endif %}</span>
</div>
</div>

<!-- <div class="deliver-content">
<ul>
{%for block in section.blocks %}
{%if block.settings.image != blank and block.settings.national != blank and block.settings.content != blank %}
<li>{{block.settings.image | img_url: '30x20' | img_tag: block.settings.national }} <b>{{block.settings.national}}</b> {{block.settings.content}}</li>
{%endif%}
{%endfor%}
</ul>
<p>{{section.settings.shipping_day_after}}</p>
</div> -->
</div>


{% if product.available %}
<div class="hidden">
<label for="quantity" {% if settings.enable_multilang %}data-translate="cart.label.quantity"{%endif%}>{{ 'cart.label.quantity' | t }}: </label>
<div class="dec button">-</div>
<input type="text" id="quantity" name="quantity" value="1">
<div class="inc button">+</div>
<script>
jQuery(".button").on("click", function() {
var oldValue = jQuery("#quantity").val(),
newVal = 1;

if (jQuery(this).text() == "+") {
newVal = parseInt(oldValue) + 1;
} else if (oldValue > 1) {
newVal = parseInt(oldValue) - 1;
}

jQuery("#quantity").val(newVal);
{% if section.settings.display_subtotal and product.available %}
updatePricing();
{% endif %}
});
</script>
</div>

{% if section.settings.display_subtotal and product.available %}
<div class="total-price">
<label><b {% if settings.enable_multilang %}data-translate="cart.general.subtotal"{%endif%}>{{ 'cart.general.subtotal' | t }}</b>:</label><span>{% assign geolizr_price = product.price %}{% include 'geolizr-currency' with geolizr_price %}{{ product.price | money | prepend: geolizr_prepend_code | append: geolizr_append_code }}</span>
</div>
{% endif %}

{% endif %}

{%- assign current_variant = product.selected_or_first_available_variant -%}

{% if current_variant.available %}

{% if current_variant.inventory_management %}


{% assign first_inventory = current_variant.inventory_quantity %}
{% if first_inventory > 0 %}
<input add1 data-btn-addToCart type="submit" name="add" class="btn" {% if settings.enable_multilang %}data-translate="products.product.add_to_cart"{%endif%} id="product-add-to-cart" value="{{ 'products.product.add_to_cart' | t }}" data-form-id="#add-to-cart-form">
{% else %}
<input pre data-btn-addToCart type="submit" name="add" class="btn" {% if settings.enable_multilang %}data-translate="products.product.pre_order"{%endif%} id="product-add-to-cart" value="{{ 'products.product.pre_order' | t }}" data-form-id="#add-to-cart-form">
{% endif %}


{% else %}
<input add2 data-btn-addToCart type="submit" name="add" class="btn" {% if settings.enable_multilang %}data-translate="products.product.add_to_cart"{%endif%} id="product-add-to-cart" value="{{ 'products.product.add_to_cart' | t }}" data-form-id="#add-to-cart-form">
{% endif %}

{% else %}
<input type="submit" name="add" class="btn" {% if settings.enable_multilang %}data-translate="products.product.unavailable"{%endif%} id="product-add-to-cart" disabled value="{{ 'products.product.unavailable' | t }}" >
{% endif %}




{% comment %}
<input type="submit" name="add" class="btn" {% if settings.enable_multilang %}data-translate="products.product.add_to_cart"{%endif%} id="product-add-to-cart" value="{{ 'products.product.add_to_cart' | t }}">
<input type="submit" name="add" class="btn" {% if settings.enable_multilang %}data-translate="products.product.unavailable"{%endif%} id="product-add-to-cart" disabled value="{{ 'products.product.unavailable' | t }}">
{% endcomment %}


</form>
{% include 'banana-stand-product-page-container' %}
{% if section.settings.display_product_detail_share %}
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-589d7698f6fa5c40"></script>
<div class="addthis_inline_share_toolbox"></div>
{% endif %}
</div>

{%if section.settings.secure_img_checkout != blank %}
{{section.settings.secure_img_checkout | img_url:'340x' | img_tag: 'Secure Checkout', 'secured-checkout' }}
{%endif%}

{%if section.settings.freight_cost_text != blank %}
<div class="freight-cost">
{{section.settings.freight_cost_text}}
</div>
{%endif%}

{%if section.settings.display_availability%}
<p class="product-inventory">
{% if section.settings.text_availability != blank %}
{% if settings.enable_multilang %}
<label class="lang1">{{ section.settings.text_availability | split: '|' | first }}</label>
<label class="lang2">{{ section.settings.text_availability | split: '|' | last }}</label>
{% else %}
<label>{{ section.settings.text_availability | split: '|' | first }}</label>
{% endif %}
{% endif %}
<span>
{% if product.selected_or_first_available_variant.inventory_management %}
{% assign first_inventory = product.selected_or_first_available_variant.inventory_quantity %}
{% if first_inventory > 0 %}
{{first_inventory}} {{ 'products.product.in_stock' | t }}
{% else %}
{{ 'products.product.out_of_stock' | t }}
{% endif %}
{% else %}
{{ 'products.product.many_in_stock' | t }}
{% endif %}
</span>
</p>
{%endif%}

{% if section.settings.display_product_detail_tag %}
<div class="tags">
<strong class="icon-tags" {% if settings.enable_multilang %}data-translate="blogs.article.tags"{%endif%}>{{ 'blogs.article.tags' | t }}:</strong>
{% for tag in product.tags %}
<span class="separator">/</span>
<a href="/collections/all/{{ tag | handle }}" rel="tag">{{ tag }}</a>
{% endfor %}
</div>
{% endif %}

<!--TAB VERTICAL-->
{%comment%}
{% if section.settings.show_tab == 'vertical' %}
{% include 'product-tab-vertical' %}
{% endif %}{%endcomment%}
</div>
</div>
</div>
<!---END PRODUCT FEATURE IMAGE--->

<!---PRODUCT SHOP--->
<div class="col-xs-12 col-sm-12 product-shop">
<div class="container">
<div class="row">
<!-- end product right -->
<div class="product-info">
<h2>Product Infomation</h2>
<h4>
{% if settings.enable_multilang %}
<span class="lang1">Details {{ product.title | split: '|' | first }}</span>
<span class="lang2">Details {{ product.title | split: '|' | last }}</span>
{% else %}
<span>Details {{ product.title | split: '|' | first }}</span>
{% endif %}
</h4>

{% if section.settings.display_product_detail_description %}
<div class="info-item">
<h3 class="info-item-title">
{% if settings.enable_multilang %}
<span class="lang1">{{ section.settings.product_description_title | split: '|' | first }}</span>
<span class="lang2">{{ section.settings.product_description_title | split: '|' | last }}</span>
{% else %}
<span>{{ section.settings.product_description_title | split: '|' | first }}</span>
{% endif %}
</h3>

<div class="info-item-content">

{% if product.description contains '[countdown]' or product.description contains '[Custom Product Tab]' %}
{% assign des = product.description | split:'[/countdown]</p>' | last %}
{% assign des = des | split:'[Custom Product Tab]' | first %}

{% if settings.enable_multilang %}
<div class="lang1">{{ des | split: '[lang2]' | first }}</div>
<div class="lang2">{{ des | split: '[lang2]' | last }}</div>
{% else %}
<div>{{ des | split: '[lang2]' | first }}</div>
{% endif %}

{% else %}

{% if settings.enable_multilang %}
<div class="lang1">{{ product.description | split: '[lang2]' | first }}</div>
<div class="lang2">{{ product.description | split: '[lang2]' | last }}</div>
{% else %}
<div>{{ product.description | split: '[lang2]' | first }}</div>
{% endif %}

{% endif %}

</div>
{% if section.settings.display_product_detail_share %}
<div class="share-box">
<h2>{%include 'multilang' with section.settings.title_share_btn %}</h2>
<hr/>
</div>
</div>
{% endif %}
</div>
{% endif %}

{% if section.settings.display_custom_tab %}
<div class="info-item">
<h3 class="info-item-title">
{% if settings.enable_multilang %}
<span class="lang1">{{ section.settings.custom_tab_title | split: '|' | first }}</span>
<span class="lang2">{{ section.settings.custom_tab_title | split: '|' | last }}</span>
{% else %}
<span>{{ section.settings.custom_tab_title | split: '|' | first }}</span>
{% endif %}
</h3>
<div class="info-item-content">
{% if settings.enable_multilang %}
<div class="lang1">{{ section.settings.custom_tab_content | split: '[lang2]' | first }}</div>
<div class="lang2">{{ section.settings.custom_tab_content | split: '[lang2]' | last }}</div>
{% else %}
<div>{{ section.settings.custom_tab_content | split: '[lang2]' | first }}</div>
{% endif %}
</div>
</div>
{% endif %}

{% if section.settings.display_custom_tab_2 %}
<div class="info-item">
<h3 class="info-item-title">
{% if settings.enable_multilang %}
<span class="lang1">{{ section.settings.custom_tab_title_2 | split: '|' | first }}</span>
<span class="lang2">{{ ssection.ettings.custom_tab_title_2 | split: '|' | last }}</span>
{% else %}
<span>{{ section.settings.custom_tab_title_2 | split: '|' | first }}</span>
{% endif %}
</h3>
<div class="info-item-content">
{% if product.description contains '[Custom Product Tab]' %}
{% assign des = product.description | split:'[Custom Product Tab]' | last | split:'[/Custom Product Tab]' | first %}
{% if settings.enable_multilang %}
<div class="lang1">{{ des | split: '[lang2]' | first }}</div>
<div class="lang2">{{ des | split: '[lang2]' | last }}</div>
{% else %}
<div>{{ des | split: '[lang2]' | first }}</div>
{% endif %}
{% endif %}
</div>
</div>
{% endif %}

{% if section.settings.display_product_reviews %}
<div class="info-item">
<h3 class="info-item-title">
{% if settings.enable_multilang %}
<span class="lang1">{{ section.settings.product_review_title | split: '|' | first }}</span>
<span class="lang2">{{ section.settings.product_review_title | split: '|' | last }}</span>
{% else %}
<span>{{ section.settings.product_review_title | split: '|' | first }}</span>
{% endif %}
</h3>
<div class="info-item-content">
<div id="shopify-product-reviews" data-id="{{product.id}}">{{ product.metafields.spr.reviews }}</div>
</div>
</div>
{%endif%}



{%comment%}
{% include 'product-tab-horizontal' %}
{%endcomment%}


<!--RELATED PRODUCT-->
{% if section.settings.display_related_products %}
{% if section.settings.related_products_type == "tags" %}
{% include 'related-products-by-tags' %}
{% else %}
{% include 'related-products' %}
{% endif %}
{% endif %}
</div>
</div>
</div>
</div>
<!---END PRODUCT SHOP--->
</div>
<!--TAB HORIZONTAL-->


</div>
</div>
<div class="product_variants" style="display:none">
{{product.variants|json}}
</div>

{{ 'option_selection.js' | shopify_asset_url | script_tag }}


{% schema %}
{
"name": "Product pages",
"settings": [
{
"type": "header",
"content": "Moreview"
},
{
"type":"checkbox",
"id":"disable_thumbnail",
"label":"Disable thumbnails image more view",
"default":true
},
{
"type":"header",
"content":"Content Left"
},
{
"type": "image_picker",
"id": "image_logo",
"label": "Image logo"
},
{
"type":"text",
"id":"text_link_contact",
"label":"Title Secure Checkout",
"default":"Your advantages"
},
{
"type": "checkbox",
"id": "show_img_vendor",
"label": "Display Image Vendor?",
"default": false
},
{
"type":"text",
"id":"title_secure_checkout",
"label":"Title Secure Checkout",
"default":"Your advantages"
},
{
"type":"text",
"id":"text_secure_checkout",
"label":"Text Secure Checkout",
"default":"30 days free return"
},
{
"type": "checkbox",
"id": "display_product_detail_share",
"label": "Display Product Share?",
"default": true
},
{
"type":"text",
"id":"title_share_btn",
"label":"title Share Social",
"default":"Sharing is Cool"
},
{
"type":"header",
"content":"Content right"
},
{
"type": "checkbox",
"id": "display_product_type",
"label": "Display Product Type?",
"default": true
},
{
"type": "checkbox",
"id": "display_prev_next_product",
"label": "Display Prev\/Next Product?",
"default": true
},
{
"type": "checkbox",
"id": "display_availability",
"label": "Display Availability?",
"default": true
},
{
"type": "text",
"id": "text_availability",
"label": "Text Availability",
"default": "Availability"
},
{
"type": "checkbox",
"id": "display_product_sku",
"label": "Display Product SKU?",
"default": true
},
{
"type": "text",
"id": "product_sku_text",
"label": "Product SKU Text",
"default": "SKU:"
},
{
"type": "checkbox",
"id": "display_product_bar",
"label": "Display Product Barcode?",
"default": true
},
{
"type": "text",
"id": "product_bar_text",
"label": "Product Barcode Text",
"default": "Barcode:"
},
{
"type": "text",
"id": "text_countdown",
"label": "Text Countdown",
"default": "Limited-Time Offers, End in:"
},
{
"type": "checkbox",
"id": "use_color_swatch",
"label": "Use Color Swatch?",
"default": true
},
{
"type": "checkbox",
"id": "display_subtotal",
"label": "Display Subtotal?",
"default": true
},
{
"type": "checkbox",
"id": "display_product_detail_tag",
"label": "Display Tags?",
"default": true
},
{
"type":"text",
"id":"ship_costs_text",
"label":"Shipping costs text",
"default":"incl. VAT plus"
},
{
"type":"text",
"id":"ship_costs_text_url",
"label":"Shipping costs url text",
"default":"shipping costs"
},
{
"type":"url",
"id":"page_url",
"label":"Page URL"
},
{
"type":"text",
"id":"shipping_day",
"label":"Delivery time text",
"default":"Delivery Time Is 4-6 Working Day(s)"
},
{
"type":"textarea",
"id":"shipping_day_after",
"label":"Delivery content bottom",
"default":"You will receive the information about the delivery dates to other countries once you have chosen your favoured country of dispatch."
},
{
"type":"textarea",
"id":"freight_cost_text",
"label":"Delivery Cost"
},
{
"type":"image_picker",
"id":"secure_img_checkout",
"label":"Secured Image Checkout"
},
{
"type": "color",
"id": "add_to_cart_btn_bgc",
"label": "Add to Cart Button Background Color",
"default":"#fff"
},
{
"type": "color",
"id": "add_to_cart_btn_txtc",
"label": "Add to Cart Button Text Color",
"default":"#777"
},
{
"type": "color",
"id": "add_to_cart_btn_bgc_h",
"label": "Add to Cart Button Background Color Hover",
"default":"#777"
},
{
"type": "color",
"id": "add_to_cart_btn_txtc_h",
"label": "Add to Cart Button Text Color Hover",
"default":"#fff"
},
{
"type": "checkbox",
"id": "display_product_detail_description",
"label": "Display Product Description?",
"default": true
},
{
"type": "text",
"id": "product_description_title",
"label": "Product Description Title",
"default": "Product Description"
},
{
"type": "checkbox",
"id": "display_custom_tab",
"label": "Display Shipping & Returns?",
"default": true
},
{
"type": "text",
"id": "custom_tab_title",
"label": "Title Shipping & Returns",
"default": "Shipping & Returns"
},
{
"type": "textarea",
"id": "custom_tab_content",
"label": "Shipping & Returns"
},
{
"type": "checkbox",
"id": "display_custom_tab_2",
"label": "Display Custom Tab?",
"default": true
},
{
"type": "text",
"id": "custom_tab_title_2",
"label": "Title Custom Tab",
"default": "Custom Tab"
},
{
"type": "checkbox",
"id": "display_size_chart",
"label": "Display Size Chart?",
"default": true
},
{
"type": "text",
"id": "custom_size_chart_title",
"label": "Custom Size Chart Title",
"default": "Size Chart"
},
{
"type": "image_picker",
"id": "custom_size_chart",
"label": "Size Chart Image"
},
{
"type": "textarea",
"id": "custom_size_chart_content",
"label": "Custom Size Chart Content"
},
{
"type": "checkbox",
"id": "display_product_reviews",
"label": "Display Product Reviews?",
"default": true
},
{
"type": "text",
"id": "product_review_title",
"label": "Product Reviews Title",
"default": "Customer Reviews"
},
{
"type": "header",
"content": "Related Products"
},
{
"type": "checkbox",
"id": "display_related_products",
"label": "Display Related Products?",
"default": true
},
{
"type": "text",
"id": "related_products_title",
"label": "Title of related products block",
"default": "Related Products"
},
{
"type": "text",
"id": "number_of_related_products",
"label": "Number of related products",
"default": "8"
},
{
"type": "select",
"id": "related_products_per_row",
"label": "Products per row",
"options": [
{
"value": "3",
"label": "3"
},
{
"value": "4",
"label": "4"
},
{
"value": "5",
"label": "5"
}
],
"default": "5"
},
{
"type": "radio",
"id": "related_products_type",
"label": "Type of related products",
"options": [
{
"value": "tags",
"label": "By Tags"
},
{
"value": "collection",
"label": "By Collection"
}
],
"default": "collection"
},
{
"type":"text",
"id":"delivery_date_for_available",
"label":"Type delivery dates for available",
"default":"1~5 days"
},
{
"type":"text",
"id":"delivery_date_for_preorder",
"label":"Type delivery dates for preorder",
"default":"15~30 days"
}
],
"blocks":[
{
"type":"national",
"name":"National",
"settings":[
{
"type":"image_picker",
"id":"image",
"label":"flag"
},
{
"type":"text",
"id":"national",
"label":"National"
},
{
"type":"text",
"id":"content",
"label":"Delivery time",
"default":"Delivery Time Is 3-5 Working Day(s)"
}
]
}
]
}
{% endschema %}

 

<script>
var country = "";
var country_name = "";
var country_flag = "";
var continent = "";
var locations = [
{name: "Amodor", delivery_time: 2},
{name: "BoardsandMore", delivery_time: 7},
{name: "Osojnikova 4a", delivery_time: 1},
{name: "Pryde", delivery_time: 7},
]

var getReadyTime = () => {
{% assign current_variant = product.selected_or_first_available_variant %}
}

$(document).ready(function(){
$('.deliver-text').click(function(){
$(this).closest('.deliver-day').toggleClass('show-hand');
});
$.getJSON('https://ipinfo.io/json', function(location) {
country = location.country || ""
if(country !="") {
$.getJSON("https://flagcdn.com/en/codes.json", function(countries) {
country_name = countries[country.toLowerCase()]
$.getJSON("https://raw.githubusercontent.com/samayo/country-json/master/src/country-by-continent.json", function(continents) {
continent = continents.find(c=> c.country.includes(country_name)).continent
country_flag = `https://flagcdn.com/w40/${country.toLowerCase()}.png`;

var html = `<span class="shipping_text" style="max-width: 260px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;vertical-align: middle;border-bottom:2px solid;margin-left:5px;font-weight: 500;"> ${country_name}<img src="https://flagcdn.com/w40/${country.toLowerCase()}.png" alt="105" style="width: 18px; display: inline-block; margin-left: 10px;"></span>`;
$('.deliver-info').append(html)
})
})
}
});
});


function updateDeliveryTime(variant) {

}

//Shopify.Image.preload({{ product.images | json }}, 'grande');

{% if section.settings.display_subtotal and product.available %}
//update price when changing quantity
function updatePricing() {
//try pattern one before pattern 2
var regex = /([0-9]+[.|,][0-9]+[.|,][0-9]+)/g;
var unitPriceTextMatch = jQuery('.product .price').text().match(regex);

if (!unitPriceTextMatch) {
regex = /([0-9]+[.|,][0-9]+)/g;
unitPriceTextMatch = jQuery('.product .price').text().match(regex);
}

if (unitPriceTextMatch) {
var unitPriceText = unitPriceTextMatch[0];
var unitPrice = unitPriceText.replace(/[.|,]/g,'');
var quantity = parseInt(jQuery('#quantity').val());
var totalPrice = unitPrice * quantity;

var totalPriceText = Shopify.formatMoney(totalPrice, window.money_format);
regex = /([0-9]+[.|,][0-9]+[.|,][0-9]+)/g;
if (!totalPriceText.match(regex)) {
regex = /([0-9]+[.|,][0-9]+)/g;
}
totalPriceText = totalPriceText.match(regex)[0];

var regInput = new RegExp(unitPriceText, "g");
var totalPriceHtml = jQuery('.product .price').html().replace(regInput ,totalPriceText);

jQuery('.product .total-price span').html(totalPriceHtml);
}
}

jQuery('#quantity').on('change', updatePricing);
{% endif %}

var inven_array = {
{% for variant in product.variants %}
"{{variant.id}}":"{{variant.inventory_quantity}}",
{%endfor%}
};

var inven_num = '';
var selectCallback = function(variant, selector) {


var addToCart = jQuery('#product-add-to-cart'),
productPrice = jQuery('.product .price'),
sku = jQuery('.product-sku strong'),
bar = jQuery('.product-barcode strong'),
discount = jQuery('.discount-percent'),
comparePrice = jQuery('.product .compare-price');

if (variant) {
updateDeliveryTime(variant)

sku.text(variant.sku);
bar.text(variant.barcode);

{% comment %}
if (variant.available) {
// We have a valid product variant, so enable the submit button
addToCart.removeClass('disabled').removeAttr('disabled').val(window.inventory_text.add_to_cart);

} else {
// Variant is sold out, disable the submit button
addToCart.val(window.inventory_text.sold_out).addClass('disabled').attr('disabled', 'disabled');
}

{% endcomment %}

var inven_array = this.inven_array;

if (variant.available !==undefined && variant.available) {
if (variant.inventory_management!=null) {
for( variant_id in inven_array){
if(variant.id == variant_id ){
inven_num = inven_array[variant_id];
var inventoryQuantity = parseInt(inven_num);
}
}
// Button Text
if(inventoryQuantity > 0){
// We have a valid product variant, so enable the submit button
addToCart.removeClass('disabled').removeAttr('disabled').val(window.inventory_text.add_to_cart);
}else{
addToCart.removeClass('disabled').removeAttr('disabled').val(window.inventory_text.pre_order);
}
} else {
addToCart.removeClass('disabled').removeAttr('disabled').val(window.inventory_text.add_to_cart);
}

}
else {
addToCart.val(window.inventory_text.sold_out).addClass('disabled').attr('disabled', 'disabled');
};

// Regardless of stock, update the product price
productPrice.html(Shopify.formatMoney(variant.price, "{{ shop.money_format }}"));

// Also update and show the product's compare price if necessary
if ( variant.compare_at_price > variant.price ) {
discount
.html('-' + Math.round((variant.compare_at_price - variant.price) * 100 / variant.compare_at_price) + '%')
.show();
productPrice.addClass("on-sale")
comparePrice
.html(Shopify.formatMoney(variant.compare_at_price, "{{ shop.money_format }}"))
.show();
} else {
comparePrice.hide();
discount.hide();
productPrice.removeClass("on-sale");
}
{% if settings.use_color_swatch %}
// BEGIN SWATCHES
var form = jQuery('#' + selector.domIdPrefix).closest('form');
for (var i=0,length=variant.options.length; i<length; i++) {
var radioButton = form.find('.swatch[data-option-index="' + i + '"] :radio[value="' + variant.options[i] +'"]');
if (radioButton.size()) {
radioButton.get(0).checked = true;
}
}
// END SWATCHES
{% endif %}

{% if section.settings.display_subtotal and product.available %}
updatePricing();
{% endif %}

{% if settings.enable_multiple_currencies %}
Currency.convertAll('{{ shop.currency }}', jQuery('#currencies').val(), 'span.money', 'money_format');
{% endif %}

} else {
// The variant doesn't exist. Just a safeguard for errors, but disable the submit button anyway
addToCart.val(window.inventory_text.unavailable).addClass('disabled').attr('disabled', 'disabled');
}


var inven_array = {
{% for variant in product.variants %}
"{{variant.id}}":"{{variant.metafields.available.text}}",
{% endfor %}
};

var avai_string = '';
if (variant !== null && !!variant.available) {
for (variant_id in inven_array) {
if (variant.id == variant_id) {
avai_string = inven_array[variant_id];
var available = avai_string.toString();
}
}
}


//update variant inventory
{% if section.settings.display_availability %}
if (variant.available) {
if (variant.inventory_management!=null) {
jQuery(".product-inventory span").text(variant.inventory_quantity + " " + window.inventory_text.in_stock);
} else {
jQuery(".product-inventory span").text(window.inventory_text.many_in_stock);
}
} else {
jQuery(".product-inventory span").text(window.inventory_text.out_of_stock);
}
if (available == '') {
jQuery(".product-inventory label").text('Available');
} else {
jQuery(".product-inventory label").text(available);
}
{% endif %}

/*begin variant image*/
if (variant && variant.featured_image) {
var originalImage = jQuery(".product-featured-image");
var newImage = variant.featured_image;
var element = originalImage[0];
Shopify.Image.switchImage(newImage, element, function (newImageSizedSrc, newImage, element) {
jQuery('.product-thumbnails img').each(function() {
var grandSize = jQuery(this).attr('src');
grandSize = grandSize.replace('compact','grande');
if (grandSize == newImageSizedSrc) {
jQuery(this).parent().trigger('click');
return false;
}
});
});
}
/*end of variant image*/
};

jQuery(function($) {
{% if product.available and product.variants.size > 0 %}
new Shopify.OptionSelectors('product-selectors', {
product: {{ product | json }},
onVariantSelected: selectCallback,
enableHistoryState: true
});

{% comment %}
Use color swatch and linked options (copyright by @CarolineSchnapp)
{% endcomment %}
{% if section.settings.use_color_swatch and product.available and product.options.size > 0 %}
Shopify.linkOptionSelectors({{ product | json }});
{% endif %}

{% if section.settings.use_color_swatch != true %}
jQuery('.single-option-selector').selectize();
jQuery('.selectize-input input').attr("disabled","disabled");
{% endif %}

{% endif %}

// Add label if only one product option and it isn't 'Title'. Could be 'Size'.
{% if product.options.size == 1 and product.options.first != 'Title' %}
$('.selector-wrapper:eq(0)').prepend('<label>{{ product.options.first }}</label>');
{% endif %}

// Hide selectors if we only have 1 variant and its title contains 'Default'.
{% if product.variants.size == 1 and product.variants.first.title contains 'Default' %}
$('.selector-wrapper').hide();
{% endif %}

// Auto-select first available variant on page load. Otherwise the product looks sold out.
{% assign found_one_in_stock = false %}
{% for variant in product.variants %}
{% if variant.available and found_one_in_stock == false %}
{% assign found_one_in_stock = true %}
{% for option in product.options %}
$('.single-option-selector:eq({{ forloop.index0 }})').val({{ variant.options[forloop.index0] | json }}).trigger('change');
{% endfor %}
{% endif %}
{% endfor %}

{% if section.settings.display_product_reviews %}
var reviewsTimeout = setInterval(function() {
if (jQuery(".spr-badge-caption").length>0) {
jQuery(".spr-badge-caption").on('click', function() {
jQuery('html,body').animate({
scrollTop: jQuery(".panel:last").offset().top},
'400');
jQuery("#collapse-tab4").collapse('show');
});
clearInterval(reviewsTimeout);
}
},1000);

{% endif %}

});


$(function(){
$('.size-chart-open-popup').click(function(){
$('.size-chart').show();
$('body').addClass('modal-open');
});
$('.close').click(function(){
$('body').removeClass('modal-open');
$('.size-chart').hide();
});
});

$(document).on("click", ".swatch-element", function(e) {
//e.preventDefault();
if($(this).find("label").find("p").text().replace(/\s/g,'') == "Available") {
var delivery_date = `{{section.settings.delivery_date_for_available}}`;
//console.log("=======",delivery_date);
$(".shipping_date").text(delivery_date + " - ");
} else {
var delivery_date = `{{section.settings.delivery_date_for_preorder }}`;
//console.log("=======", delivery_date);
$(".shipping_date").text(delivery_date + " - ");
}
});

</script>


<style>
#product-add-to-cart{
background-color:{{section.settings.add_to_cart_btn_bgc}};
color:{{section.settings.add_to_cart_btn_txtc}};
border-color:{{section.settings.add_to_cart_btn_txtc}}
}
#product-add-to-cart:hover{
background-color:{{section.settings.add_to_cart_btn_bgc_h}};
color:{{section.settings.add_to_cart_btn_txtc_h}};
border-color:{{section.settings.add_to_cart_btn_txtc_h}}
}
/* .swatch input:checked + label, .swatch label:hover {
border-color: {{section.settings.add_to_cart_btn_txtc}};
background:{{section.settings.add_to_cart_btn_txtc}};
color:white;
} */
</style>