All things Shopify and commerce
Hello,
I use a table (product tabs) on my product page.
By default, on a computer, the first tab of my table is open, which allows visitors to directly read the technical description of my product without having to click on the first "Characteristics" tab. Below is the screenshot of the computer version which works as I want 👍.
However for the mobile version, this tab is closed by default. The characteristics of my product are not displayed by default as in the screenshot below.
How to open this tab by default on the mobile version please???
Don't hesitate to ask me for a copy of the code you need to take a look, I can send the liquid or other files if necessary... Thank you in advance for your help
Dear Hannah, thank you for your help. I already had a look on product page settings but I cannot open this tab by this way.
Here is the code of my product page to let you say what I have to modify :
{%- if settings.breadcrumb_pr -%}{%- render 'breadcrumb' -%}{%- else -%}<div class="topSpace"></div>{%- endif -%}
{%- liquid
assign isRtl = false
assign lisRtl = 'ar,dv,ha,he,ku,fa,ur,ug' | split: ','
if lisRtl contains request.locale.iso_code or settings.rtl
assign isRtl = true
endif
assign secSt = section.settings
assign current_variant = product.selected_or_first_available_variant
assign product_thumb_size = '160x'
assign zoomImg = '1800x1800'
assign enable_zoom = settings.enable_zoom
assign className = ""
assign slidefade = true
assign centermode = 'left'
assign watchCss = false
assign slHeight = true
assign dotNav = false
assign product_image_width = 'wd50-md'
assign product_description_width = 'wd50-md'
if settings.product_latyout == "style2"
assign product_image_width = 'wd66-md'
assign product_description_width = 'wd33-md'
elsif settings.product_latyout == "style3"
assign className = "fl f-wrap"
assign watchCss = true
assign product_image_width = 'wd60-md'
assign product_description_width = 'wd40-md'
elsif settings.product_latyout == "style4"
assign watchCss = true
elsif settings.product_latyout == "style5"
assign className = "fl f-wrap"
assign watchCss = true
assign product_image_width = 'wd60-md'
assign product_description_width = 'wd40-md'
elsif secSt.prstyle == "5"
assign centermode = "center"
assign slHeight = false
assign dotNav = true
assign product_image_width = 'wd100'
assign product_description_width = 'wd100'
endif
assign featured_img_src=current_variant.featured_image.src | default: product.featured_image.src
assign sizeOptions = settings.sizeOpt | downcase | replace:", ","," | replace:" , ","," | replace:" ,","," | split: ","
assign sizechart = false
assign sizechartall = flase
if settings.sizechart and sizeOptions contains 'all'
assign sizechartall = true
endif
-%}
{% if settings.product_latyout == "style1" and settings.thumbnail_pos != "bottom" %}
{% capture imgSt %}--imgw:calc(100% - 90px);{% if settings.thumbnail_pos == "left" %}--od:1;{% endif %}{% endcapture %}
{% elsif settings.product_latyout == "style2" and settings.thumbnail_pos != "bottom" %}
{% capture imgSt %}--imgw:calc(100% - 90px);{% if settings.thumbnail_pos == "left" %}--od:1;{% endif %}{% endcapture %}
{% else %}
{% capture imgSt %}--imgw:100%;{% endcapture %}
{% endif %}
<div class="ptContainer {{settings.product_latyout}} page-width{% if secSt.section_width %} fullwidth{%endif%}" data-style="{{settings.product_latyout}}" data-url="{{ product.url }}" data-section-id="{{ section.id }}" data-section-type="product" data-enable-history-state="true">
{%- capture productImages -%}
<div class="fl f-jcsb f-col{% if settings.thumbnail_pos != "bottom" %} f-row-md{% endif %}">
<div class="pr_lg_img" data-product-single-media-group style="{{imgSt}}">
<div class="primgSlider {{settings.product_latyout}} pis{{section.id}} {{className}}" data-flickity='{ "cellAlign":"{{centermode}}","watchCSS":{{watchCss}},"wrapAround":true,"adaptiveHeight":{{slHeight}},"pageDots":{{dotNav}}{%- if isRtl -%},"rightToLeft": true{%- endif -%} }'>
{% for media in product.media %}
{%- assign imgNo = forloop.index0 -%}
{% case media.media_type %}
{% when 'image' %}
<{%- if settings.enable_lightbox -%}a href="{{ media | img_url: 'master' }}"{% else %}div{% endif %} id="{{media.id}}" data-pswp-width="{{media.width}}" data-pswp-height="{{media.height}}" class="pr_zoom_{{section.id}} pr_photo pswipe{% if settings.enable_lightbox %} lightbox{% endif %}{% if enable_zoom %} zoomcr{% endif %}" {% if enable_zoom %}data-zoom="{{ media | img_url: zoomImg }}"{% endif %} data-slide="{{imgNo}}">
{%- assign primg_url = media | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
<span class="imgWrapper" style="max-width:{% if settings.pimg_maxHt != blank %}{{ settings.pimg_maxHt | times: media.aspect_ratio }}{% else %}{{media.width}}{% endif %}px;">
<img class="imgFl lazyload featImg{{ section.id }} product-featured-img{% if enable_zoom %} js-zoom-enabled{% endif %}{% if forloop.first %} lazypreload{% endif %}" src="{{ media | img_url: "50x" }}" width="{{ media.width }}" height="{{ media.height }}"
data-src="{{ primg_url }}" data-widths="[400, 600, 800, 1000]" data-aspectratio="{{ media.aspect_ratio }}" data-sizes="auto" alt="{{ media.alt | escape }}">
</span>
</{%- if settings.enable_lightbox -%}a{% else %}div{% endif %}>
{% when 'external_video' %}
<div class="pr_photo p{{secSt.prstyle}} videoSlide" data-media-id="{{ media.id }}" data-slide="{{imgNo}}">
<div class="vd-wrap">{{ media | external_video_tag }}</div>
</div>
{% when 'video' %}
<div class="pr_photo p{{secSt.prstyle}} videoSlide" data-media-id="{{ media.id }}" data-slide="{{imgNo}}">
{%- assign videoThumb = media | img_url: '700x' -%}
{{ media | video_tag: poster: videoThumb, controls: true, muted: true, loop: true, playsinline: true, webkit-playsinline: true }}
</div>
{% when 'model' %}
<div class="pr_photo p{{secSt.prstyle}} pmd" id="FeaturedMedia-{{ section.id }}-{{ media.id }}-wrapper" data-product-media-type-model data-product-single-media-wrapper data-media-id="{{ section.id }}-{{ media.id }}">
<div class="prMedia" style="padding-top:100%">{{ media | model_viewer_tag: image_size: pimgsize, reveal: 'interaction', toggleable: true, data-model-id: media.id }}</div>
</div>
{% else %}
<div class="pr_photo p{{secSt.prstyle}} " style="padding-top: 100%;" data-media-id="{{ media.id }}">{{ media | media_tag }}</div>
{% endcase %}
{% endfor %}
</div>
{% assign first_3d_model = product.media | where: "media_type", "model" | first %}
{%- if first_3d_model -%}
<button aria-label="{{ 'products.product.view_in_space_label' | t }}" class="btn w_100 hide product-single__view-in-space" data-shopify-xr data-shopify-model3d-id="{{ first_3d_model.id }}" data-shopify-title="{{ product.title | escape }}" data-shopify-xr-hidden>
<span class='product-single__view-in-space-text'>{{ 'products.product.view_in_space' | t }}</span>
</button>
{%- endif -%}
{% comment %}*** product video *** {% endcomment %}
{%- if product.metafields.my_fields.video != blank -%}<a href="{{product.metafields.my_fields.video}}" class="popup-video" title="{{ 'products.product.video' | t }}"><i class="at at-video" aria-hidden="true"></i> <span class="tooltip-label">{{ 'products.product.video' | t }}</span></a>{%- endif -%}
{% comment %}<div class="product-btn fl">
{%- if settings.enable_lightbox -%}<a href="#" class="btn prlightbox" aria-label="Click to Zoom image"><i class="at at-expand-l-arrows" aria-hidden="true"></i> <span class="tooltip-label">{{ 'products.product.zoom' | t }}</span></a>{%- endif -%}
</div>{% endcomment %}
{% if settings.pr_lbl %}
<span class="product-labels {{ settings.select_label_style }}">
{%- if settings.sale_lbl and product.compare_at_price > product.price -%}
{% if settings.sale_label_style == "salelabel" %}
<label class="lbl on-sale">{{ 'products.product.on_sale' | t}}</label>
{% else %}
<label class="lbl on-sale">-{{ product.compare_at_price_min | minus: product.price | times: 100 | divided_by: product.compare_at_price_min }}%</label>
{% endif %}
{%- endif -%}
{%- if product.tags contains settings.pr_label1 -%}<label class="lbl pr-label1">{{settings.pr_label1}}</label>{%- endif -%}
{%- if product.tags contains settings.pr_label2 -%}<label class="lbl pr-label2">{{settings.pr_label2}}</label>{%- endif -%}
{%- if product.tags contains settings.pr_label3 -%}<label class="lbl pr-label3">{{settings.pr_label3}}</label>{%- endif -%}
</span>
{% endif %}
</div>
{% if product.media.size > 0 %}
<div class="thumbs_nav {{settings.thumbnail_pos}} pr flickity-enabled{% if settings.product_latyout != "style1" and settings.product_latyout != "style2" %} hide{% endif %}{% if product.media.size == 1 %} hide{% endif %}">
<div class="pr_thumbsWr ptw{{ section.id }}">
<div class="pr_thumbs pr_thumbs{{ section.id }}{% if secSt.prthumbs != "bottom" %} f-col-md{% endif %}">
{% for media in product.media %}
{%- assign imgNo = forloop.index0 -%}
{% capture thumbImgs %}{{ media | img_url: '100x' }} 100w {{ 100 | divided_by: media.aspect_ratio | round }}h,{{ media | img_url: '200x' }} 200w {{ 200 | divided_by: media.aspect_ratio | round }}h{% endcapture %}
<div class="pr_thumbs_item{% if media.media_type == 'video' or media.media_type == 'external_video' or media.media_type == 'model' %} vd{% endif %}" data-slide="{{imgNo}}">
<a id="img{{media.id}}" href="{{ media | img_url: '50x' }}" class="gitem-img pr_thumb pr_thumb{{ section.id }} lazyload{% if media.media_type == 'image' %} swipeImg{% endif %}{% if featured_img_src== media %} activeSlide{% endif %}"
data-bgset="{% if media.media_type == 'image' %}{{thumbImgs}}{% else %}{{ media | img_url: '200x' }}{% endif %}" data-sizes="auto" data-parent-fit="contain" title="{{media.alt | default: product.title}}">
{% if media.media_type == 'video' or media.media_type == 'external_video' %}<svg class="at-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M424.4 214.7L72.4 6.6C43.8-10.3 0 6.1 0 47.9V464c0 37.5 40.7 60.1 72.4 41.3l352-208c31.4-18.5 31.5-64.1 0-82.6zM48 453.5v-395c0-4.6 5.1-7.5 9.1-5.2l334.2 197.5c3.9 2.3 3.9 8 0 10.3L57.1 458.7c-4 2.3-9.1-.6-9.1-5.2z"/></svg>{% endif %}
{% if media.media_type == 'model' or media.media_type == 'external_video' %}<svg class="at-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M239.1 7.5l-208 78c-18.7 7-31.1 25-31.1 45v225.1c0 18.2 10.3 34.8 26.5 42.9l208 104c13.5 6.8 29.4 6.8 42.9 0l208-104c16.3-8.1 26.5-24.8 26.5-42.9V130.5c0-20-12.4-37.9-31.1-44.9l-208-78C262 3.4 250 3.4 239.1 7.5zm16.9 45l208 78v.3l-208 84.5-208-84.5v-.3l208-78zM48 182.6l184 74.8v190.2l-184-92v-173zm232 264.9V257.4l184-74.8v172.9l-184 92z"/></svg>{% endif %}
</a>
</div>
{% endfor %}
</div>
</div>
<button class="flickity-button previous" type="button" aria-label="Previous"><svg class="flickity-button-icon" viewBox="0 0 100 100"><path d="M 10,50 L 60,100 L 70,90 L 30,50 L 70,10 L 60,0 Z" class="arrow"></path></svg></button>
<button class="flickity-button next" type="button" aria-label="Next"><svg class="flickity-button-icon" viewBox="0 0 100 100"><path d="M 10,50 L 60,100 L 70,90 L 30,50 L 70,10 L 60,0 Z" class="arrow" transform="translate(100, 100) rotate(180) "></path></svg></button>
</div>
{% endif %}
</div>
<!-- product share -->
{% if settings.show_share_buttons_single %}
{% render 'social-sharing', share_title: product.title, share_permalink: product.url, share_image: product, sharing_lbl: settings.sharing_lbl %}
{% endif %}
{%- endcapture -%}
{%- capture infoLinks -%}
{%- if settings.enable_wishlist or settings.askaboutproduct or settings.shippingpopup -%}
<div class="infolinks mfp-link">
{%- if settings.enable_wishlist -%}<a class="inLink wishlist addto-wishlist" href="/pages/wishlist" rel="{{ product.handle | handleize }}"><i class="at at-heart-l"></i><span class="msg">{{ 'products.wishlist.add_to' | t}}</span></a>{%- endif -%}
{%- if settings.shippingpopup -%}<a href="#ShippingInfo" data-effect="mfp-zoom-in" class="inLink mfp"><i class="at at-paper-l-plane"></i> {{'products.product.shipping_link' | t}}</a>{%- endif -%}
{%- if settings.askaboutproduct -%}
<a href="#productInquiry" data-effect="mfp-zoom-in" class="mfp{% if settings.catalogmode %} btn btn-enquiry brt--large{% else %} inLink{% endif %}"><i class="at at-envelope-l"></i> {{'products.enquiry.link' | t}}</a>
{%- endif -%}
</div>
{%- endif -%}
{%- endcapture -%}
{%- capture productDetails -%}
{% for block in section.blocks %}
{% assign blkSt = block.settings %}
{% case block.type %}
{% when 'hr' %}
<hr class="mt0 mb{{blkSt.bm}}" style="border-color: {{blkSt.hrc}}" {{ block.shopify_attributes }} />
{% when 'title' %}
<h1 class="product-single__title ttlTxt {{blkSt.transform}} mb{{blkSt.bm}}" style="--tcl:{{blkSt.cl}};--tfs:{{blkSt.fs}}px;--tfsm:{{blkSt.fsm}}px;--tff:var(--{{blkSt.ff}});--tfw:{{blkSt.fw}};--tlh:1.4;" {{ block.shopify_attributes }}>{{ product.title }}</h1>
{% when 'price' %}
{%- if product.metafields.custom.product_group != blank -%}<style>.priceSingle{--pcl:{{blkSt.pcl}};--pcls:{{blkSt.pcls}};--fs:{{blkSt.fs}}px; --fsm:{{blkSt.fsm}}px;--pfw:{{ blkSt.pfw}};}</style>{%- endif -%}
{%- unless settings.hide-price or product.metafields.custom.product_group != blank -%}
<div id="price{{ section.id }}" class="fl f-wrap psinglePriceWr mb{{blkSt.bm}}" style="--pcl:{{blkSt.pcl}};--pcls:{{blkSt.pcls}};--fs:{{blkSt.fs}}px; --fsm:{{blkSt.fsm}}px;--pfw:{{ blkSt.pfw}};" {{ block.shopify_attributes }}>
{% if current_variant.compare_at_price > current_variant.price %}
<span class="v-hidden">{{ 'products.product.regular_price' | t }}</span>
<span class="psinglePrice sale"><span id="ProductPrice-{{ section.id }}">{{ current_variant.price | money }}</span></span>
<s class="psinglePrice">{{ current_variant.compare_at_price | money }}</s>
{% else %}
<span class="v-hidden">{{ 'products.product.regular_price' | t }}</span>
<span class="psinglePrice"><span id="ProductPrice-{{ section.id }}">{{ current_variant.price | money }}</span></span>
<s class="psinglePrice hide">{{ current_variant.compare_at_price | money }}</s>
{% endif %}
{% if blkSt.saved %}
<span class="discount-badge{% unless current_variant.compare_at_price > current_variant.price %} hide{% endunless %}">
<span class="hide-sm hide-md"> | </span>
<span itemprop="name">{{ 'products.product.you_save' | t}}</span>
<span id="SaveAmount-{{ section.id }}" class="product-single__save-amount">{{ current_variant.compare_at_price | minus: current_variant.price | money }}</span>
<span class="off">(<span>{{ current_variant.compare_at_price | minus: current_variant.price | times: 100 | divided_by: current_variant.compare_at_price }}</span>%{{ 'products.product.off' | t}})</span>
</span>
{% endif %}
<div class="price__unit w_100{% unless current_variant.unit_price_measurement %} hide{% endunless %}">
<span data-unit-price>{{ current_variant.unit_price | money }}</span> /
<span data-unit-base>
{%- 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 -%}
</span>
</div>
</div>
{% if blkSt.taxship %}
{%- if shop.taxes_included or shop.shipping_policy.body != blank -%}
<div class="product__policies rte" data-product-policies>
{% 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 %}
</div>
{%- endif -%}
{%- endif -%}
{%- endunless -%}
{% when 'text' %}
<div class="customtx mb{{blkSt.bm}}{% if blkSt.addbg %} tbg{% endif %}" {{ block.shopify_attributes }} style="--fs:{{ blkSt.fs }}px;--cl:{{ blkSt.cl }};--bg:{{ blkSt.bg}};"> {{ blkSt.text }}</div>
{% when 'ras' %}
<div class="product-info mb{{blkSt.bm}}" {{ block.shopify_attributes }}>
{%- if settings.show_product_review -%}
<div class="review">{% include 'ratings' %}</div>
{%- endif -%}
{%- if blkSt.availability -%}
<div class="product-stock">{{ 'products.product.availability' | t }}
{%- liquid
assign classNm = 'instock'
assign stickLbl = 'products.product.available' | t
if current_variant.inventory_management == "shopify"
if current_variant.available and current_variant.inventory_quantity < 1
assign classNm = 'preorder'
assign stickLbl = 'products.product.pre_order' | t
elsif current_variant.available
assign classNm = 'instock'
assign stickLbl = 'products.product.available' | t
else
assign classNm = 'outstock'
assign stickLbl = 'products.product.unavailable' | t
endif
endif
-%}
<span class="stockLbl {{classNm}}" data-in="{{ 'products.product.available' | t }}" data-out="{{ 'products.product.unavailable' | t }}" data-pre="{{ 'products.product.pre_order' | t }}">{{stickLbl}}</span>
</div>
{%- endif -%}
{%- if blkSt.sku and current_variant.sku != blank -%}<div class="product-sku">{{ 'products.product.sku' | t }} <span class="variant-sku">{{ current_variant.sku }}</span></div>{%- endif -%}
</div>
{% when 'coltabs' %}
<details class="sumtabs mb{{blkSt.bm}}" {% if blkSt.open %}open{% endif %} {{ block.shopify_attributes }}>
<summary class="pr fl f-aic f-jcsb wd100">{{blkSt.title}} <i class="at at-angle-down-l"></i></summary>
<div class="rte" {{ block.shopify_attributes }}>
{% if blkSt.opt == 'des' %}
{{ product.description }}
{% elsif blkSt.opt contains "size" %}
{%- assign prtype = product.type | handleize | append: "-size-chart" -%}
{%- assign prbrand = product.vendor | handleize | append: "-size-chart" -%}
{%- if product.metafields.my_fields.sizechart != blank -%}
{{ product.metafields.my_fields.sizechart }}
{%- elsif settings.sizechart_type == "type" and pages[prtype].content != empty -%}
{{ pages[prtype].content }}
{%- elsif settings.sizechart_type == "brand" and pages[prbrand].content != empty -%}
{{ pages[prbrand].content }}
{%- else -%}
{{ pages[settings.sizechart_page].content }}
{%- endif -%}
{% elsif blkSt.richtxt contains "metafield-multi_line_text_field" %}
<div class="mtmltxt">{{blkSt.richtxt}}</div>
{% else %}
{{blkSt.richtxt}}
{% endif %}
</div>
</details>
{% when 'vendor' %}
<div class="mb{{blkSt.bm}}" {{ block.shopify_attributes }}>
{%- liquid
assign vlink = routes.collections_url | append: '/vendors?q=' | append: product.vendor
for coll in product.collections
if coll.title == product.vendor
assign vlink = coll.url
break
endif
endfor
assign imgName = product.vendor | handleize | append:'.png'
assign imgsrc=imgName | file_img_url: '200x'
-%}
<a class="product-vendor" href="{{vlink}}" style="color:{{blkSt.cl}};font-size:{{blkSt.fs}}px">
{% if imgSrc contains '?v=' and blkSt.img %}
<img class="vendImg lazyload" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="{{imgSrc}}" width="{{blkSt.lwd}}" height="100" alt="{{product.vendor}}">
{% else %}
{{product.vendor}}
{% endif %}
</a>
</div>
{% when 'cta' %}
{%- if product.metafields.custom.product_group != blank -%}
{%- render 'products-group', blkSt: blkSt, infoLinks:infoLinks -%}
{%- else -%}
{%- assign product_form_id = 'product-form-' | append: section.id -%}
<product-form class="db productForm mb{{blkSt.bm}}" {{ block.shopify_attributes }}>
{%- form 'product', product, id: product_form_id, class: 'form', novalidate: 'novalidate', data-type: 'add-to-cart-form' -%}
<div class="product-form mfp-link fl f-aie f-wrap">
{% assign isSwatch = false %}
{% assign hideSoldout = settings.swsold %}
{%- unless product.options.size == 1 and product.variants[0].title == 'Default Title' -%}
{%- for option in product.options_with_values -%}
{% liquid
assign optionName = option.name | downcase
if settings.sizechart_link and sizeOptions contains optionName
assign sizechart = true
assign sizechartall = false
endif
%}
{%- if settings.show_swatch -%}
{% assign isSwatch = true %}
{% render 'swatch', swatch: option, secId: section.id, optindex: forloop.index0, sizechart:sizechart %}
{%- else -%}
<div class="product-form__item fl1 js pr_form_item mb5 option{{forloop.index}}">
<label {% if option.name == 'default' %}class="hidden_txt" {% endif %}for="SingleOptionSelector-{{ forloop.index0 }}">
{{ option.name }} <span class="slVariant ml5"></span>
{%- if sizechart -%}
<a href="#sizechart" class="mfp sizelink" data-effect="mfp-zoom-in"><i class="at at-ruler"></i> {{ 'products.product.size_chart' | t}}</a>
{%- endif -%}
</label>
<select class="single-option-selector single-option-selector-{{ section.id }} w_100" id="SingleOptionSelector-{{ forloop.index0 }}" data-index="option{{ forloop.index }}">
{%- for value in option.values -%}<option value="{{ value | escape }}"{% if option.selected_value == value %} selected="selected"{% endif %}>{{ value }}</option>{%- endfor -%}
</select>
</div>
{%- endif -%}
{%- endfor -%}
{%- endunless -%}
{%- if sizechartall -%}
<a href="#sizechart" class="mfp sizelink" data-effect="mfp-zoom-in"><i class="at at-ruler"></i> {{ 'products.product.size_chart' | t}}</a>
{%- endif -%}
<select name="id" id="ProductSelect-{{ section.id }}" data-section="{{ section.id }}" class="pr_variants no-js">
{%- for variant in product.variants -%}
{%- if variant.available -%}
<option{% if variant == current_variant %} selected="selected"{% endif %} value="{{ variant.id }}">{{ variant.title }}</option>
{%- else -%}
<option disabled="disabled">{{ variant.title }} - {{ 'products.product.sold_out' | t }}</option>
{%- endif -%}
{%- endfor -%}
</select>
</div>
{{infoLinks}}
{%- unless settings.catalogmode -%}
<div class="pform-error-wrap errors" role="alert" hidden><span class="ml5 pform-error-msg"></span></div>
<div class="fl product-action">
<label class="lblqty v-hidden" for="quantity">{{ 'products.product.quantity' | t }}</label>
<div class="fl f-wrap f-aic f-jcsb">
{%- if blkSt.qty_sel -%}
<quantity-input class="qtyField mb15" title="{{ 'products.product.quantity' | t }}">
<button type="button" class="qtyBtn minus" name="minus"><i class="at at-minus-r" aria-hidden="true"></i><span class="v-hidden">{{- 'products.quantity.decrease' | t: product: product.title | escape -}}</span></button>
<input type="number" id="quantity" name="quantity" value="1" min="{{ current_variant.quantity_rule.min }}" class="pr_input qty" step="{{ current_variant.quantity_rule.increment }}" />
<button type="button" class="qtyBtn plus" name="plus"><i class="at at-plus-r" aria-hidden="true"></i><span class="v-hidden">{{- 'products.quantity.increase' | t: product: product.title | escape -}}</span></button>
</quantity-input>
{%- else -%}
<input type="text" id="quantity" name="quantity" value="1" class="hide pr_input qty" />
{%- endif -%}
</div>
<button type="submit" name="add" id="AddToCart-{{ section.id }}" {% unless current_variant.available %}disabled="disabled"{% endunless %} class="btn {{settings.atc-style}} pr_btn product-form__submit">
<span class="txt">
{% if current_variant.available and current_variant.inventory_quantity < 1 and current_variant.inventory_management == "shopify" %}
{{'products.product.pre_order' | t }}
{% elsif current_variant.available %}
{{ 'products.product.add_to_cart' | t }}
{% else %}
{{'products.product.sold_out' | t }}
{% endif %}
</span>
<div class="loading-overlay__spinner hidden"><i class="at at-circle-notch-r at-spin"></i></div>
</button>
</div>
{%- if settings.dynamic_btn -%}
{%- if settings.terms_checkbox -%}
<label for="prTearm" class="cart_term mb20">
<input type="checkbox" name="tearm" id="prTearm" class="checkbox custCheck" value="tearm" required />
<span class="checkbox"></span> {{ settings.terms_text }}
</label>
{%- endif -%}
<div style="--btnbg :{{blkSt.btnbg}};--btntext :{{blkSt.btntext}};--btnbdr :{{blkSt.btnbdr}};">{{ form | payment_button }}</div>
{%- endif -%}
{%- endunless -%}
{%- endform -%}
</product-form>
{%- endif -%}
{% when 'countdown' %}
{% if product.metafields.my_fields.countdown != blank %}
<div class="timerl mb{{blkSt.bm}}" style="--cl:{{ blkSt.cl}};--bg:{{ blkSt.bg}};--bd:{{blkSt.bd}};--bdr:{{blkSt.bdr}}" {{ block.shopify_attributes }}>
{%- if blkSt.lbl != blank -%}<label style="color:{{ blkSt.lcl }};" class="mb10">{{ blkSt.lbl}}</label>{%- endif -%}
<div id="countdown" class="atCounter prcountdown fl" data-date="{{product.metafields.my_fields.countdown}}">
<span><span class="tm days">00</span>{{'date_formats.days' | t}}</span><span><span class="tm hours">00</span>{{ 'date_formats.hours' | t }}</span><span><span class="tm minutes">00</span>{{'date_formats.minuts' | t}}</span><span><span class="tm seconds">00</span>{{'date_formats.seconds' | t}}</span>
</div>
</div>
{%- endif -%}
{% when 'order' %}
{%- assign ordermsg = blkSt.omsg | replace: '[orders]','<strong id="odItems"></strong>' | replace: '[hours]','<strong id="odTime"></strong>' -%}
<div class="orderMsg customtx mb{{blkSt.bm}}" data-user="{{blkSt.orders}}" data-time="{{blkSt.otime}}" {{ block.shopify_attributes }} style="--fs:{{ blkSt.fs }}px;--cl:{{ blkSt.cl }};" >
{{ordermsg}}
</div>
<script>document.getElementById("odItems").innerHTML = Math.floor(Math.random() * {{blkSt.orders}}) + 1;document.getElementById("odTime").innerHTML = Math.floor(Math.random() * {{blkSt.otime}}) + 1;</script>
{% when 'visitor' %}
{%- assign visitormsg = blkSt.visitors_msg | replace: '[visitors]','<strong id="uersView"></strong>' -%}
<div class="userViewMsg customtx mb{{blkSt.bm}}" {{ block.shopify_attributes }} style="--fs:{{ blkSt.fs }}px;--cl:{{ blkSt.cl }};" >
{{visitormsg}}
</div>
<script>document.getElementById("uersView").innerHTML = Math.floor(Math.random() * {{blkSt.visitors}}) + 1;setInterval(function(){ document.getElementById("uersView").innerHTML = Math.floor(Math.random() * {{blkSt.visitors}}) + 1 }, {{blkSt.visitors_time | times:1000}});</script>
{% when 'qty' %}
{%- assign enableqtyMsg = true -%}
{%- if current_variant.inventory_management == "shopify" and current_variant.inventory_quantity < blkSt.maxqty and current_variant.inventory_quantity > 0 -%}
{%- assign enableqtyMsg = flase -%}
{%- endif -%}
{% assign qtyMsg = 'products.product.quantity_message' | t | split: '{{items}}' %}
<div id="quantity_message" class="mb{{blkSt.bm}}" data-qty="{{blkSt.maxqty}}" style="--cl:{{blkSt.cl}};--bg:{{blkSt.bg}};{%- if enableqtyMsg -%}display:none;{%- endif -%}" {{ block.shopify_attributes }}>
{{qtyMsg[0]}} <span class="items">{{current_variant.inventory_quantity}}</span> {{qtyMsg[1]}}
</div>
{% when 'freeship' %}
{%- assign shipProd = all_products[settings.free_ship].price | minus: cart.total_price -%}
{% capture freeAmount %}<b>{{shipProd | money}}</b>{% endcapture %}
<div class="freeShipMsg mb{{blkSt.bm}}" {{ block.shopify_attributes }}><i class="at at-truck-l"></i> {% if shipProd > 0 %}{{settings.free_ship_msg | replace: '$',freeAmount }}{% else %}{{settings.got_free_ship }}{% endif %}</span></div>
{% when 'shiptime' %}
{%- if product.metafields.my_fields.shipping_days != blank %}
{%- assign days = product.metafields.my_fields.shipping_days | split: "/" -%}
{%- else %}
{%- assign days = blkSt.estimate | split: "/" -%}
{%- endif %}
{% assign day1 = days[0] | times: 86400 %}
{% assign day2 = days[1] | times: 86400 %}
{% assign day1day = "now" | date: "%s" | plus: day1 | date: '%A' %}
{%- if day1day == 'Sunday' %}
{% assign day1 = days[0] | plus: 1 | times: 86400 %}
{% assign day2 = days[1] | plus: 1 | times: 86400 %}
{%- endif %}
{% assign day2day = "now" | date: "%s" | plus: day2 | date: '%A' %}
{%- if day2day == 'Sunday' %}
{% assign day2 = days[1] | plus: 1 | times: 86400 %}
{%- endif %}
{% capture startdate %}<b>{{ "now" | date: "%s" | plus: day1 | time_tag: format: 'day_month' }}</b>{% endcapture %}
{% capture enddate %}<b>{{ "now" | date: "%s" | plus: day2 | time_tag: format: 'day_month' }}</b>{% endcapture %}
{%- if blkSt.msg != blank -%}
<p class="shippingMsg mb{{blkSt.bm}}" {{ block.shopify_attributes }}>{{blkSt.msg | replace:'[startdate]', startdate | replace:'[enddate]',enddate }}</p>
{%- endif -%}
{% when 'shortdes' %}
<div class="product-single__description rte" {{ block.shopify_attributes }}>
{% if blkSt.type == 'shortd' %}
{{ product.description | strip_html | truncatewords: blkSt.lmt }}
{% elsif blkSt.type == 'fulld' %}
{{ product.description }}
{% else %}
{{ product.metafields.my_fields.short_des }}
{% endif %}
</div>
{% when 'pickup' %}
<div class="mb{{blkSt.bm}} product-single__store-availability-container" {{ block.shopify_attributes }} data-store-availability-container data-product-title="{{ product.title | escape }}" data-has-only-default-variant="{{ product.has_only_default_variant }}" data-base-url="{{ shop.url }}{{ routes.root_url }}" ></div>
<script type="text/javascript">
fetch('/variants/{{product.selected_or_first_available_variant.id}}/?section_id=pickup-availability').then(response => response.text()).then(text => {
const container = document.querySelector('[data-store-availability-container]');
const pickupAvailabilityHTML = new DOMParser().parseFromString(text, 'text/html').querySelector('.pickup-availability-container');
container.appendChild(pickupAvailabilityHTML);
pickupPopup();
}).catch(e => {
console.error(e);
});
function pickupPopup() {
$('.mfp-link').magnificPopup({
delegate: '.mfp',
removalDelay: 300,
callbacks: {
beforeOpen: function() {
$('.sticky_hdr').addClass('popup');
this.st.mainClass = this.st.el.attr('data-effect');
},
close:function(){ $('.sticky_hdr').removeClass('popup');
}
},
midClick: true
});
}
</script>
{% when 'img' %}
{%- if blkSt.pimg != blank -%}
<div class="trust_badge mb{{blkSt.bm}}" {{ block.shopify_attributes }}>
{% if blkSt.pimg_url != blank %}<a href="{{blkSt.pimg_url}}">{% endif %}
<img class="imgFl lazyload w_auto {% if blkSt.img_align %}m_auto{% endif %}" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="{{ blkSt.pimg | img_url: "master" }}" width="{{blkSt.pimg.width}}" height="{{blkSt.pimg.height}}" alt="{{settings.pimg.alt}}">
{% if blkSt.pimg_url != blank %}</a>{% endif %}
</div>
{%- endif -%}
{% when 'customc' %}
<div class="mb{{blkSt.bm}}" {{ block.shopify_attributes }}>{{blkSt.custom_liquid }}</div>
{% when 'ft' %}
<div class="fl f-wrap storeFeatures mb{{blkSt.bm}}" style="--cl:{{blkSt.cl}}" {{ block.shopify_attributes }}>
{%- if blkSt.ft1 != blank -%}<p>{{blkSt.ft1}}</p>{%- endif -%}
{%- if blkSt.ft2 != blank -%}<p>{{blkSt.ft2}}</p>{%- endif -%}
{%- if blkSt.ft3 != blank -%}<p>{{blkSt.ft3}}</p>{%- endif -%}
{%- if blkSt.ft4 != blank -%}<p>{{blkSt.ft4}}</p>{%- endif -%}
</div>
{% when 'type' %}
<div class="product-type mb{{blkSt.bm}}" {{ block.shopify_attributes }}><span class="lbl">{{ 'products.product.type' | t }} </span> {{ product.type }}</div>
{% when 'cl' %}
{%- assign found_a_collection = false -%}
{%- if collection and collection.all_products_count > 1 -%}
{%- unless exclusions contains collection.handle -%}{% assign found_a_collection = true %}{%- endunless -%}
{% endif %}
{% unless found_a_collection %}
{% for c in product.collections %}
{% unless exclusions contains c.handle or c.all_products_count < 2 %}
{% assign found_a_collection = true %}
{% assign collection = c %}
{% break %}
{% endunless %}
{% endfor %}
{% endunless %}
{% if found_a_collection %}
<div class="product-cat mb{{blkSt.bm}}" {{ block.shopify_attributes }}>
<span class="lbl">{{ 'products.product.collection' | t }} </span>
{%- for c in product.collections limit:10 -%}{%- unless exclusions contains c.handle or c.all_products_count < 2 -%}{{ c.title | link_to: c.url }}, {%- endunless -%}{%- endfor -%}
</div>
{% endif %}
{% when 'tags' %}
{% if product.tags.size > 0 %}
<div class="product-tags mb{{blkSt.bm}}" {{ block.shopify_attributes }}>
<span class="lbl">{{ 'products.product.tags' | t }} </span>
{%- for collection in product.collections limit:1 -%}
{%- for tag in product.tags limit:10 -%}<a href="{{ collection.url }}?constraint={{ tag | handle }}">{{ tag | remove:'type ' | remove:'Type ' }}</a>{% unless forloop.last %}, {% endunless %}{%- endfor -%}
{%- endfor -%}
</div>
{% endif %}
{%- when 'complementary' -%}
{% render 'complementary', product: product, sectionId: section.id, block: block.settings, isRtl:isRtl %}
{%- when 'more-color' -%}
{% render 'more-colors', product: product, sectionId: section.id, block: block.settings %}
{%- when '@app' -%}
{% render block %}
{% endcase %}
{% endfor %}
{%- endcapture -%}
{%- if settings.product_latyout != "style6" -%}
<div class="grid f-ais product-single">
<div class="gitem {{ product_image_width }} pr_photoes {{settings.thumbnail_pos}}">{{productImages | strip_newlines | remove: " "}}</div>
<div class="gitem {{ product_description_width }} product-single__meta">{{productDetails | strip_newlines | remove: " "}}</div>
</div>
{%- else -%}
<div class="product-single">
<div class="pr_photoes {{settings.thumbnail_pos}}">{{productImages | strip_newlines | remove: " "}}</div>
<div class="product-single__meta tc">{{productDetails | strip_newlines | remove: " "}}</div>
</div>
{%- endif -%}
</div>
<div class="hide">
{% for variant in product.variants %}<span id="pvr-{{ variant.id }}">{{variant.inventory_quantity}}</span>{% endfor %}
{% if sizechart %}
<div id="sizechart" class="mfpbox mfp-hide rte mfp-with-anim">
{%- assign prtype = product.type | handleize | append: "-size-chart" -%}
{%- assign prbrand = product.vendor | handleize | append: "-size-chart" -%}
{%- if product.metafields.my_fields.sizechart != blank -%}
{{ product.metafields.my_fields.sizechart }}
{%- elsif settings.sizechart_type == "type" and pages[prtype].content != empty -%}
{{ pages[prtype].content }}
{%- elsif settings.sizechart_type == "brand" and pages[prbrand].content != empty -%}
{{ pages[prbrand].content }}
{%- else -%}
{{ pages[settings.sizechart_page].content }}
{%- endif -%}
</div>
{% endif %}
</div>
{%- unless product.empty? -%}
<script type="application/json" id="ProductJson-{{ section.id }}">{{ product | json }}</script>
<script type="application/json" id="ModelJson-{{ section.id }}">{{ product.media | where: 'media_type', 'model' | json }}</script>
{%- endunless -%}
{%- include 'product-popup' -%}
{%- assign current_variant = product.selected_or_first_available_variant -%}
<script type="text/javascript">
theme.productStrings = {
prStyle: {{settings.product_latyout | json }}
}
window.addEventListener('DOMContentLoaded',function(){
{%- if settings.terms_checkbox -%}
var $buyinoneclick = $('.shopify-payment-button');
if($buyinoneclick.length){
$buyinoneclick.first().bind('DOMNodeInserted', function() {
setTimeout(function(){
var $shopifypaymentbutton = $('.shopify-payment-button').find(".shopify-payment-button__button");
if($shopifypaymentbutton.length){
$buyinoneclick.hide();
setTimeout(function(){
$(".shopify-payment-button__button").attr('disabled', true);
$buyinoneclick.fadeIn()
}, 300);
}
}, 0);
});
};
{%- if settings.terms_checkbox -%}
$('#prTearm').change(function(){
if(this.checked == true){
$('.shopify-payment-button__button').removeAttr("disabled");
} else {
$('.shopify-payment-button__button').attr("disabled", "disabled");
}
});
{%- endif -%}
{%- endif -%}
});
{% capture variantImg %}
{%- if product.variants.size > 1 -%}
var variantImages={},thumbnails,variant,variantImage,optionValue,productOptions = [];
{%- for variant in product.variants -%}
variant = {{ variant.featured_image.src | json }};
if(typeof variant !== 'undefined' && variant !== null){
variantImage = variant.split('?')[0].replace(/http(s)?:/,'');
variantImages[variantImage] = variantImages[variantImage] || {};
{%- for option in product.options -%}
{%- assign option_value = variant.options[forloop.index0] -%}
{%- assign option_key = 'option-' | append: forloop.index0 -%}
if(typeof variantImages[variantImage][{{ option_key | json }}] === 'undefined'){
variantImages[variantImage][{{ option_key | json }}] = {{ option_value | json }};
} else {
var oldValue = variantImages[variantImage][{{ option_key | json }}];
if(oldValue !== null && oldValue !== {{ option_value | json }}){variantImages[variantImage][{{ option_key | json }}] = null;}
}
{%- endfor -%}
}
productOptions.push(variant);
{%- endfor -%}
{% else %}
var variantImages = "";
{%- endif -%}
{% endcapture %}
{{variantImg | strip_newlines | remove: " " | remove: " " }}
{%- if product.variants.size > 0 -%}
var Shopify = Shopify || {};
Shopify.optionsMap = {};
Shopify.updateOptionsInSelector = function(selectorIndex){
switch (selectorIndex){
case 0:
var key = 'root',
selector = $('{%- if isSwatch -%}.pvOpt0 .swatchInput:checked{%- else -%}.single-option-selector:eq(0){%- endif -%}');
break;
case 1:
var key = $('{%- if isSwatch -%}.pvOpt0 .swatchInput:checked{%- else -%}.single-option-selector:eq(0){%- endif -%}').val(),
selector = $('{%- if isSwatch -%}.pvOpt1 .swatchInput:checked{%- else -%}.single-option-selector:eq(1){%- endif -%}');
break;
case 2:
var key = $('{%- if isSwatch -%}.pvOpt0 .swatchInput:checked{%- else -%}.single-option-selector:eq(0){%- endif -%}').val();
key += ' / ' + $('{%- if isSwatch -%}.pvOpt1 .swatchInput:checked{%- else -%}.single-option-selector:eq(1){%- endif -%}').val();
var selector = $('{%- if isSwatch -%}.pvOpt2 .swatchInput:checked{%- else -%}.single-option-selector:eq(2){%- endif -%}');
}
var initialValue = selector.val();
var availableOptions = Shopify.optionsMap[key];
{%- if isSwatch -%}
$('.pvOpt' + selectorIndex + ' .swatch-element').each(function(){
if($.inArray($(this).attr('data-value'), availableOptions) !== -1){
{% if hideSoldout %}$(this).removeClass('hide');{% else %}$(this).removeClass('soldout');{% endif %}
} else {
{% if hideSoldout %}$(this).addClass('hide');{% else %}$(this).addClass('soldout');{% endif %}
}
});
{%- else -%}
{% if hideSoldout %}
selector.empty();
for (var i=0; i<availableOptions.length; i++){
var option = availableOptions[i];
var newOption = $('<option></option>').val(option).html(option);
selector.append(newOption);
}
{% endif %}
{%- endif -%}
if($.inArray(initialValue, availableOptions) !== -1){
selector.val(initialValue);
}
selector.trigger('change');
};
Shopify.linkOptionSelectors = function(product){
for (var i=0; i<product.variants.length; i++){
var variant = product.variants[i];
if(variant.available){
Shopify.optionsMap['root'] = Shopify.optionsMap['root'] || [];
Shopify.optionsMap['root'].push(variant.option1);
Shopify.optionsMap['root'] = Shopify.uniq(Shopify.optionsMap['root']);
if(product.options.length > 1){
var key = variant.option1;
Shopify.optionsMap[key] = Shopify.optionsMap[key] || [];
Shopify.optionsMap[key].push(variant.option2);
Shopify.optionsMap[key] = Shopify.uniq(Shopify.optionsMap[key]);
}
if(product.options.length === 3){
var key = variant.option1 + ' / ' + variant.option2;
Shopify.optionsMap[key] = Shopify.optionsMap[key] || [];
Shopify.optionsMap[key].push(variant.option3);
Shopify.optionsMap[key] = Shopify.uniq(Shopify.optionsMap[key]);
}
}
}
Shopify.updateOptionsInSelector(0);
if(product.options.length > 1) Shopify.updateOptionsInSelector(1);
if(product.options.length === 3) Shopify.updateOptionsInSelector(2);
$("{%- if isSwatch -%}.pvOpt0 .swatchInput{%- else -%}.single-option-selector:eq(0){%- endif -%}").change(function(){
Shopify.updateOptionsInSelector(1);
if(product.options.length === 3) Shopify.updateOptionsInSelector(2);
return true;
});
$("{%- if isSwatch -%}.pvOpt1 .swatchInput{%- else -%}.single-option-selector:eq(1){%- endif -%}").change(function(){
if(product.options.length === 3) Shopify.updateOptionsInSelector(2);
return true;
});
};
{%- if product.available and product.options.size > 1 -%}
window.addEventListener('DOMContentLoaded',function(){
var $addToCartForm = $('form[action="/cart/add"]');
if(window.MutationObserver && $addToCartForm.length){
if(typeof observer === 'object' && typeof observer.disconnect === 'function'){
observer.disconnect();
}
var config = { childList: true, subtree: true };
var observer = new MutationObserver(function(){
observer.disconnect();
});
observer.observe($addToCartForm[0], config);
}
Shopify.linkOptionSelectors(JSON.parse(document.getElementById('ProductJson-{{ section.id }}').innerHTML));
});
{%- elsif product.options.size == 1 -%}
window.addEventListener('DOMContentLoaded',function(){
{%- for variant in product.variants -%}
{%- unless variant.available -%}
//$('.single-option-selector option').filter(function(){ return $(this).html() === {{ variant.title | json }}; }).remove();
$(".swatch-element[data-value='{{ variant.title | escape }}']").addClass('soldout');
{%- endunless -%}
{%- endfor -%}
$('.single-option-selector').trigger('change');
});
{%- endif -%}
{%- endif -%}
</script>
{%- capture schemaTags -%}
<script type="application/ld+json">
{
"@context": "http://schema.org/",
{{ product.metafields.alireviews.seo_rating_review_key_script }}
"@type": "Product",
"name": "{{ product.title | escape }}",
"url": "{{ shop.url }}{{ product.url }}",
{%- if product.featured_image -%}
{%- assign image_size = product.featured_image.width | append: 'x' -%}
"image": [
"https:{{ product.featured_image.src | img_url: image_size }}"
],
{%- endif -%}
"description": "{{ product.description | strip_html | escape }}",
{%- if current_variant.sku != blank -%}"sku": "{{current_variant.sku}}",{%- endif -%}
{%- if current_variant.barcode != blank -%}"mpn": "{{current_variant.barcode}}",{%- endif -%}
"brand": {
"@type": "Brand",
"name": "{{ product.vendor | escape }}"
},
"offers": [
{%- for variant in product.variants -%}
{
"@type" : "Offer",
{%- if variant.sku != blank -%}"sku": "{{ variant.sku }}",{%- endif -%}
{%- if variant.barcode != blank -%}"mpn": "{{ variant.barcode }}",{%- endif -%}
"availability" : "http://schema.org/{% if variant.available %}InStock{% else %}OutOfStock{% endif %}",
"price" : "{{ variant.price | divided_by: 100.00 }}",
"priceValidUntil": "{{ "now" | date: '%s' | plus: "86400" | date: "%Y-%m-%d %H:%M" }}",
"priceCurrency" : "{{ shop.currency }}",
"url" : "{{ shop.url }}{{ variant.url }}"
}{% unless forloop.last %},{% endunless %}
{%- endfor -%}
]
{% if settings.reviews == 'shopify' %}
{%- assign ratingCount = product.metafields.spr.reviews | split: '"reviewCount": "' | last | split: '"' |first | plus: 0 -%}
{%- assign ratingValue = product.metafields.spr.reviews | split: '"ratingValue": "' | last | split: '"' |first | plus: 0 -%}
{% if ratingCount > 0 and ratingValue > 0 %}
,"aggregateRating":{
"@type": "AggregateRating",
"ratingValue": "{{ratingValue}}",
"ratingCount": "{{ratingCount}}"
}
{%- endif -%}
{% elsif settings.reviews == 'loox' %}
,"aggregateRating":{
"@type": "AggregateRating",
"ratingValue": "{{ product.metafields.loox.avg_rating }}",
"reviewCount": "{{ product.metafields.loox.num_reviews }}"
}
{%- endif -%}
}
</script>
{%- endcapture -%}
{{schemaTags | strip_newlines | remove: " " | remove: " " }}
{% schema %}
{
"name": "Product Page",
"settings": [
{
"type":"checkbox",
"id":"section_width",
"label":"Fullwidth?",
"default": false
},
{
"type": "paragraph",
"content":"Manage some global product options from Theme Settings -> Product Page"
}
],
"blocks": [
{
"type": "hr",
"name": "Divider/Space",
"settings": [
{
"type":"color",
"id":"hrc",
"label":"Color",
"default":"#222"
},
{
"type": "range",
"id": "bm",
"min": 0,
"max": 50,
"step": 5,
"label": "Bottom Margin",
"unit": "px",
"default": 20,
"info":"You can also use this block to add more space between 2 blocks"
}
]
},
{
"type": "title",
"name": "Title",
"limit": 1,
"settings": [
{
"type": "color",
"id": "cl",
"label": "Color",
"default": "#000"
},
{
"type": "range",
"id": "fs",
"min": 10,
"max": 60,
"step": 1,
"label": "Font Size",
"unit": "px",
"default": 22
},
{
"type": "range",
"id": "fsm",
"min": 10,
"max": 60,
"step": 1,
"label": "Font Size(mobile)",
"unit": "px",
"default": 18
},
{
"type": "select",
"id": "ff",
"label": "Font Family",
"default": "ft2",
"options": [
{
"value": "ft1",
"label": "Font 1"
},
{
"value": "ft2",
"label": "Font 2"
},
{
"value": "ft3",
"label": "Font 3"
}
]
},
{
"type": "select",
"id": "fw",
"label": "Font Weight",
"default": "600",
"options": [
{
"value": "300",
"label": "Light"
},
{
"value": "400",
"label": "Regular"
},
{
"value": "500",
"label": "Medium"
},
{
"value": "600",
"label": "Semi Bold"
},
{
"value": "700",
"label": "Bold"
}
]
},
{
"type": "select",
"id": "transform",
"label": "Text Transform",
"default": "tt-c",
"options": [
{
"value": "none",
"label": "none"
},
{
"value": "tt-c",
"label": "Capitalize"
},
{
"value": "tt-l",
"label": "Lowercase"
},
{
"value": "tt-u",
"label": "Uppercase"
}
]
},
{
"type": "range",
"id": "bm",
"min": 0,
"max": 30,
"step": 5,
"label": "Bottom Margin",
"unit": "px",
"default": 20
}
]
},
{
"type": "price",
"name": "Price",
"limit": 1,
"settings": [
{
"type": "color",
"id": "pcl",
"label": "Price",
"default": "#000"
},
{
"type": "color",
"id": "pcls",
"label": "Sale Price",
"default": "#e95144"
},
{
"type": "range",
"id": "fs",
"min": 10,
"max": 60,
"step": 1,
"label": "Font Size",
"unit": "px",
"default": 25
},
{
"type": "range",
"id": "fsm",
"min": 10,
"max": 60,
"step": 1,
"label": "Font Size(mobile)",
"unit": "px",
"default": 16
},
{
"type": "select",
"id": "pfw",
"label": "Font Weight",
"default": "600",
"options": [
{
"value": "300",
"label": "Light"
},
{
"value": "400",
"label": "Regular"
},
{
"value": "500",
"label": "Medium"
},
{
"value": "600",
"label": "Semi Bold"
},
{
"value": "700",
"label": "Bold"
}
]
},
{
"type": "checkbox",
"id": "saved",
"label": "Show Discount Saved Badge?",
"default": true,
"info": "Display right after price if product have discount"
},
{
"type": "checkbox",
"id": "taxship",
"label": "Show tax and shipping information label?",
"default": false
},
{
"type": "range",
"id": "bm",
"min": 0,
"max": 30,
"step": 5,
"label": "Bottom Margin",
"unit": "px",
"default": 20
}
]
},
{
"type": "vendor",
"name": "Vendor/Brand",
"limit": 1,
"settings": [
{
"type": "checkbox",
"id": "img",
"label": "Show vendor logo?",
"info": "Need to create png logo image with same name as vendor name and upload at settings > files. Example: Coca Cola = coca-cola.png, Nike = nike.png"
},
{
"type": "range",
"id": "lwd",
"min": 50,
"max": 500,
"step": 5,
"label": "Logo width",
"unit": "px",
"default": 150
},
{
"type": "color",
"id": "cl",
"label": "Color",
"default": "#000"
},
{
"type": "range",
"id": "fs",
"min": 10,
"max": 60,
"step": 1,
"label": "Font Size",
"unit": "px",
"default": 13
},
{
"type": "range",
"id": "bm",
"min": 0,
"max": 30,
"step": 5,
"label": "Bottom Margin",
"unit": "px",
"default": 20
}
]
},
{
"type": "shortdes",
"name": "Product Description",
"limit": 1,
"settings": [
{
"type": "select",
"id": "type",
"label": "Show",
"default": "shortd",
"info":"[Description by metafield?](https://www.adornthemes.com/knowledge-base/vogal-product-metafields/)",
"options": [
{
"value": "shortd",
"label": "Short Description"
},
{
"value": "fulld",
"label": "Full Description"
},
{
"value": "meta",
"label": "Metafield Description"
}
]
},
{
"type": "range",
"id": "lmt",
"min": 5,
"max": 100,
"step": 1,
"label": "Short Description Limit",
"unit": "px",
"default": 40
},
{
"type": "range",
"id": "bm",
"min": 0,
"max": 30,
"step": 5,
"label": "Bottom Margin",
"unit": "px",
"default": 20
}
]
},
{
"type": "cta",
"name": "Product Form",
"limit": 1,
"settings":[
{
"type": "checkbox",
"id": "qty_sel",
"label": "Show Quantity Selector?",
"default": true
},
{
"type": "paragraph",
"content": "Manage swatch style from Theme Settings-> Product Page"
},
{
"type": "range",
"id": "bm",
"min": 0,
"max": 30,
"step": 5,
"label": "Bottom Margin",
"unit": "px",
"default": 20
}
]
},
{
"type": "countdown",
"name": "Countdown",
"limit": 1,
"settings": [
{
"type": "paragraph",
"content": "[How to set Countdown timer for each products?](https:\/\/www.adornthemes.com\/knowledge-base\/how-to-add-product-countdown-shopify\/)"
},
{
"type": "text",
"id": "lbl",
"label": "Label",
"default": "Hurry up! Sales End In"
},
{
"type": "color",
"id": "lcl",
"label": "Label",
"default": "#000"
},
{
"type": "color",
"id": "cl",
"label": "Text",
"default": "#fff"
},
{
"type": "color",
"id": "bg",
"label": "Background",
"default": "#16395b"
},
{
"type": "color",
"id": "bd",
"label": "Border",
"default": "#eee"
},
{
"type": "range",
"id": "bdr",
"min": 0,
"max": 50,
"step": 1,
"label": "Border Radius",
"unit": "px",
"default": 0
},
{
"type": "range",
"id": "bm",
"min": 0,
"max": 30,
"step": 5,
"label": "Bottom Margin",
"unit": "px",
"default": 20
}
]
},
{
"type": "img",
"name": "Image",
"settings": [
{
"type": "image_picker",
"id": "pimg",
"label": "Image"
},
{
"type": "url",
"id": "pimg_url",
"label": "Image Link"
},
{
"type": "checkbox",
"id": "img_align",
"label": "Image align center?",
"default": false
},
{
"type": "range",
"id": "bm",
"min": 0,
"max": 30,
"step": 5,
"label": "Bottom Margin",
"unit": "px",
"default": 20
}
]
},
{
"type": "text",
"name": "Text",
"settings": [
{
"type":"textarea",
"id":"text",
"label":"Text",
"default":"Text block",
"info":"[Find icons here](http:\/\/www.adornthemes.com\/optimal-icons\/)"
},
{
"type": "color",
"id": "cl",
"label": "Text Color",
"default": "#000"
},
{
"type": "checkbox",
"id": "addbg",
"label": "Add Background?",
"default": false
},
{
"type": "color",
"id": "bg",
"label": "Color",
"default": "#f5f5f5"
},
{
"type": "range",
"id": "fs",
"label": "Font Size",
"default": 13,
"min": 10,
"max": 20,
"step": 1,
"unit": "px"
},
{
"type": "range",
"id": "bm",
"min": 0,
"max": 30,
"step": 5,
"label": "Bottom Margin",
"unit": "px",
"default": 20
}
]
},
{
"type": "ras",
"name": "Rating/Availability/SKU",
"limit": 1,
"settings": [
{
"type":"paragraph",
"content":"Display Ratings from app. Choose app from General Settings -> Products Reviews"
},
{
"type": "checkbox",
"id": "availability",
"label": "Show Product Availability?",
"default": true
},
{
"type": "checkbox",
"id": "sku",
"label": "Show Product SKU?",
"default": true
},
{
"type": "range",
"id": "bm",
"min": 0,
"max": 30,
"step": 5,
"label": "Bottom Margin",
"unit": "px",
"default": 20
}
]
},
{
"type": "coltabs",
"name": "Collapsible Tab",
"settings": [
{
"type":"text",
"id":"title",
"label":"Heading",
"default":"Care Instructions"
},
{
"type": "select",
"id": "opt",
"label": "Content Source",
"default": "txt",
"options": [
{
"value": "txt",
"label": "Text as Below"
},
{
"value": "des",
"label": "Description"
},
{
"value": "size",
"label": "Size Chart"
}
]
},
{
"type": "richtext",
"id": "richtxt",
"label": "Tab text",
"default":"<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>"
},
{
"type":"checkbox",
"id":"open",
"label":"Open by default?",
"default": false
},
{
"type":"paragraph",
"content":"Manage color and fonts from theme settings > product page > Collapsible Tab"
},
{
"type": "range",
"id": "bm",
"min": 0,
"max": 30,
"step": 5,
"label": "Bottom Margin",
"unit": "px",
"default": 0
}
]
},
{
"type": "qty",
"name": "Quantity Message",
"limit": 1,
"settings": [
{
"type": "range",
"id": "maxqty",
"label": "Max Quantity",
"min": 1,
"max": 50,
"step": 1,
"default": 20,
"info": "Display stock left number when product stock is less than selected numbers"
},
{
"type": "color",
"id": "cl",
"label": "Text",
"default": "#fff"
},
{
"type": "color",
"id": "bg",
"label": "Background",
"default": "#ff656c"
},
{
"type": "range",
"id": "bm",
"min": 0,
"max": 30,
"step": 5,
"label": "Bottom Margin",
"unit": "px",
"default": 20
}
]
},
{
"type": "order",
"name": "Fake Order",
"limit": 1,
"settings": [
{
"type": "range",
"id": "orders",
"label": "Max Items",
"min": 1,
"max": 50,
"step": 1,
"default": 20,
"unit": "qty"
},
{
"type": "range",
"id": "otime",
"label": "Order time",
"min": 5,
"max": 48,
"step": 1,
"default": 24,
"unit": "h"
},
{
"type": "textarea",
"id": "omsg",
"label": "Orders Message",
"default": "<i class='at at-fire-l'></i> [orders] sold in last [hours] hours",
"info": "Use '[orders]' for items counts and '[hours]' for hours counts"
},
{
"type": "color",
"id": "cl",
"label": "Text Color",
"default": "#000"
},
{
"type": "range",
"id": "fs",
"label": "Font Size",
"default": 13,
"min": 10,
"max": 20,
"step": 1,
"unit": "px"
},
{
"type": "range",
"id": "bm",
"min": 0,
"max": 30,
"step": 5,
"label": "Bottom Margin",
"unit": "px",
"default": 15
}
]
},
{
"type": "visitor",
"name": "Fake Visitor",
"limit": 1,
"settings": [
{
"type": "range",
"id": "visitors",
"label": "Max Visitors",
"min": 10,
"max": 500,
"step": 10,
"default": 50
},
{
"type": "range",
"id": "visitors_time",
"label": "Interval time",
"min": 1,
"max": 20,
"step": 1,
"unit": "sec",
"default": 5
},
{
"type": "textarea",
"id": "visitors_msg",
"label": "Visitors Message",
"default": "<i class='at at-eye-r'></i> [visitors] People looking for this product",
"info": "Use '[visitors]' to show user counts"
},
{
"type": "color",
"id": "cl",
"label": "Text Color",
"default": "#000"
},
{
"type": "range",
"id": "fs",
"label": "Font Size",
"default": 13,
"min": 10,
"max": 20,
"step": 1,
"unit": "px"
},
{
"type": "range",
"id": "bm",
"min": 0,
"max": 30,
"step": 5,
"label": "Bottom Margin",
"unit": "px",
"default": 15
}
]
},
{
"type": "shiptime",
"name": "Shipping Estimate",
"limit": 1,
"settings": [
{
"type": "paragraph",
"content": "Display same time for all products, To set different for each product [follow this article](https:\/\/www.adornthemes.com\/knowledge-base\/show-shipping-estimated-time-for-specific-product-2\/)"
},
{
"type": "text",
"id": "estimate",
"label": "Shipping Estimated Days",
"default": "4\/10",
"info": "Add value in days like 4\/10 and customer will show date after 4 to 10 days from today date."
},
{
"type": "textarea",
"id": "msg",
"label": "Shipping Estimate Message",
"default": "<i class='at at-clock-r'></i> Estimated delivery between [startdate] - [enddate].",
"info": "Use '[startdate]' and [enddate] for date to show with message"
},
{
"type": "range",
"id": "bm",
"min": 0,
"max": 30,
"step": 5,
"label": "Bottom Margin",
"unit": "px",
"default": 15
}
]
},
{
"type": "freeship",
"name": "Free Shipping",
"limit": 1,
"settings": [
{
"type": "paragraph",
"content": "Manage free shipping message from Theme Settings -> General Settings -> Free Shipping Message"
},
{
"type": "range",
"id": "bm",
"min": 0,
"max": 30,
"step": 5,
"label": "Bottom Margin",
"unit": "px",
"default": 15
}
]
},
{
"type": "pickup",
"name": "Pickup Availability",
"limit": 1,
"settings":[
{
"type": "range",
"id": "bm",
"min": 0,
"max": 30,
"step": 5,
"label": "Bottom Margin",
"unit": "px",
"default": 15
}
]
},
{
"type": "customc",
"name": "HTML/Liquid",
"limit": 2,
"settings":[
{
"type": "liquid",
"id": "custom_liquid",
"label": "HTML",
"info": "Add app snippets or other Liquid code to create advanced customizations.",
"default":"<h4>Custom code block</h4><p>Use this advance section to add custom HTML, app scripts, or liquid.</p>"
},
{
"type": "range",
"id": "bm",
"min": 0,
"max": 30,
"step": 5,
"label": "Bottom Margin",
"unit": "px",
"default": 15
}
]
},
{
"type": "@app"
},
{
"type": "complementary",
"name": "Complementary products",
"limit": 1,
"settings": [
{
"type": "paragraph",
"content": "To select complementary products, add the Search & Discovery app. [Learn more](https://help.shopify.com/manual/online-store/search-and-discovery/product-recommendations)"
},
{
"type": "text",
"id": "title",
"label": "Heading",
"default": "Complete the look"
},
{
"type": "color",
"id": "cl",
"label": "Color",
"default": "#000"
},
{
"type": "range",
"id": "fs",
"min": 10,
"max": 60,
"step": 1,
"label": "Font Size",
"unit": "px",
"default": 22
},
{
"type": "range",
"id": "fsm",
"min": 10,
"max": 60,
"step": 1,
"label": "Font Size(mobile)",
"unit": "px",
"default": 16
},
{
"type": "select",
"id": "fw",
"label": "Font Weight",
"default": "600",
"options": [
{
"value": "300",
"label": "Light"
},
{
"value": "400",
"label": "Regular"
},
{
"value": "500",
"label": "Medium"
},
{
"value": "600",
"label": "Semi Bold"
},
{
"value": "700",
"label": "Bold"
}
]
},
{
"type": "range",
"id": "limit",
"min": 1,
"max": 10,
"step": 1,
"default": 10,
"label": "Maximum products to show"
},
{
"type": "paragraph",
"content": "Products Per Row ==="
},
{
"type": "range",
"id": "grid",
"label": "Desktop",
"default": 4,
"min": 2,
"max": 5,
"step": 1
},
{
"type": "range",
"id": "gridtb",
"label": "Tablet",
"default": 3,
"min": 1,
"max": 5,
"step": 1
},
{
"type": "range",
"id": "gridmb",
"label": "Mobile",
"default": 2,
"min": 1,
"max": 5,
"step": 1
},
{
"type": "range",
"id": "bm",
"min": 0,
"max": 30,
"step": 5,
"label": "Bottom Margin",
"unit": "px",
"default": 15
}
]
},
{
"type": "more-color",
"name": "More Colors",
"limit": 1,
"settings": [
{
"type": "paragraph",
"content": "To select color products, add the metafields. [Learn more](https://www.adornthemes.com/knowledge-base/more-color-products/)"
},
{
"type": "text",
"id": "title",
"label": "Heading",
"default": "More colors"
},
{
"type": "color",
"id": "cl",
"label": "Color",
"default": "#000"
},
{
"type": "range",
"id": "fs",
"min": 10,
"max": 60,
"step": 1,
"label": "Font Size",
"unit": "px",
"default":16
},
{
"type": "range",
"id": "fsm",
"min": 10,
"max": 60,
"step": 1,
"label": "Font Size(mobile)",
"unit": "px",
"default": 16
},
{
"type": "select",
"id": "fw",
"label": "Font Weight",
"default": "600",
"options": [
{
"value": "300",
"label": "Light"
},
{
"value": "400",
"label": "Regular"
},
{
"value": "500",
"label": "Medium"
},
{
"value": "600",
"label": "Semi Bold"
},
{
"value": "700",
"label": "Bold"
}
]
},
{
"type": "range",
"id": "wd",
"min": 30,
"max": 150,
"step": 5,
"label": "Image Width",
"unit": "px",
"default": 100
},
{
"type": "color",
"id": "bd",
"label": "Active Border",
"default": "#000"
},
{
"type": "range",
"id": "bm",
"min": 0,
"max": 30,
"step": 5,
"label": "Bottom Margin",
"unit": "px",
"default": 15
}
]
},
{
"type": "ft",
"name": "Feature Points",
"limit": 1,
"settings":[
{
"type": "range",
"id": "bm",
"min": 0,
"max": 30,
"step": 5,
"label": "Bottom Margin",
"unit": "px",
"default": 15
},
{
"type": "textarea",
"id": "ft1",
"label": "Feature Text 1",
"default": "<i class='at at-truck-l'><\/i> Free Shipping & Return"
},
{
"type": "textarea",
"id": "ft2",
"label": "Feature Text 2",
"default": "<i class='at at-sync-ar'><\/i> Money back guarantee"
},
{
"type": "textarea",
"id": "ft3",
"label": "Feature Text 3",
"default": "<i class='at at-question-l'><\/i> Fast & reliable support"
},
{
"type": "textarea",
"id": "ft4",
"label": "Feature Text 4",
"default": "<i class='at at-credit-card-l'><\/i> Secure payment"
},
{
"type": "color",
"id": "cl",
"label": "Text",
"default": "#111"
}
]
},
{
"type": "type",
"name": "Product Type",
"limit": 1,
"settings":[
{
"type": "range",
"id": "bm",
"min": 0,
"max": 30,
"step": 5,
"label": "Bottom Margin",
"unit": "px",
"default": 15
}
]
},
{
"type": "cl",
"name": "Product Collection",
"limit": 1,
"settings":[
{
"type": "range",
"id": "bm",
"min": 0,
"max": 30,
"step": 5,
"label": "Bottom Margin",
"unit": "px",
"default": 15
}
]
},
{
"type": "tags",
"name": "Product Tags",
"limit": 1,
"settings":[
{
"type": "range",
"id": "bm",
"min": 0,
"max": 30,
"step": 5,
"label": "Bottom Margin",
"unit": "px",
"default": 15
}
]
}
]
}
{% endschema %}
Let me know if you need something else to help me...
Dear Hannah, thank you for your help. I already had a look on product page settings but I cannot open this tab by this way.
Here is the code of my product page to let you say what I have to modify :
{%- if settings.breadcrumb_pr -%}{%- render 'breadcrumb' -%}{%- else -%}<div class="topSpace"></div>{%- endif -%}
{%- liquid
assign isRtl = false
assign lisRtl = 'ar,dv,ha,he,ku,fa,ur,ug' | split: ','
if lisRtl contains request.locale.iso_code or settings.rtl
assign isRtl = true
endif
assign secSt = section.settings
assign current_variant = product.selected_or_first_available_variant
assign product_thumb_size = '160x'
assign zoomImg = '1800x1800'
assign enable_zoom = settings.enable_zoom
assign className = ""
assign slidefade = true
assign centermode = 'left'
assign watchCss = false
assign slHeight = true
assign dotNav = false
assign product_image_width = 'wd50-md'
assign product_description_width = 'wd50-md'
if settings.product_latyout == "style2"
assign product_image_width = 'wd66-md'
assign product_description_width = 'wd33-md'
elsif settings.product_latyout == "style3"
assign className = "fl f-wrap"
assign watchCss = true
assign product_image_width = 'wd60-md'
assign product_description_width = 'wd40-md'
elsif settings.product_latyout == "style4"
assign watchCss = true
elsif settings.product_latyout == "style5"
assign className = "fl f-wrap"
assign watchCss = true
assign product_image_width = 'wd60-md'
assign product_description_width = 'wd40-md'
elsif secSt.prstyle == "5"
assign centermode = "center"
assign slHeight = false
assign dotNav = true
assign product_image_width = 'wd100'
assign product_description_width = 'wd100'
endif
assign featured_img_src=current_variant.featured_image.src | default: product.featured_image.src
assign sizeOptions = settings.sizeOpt | downcase | replace:", ","," | replace:" , ","," | replace:" ,","," | split: ","
assign sizechart = false
assign sizechartall = flase
if settings.sizechart and sizeOptions contains 'all'
assign sizechartall = true
endif
-%}
{% if settings.product_latyout == "style1" and settings.thumbnail_pos != "bottom" %}
{% capture imgSt %}--imgw:calc(100% - 90px);{% if settings.thumbnail_pos == "left" %}--od:1;{% endif %}{% endcapture %}
{% elsif settings.product_latyout == "style2" and settings.thumbnail_pos != "bottom" %}
{% capture imgSt %}--imgw:calc(100% - 90px);{% if settings.thumbnail_pos == "left" %}--od:1;{% endif %}{% endcapture %}
{% else %}
{% capture imgSt %}--imgw:100%;{% endcapture %}
{% endif %}
<div class="ptContainer {{settings.product_latyout}} page-width{% if secSt.section_width %} fullwidth{%endif%}" data-style="{{settings.product_latyout}}" data-url="{{ product.url }}" data-section-id="{{ section.id }}" data-section-type="product" data-enable-history-state="true">
{%- capture productImages -%}
<div class="fl f-jcsb f-col{% if settings.thumbnail_pos != "bottom" %} f-row-md{% endif %}">
<div class="pr_lg_img" data-product-single-media-group style="{{imgSt}}">
<div class="primgSlider {{settings.product_latyout}} pis{{section.id}} {{className}}" data-flickity='{ "cellAlign":"{{centermode}}","watchCSS":{{watchCss}},"wrapAround":true,"adaptiveHeight":{{slHeight}},"pageDots":{{dotNav}}{%- if isRtl -%},"rightToLeft": true{%- endif -%} }'>
{% for media in product.media %}
{%- assign imgNo = forloop.index0 -%}
{% case media.media_type %}
{% when 'image' %}
<{%- if settings.enable_lightbox -%}a href="{{ media | img_url: 'master' }}"{% else %}div{% endif %} id="{{media.id}}" data-pswp-width="{{media.width}}" data-pswp-height="{{media.height}}" class="pr_zoom_{{section.id}} pr_photo pswipe{% if settings.enable_lightbox %} lightbox{% endif %}{% if enable_zoom %} zoomcr{% endif %}" {% if enable_zoom %}data-zoom="{{ media | img_url: zoomImg }}"{% endif %} data-slide="{{imgNo}}">
{%- assign primg_url = media | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
<span class="imgWrapper" style="max-width:{% if settings.pimg_maxHt != blank %}{{ settings.pimg_maxHt | times: media.aspect_ratio }}{% else %}{{media.width}}{% endif %}px;">
<img class="imgFl lazyload featImg{{ section.id }} product-featured-img{% if enable_zoom %} js-zoom-enabled{% endif %}{% if forloop.first %} lazypreload{% endif %}" src="{{ media | img_url: "50x" }}" width="{{ media.width }}" height="{{ media.height }}"
data-src="{{ primg_url }}" data-widths="[400, 600, 800, 1000]" data-aspectratio="{{ media.aspect_ratio }}" data-sizes="auto" alt="{{ media.alt | escape }}">
</span>
</{%- if settings.enable_lightbox -%}a{% else %}div{% endif %}>
{% when 'external_video' %}
<div class="pr_photo p{{secSt.prstyle}} videoSlide" data-media-id="{{ media.id }}" data-slide="{{imgNo}}">
<div class="vd-wrap">{{ media | external_video_tag }}</div>
</div>
{% when 'video' %}
<div class="pr_photo p{{secSt.prstyle}} videoSlide" data-media-id="{{ media.id }}" data-slide="{{imgNo}}">
{%- assign videoThumb = media | img_url: '700x' -%}
{{ media | video_tag: poster: videoThumb, controls: true, muted: true, loop: true, playsinline: true, webkit-playsinline: true }}
</div>
{% when 'model' %}
<div class="pr_photo p{{secSt.prstyle}} pmd" id="FeaturedMedia-{{ section.id }}-{{ media.id }}-wrapper" data-product-media-type-model data-product-single-media-wrapper data-media-id="{{ section.id }}-{{ media.id }}">
<div class="prMedia" style="padding-top:100%">{{ media | model_viewer_tag: image_size: pimgsize, reveal: 'interaction', toggleable: true, data-model-id: media.id }}</div>
</div>
{% else %}
<div class="pr_photo p{{secSt.prstyle}} " style="padding-top: 100%;" data-media-id="{{ media.id }}">{{ media | media_tag }}</div>
{% endcase %}
{% endfor %}
</div>
{% assign first_3d_model = product.media | where: "media_type", "model" | first %}
{%- if first_3d_model -%}
<button aria-label="{{ 'products.product.view_in_space_label' | t }}" class="btn w_100 hide product-single__view-in-space" data-shopify-xr data-shopify-model3d-id="{{ first_3d_model.id }}" data-shopify-title="{{ product.title | escape }}" data-shopify-xr-hidden>
<span class='product-single__view-in-space-text'>{{ 'products.product.view_in_space' | t }}</span>
</button>
{%- endif -%}
{% comment %}*** product video *** {% endcomment %}
{%- if product.metafields.my_fields.video != blank -%}<a href="{{product.metafields.my_fields.video}}" class="popup-video" title="{{ 'products.product.video' | t }}"><i class="at at-video" aria-hidden="true"></i> <span class="tooltip-label">{{ 'products.product.video' | t }}</span></a>{%- endif -%}
{% comment %}<div class="product-btn fl">
{%- if settings.enable_lightbox -%}<a href="#" class="btn prlightbox" aria-label="Click to Zoom image"><i class="at at-expand-l-arrows" aria-hidden="true"></i> <span class="tooltip-label">{{ 'products.product.zoom' | t }}</span></a>{%- endif -%}
</div>{% endcomment %}
{% if settings.pr_lbl %}
<span class="product-labels {{ settings.select_label_style }}">
{%- if settings.sale_lbl and product.compare_at_price > product.price -%}
{% if settings.sale_label_style == "salelabel" %}
<label class="lbl on-sale">{{ 'products.product.on_sale' | t}}</label>
{% else %}
<label class="lbl on-sale">-{{ product.compare_at_price_min | minus: product.price | times: 100 | divided_by: product.compare_at_price_min }}%</label>
{% endif %}
{%- endif -%}
{%- if product.tags contains settings.pr_label1 -%}<label class="lbl pr-label1">{{settings.pr_label1}}</label>{%- endif -%}
{%- if product.tags contains settings.pr_label2 -%}<label class="lbl pr-label2">{{settings.pr_label2}}</label>{%- endif -%}
{%- if product.tags contains settings.pr_label3 -%}<label class="lbl pr-label3">{{settings.pr_label3}}</label>{%- endif -%}
</span>
{% endif %}
</div>
{% if product.media.size > 0 %}
<div class="thumbs_nav {{settings.thumbnail_pos}} pr flickity-enabled{% if settings.product_latyout != "style1" and settings.product_latyout != "style2" %} hide{% endif %}{% if product.media.size == 1 %} hide{% endif %}">
<div class="pr_thumbsWr ptw{{ section.id }}">
<div class="pr_thumbs pr_thumbs{{ section.id }}{% if secSt.prthumbs != "bottom" %} f-col-md{% endif %}">
{% for media in product.media %}
{%- assign imgNo = forloop.index0 -%}
{% capture thumbImgs %}{{ media | img_url: '100x' }} 100w {{ 100 | divided_by: media.aspect_ratio | round }}h,{{ media | img_url: '200x' }} 200w {{ 200 | divided_by: media.aspect_ratio | round }}h{% endcapture %}
<div class="pr_thumbs_item{% if media.media_type == 'video' or media.media_type == 'external_video' or media.media_type == 'model' %} vd{% endif %}" data-slide="{{imgNo}}">
<a id="img{{media.id}}" href="{{ media | img_url: '50x' }}" class="gitem-img pr_thumb pr_thumb{{ section.id }} lazyload{% if media.media_type == 'image' %} swipeImg{% endif %}{% if featured_img_src== media %} activeSlide{% endif %}"
data-bgset="{% if media.media_type == 'image' %}{{thumbImgs}}{% else %}{{ media | img_url: '200x' }}{% endif %}" data-sizes="auto" data-parent-fit="contain" title="{{media.alt | default: product.title}}">
{% if media.media_type == 'video' or media.media_type == 'external_video' %}<svg class="at-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M424.4 214.7L72.4 6.6C43.8-10.3 0 6.1 0 47.9V464c0 37.5 40.7 60.1 72.4 41.3l352-208c31.4-18.5 31.5-64.1 0-82.6zM48 453.5v-395c0-4.6 5.1-7.5 9.1-5.2l334.2 197.5c3.9 2.3 3.9 8 0 10.3L57.1 458.7c-4 2.3-9.1-.6-9.1-5.2z"/></svg>{% endif %}
{% if media.media_type == 'model' or media.media_type == 'external_video' %}<svg class="at-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M239.1 7.5l-208 78c-18.7 7-31.1 25-31.1 45v225.1c0 18.2 10.3 34.8 26.5 42.9l208 104c13.5 6.8 29.4 6.8 42.9 0l208-104c16.3-8.1 26.5-24.8 26.5-42.9V130.5c0-20-12.4-37.9-31.1-44.9l-208-78C262 3.4 250 3.4 239.1 7.5zm16.9 45l208 78v.3l-208 84.5-208-84.5v-.3l208-78zM48 182.6l184 74.8v190.2l-184-92v-173zm232 264.9V257.4l184-74.8v172.9l-184 92z"/></svg>{% endif %}
</a>
</div>
{% endfor %}
</div>
</div>
<button class="flickity-button previous" type="button" aria-label="Previous"><svg class="flickity-button-icon" viewBox="0 0 100 100"><path d="M 10,50 L 60,100 L 70,90 L 30,50 L 70,10 L 60,0 Z" class="arrow"></path></svg></button>
<button class="flickity-button next" type="button" aria-label="Next"><svg class="flickity-button-icon" viewBox="0 0 100 100"><path d="M 10,50 L 60,100 L 70,90 L 30,50 L 70,10 L 60,0 Z" class="arrow" transform="translate(100, 100) rotate(180) "></path></svg></button>
</div>
{% endif %}
</div>
<!-- product share -->
{% if settings.show_share_buttons_single %}
{% render 'social-sharing', share_title: product.title, share_permalink: product.url, share_image: product, sharing_lbl: settings.sharing_lbl %}
{% endif %}
{%- endcapture -%}
{%- capture infoLinks -%}
{%- if settings.enable_wishlist or settings.askaboutproduct or settings.shippingpopup -%}
<div class="infolinks mfp-link">
{%- if settings.enable_wishlist -%}<a class="inLink wishlist addto-wishlist" href="/pages/wishlist" rel="{{ product.handle | handleize }}"><i class="at at-heart-l"></i><span class="msg">{{ 'products.wishlist.add_to' | t}}</span></a>{%- endif -%}
{%- if settings.shippingpopup -%}<a href="#ShippingInfo" data-effect="mfp-zoom-in" class="inLink mfp"><i class="at at-paper-l-plane"></i> {{'products.product.shipping_link' | t}}</a>{%- endif -%}
{%- if settings.askaboutproduct -%}
<a href="#productInquiry" data-effect="mfp-zoom-in" class="mfp{% if settings.catalogmode %} btn btn-enquiry brt--large{% else %} inLink{% endif %}"><i class="at at-envelope-l"></i> {{'products.enquiry.link' | t}}</a>
{%- endif -%}
</div>
{%- endif -%}
{%- endcapture -%}
{%- capture productDetails -%}
{% for block in section.blocks %}
{% assign blkSt = block.settings %}
{% case block.type %}
{% when 'hr' %}
<hr class="mt0 mb{{blkSt.bm}}" style="border-color: {{blkSt.hrc}}" {{ block.shopify_attributes }} />
{% when 'title' %}
<h1 class="product-single__title ttlTxt {{blkSt.transform}} mb{{blkSt.bm}}" style="--tcl:{{blkSt.cl}};--tfs:{{blkSt.fs}}px;--tfsm:{{blkSt.fsm}}px;--tff:var(--{{blkSt.ff}});--tfw:{{blkSt.fw}};--tlh:1.4;" {{ block.shopify_attributes }}>{{ product.title }}</h1>
{% when 'price' %}
{%- if product.metafields.custom.product_group != blank -%}<style>.priceSingle{--pcl:{{blkSt.pcl}};--pcls:{{blkSt.pcls}};--fs:{{blkSt.fs}}px; --fsm:{{blkSt.fsm}}px;--pfw:{{ blkSt.pfw}};}</style>{%- endif -%}
{%- unless settings.hide-price or product.metafields.custom.product_group != blank -%}
<div id="price{{ section.id }}" class="fl f-wrap psinglePriceWr mb{{blkSt.bm}}" style="--pcl:{{blkSt.pcl}};--pcls:{{blkSt.pcls}};--fs:{{blkSt.fs}}px; --fsm:{{blkSt.fsm}}px;--pfw:{{ blkSt.pfw}};" {{ block.shopify_attributes }}>
{% if current_variant.compare_at_price > current_variant.price %}
<span class="v-hidden">{{ 'products.product.regular_price' | t }}</span>
<span class="psinglePrice sale"><span id="ProductPrice-{{ section.id }}">{{ current_variant.price | money }}</span></span>
<s class="psinglePrice">{{ current_variant.compare_at_price | money }}</s>
{% else %}
<span class="v-hidden">{{ 'products.product.regular_price' | t }}</span>
<span class="psinglePrice"><span id="ProductPrice-{{ section.id }}">{{ current_variant.price | money }}</span></span>
<s class="psinglePrice hide">{{ current_variant.compare_at_price | money }}</s>
{% endif %}
{% if blkSt.saved %}
<span class="discount-badge{% unless current_variant.compare_at_price > current_variant.price %} hide{% endunless %}">
<span class="hide-sm hide-md"> | </span>
<span itemprop="name">{{ 'products.product.you_save' | t}}</span>
<span id="SaveAmount-{{ section.id }}" class="product-single__save-amount">{{ current_variant.compare_at_price | minus: current_variant.price | money }}</span>
<span class="off">(<span>{{ current_variant.compare_at_price | minus: current_variant.price | times: 100 | divided_by: current_variant.compare_at_price }}</span>%{{ 'products.product.off' | t}})</span>
</span>
{% endif %}
<div class="price__unit w_100{% unless current_variant.unit_price_measurement %} hide{% endunless %}">
<span data-unit-price>{{ current_variant.unit_price | money }}</span> /
<span data-unit-base>
{%- 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 -%}
</span>
</div>
</div>
{% if blkSt.taxship %}
{%- if shop.taxes_included or shop.shipping_policy.body != blank -%}
<div class="product__policies rte" data-product-policies>
{% 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 %}
</div>
{%- endif -%}
{%- endif -%}
{%- endunless -%}
{% when 'text' %}
<div class="customtx mb{{blkSt.bm}}{% if blkSt.addbg %} tbg{% endif %}" {{ block.shopify_attributes }} style="--fs:{{ blkSt.fs }}px;--cl:{{ blkSt.cl }};--bg:{{ blkSt.bg}};"> {{ blkSt.text }}</div>
{% when 'ras' %}
<div class="product-info mb{{blkSt.bm}}" {{ block.shopify_attributes }}>
{%- if settings.show_product_review -%}
<div class="review">{% include 'ratings' %}</div>
{%- endif -%}
{%- if blkSt.availability -%}
<div class="product-stock">{{ 'products.product.availability' | t }}
{%- liquid
assign classNm = 'instock'
assign stickLbl = 'products.product.available' | t
if current_variant.inventory_management == "shopify"
if current_variant.available and current_variant.inventory_quantity < 1
assign classNm = 'preorder'
assign stickLbl = 'products.product.pre_order' | t
elsif current_variant.available
assign classNm = 'instock'
assign stickLbl = 'products.product.available' | t
else
assign classNm = 'outstock'
assign stickLbl = 'products.product.unavailable' | t
endif
endif
-%}
<span class="stockLbl {{classNm}}" data-in="{{ 'products.product.available' | t }}" data-out="{{ 'products.product.unavailable' | t }}" data-pre="{{ 'products.product.pre_order' | t }}">{{stickLbl}}</span>
</div>
{%- endif -%}
{%- if blkSt.sku and current_variant.sku != blank -%}<div class="product-sku">{{ 'products.product.sku' | t }} <span class="variant-sku">{{ current_variant.sku }}</span></div>{%- endif -%}
</div>
{% when 'coltabs' %}
<details class="sumtabs mb{{blkSt.bm}}" {% if blkSt.open %}open{% endif %} {{ block.shopify_attributes }}>
<summary class="pr fl f-aic f-jcsb wd100">{{blkSt.title}} <i class="at at-angle-down-l"></i></summary>
<div class="rte" {{ block.shopify_attributes }}>
{% if blkSt.opt == 'des' %}
{{ product.description }}
{% elsif blkSt.opt contains "size" %}
{%- assign prtype = product.type | handleize | append: "-size-chart" -%}
{%- assign prbrand = product.vendor | handleize | append: "-size-chart" -%}
{%- if product.metafields.my_fields.sizechart != blank -%}
{{ product.metafields.my_fields.sizechart }}
{%- elsif settings.sizechart_type == "type" and pages[prtype].content != empty -%}
{{ pages[prtype].content }}
{%- elsif settings.sizechart_type == "brand" and pages[prbrand].content != empty -%}
{{ pages[prbrand].content }}
{%- else -%}
{{ pages[settings.sizechart_page].content }}
{%- endif -%}
{% elsif blkSt.richtxt contains "metafield-multi_line_text_field" %}
<div class="mtmltxt">{{blkSt.richtxt}}</div>
{% else %}
{{blkSt.richtxt}}
{% endif %}
</div>
</details>
{% when 'vendor' %}
<div class="mb{{blkSt.bm}}" {{ block.shopify_attributes }}>
{%- liquid
assign vlink = routes.collections_url | append: '/vendors?q=' | append: product.vendor
for coll in product.collections
if coll.title == product.vendor
assign vlink = coll.url
break
endif
endfor
assign imgName = product.vendor | handleize | append:'.png'
assign imgsrc=imgName | file_img_url: '200x'
-%}
<a class="product-vendor" href="{{vlink}}" style="color:{{blkSt.cl}};font-size:{{blkSt.fs}}px">
{% if imgSrc contains '?v=' and blkSt.img %}
<img class="vendImg lazyload" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="{{imgSrc}}" width="{{blkSt.lwd}}" height="100" alt="{{product.vendor}}">
{% else %}
{{product.vendor}}
{% endif %}
</a>
</div>
{% when 'cta' %}
{%- if product.metafields.custom.product_group != blank -%}
{%- render 'products-group', blkSt: blkSt, infoLinks:infoLinks -%}
{%- else -%}
{%- assign product_form_id = 'product-form-' | append: section.id -%}
<product-form class="db productForm mb{{blkSt.bm}}" {{ block.shopify_attributes }}>
{%- form 'product', product, id: product_form_id, class: 'form', novalidate: 'novalidate', data-type: 'add-to-cart-form' -%}
<div class="product-form mfp-link fl f-aie f-wrap">
{% assign isSwatch = false %}
{% assign hideSoldout = settings.swsold %}
{%- unless product.options.size == 1 and product.variants[0].title == 'Default Title' -%}
{%- for option in product.options_with_values -%}
{% liquid
assign optionName = option.name | downcase
if settings.sizechart_link and sizeOptions contains optionName
assign sizechart = true
assign sizechartall = false
endif
%}
{%- if settings.show_swatch -%}
{% assign isSwatch = true %}
{% render 'swatch', swatch: option, secId: section.id, optindex: forloop.index0, sizechart:sizechart %}
{%- else -%}
<div class="product-form__item fl1 js pr_form_item mb5 option{{forloop.index}}">
<label {% if option.name == 'default' %}class="hidden_txt" {% endif %}for="SingleOptionSelector-{{ forloop.index0 }}">
{{ option.name }} <span class="slVariant ml5"></span>
{%- if sizechart -%}
<a href="#sizechart" class="mfp sizelink" data-effect="mfp-zoom-in"><i class="at at-ruler"></i> {{ 'products.product.size_chart' | t}}</a>
{%- endif -%}
</label>
<select class="single-option-selector single-option-selector-{{ section.id }} w_100" id="SingleOptionSelector-{{ forloop.index0 }}" data-index="option{{ forloop.index }}">
{%- for value in option.values -%}<option value="{{ value | escape }}"{% if option.selected_value == value %} selected="selected"{% endif %}>{{ value }}</option>{%- endfor -%}
</select>
</div>
{%- endif -%}
{%- endfor -%}
{%- endunless -%}
{%- if sizechartall -%}
<a href="#sizechart" class="mfp sizelink" data-effect="mfp-zoom-in"><i class="at at-ruler"></i> {{ 'products.product.size_chart' | t}}</a>
{%- endif -%}
<select name="id" id="ProductSelect-{{ section.id }}" data-section="{{ section.id }}" class="pr_variants no-js">
{%- for variant in product.variants -%}
{%- if variant.available -%}
<option{% if variant == current_variant %} selected="selected"{% endif %} value="{{ variant.id }}">{{ variant.title }}</option>
{%- else -%}
<option disabled="disabled">{{ variant.title }} - {{ 'products.product.sold_out' | t }}</option>
{%- endif -%}
{%- endfor -%}
</select>
</div>
{{infoLinks}}
{%- unless settings.catalogmode -%}
<div class="pform-error-wrap errors" role="alert" hidden><span class="ml5 pform-error-msg"></span></div>
<div class="fl product-action">
<label class="lblqty v-hidden" for="quantity">{{ 'products.product.quantity' | t }}</label>
<div class="fl f-wrap f-aic f-jcsb">
{%- if blkSt.qty_sel -%}
<quantity-input class="qtyField mb15" title="{{ 'products.product.quantity' | t }}">
<button type="button" class="qtyBtn minus" name="minus"><i class="at at-minus-r" aria-hidden="true"></i><span class="v-hidden">{{- 'products.quantity.decrease' | t: product: product.title | escape -}}</span></button>
<input type="number" id="quantity" name="quantity" value="1" min="{{ current_variant.quantity_rule.min }}" class="pr_input qty" step="{{ current_variant.quantity_rule.increment }}" />
<button type="button" class="qtyBtn plus" name="plus"><i class="at at-plus-r" aria-hidden="true"></i><span class="v-hidden">{{- 'products.quantity.increase' | t: product: product.title | escape -}}</span></button>
</quantity-input>
{%- else -%}
<input type="text" id="quantity" name="quantity" value="1" class="hide pr_input qty" />
{%- endif -%}
</div>
<button type="submit" name="add" id="AddToCart-{{ section.id }}" {% unless current_variant.available %}disabled="disabled"{% endunless %} class="btn {{settings.atc-style}} pr_btn product-form__submit">
<span class="txt">
{% if current_variant.available and current_variant.inventory_quantity < 1 and current_variant.inventory_management == "shopify" %}
{{'products.product.pre_order' | t }}
{% elsif current_variant.available %}
{{ 'products.product.add_to_cart' | t }}
{% else %}
{{'products.product.sold_out' | t }}
{% endif %}
</span>
<div class="loading-overlay__spinner hidden"><i class="at at-circle-notch-r at-spin"></i></div>
</button>
</div>
{%- if settings.dynamic_btn -%}
{%- if settings.terms_checkbox -%}
<label for="prTearm" class="cart_term mb20">
<input type="checkbox" name="tearm" id="prTearm" class="checkbox custCheck" value="tearm" required />
<span class="checkbox"></span> {{ settings.terms_text }}
</label>
{%- endif -%}
<div style="--btnbg :{{blkSt.btnbg}};--btntext :{{blkSt.btntext}};--btnbdr :{{blkSt.btnbdr}};">{{ form | payment_button }}</div>
{%- endif -%}
{%- endunless -%}
{%- endform -%}
</product-form>
{%- endif -%}
{% when 'countdown' %}
{% if product.metafields.my_fields.countdown != blank %}
<div class="timerl mb{{blkSt.bm}}" style="--cl:{{ blkSt.cl}};--bg:{{ blkSt.bg}};--bd:{{blkSt.bd}};--bdr:{{blkSt.bdr}}" {{ block.shopify_attributes }}>
{%- if blkSt.lbl != blank -%}<label style="color:{{ blkSt.lcl }};" class="mb10">{{ blkSt.lbl}}</label>{%- endif -%}
<div id="countdown" class="atCounter prcountdown fl" data-date="{{product.metafields.my_fields.countdown}}">
<span><span class="tm days">00</span>{{'date_formats.days' | t}}</span><span><span class="tm hours">00</span>{{ 'date_formats.hours' | t }}</span><span><span class="tm minutes">00</span>{{'date_formats.minuts' | t}}</span><span><span class="tm seconds">00</span>{{'date_formats.seconds' | t}}</span>
</div>
</div>
{%- endif -%}
{% when 'order' %}
{%- assign ordermsg = blkSt.omsg | replace: '[orders]','<strong id="odItems"></strong>' | replace: '[hours]','<strong id="odTime"></strong>' -%}
<div class="orderMsg customtx mb{{blkSt.bm}}" data-user="{{blkSt.orders}}" data-time="{{blkSt.otime}}" {{ block.shopify_attributes }} style="--fs:{{ blkSt.fs }}px;--cl:{{ blkSt.cl }};" >
{{ordermsg}}
</div>
<script>document.getElementById("odItems").innerHTML = Math.floor(Math.random() * {{blkSt.orders}}) + 1;document.getElementById("odTime").innerHTML = Math.floor(Math.random() * {{blkSt.otime}}) + 1;</script>
{% when 'visitor' %}
{%- assign visitormsg = blkSt.visitors_msg | replace: '[visitors]','<strong id="uersView"></strong>' -%}
<div class="userViewMsg customtx mb{{blkSt.bm}}" {{ block.shopify_attributes }} style="--fs:{{ blkSt.fs }}px;--cl:{{ blkSt.cl }};" >
{{visitormsg}}
</div>
<script>document.getElementById("uersView").innerHTML = Math.floor(Math.random() * {{blkSt.visitors}}) + 1;setInterval(function(){ document.getElementById("uersView").innerHTML = Math.floor(Math.random() * {{blkSt.visitors}}) + 1 }, {{blkSt.visitors_time | times:1000}});</script>
{% when 'qty' %}
{%- assign enableqtyMsg = true -%}
{%- if current_variant.inventory_management == "shopify" and current_variant.inventory_quantity < blkSt.maxqty and current_variant.inventory_quantity > 0 -%}
{%- assign enableqtyMsg = flase -%}
{%- endif -%}
{% assign qtyMsg = 'products.product.quantity_message' | t | split: '{{items}}' %}
<div id="quantity_message" class="mb{{blkSt.bm}}" data-qty="{{blkSt.maxqty}}" style="--cl:{{blkSt.cl}};--bg:{{blkSt.bg}};{%- if enableqtyMsg -%}display:none;{%- endif -%}" {{ block.shopify_attributes }}>
{{qtyMsg[0]}} <span class="items">{{current_variant.inventory_quantity}}</span> {{qtyMsg[1]}}
</div>
{% when 'freeship' %}
{%- assign shipProd = all_products[settings.free_ship].price | minus: cart.total_price -%}
{% capture freeAmount %}<b>{{shipProd | money}}</b>{% endcapture %}
<div class="freeShipMsg mb{{blkSt.bm}}" {{ block.shopify_attributes }}><i class="at at-truck-l"></i> {% if shipProd > 0 %}{{settings.free_ship_msg | replace: '$',freeAmount }}{% else %}{{settings.got_free_ship }}{% endif %}</span></div>
{% when 'shiptime' %}
{%- if product.metafields.my_fields.shipping_days != blank %}
{%- assign days = product.metafields.my_fields.shipping_days | split: "/" -%}
{%- else %}
{%- assign days = blkSt.estimate | split: "/" -%}
{%- endif %}
{% assign day1 = days[0] | times: 86400 %}
{% assign day2 = days[1] | times: 86400 %}
{% assign day1day = "now" | date: "%s" | plus: day1 | date: '%A' %}
{%- if day1day == 'Sunday' %}
{% assign day1 = days[0] | plus: 1 | times: 86400 %}
{% assign day2 = days[1] | plus: 1 | times: 86400 %}
{%- endif %}
{% assign day2day = "now" | date: "%s" | plus: day2 | date: '%A' %}
{%- if day2day == 'Sunday' %}
{% assign day2 = days[1] | plus: 1 | times: 86400 %}
{%- endif %}
{% capture startdate %}<b>{{ "now" | date: "%s" | plus: day1 | time_tag: format: 'day_month' }}</b>{% endcapture %}
{% capture enddate %}<b>{{ "now" | date: "%s" | plus: day2 | time_tag: format: 'day_month' }}</b>{% endcapture %}
{%- if blkSt.msg != blank -%}
<p class="shippingMsg mb{{blkSt.bm}}" {{ block.shopify_attributes }}>{{blkSt.msg | replace:'[startdate]', startdate | replace:'[enddate]',enddate }}</p>
{%- endif -%}
{% when 'shortdes' %}
<div class="product-single__description rte" {{ block.shopify_attributes }}>
{% if blkSt.type == 'shortd' %}
{{ product.description | strip_html | truncatewords: blkSt.lmt }}
{% elsif blkSt.type == 'fulld' %}
{{ product.description }}
{% else %}
{{ product.metafields.my_fields.short_des }}
{% endif %}
</div>
{% when 'pickup' %}
<div class="mb{{blkSt.bm}} product-single__store-availability-container" {{ block.shopify_attributes }} data-store-availability-container data-product-title="{{ product.title | escape }}" data-has-only-default-variant="{{ product.has_only_default_variant }}" data-base-url="{{ shop.url }}{{ routes.root_url }}" ></div>
<script type="text/javascript">
fetch('/variants/{{product.selected_or_first_available_variant.id}}/?section_id=pickup-availability').then(response => response.text()).then(text => {
const container = document.querySelector('[data-store-availability-container]');
const pickupAvailabilityHTML = new DOMParser().parseFromString(text, 'text/html').querySelector('.pickup-availability-container');
container.appendChild(pickupAvailabilityHTML);
pickupPopup();
}).catch(e => {
console.error(e);
});
function pickupPopup() {
$('.mfp-link').magnificPopup({
delegate: '.mfp',
removalDelay: 300,
callbacks: {
beforeOpen: function() {
$('.sticky_hdr').addClass('popup');
this.st.mainClass = this.st.el.attr('data-effect');
},
close:function(){ $('.sticky_hdr').removeClass('popup');
}
},
midClick: true
});
}
</script>
{% when 'img' %}
{%- if blkSt.pimg != blank -%}
<div class="trust_badge mb{{blkSt.bm}}" {{ block.shopify_attributes }}>
{% if blkSt.pimg_url != blank %}<a href="{{blkSt.pimg_url}}">{% endif %}
<img class="imgFl lazyload w_auto {% if blkSt.img_align %}m_auto{% endif %}" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="{{ blkSt.pimg | img_url: "master" }}" width="{{blkSt.pimg.width}}" height="{{blkSt.pimg.height}}" alt="{{settings.pimg.alt}}">
{% if blkSt.pimg_url != blank %}</a>{% endif %}
</div>
{%- endif -%}
{% when 'customc' %}
<div class="mb{{blkSt.bm}}" {{ block.shopify_attributes }}>{{blkSt.custom_liquid }}</div>
{% when 'ft' %}
<div class="fl f-wrap storeFeatures mb{{blkSt.bm}}" style="--cl:{{blkSt.cl}}" {{ block.shopify_attributes }}>
{%- if blkSt.ft1 != blank -%}<p>{{blkSt.ft1}}</p>{%- endif -%}
{%- if blkSt.ft2 != blank -%}<p>{{blkSt.ft2}}</p>{%- endif -%}
{%- if blkSt.ft3 != blank -%}<p>{{blkSt.ft3}}</p>{%- endif -%}
{%- if blkSt.ft4 != blank -%}<p>{{blkSt.ft4}}</p>{%- endif -%}
</div>
{% when 'type' %}
<div class="product-type mb{{blkSt.bm}}" {{ block.shopify_attributes }}><span class="lbl">{{ 'products.product.type' | t }} </span> {{ product.type }}</div>
{% when 'cl' %}
{%- assign found_a_collection = false -%}
{%- if collection and collection.all_products_count > 1 -%}
{%- unless exclusions contains collection.handle -%}{% assign found_a_collection = true %}{%- endunless -%}
{% endif %}
{% unless found_a_collection %}
{% for c in product.collections %}
{% unless exclusions contains c.handle or c.all_products_count < 2 %}
{% assign found_a_collection = true %}
{% assign collection = c %}
{% break %}
{% endunless %}
{% endfor %}
{% endunless %}
{% if found_a_collection %}
<div class="product-cat mb{{blkSt.bm}}" {{ block.shopify_attributes }}>
<span class="lbl">{{ 'products.product.collection' | t }} </span>
{%- for c in product.collections limit:10 -%}{%- unless exclusions contains c.handle or c.all_products_count < 2 -%}{{ c.title | link_to: c.url }}, {%- endunless -%}{%- endfor -%}
</div>
{% endif %}
{% when 'tags' %}
{% if product.tags.size > 0 %}
<div class="product-tags mb{{blkSt.bm}}" {{ block.shopify_attributes }}>
<span class="lbl">{{ 'products.product.tags' | t }} </span>
{%- for collection in product.collections limit:1 -%}
{%- for tag in product.tags limit:10 -%}<a href="{{ collection.url }}?constraint={{ tag | handle }}">{{ tag | remove:'type ' | remove:'Type ' }}</a>{% unless forloop.last %}, {% endunless %}{%- endfor -%}
{%- endfor -%}
</div>
{% endif %}
{%- when 'complementary' -%}
{% render 'complementary', product: product, sectionId: section.id, block: block.settings, isRtl:isRtl %}
{%- when 'more-color' -%}
{% render 'more-colors', product: product, sectionId: section.id, block: block.settings %}
{%- when '@app' -%}
{% render block %}
{% endcase %}
{% endfor %}
{%- endcapture -%}
{%- if settings.product_latyout != "style6" -%}
<div class="grid f-ais product-single">
<div class="gitem {{ product_image_width }} pr_photoes {{settings.thumbnail_pos}}">{{productImages | strip_newlines | remove: " "}}</div>
<div class="gitem {{ product_description_width }} product-single__meta">{{productDetails | strip_newlines | remove: " "}}</div>
</div>
{%- else -%}
<div class="product-single">
<div class="pr_photoes {{settings.thumbnail_pos}}">{{productImages | strip_newlines | remove: " "}}</div>
<div class="product-single__meta tc">{{productDetails | strip_newlines | remove: " "}}</div>
</div>
{%- endif -%}
</div>
<div class="hide">
{% for variant in product.variants %}<span id="pvr-{{ variant.id }}">{{variant.inventory_quantity}}</span>{% endfor %}
{% if sizechart %}
<div id="sizechart" class="mfpbox mfp-hide rte mfp-with-anim">
{%- assign prtype = product.type | handleize | append: "-size-chart" -%}
{%- assign prbrand = product.vendor | handleize | append: "-size-chart" -%}
{%- if product.metafields.my_fields.sizechart != blank -%}
{{ product.metafields.my_fields.sizechart }}
{%- elsif settings.sizechart_type == "type" and pages[prtype].content != empty -%}
{{ pages[prtype].content }}
{%- elsif settings.sizechart_type == "brand" and pages[prbrand].content != empty -%}
{{ pages[prbrand].content }}
{%- else -%}
{{ pages[settings.sizechart_page].content }}
{%- endif -%}
</div>
{% endif %}
</div>
{%- unless product.empty? -%}
<script type="application/json" id="ProductJson-{{ section.id }}">{{ product | json }}</script>
<script type="application/json" id="ModelJson-{{ section.id }}">{{ product.media | where: 'media_type', 'model' | json }}</script>
{%- endunless -%}
{%- include 'product-popup' -%}
{%- assign current_variant = product.selected_or_first_available_variant -%}
<script type="text/javascript">
theme.productStrings = {
prStyle: {{settings.product_latyout | json }}
}
window.addEventListener('DOMContentLoaded',function(){
{%- if settings.terms_checkbox -%}
var $buyinoneclick = $('.shopify-payment-button');
if($buyinoneclick.length){
$buyinoneclick.first().bind('DOMNodeInserted', function() {
setTimeout(function(){
var $shopifypaymentbutton = $('.shopify-payment-button').find(".shopify-payment-button__button");
if($shopifypaymentbutton.length){
$buyinoneclick.hide();
setTimeout(function(){
$(".shopify-payment-button__button").attr('disabled', true);
$buyinoneclick.fadeIn()
}, 300);
}
}, 0);
});
};
{%- if settings.terms_checkbox -%}
$('#prTearm').change(function(){
if(this.checked == true){
$('.shopify-payment-button__button').removeAttr("disabled");
} else {
$('.shopify-payment-button__button').attr("disabled", "disabled");
}
});
{%- endif -%}
{%- endif -%}
});
{% capture variantImg %}
{%- if product.variants.size > 1 -%}
var variantImages={},thumbnails,variant,variantImage,optionValue,productOptions = [];
{%- for variant in product.variants -%}
variant = {{ variant.featured_image.src | json }};
if(typeof variant !== 'undefined' && variant !== null){
variantImage = variant.split('?')[0].replace(/http(s)?:/,'');
variantImages[variantImage] = variantImages[variantImage] || {};
{%- for option in product.options -%}
{%- assign option_value = variant.options[forloop.index0] -%}
{%- assign option_key = 'option-' | append: forloop.index0 -%}
if(typeof variantImages[variantImage][{{ option_key | json }}] === 'undefined'){
variantImages[variantImage][{{ option_key | json }}] = {{ option_value | json }};
} else {
var oldValue = variantImages[variantImage][{{ option_key | json }}];
if(oldValue !== null && oldValue !== {{ option_value | json }}){variantImages[variantImage][{{ option_key | json }}] = null;}
}
{%- endfor -%}
}
productOptions.push(variant);
{%- endfor -%}
{% else %}
var variantImages = "";
{%- endif -%}
{% endcapture %}
{{variantImg | strip_newlines | remove: " " | remove: " " }}
{%- if product.variants.size > 0 -%}
var Shopify = Shopify || {};
Shopify.optionsMap = {};
Shopify.updateOptionsInSelector = function(selectorIndex){
switch (selectorIndex){
case 0:
var key = 'root',
selector = $('{%- if isSwatch -%}.pvOpt0 .swatchInput:checked{%- else -%}.single-option-selector:eq(0){%- endif -%}');
break;
case 1:
var key = $('{%- if isSwatch -%}.pvOpt0 .swatchInput:checked{%- else -%}.single-option-selector:eq(0){%- endif -%}').val(),
selector = $('{%- if isSwatch -%}.pvOpt1 .swatchInput:checked{%- else -%}.single-option-selector:eq(1){%- endif -%}');
break;
case 2:
var key = $('{%- if isSwatch -%}.pvOpt0 .swatchInput:checked{%- else -%}.single-option-selector:eq(0){%- endif -%}').val();
key += ' / ' + $('{%- if isSwatch -%}.pvOpt1 .swatchInput:checked{%- else -%}.single-option-selector:eq(1){%- endif -%}').val();
var selector = $('{%- if isSwatch -%}.pvOpt2 .swatchInput:checked{%- else -%}.single-option-selector:eq(2){%- endif -%}');
}
var initialValue = selector.val();
var availableOptions = Shopify.optionsMap[key];
{%- if isSwatch -%}
$('.pvOpt' + selectorIndex + ' .swatch-element').each(function(){
if($.inArray($(this).attr('data-value'), availableOptions) !== -1){
{% if hideSoldout %}$(this).removeClass('hide');{% else %}$(this).removeClass('soldout');{% endif %}
} else {
{% if hideSoldout %}$(this).addClass('hide');{% else %}$(this).addClass('soldout');{% endif %}
}
});
{%- else -%}
{% if hideSoldout %}
selector.empty();
for (var i=0; i<availableOptions.length; i++){
var option = availableOptions[i];
var newOption = $('<option></option>').val(option).html(option);
selector.append(newOption);
}
{% endif %}
{%- endif -%}
if($.inArray(initialValue, availableOptions) !== -1){
selector.val(initialValue);
}
selector.trigger('change');
};
Shopify.linkOptionSelectors = function(product){
for (var i=0; i<product.variants.length; i++){
var variant = product.variants[i];
if(variant.available){
Shopify.optionsMap['root'] = Shopify.optionsMap['root'] || [];
Shopify.optionsMap['root'].push(variant.option1);
Shopify.optionsMap['root'] = Shopify.uniq(Shopify.optionsMap['root']);
if(product.options.length > 1){
var key = variant.option1;
Shopify.optionsMap[key] = Shopify.optionsMap[key] || [];
Shopify.optionsMap[key].push(variant.option2);
Shopify.optionsMap[key] = Shopify.uniq(Shopify.optionsMap[key]);
}
if(product.options.length === 3){
var key = variant.option1 + ' / ' + variant.option2;
Shopify.optionsMap[key] = Shopify.optionsMap[key] || [];
Shopify.optionsMap[key].push(variant.option3);
Shopify.optionsMap[key] = Shopify.uniq(Shopify.optionsMap[key]);
}
}
}
Shopify.updateOptionsInSelector(0);
if(product.options.length > 1) Shopify.updateOptionsInSelector(1);
if(product.options.length === 3) Shopify.updateOptionsInSelector(2);
$("{%- if isSwatch -%}.pvOpt0 .swatchInput{%- else -%}.single-option-selector:eq(0){%- endif -%}").change(function(){
Shopify.updateOptionsInSelector(1);
if(product.options.length === 3) Shopify.updateOptionsInSelector(2);
return true;
});
$("{%- if isSwatch -%}.pvOpt1 .swatchInput{%- else -%}.single-option-selector:eq(1){%- endif -%}").change(function(){
if(product.options.length === 3) Shopify.updateOptionsInSelector(2);
return true;
});
};
{%- if product.available and product.options.size > 1 -%}
window.addEventListener('DOMContentLoaded',function(){
var $addToCartForm = $('form[action="/cart/add"]');
if(window.MutationObserver && $addToCartForm.length){
if(typeof observer === 'object' && typeof observer.disconnect === 'function'){
observer.disconnect();
}
var config = { childList: true, subtree: true };
var observer = new MutationObserver(function(){
observer.disconnect();
});
observer.observe($addToCartForm[0], config);
}
Shopify.linkOptionSelectors(JSON.parse(document.getElementById('ProductJson-{{ section.id }}').innerHTML));
});
{%- elsif product.options.size == 1 -%}
window.addEventListener('DOMContentLoaded',function(){
{%- for variant in product.variants -%}
{%- unless variant.available -%}
//$('.single-option-selector option').filter(function(){ return $(this).html() === {{ variant.title | json }}; }).remove();
$(".swatch-element[data-value='{{ variant.title | escape }}']").addClass('soldout');
{%- endunless -%}
{%- endfor -%}
$('.single-option-selector').trigger('change');
});
{%- endif -%}
{%- endif -%}
</script>
{%- capture schemaTags -%}
<script type="application/ld+json">
{
"@context": "http://schema.org/",
{{ product.metafields.alireviews.seo_rating_review_key_script }}
"@type": "Product",
"name": "{{ product.title | escape }}",
"url": "{{ shop.url }}{{ product.url }}",
{%- if product.featured_image -%}
{%- assign image_size = product.featured_image.width | append: 'x' -%}
"image": [
"https:{{ product.featured_image.src | img_url: image_size }}"
],
{%- endif -%}
"description": "{{ product.description | strip_html | escape }}",
{%- if current_variant.sku != blank -%}"sku": "{{current_variant.sku}}",{%- endif -%}
{%- if current_variant.barcode != blank -%}"mpn": "{{current_variant.barcode}}",{%- endif -%}
"brand": {
"@type": "Brand",
"name": "{{ product.vendor | escape }}"
},
"offers": [
{%- for variant in product.variants -%}
{
"@type" : "Offer",
{%- if variant.sku != blank -%}"sku": "{{ variant.sku }}",{%- endif -%}
{%- if variant.barcode != blank -%}"mpn": "{{ variant.barcode }}",{%- endif -%}
"availability" : "http://schema.org/{% if variant.available %}InStock{% else %}OutOfStock{% endif %}",
"price" : "{{ variant.price | divided_by: 100.00 }}",
"priceValidUntil": "{{ "now" | date: '%s' | plus: "86400" | date: "%Y-%m-%d %H:%M" }}",
"priceCurrency" : "{{ shop.currency }}",
"url" : "{{ shop.url }}{{ variant.url }}"
}{% unless forloop.last %},{% endunless %}
{%- endfor -%}
]
{% if settings.reviews == 'shopify' %}
{%- assign ratingCount = product.metafields.spr.reviews | split: '"reviewCount": "' | last | split: '"' |first | plus: 0 -%}
{%- assign ratingValue = product.metafields.spr.reviews | split: '"ratingValue": "' | last | split: '"' |first | plus: 0 -%}
{% if ratingCount > 0 and ratingValue > 0 %}
,"aggregateRating":{
"@type": "AggregateRating",
"ratingValue": "{{ratingValue}}",
"ratingCount": "{{ratingCount}}"
}
{%- endif -%}
{% elsif settings.reviews == 'loox' %}
,"aggregateRating":{
"@type": "AggregateRating",
"ratingValue": "{{ product.metafields.loox.avg_rating }}",
"reviewCount": "{{ product.metafields.loox.num_reviews }}"
}
{%- endif -%}
}
</script>
{%- endcapture -%}
{{schemaTags | strip_newlines | remove: " " | remove: " " }}
{% schema %}
{
"name": "Product Page",
"settings": [
{
"type":"checkbox",
"id":"section_width",
"label":"Fullwidth?",
"default": false
},
{
"type": "paragraph",
"content":"Manage some global product options from Theme Settings -> Product Page"
}
],
"blocks": [
{
"type": "hr",
"name": "Divider/Space",
"settings": [
{
"type":"color",
"id":"hrc",
"label":"Color",
"default":"#222"
},
{
"type": "range",
"id": "bm",
"min": 0,
"max": 50,
"step": 5,
"label": "Bottom Margin",
"unit": "px",
"default": 20,
"info":"You can also use this block to add more space between 2 blocks"
}
]
},
{
"type": "title",
"name": "Title",
"limit": 1,
"settings": [
{
"type": "color",
"id": "cl",
"label": "Color",
"default": "#000"
},
{
"type": "range",
"id": "fs",
"min": 10,
"max": 60,
"step": 1,
"label": "Font Size",
"unit": "px",
"default": 22
},
{
"type": "range",
"id": "fsm",
"min": 10,
"max": 60,
"step": 1,
"label": "Font Size(mobile)",
"unit": "px",
"default": 18
},
{
"type": "select",
"id": "ff",
"label": "Font Family",
"default": "ft2",
"options": [
{
"value": "ft1",
"label": "Font 1"
},
{
"value": "ft2",
"label": "Font 2"
},
{
"value": "ft3",
"label": "Font 3"
}
]
},
{
"type": "select",
"id": "fw",
"label": "Font Weight",
"default": "600",
"options": [
{
"value": "300",
"label": "Light"
},
{
"value": "400",
"label": "Regular"
},
{
"value": "500",
"label": "Medium"
},
{
"value": "600",
"label": "Semi Bold"
},
{
"value": "700",
"label": "Bold"
}
]
},
{
"type": "select",
"id": "transform",
"label": "Text Transform",
"default": "tt-c",
"options": [
{
"value": "none",
"label": "none"
},
{
"value": "tt-c",
"label": "Capitalize"
},
{
"value": "tt-l",
"label": "Lowercase"
},
{
"value": "tt-u",
"label": "Uppercase"
}
]
},
{
"type": "range",
"id": "bm",
"min": 0,
"max": 30,
"step": 5,
"label": "Bottom Margin",
"unit": "px",
"default": 20
}
]
},
{
"type": "price",
"name": "Price",
"limit": 1,
"settings": [
{
"type": "color",
"id": "pcl",
"label": "Price",
"default": "#000"
},
{
"type": "color",
"id": "pcls",
"label": "Sale Price",
"default": "#e95144"
},
{
"type": "range",
"id": "fs",
"min": 10,
"max": 60,
"step": 1,
"label": "Font Size",
"unit": "px",
"default": 25
},
{
"type": "range",
"id": "fsm",
"min": 10,
"max": 60,
"step": 1,
"label": "Font Size(mobile)",
"unit": "px",
"default": 16
},
{
"type": "select",
"id": "pfw",
"label": "Font Weight",
"default": "600",
"options": [
{
"value": "300",
"label": "Light"
},
{
"value": "400",
"label": "Regular"
},
{
"value": "500",
"label": "Medium"
},
{
"value": "600",
"label": "Semi Bold"
},
{
"value": "700",
"label": "Bold"
}
]
},
{
"type": "checkbox",
"id": "saved",
"label": "Show Discount Saved Badge?",
"default": true,
"info": "Display right after price if product have discount"
},
{
"type": "checkbox",
"id": "taxship",
"label": "Show tax and shipping information label?",
"default": false
},
{
"type": "range",
"id": "bm",
"min": 0,
"max": 30,
"step": 5,
"label": "Bottom Margin",
"unit": "px",
"default": 20
}
]
},
{
"type": "vendor",
"name": "Vendor/Brand",
"limit": 1,
"settings": [
{
"type": "checkbox",
"id": "img",
"label": "Show vendor logo?",
"info": "Need to create png logo image with same name as vendor name and upload at settings > files. Example: Coca Cola = coca-cola.png, Nike = nike.png"
},
{
"type": "range",
"id": "lwd",
"min": 50,
"max": 500,
"step": 5,
"label": "Logo width",
"unit": "px",
"default": 150
},
{
"type": "color",
"id": "cl",
"label": "Color",
"default": "#000"
},
{
"type": "range",
"id": "fs",
"min": 10,
"max": 60,
"step": 1,
"label": "Font Size",
"unit": "px",
"default": 13
},
{
"type": "range",
"id": "bm",
"min": 0,
"max": 30,
"step": 5,
"label": "Bottom Margin",
"unit": "px",
"default": 20
}
]
},
{
"type": "shortdes",
"name": "Product Description",
"limit": 1,
"settings": [
{
"type": "select",
"id": "type",
"label": "Show",
"default": "shortd",
"info":"[Description by metafield?](https://www.adornthemes.com/knowledge-base/vogal-product-metafields/)",
"options": [
{
"value": "shortd",
"label": "Short Description"
},
{
"value": "fulld",
"label": "Full Description"
},
{
"value": "meta",
"label": "Metafield Description"
}
]
},
{
"type": "range",
"id": "lmt",
"min": 5,
"max": 100,
"step": 1,
"label": "Short Description Limit",
"unit": "px",
"default": 40
},
{
"type": "range",
"id": "bm",
"min": 0,
"max": 30,
"step": 5,
"label": "Bottom Margin",
"unit": "px",
"default": 20
}
]
},
{
"type": "cta",
"name": "Product Form",
"limit": 1,
"settings":[
{
"type": "checkbox",
"id": "qty_sel",
"label": "Show Quantity Selector?",
"default": true
},
{
"type": "paragraph",
"content": "Manage swatch style from Theme Settings-> Product Page"
},
{
"type": "range",
"id": "bm",
"min": 0,
"max": 30,
"step": 5,
"label": "Bottom Margin",
"unit": "px",
"default": 20
}
]
},
{
"type": "countdown",
"name": "Countdown",
"limit": 1,
"settings": [
{
"type": "paragraph",
"content": "[How to set Countdown timer for each products?](https:\/\/www.adornthemes.com\/knowledge-base\/how-to-add-product-countdown-shopify\/)"
},
{
"type": "text",
"id": "lbl",
"label": "Label",
"default": "Hurry up! Sales End In"
},
{
"type": "color",
"id": "lcl",
"label": "Label",
"default": "#000"
},
{
"type": "color",
"id": "cl",
"label": "Text",
"default": "#fff"
},
{
"type": "color",
"id": "bg",
"label": "Background",
"default": "#16395b"
},
{
"type": "color",
"id": "bd",
"label": "Border",
"default": "#eee"
},
{
"type": "range",
"id": "bdr",
"min": 0,
"max": 50,
"step": 1,
"label": "Border Radius",
"unit": "px",
"default": 0
},
{
"type": "range",
"id": "bm",
"min": 0,
"max": 30,
"step": 5,
"label": "Bottom Margin",
"unit": "px",
"default": 20
}
]
},
{
"type": "img",
"name": "Image",
"settings": [
{
"type": "image_picker",
"id": "pimg",
"label": "Image"
},
{
"type": "url",
"id": "pimg_url",
"label": "Image Link"
},
{
"type": "checkbox",
"id": "img_align",
"label": "Image align center?",
"default": false
},
{
"type": "range",
"id": "bm",
"min": 0,
"max": 30,
"step": 5,
"label": "Bottom Margin",
"unit": "px",
"default": 20
}
]
},
{
"type": "text",
"name": "Text",
"settings": [
{
"type":"textarea",
"id":"text",
"label":"Text",
"default":"Text block",
"info":"[Find icons here](http:\/\/www.adornthemes.com\/optimal-icons\/)"
},
{
"type": "color",
"id": "cl",
"label": "Text Color",
"default": "#000"
},
{
"type": "checkbox",
"id": "addbg",
"label": "Add Background?",
"default": false
},
{
"type": "color",
"id": "bg",
"label": "Color",
"default": "#f5f5f5"
},
{
"type": "range",
"id": "fs",
"label": "Font Size",
"default": 13,
"min": 10,
"max": 20,
"step": 1,
"unit": "px"
},
{
"type": "range",
"id": "bm",
"min": 0,
"max": 30,
"step": 5,
"label": "Bottom Margin",
"unit": "px",
"default": 20
}
]
},
{
"type": "ras",
"name": "Rating/Availability/SKU",
"limit": 1,
"settings": [
{
"type":"paragraph",
"content":"Display Ratings from app. Choose app from General Settings -> Products Reviews"
},
{
"type": "checkbox",
"id": "availability",
"label": "Show Product Availability?",
"default": true
},
{
"type": "checkbox",
"id": "sku",
"label": "Show Product SKU?",
"default": true
},
{
"type": "range",
"id": "bm",
"min": 0,
"max": 30,
"step": 5,
"label": "Bottom Margin",
"unit": "px",
"default": 20
}
]
},
{
"type": "coltabs",
"name": "Collapsible Tab",
"settings": [
{
"type":"text",
"id":"title",
"label":"Heading",
"default":"Care Instructions"
},
{
"type": "select",
"id": "opt",
"label": "Content Source",
"default": "txt",
"options": [
{
"value": "txt",
"label": "Text as Below"
},
{
"value": "des",
"label": "Description"
},
{
"value": "size",
"label": "Size Chart"
}
]
},
{
"type": "richtext",
"id": "richtxt",
"label": "Tab text",
"default":"<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>"
},
{
"type":"checkbox",
"id":"open",
"label":"Open by default?",
"default": false
},
{
"type":"paragraph",
"content":"Manage color and fonts from theme settings > product page > Collapsible Tab"
},
{
"type": "range",
"id": "bm",
"min": 0,
"max": 30,
"step": 5,
"label": "Bottom Margin",
"unit": "px",
"default": 0
}
]
},
{
"type": "qty",
"name": "Quantity Message",
"limit": 1,
"settings": [
{
"type": "range",
"id": "maxqty",
"label": "Max Quantity",
"min": 1,
"max": 50,
"step": 1,
"default": 20,
"info": "Display stock left number when product stock is less than selected numbers"
},
{
"type": "color",
"id": "cl",
"label": "Text",
"default": "#fff"
},
{
"type": "color",
"id": "bg",
"label": "Background",
"default": "#ff656c"
},
{
"type": "range",
"id": "bm",
"min": 0,
"max": 30,
"step": 5,
"label": "Bottom Margin",
"unit": "px",
"default": 20
}
]
},
{
"type": "order",
"name": "Fake Order",
"limit": 1,
"settings": [
{
"type": "range",
"id": "orders",
"label": "Max Items",
"min": 1,
"max": 50,
"step": 1,
"default": 20,
"unit": "qty"
},
{
"type": "range",
"id": "otime",
"label": "Order time",
"min": 5,
"max": 48,
"step": 1,
"default": 24,
"unit": "h"
},
{
"type": "textarea",
"id": "omsg",
"label": "Orders Message",
"default": "<i class='at at-fire-l'></i> [orders] sold in last [hours] hours",
"info": "Use '[orders]' for items counts and '[hours]' for hours counts"
},
{
"type": "color",
"id": "cl",
"label": "Text Color",
"default": "#000"
},
{
"type": "range",
"id": "fs",
"label": "Font Size",
"default": 13,
"min": 10,
"max": 20,
"step": 1,
"unit": "px"
},
{
"type": "range",
"id": "bm",
"min": 0,
"max": 30,
"step": 5,
"label": "Bottom Margin",
"unit": "px",
"default": 15
}
]
},
{
"type": "visitor",
"name": "Fake Visitor",
"limit": 1,
"settings": [
{
"type": "range",
"id": "visitors",
"label": "Max Visitors",
"min": 10,
"max": 500,
"step": 10,
"default": 50
},
{
"type": "range",
"id": "visitors_time",
"label": "Interval time",
"min": 1,
"max": 20,
"step": 1,
"unit": "sec",
"default": 5
},
{
"type": "textarea",
"id": "visitors_msg",
"label": "Visitors Message",
"default": "<i class='at at-eye-r'></i> [visitors] People looking for this product",
"info": "Use '[visitors]' to show user counts"
},
{
"type": "color",
"id": "cl",
"label": "Text Color",
"default": "#000"
},
{
"type": "range",
"id": "fs",
"label": "Font Size",
"default": 13,
"min": 10,
"max": 20,
"step": 1,
"unit": "px"
},
{
"type": "range",
"id": "bm",
"min": 0,
"max": 30,
"step": 5,
"label": "Bottom Margin",
"unit": "px",
"default": 15
}
]
},
{
"type": "shiptime",
"name": "Shipping Estimate",
"limit": 1,
"settings": [
{
"type": "paragraph",
"content": "Display same time for all products, To set different for each product [follow this article](https:\/\/www.adornthemes.com\/knowledge-base\/show-shipping-estimated-time-for-specific-product-2\/)"
},
{
"type": "text",
"id": "estimate",
"label": "Shipping Estimated Days",
"default": "4\/10",
"info": "Add value in days like 4\/10 and customer will show date after 4 to 10 days from today date."
},
{
"type": "textarea",
"id": "msg",
"label": "Shipping Estimate Message",
"default": "<i class='at at-clock-r'></i> Estimated delivery between [startdate] - [enddate].",
"info": "Use '[startdate]' and [enddate] for date to show with message"
},
{
"type": "range",
"id": "bm",
"min": 0,
"max": 30,
"step": 5,
"label": "Bottom Margin",
"unit": "px",
"default": 15
}
]
},
{
"type": "freeship",
"name": "Free Shipping",
"limit": 1,
"settings": [
{
"type": "paragraph",
"content": "Manage free shipping message from Theme Settings -> General Settings -> Free Shipping Message"
},
{
"type": "range",
"id": "bm",
"min": 0,
"max": 30,
"step": 5,
"label": "Bottom Margin",
"unit": "px",
"default": 15
}
]
},
{
"type": "pickup",
"name": "Pickup Availability",
"limit": 1,
"settings":[
{
"type": "range",
"id": "bm",
"min": 0,
"max": 30,
"step": 5,
"label": "Bottom Margin",
"unit": "px",
"default": 15
}
]
},
{
"type": "customc",
"name": "HTML/Liquid",
"limit": 2,
"settings":[
{
"type": "liquid",
"id": "custom_liquid",
"label": "HTML",
"info": "Add app snippets or other Liquid code to create advanced customizations.",
"default":"<h4>Custom code block</h4><p>Use this advance section to add custom HTML, app scripts, or liquid.</p>"
},
{
"type": "range",
"id": "bm",
"min": 0,
"max": 30,
"step": 5,
"label": "Bottom Margin",
"unit": "px",
"default": 15
}
]
},
{
"type": "@app"
},
{
"type": "complementary",
"name": "Complementary products",
"limit": 1,
"settings": [
{
"type": "paragraph",
"content": "To select complementary products, add the Search & Discovery app. [Learn more](https://help.shopify.com/manual/online-store/search-and-discovery/product-recommendations)"
},
{
"type": "text",
"id": "title",
"label": "Heading",
"default": "Complete the look"
},
{
"type": "color",
"id": "cl",
"label": "Color",
"default": "#000"
},
{
"type": "range",
"id": "fs",
"min": 10,
"max": 60,
"step": 1,
"label": "Font Size",
"unit": "px",
"default": 22
},
{
"type": "range",
"id": "fsm",
"min": 10,
"max": 60,
"step": 1,
"label": "Font Size(mobile)",
"unit": "px",
"default": 16
},
{
"type": "select",
"id": "fw",
"label": "Font Weight",
"default": "600",
"options": [
{
"value": "300",
"label": "Light"
},
{
"value": "400",
"label": "Regular"
},
{
"value": "500",
"label": "Medium"
},
{
"value": "600",
"label": "Semi Bold"
},
{
"value": "700",
"label": "Bold"
}
]
},
{
"type": "range",
"id": "limit",
"min": 1,
"max": 10,
"step": 1,
"default": 10,
"label": "Maximum products to show"
},
{
"type": "paragraph",
"content": "Products Per Row ==="
},
{
"type": "range",
"id": "grid",
"label": "Desktop",
"default": 4,
"min": 2,
"max": 5,
"step": 1
},
{
"type": "range",
"id": "gridtb",
"label": "Tablet",
"default": 3,
"min": 1,
"max": 5,
"step": 1
},
{
"type": "range",
"id": "gridmb",
"label": "Mobile",
"default": 2,
"min": 1,
"max": 5,
"step": 1
},
{
"type": "range",
"id": "bm",
"min": 0,
"max": 30,
"step": 5,
"label": "Bottom Margin",
"unit": "px",
"default": 15
}
]
},
{
"type": "more-color",
"name": "More Colors",
"limit": 1,
"settings": [
{
"type": "paragraph",
"content": "To select color products, add the metafields. [Learn more](https://www.adornthemes.com/knowledge-base/more-color-products/)"
},
{
"type": "text",
"id": "title",
"label": "Heading",
"default": "More colors"
},
{
"type": "color",
"id": "cl",
"label": "Color",
"default": "#000"
},
{
"type": "range",
"id": "fs",
"min": 10,
"max": 60,
"step": 1,
"label": "Font Size",
"unit": "px",
"default":16
},
{
"type": "range",
"id": "fsm",
"min": 10,
"max": 60,
"step": 1,
"label": "Font Size(mobile)",
"unit": "px",
"default": 16
},
{
"type": "select",
"id": "fw",
"label": "Font Weight",
"default": "600",
"options": [
{
"value": "300",
"label": "Light"
},
{
"value": "400",
"label": "Regular"
},
{
"value": "500",
"label": "Medium"
},
{
"value": "600",
"label": "Semi Bold"
},
{
"value": "700",
"label": "Bold"
}
]
},
{
"type": "range",
"id": "wd",
"min": 30,
"max": 150,
"step": 5,
"label": "Image Width",
"unit": "px",
"default": 100
},
{
"type": "color",
"id": "bd",
"label": "Active Border",
"default": "#000"
},
{
"type": "range",
"id": "bm",
"min": 0,
"max": 30,
"step": 5,
"label": "Bottom Margin",
"unit": "px",
"default": 15
}
]
},
{
"type": "ft",
"name": "Feature Points",
"limit": 1,
"settings":[
{
"type": "range",
"id": "bm",
"min": 0,
"max": 30,
"step": 5,
"label": "Bottom Margin",
"unit": "px",
"default": 15
},
{
"type": "textarea",
"id": "ft1",
"label": "Feature Text 1",
"default": "<i class='at at-truck-l'><\/i> Free Shipping & Return"
},
{
"type": "textarea",
"id": "ft2",
"label": "Feature Text 2",
"default": "<i class='at at-sync-ar'><\/i> Money back guarantee"
},
{
"type": "textarea",
"id": "ft3",
"label": "Feature Text 3",
"default": "<i class='at at-question-l'><\/i> Fast & reliable support"
},
{
"type": "textarea",
"id": "ft4",
"label": "Feature Text 4",
"default": "<i class='at at-credit-card-l'><\/i> Secure payment"
},
{
"type": "color",
"id": "cl",
"label": "Text",
"default": "#111"
}
]
},
{
"type": "type",
"name": "Product Type",
"limit": 1,
"settings":[
{
"type": "range",
"id": "bm",
"min": 0,
"max": 30,
"step": 5,
"label": "Bottom Margin",
"unit": "px",
"default": 15
}
]
},
{
"type": "cl",
"name": "Product Collection",
"limit": 1,
"settings":[
{
"type": "range",
"id": "bm",
"min": 0,
"max": 30,
"step": 5,
"label": "Bottom Margin",
"unit": "px",
"default": 15
}
]
},
{
"type": "tags",
"name": "Product Tags",
"limit": 1,
"settings":[
{
"type": "range",
"id": "bm",
"min": 0,
"max": 30,
"step": 5,
"label": "Bottom Margin",
"unit": "px",
"default": 15
}
]
}
]
}
{% endschema %}
Let me know if you need something else to help me...
Starting a B2B store is a big undertaking that requires careful planning and execution. W...
By JasonH Sep 23, 2024By investing 30 minutes of your time, you can unlock the potential for increased sales,...
By Jacqui Sep 11, 2024We appreciate the diverse ways you participate in and engage with the Shopify Communi...
By JasonH Sep 9, 2024