FROM CACHE - en_header
Promotion image

Re: prestige product page full width

Solved

How can I make my product page full width on Kilts Boutique?

banggear
Shopify Partner
8 0 0
‎03-28-2022 02:55 PM

HI,

I want the product page full width. I try some suggestions it's not work 

Its store URL is kiltsboutique.com. I am waiting expert help Thank you

Capture.JPG

982 Views
0 Likes
Report
Accepted Solution (1)
In response to banggear

LitCommerce
Astronaut
2860 684 749
‎03-29-2022 01:04 PM

This is an accepted solution.

Hi @banggear,

Please change code:

{%- capture section_settings -%}
{
"enableHistoryState": true,
"templateSuffix": {{ product.template_suffix | json }},
"showInventoryQuantity": {{ section.settings.show_inventory_quantity | json }},
"showSku": {{ section.settings.show_sku | json }},
"stackProductImages": {{ section.settings.stack_images | json }},
"showThumbnails": {{ section.settings.show_thumbnails | json }},
"enableVideoLooping": {{ section.settings.enable_video_looping | json }},
"inventoryQuantityThreshold": {{ section.settings.inventory_quantity_threshold }},
"showPriceInButton": {{ section.settings.show_price_in_button | json }},
"enableImageZoom": {{ section.settings.enable_image_zoom | json }},
"showPaymentButton": {{ section.settings.show_payment_button | json }},
"useAjaxCart": {% if settings.cart_type == 'drawer' %}true{% else %}false{% endif %}
}
{%- endcapture -%}

<section class="Product Product--{{ section.settings.image_size }}" data-section-id="{{ section.id }}" data-section-type="product" data-section-settings='{{ section_settings }}'>
  <div class="Product__Wrapper">
    {%- capture action_list_items -%}
    {%- if section.settings.enable_image_zoom -%}
    <div class="Product__ActionItem hidden-lap-and-up">
      <button class="RoundButton RoundButton--small RoundButton--flat" data-action="open-product-zoom">{% render 'icon' with 'plus' %}</button>
    </div>
    {%- endif -%}

    {%- if section.settings.show_share_buttons -%}
    <div class="Product__ActionItem hidden-lap-and-up">
      <button class="RoundButton RoundButton--small RoundButton--flat" data-action="toggle-social-share" data-animate-bottom aria-expanded="false">
        <span class="RoundButton__PrimaryState">{% render 'icon' with 'share' %}</span>
        <span class="RoundButton__SecondaryState">{% render 'icon' with 'close' %}</span>
      </button>

      {%- assign share_url = shop.url | append: product.url -%}
      {%- assign twitter_text = product.title -%}
      {%- assign pinterest_description = product.description | strip_html | truncatewords: 15 | url_param_escape -%}
      {%- assign pinterest_image = product.featured_media | img_url: '1024x' | prepend: 'https:' -%}

      <div class="Product__ShareList" aria-hidden="true">
        <a class="Product__ShareItem" href="https://www.facebook.com/sharer.php?u={{ share_url }}" target="_blank" rel="noopener">{%- render 'icon' with 'facebook' -%} Facebook</a>
        <a class="Product__ShareItem" href="https://pinterest.com/pin/create/button/?url={{ share_url }}{% if pinterest_image != blank %}&media={{ pinterest_image }}{% endif %}&description={{ pinterest_description }}" target="_blank" rel="noopener">{%- render 'icon' with 'pinterest' -%} Pinterest</a>
        <a class="Product__ShareItem" href="https://twitter.com/share?{% if twitter_text != blank %}text={{twitter_text}}&{% endif %}url={{ share_url }}" target="_blank" rel="noopener">{%- render 'icon' with 'twitter' -%} Twitter</a>
      </div>
    </div>
    {%- endif -%}
    {%- endcapture -%}

    {%- comment -%}
    --------------------------------------------------------------------------------------------------------------------
    PRODUCT GALLERY
    --------------------------------------------------------------------------------------------------------------------
    {%- endcomment -%}

    {%- assign initial_media_id = product.featured_media.id -%}
    {%- assign initial_media_index = 0 -%}
    {%- assign media_count = 0 -%}

    {%- capture slideshow_media -%}
    {%- for media in product.media -%}
    {%- if media.alt == 'featured' or media.alt == 'featured mobile' -%}
    {%- continue -%}
    {%- endif -%}

    {%- if product.selected_variant and media.id == product.selected_variant.featured_media.id -%}
    {%- assign initial_media_index = media_count -%}
    {%- assign initial_media_id = media.id -%}
    {%- endif -%}

    {%- capture supported_sizes -%}{%- render 'image-size', sizes: '200,400,600,700,800,900,1000,1200,1400,1600', image: media -%}{%- endcapture -%}

    {%- case media.media_type -%}
    {%- when 'image' -%}
    <div id="Media{{ media.id }}" tabindex="0" class="Product__SlideItem Product__SlideItem--image Carousel__Cell {% if initial_media_id == media.id %}is-selected{% endif %}" data-media-type="image" data-media-id="{{ media.id }}" data-media-position="{{ media.position }}" data-image-media-position="{% increment image_position %}">
      <div class="AspectRatio AspectRatio--withFallback" style="padding-bottom: {{ 100.0 | divided_by: media.aspect_ratio }}%; --aspect-ratio: {{ media.aspect_ratio }};">
        {% assign image_url = media | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}

        <img class="Image--lazyLoad Image--fadeIn" data-src="{{ image_url }}" data-widths="[{{ supported_sizes }}]" data-sizes="auto" data-expand="-100" alt="{{ media.alt | escape }}" data-max-width="{{ media.width }}" data-max-height="{{ media.height }}" data-original-src="{{ media | img_url: 'master' }}">
        <span class="Image__Loader"></span>

        <noscript>
          <img src="{{ media | img_url: '800x' }}" alt="{{ media.alt | escape }}">
        </noscript>
      </div>
    </div>

    {%- when 'external_video' -%}
    <div id="Media{{ media.id }}" tabindex="-1" class="Product__SlideItem Product__SlideItem--video Carousel__Cell {% if initial_media_id == media.id %}is-selected{% endif %}" data-media-type="external_video" data-media-id="{{ media.id }}" data-media-position="{{ media.position }}" data-video-host="{{ media.host | escape }}" data-video-id="{{ media.external_id | escape }}">
      <div class="Image--lazyLoad Image--fadeIn" data-expand="-100">
        <div class="VideoWrapper">
          {{- media | external_video_tag: image_size: '1024x' -}}
        </div>
      </div>
    </div>

    {%- when 'video' -%}
    <div id="Media{{ media.id }}" tabindex="-1" class="Product__SlideItem Product__SlideItem--video Carousel__Cell {% if initial_media_id == media.id %}is-selected{% endif %}" data-media-type="video" data-media-id="{{ media.id }}" data-media-position="{{ media.position }}">
      <div class="Image--lazyLoad Image--fadeIn" data-expand="-100">
        <div class="VideoWrapper VideoWrapper--native" style="padding-bottom: {{ 100.0 | divided_by: media.aspect_ratio }}%">
          {{- media | video_tag: image_size: '1024x', controls: true -}}
        </div>
      </div>
    </div>

    {%- when 'model' -%}
    <div id="Media{{ media.id }}" tabindex="-1" class="Product__SlideItem Product__SlideItem--model Carousel__Cell {% if initial_media_id == media.id %}is-selected{% endif %}" data-media-type="model" data-media-id="{{ media.id }}" data-media-position="{{ media.position }}">
      <div class="Image--lazyLoad Image--fadeIn" data-expand="-100">
        <div class="ModelWrapper">
          {{- media | model_viewer_tag: image_size: '1024x', reveal: 'interaction', toggleable: true -}}
        </div>
      </div>
    </div>
    {%- endcase -%}

    {%- assign media_count = media_count | plus: 1 -%}
    {%- endfor -%}
    {%- endcapture -%}

    {%- if product.media.size > 0 -%}
    <div class="Product__Gallery {% if section.settings.stack_images %}Product__Gallery--stack{% endif %} {% if section.settings.show_thumbnails and media_count > 1 %}Product__Gallery--withThumbnails{% else %}Product__Gallery--withDots{% endif %}">
      <span id="ProductGallery" class="Anchor"></span>

      {%- if action_list_items != blank -%}
      <div class="Product__ActionList hidden-lap-and-up {% if product.media[initial_media_index].media_type != 'image' %}is-hidden{% endif %}">
        {{ action_list_items }}
      </div>
      {%- endif -%}

      {%- capture slideshow_nav -%}
      {%- if media_count > 1 -%}
      {%- if section.settings.show_thumbnails -%}
      <div class="Product__SlideshowNav Product__SlideshowNav--thumbnails">
        <div class="Product__SlideshowNavScroller">
          {%- for media in product.media -%}
          {%- if media.alt == 'featured' or media.alt == 'featured mobile' -%}
          {%- continue -%}
          {%- endif -%}

          {%- capture nav_item_badge -%}
          {%- case media.media_type -%}
          {%- when 'model' -%}
          <span class="Product__SlideshowNavBadge">{% render 'icon', icon: 'media-model-badge' %}</span>

          {%- when 'video' or 'external_video' -%}
          <span class="Product__SlideshowNavBadge">{% render 'icon', icon: 'media-video-badge' %}</span>
          {%- endcase -%}
          {%- endcapture -%}

          {%- if section.settings.stack_images -%}
          <a href="#Media{{ media.id }}" data-offset="-25" data-focus-on-click data-media-id="{{ media.id }}" class="Product__SlideshowNavImage AspectRatio {% if forloop.first %}is-selected{% endif %}" style="--aspect-ratio: {{ media.preview_image.aspect_ratio }}">
            <img src="{{ media | img_url: '160x' }}" alt="{{ media.alt | escape }}">
            {{- nav_item_badge -}}
          </a>
          {%- else -%}
          <a href="{{ media | img_url: '1024x' }}" data-media-id="{{ media.id }}" class="Product__SlideshowNavImage AspectRatio {% if forloop.first %}is-selected{% endif %}" style="--aspect-ratio: {{ media.preview_image.aspect_ratio }}">
            <img src="{{ media | img_url: '160x' }}" alt="{{ media.alt | escape }}">
            {{- nav_item_badge -}}
          </a>
          {%- endif -%}
          {%- endfor -%}
        </div>
      </div>
      {%- endif -%}

      {%- if section.settings.stack_images -%}
      <div class="Product__SlideshowNav Product__SlideshowNav--dots">
        <div class="Product__SlideshowNavScroller">
          {%- for media in product.media -%}
          {%- if media.alt == 'featured' or media.alt == 'featured mobile' -%}
          {%- continue -%}
          {%- endif -%}

          <a href="#Media{{ media.id }}" data-offset="-25" data-focus-on-click class="Product__SlideshowNavDot {% if forloop.first %}is-selected{% endif %}"></a>
          {%- endfor -%}
        </div>
      </div>
      {%- endif -%}
      {%- endif -%}
      {%- endcapture -%}

      {%- if section.settings.stack_images -%}
      {{- slideshow_nav -}}
      {%- endif -%}

      {%- capture flickity_options -%}
      {
      "prevNextButtons": false,
      "pageDots": false,
      "adaptiveHeight": true,
      "watchCSS": true,
      "dragThreshold": 8,
      "initialIndex": {{ initial_media_index }},
      "arrowShape": {"x0": 20, "x1": 60, "y1": 40, "x2": 60, "y2": 35, "x3": 25}
      }
      {%- endcapture -%}

      <div class="Product__Slideshow {% if section.settings.enable_image_zoom %}Product__Slideshow--zoomable{% endif %} Carousel" data-flickity-config='{{ flickity_options }}'>
        {{ slideshow_media }}
      </div>

      {%- comment -%}Add the "view in your space" button, which allows to show the product in customer's environment (if the device supports it){%- endcomment -%}
      {%- assign first_3d_model = product.media | where: 'media_type', 'model' | first -%}

      {%- if first_3d_model -%}
      <button class="Product__ViewInSpace Button Button--full" data-shopify-xr data-shopify-model3d-id="{{ first_3d_model.id }}" data-shopify-model3d-default-id="{{ first_3d_model.id }}" data-shopify-title="{{ product.title | escape }}" data-shopify-xr-hidden>
        {%- render 'icon', icon: 'media-view-in-space' -%} {{- 'product.general.view_in_space' | t -}}
      </button>
      {%- endif -%}

      {%- if media_count > 1 -%}
      {%- comment -%}
      IMPLEMENTATION NOTE: The reason we create ourselves our own UI instead of relying of the built-in feature of Flickity is that,
      since the media API, Shopify requires to add arrows next to the dot. Unfortunately this layout is not
      achievable easily using Flickity options only, so we have to run our own
      {%- endcomment -%}

      <div class="Product__SlideshowMobileNav {% if section.settings.stack_images or section.settings.show_thumbnails %}hidden-desk{% endif %}">
        <button class="Product__SlideshowNavArrow Product__SlideshowNavArrow--previous" type="button" data-direction="previous" aria-label="{{ 'general.accessibility.previous' | t }}">
          {% render 'icon' with 'media-arrow-left' %}
        </button>

        <div class="flickity-page-dots">
          {%- for i in (1..media_count) -%}
          <button type="button" class="dot {% if forloop.index0 == initial_media_index %}is-selected{% endif %}" data-index="{{ forloop.index0 }}"></button>
          {%- endfor -%}
        </div>

        <button class="Product__SlideshowNavArrow Product__SlideshowNavArrow--next" type="button" data-direction="next" aria-label="{{ 'general.accessibility.next' | t }}">
          {% render 'icon' with 'media-arrow-right' %}
        </button>
      </div>
      {%- endif -%}

      {%- unless section.settings.stack_images -%}
      {{- slideshow_nav -}}
      {%- endunless -%}
    </div>
    {%- endif -%}

    {%- capture product_aside -%}
    {%- comment -%}
    --------------------------------------------------------------------------------------------------------------------
    PRODUCT TABS
    --------------------------------------------------------------------------------------------------------------------
    {%- endcomment -%}

    {%- render 'product-tabs' -%}

    {%- comment -%}
    --------------------------------------------------------------------------------------------------------------------
    PRODUCT WEAR IT WITH

    We allow merchants to add a tag that looks like __with:product-handle to feature an additional product
    --------------------------------------------------------------------------------------------------------------------
    {%- endcomment -%}

    {%- for tag in product.tags -%}
    {%- if tag contains '__with' -%}
    {%- assign product_handle = tag | split: '__with:' | last -%}
    {%- assign associated_product = all_products[product_handle] -%}

    {%- if associated_product != empty -%}
    <div class="Section Section--spacingNormal">
      <header class="SectionHeader SectionHeader--center">
        <h3 class="SectionHeader__Heading Heading u-h4">{{ 'product.buy_it_with.title' | t }}</h3>
      </header>

      {% render 'product-item', product: associated_product, use_horizontal: true, show_labels: false, show_product_info: true, show_vendor: false, show_price_on_hover: false %}
    </div>

    {%- break -%}
    {%- endif -%}
    {%- endif -%}
    {%- endfor -%}
    {%- endcapture -%}

    <div class="Product__InfoWrapper">
      <div class="Product__Info {% if media_count == 0 %}Product__Info--noGallery{% endif %}">
        <div class="Container">
          {%- render 'product-meta', product: product, show_description: true -%}

          {%- if product.template_suffix != 'coming-soon' -%}
          {%- render 'product-form', product: product -%}
          {%- endif -%}

          {%- if section.settings.description_below_add_to_cart -%}
          <div class="ProductMeta__Description">
            {%- if section.settings.show_share_buttons -%}
            <div class="ProductMeta__ShareButtons hidden-pocket">
              <span class="ProductMeta__ShareTitle Heading Text--subdued u-h7">{{ 'product.form.share' | t }}</span>

              {%- assign share_url = shop.url | append: product.url -%}
              {%- assign twitter_text = product.title -%}
              {%- assign pinterest_description = product.description | strip_html | truncatewords: 15 | url_param_escape -%}
              {%- assign pinterest_image = product.featured_image | img_url: 'large' | prepend: 'https:' -%}

              <div class="ProductMeta__ShareList Text--subdued">
                <a class="ProductMeta__ShareItem" href="https://www.facebook.com/sharer.php?u={{ share_url }}" target="_blank" rel="noopener" aria-label="Facebook">{%- render 'icon' with 'facebook' -%}</a>
                <a class="ProductMeta__ShareItem" href="https://twitter.com/share?{% if twitter_text != blank %}text={{twitter_text}}&{% endif %}url={{ share_url }}" target="_blank" rel="noopener" aria-label="Twitter">{%- render 'icon' with 'twitter' -%}</a>
                <a class="ProductMeta__ShareItem" href="https://pinterest.com/pin/create/button/?url={{ share_url }}{% if pinterest_image != blank %}&media={{ pinterest_image }}{% endif %}&description={{ pinterest_description }}" target="_blank" rel="noopener" aria-label="Pinterest">{%- render 'icon' with 'pinterest' -%}</a>
              </div>
            </div>
            {%- endif -%}
          </div>
          {%- endif -%}

          {%- if section.settings.stack_images and product_aside != blank and media_count > 0 -%}
          <div class="Product__QuickNav hidden-pocket">
            <div class="Product__QuickNavWrapper">
              <a href="#ProductAside" class="Heading Link Link--secondary u-h7">{{ 'product.form.view_info' | t }} {% render 'icon' with 'select-arrow-right' %}</a>
              <a href="#ProductGallery" class="Heading Link Link--secondary u-h7">{{ 'product.form.view_images' | t }} {% render 'icon' with 'select-arrow-right' %}</a>
            </div>
          </div>
          {%- endif -%}
        </div>
      </div>
    </div>

    {%- if product_aside != blank -%}
    <div class="Product__Aside">
      <span id="ProductAside" class="Anchor"></span>
      {{- product_aside -}}
    </div>
    {%- endif -%}
  </div>
</section>
<div style="clear:both"></div>
<div class="Product">
  <div class="ProductMeta__Description">
    <div class="Rte">
      {%- comment -%}
      We have figured out that some merchants were copy-pasting huge chunk of code into the product description,
      which can make the theme crashes if it contains some special attributes used by the theme. We therefore make sure to process this
      {%- endcomment -%}

      {{ product.description | replace: 'data-section-type', 'data-section-type-placeholder' }}
    </div>
  </div>
</div>
{% comment %}Start automatically added Judge.me widget{% endcomment %}
{% render 'judgeme_widgets', widget_type: 'judgeme_review_widget', concierge_install: true, product: product %}
{% comment %}End automatically added Judge.me widget{% endcomment %}


{%- comment -%}
--------------------------------------------------------------------------------------------------------------------
FEATURED IMAGE

We allow merchants to use one image as a "featured image" by adding the alt tag "featured"
--------------------------------------------------------------------------------------------------------------------
{%- endcomment -%}

{%- for media in product.media -%}
{%- if media.alt == 'featured' -%}
{%- assign desk_featured_media = media.preview_image -%}
{%- endif -%}

{%- if media.alt == 'featured mobile' -%}
{%- assign mobile_featured_media = media.preview_image -%}
{%- endif -%}
{%- endfor -%}

{%- if desk_featured_media or mobile_featured_media -%}
{%- assign mobile_featured_media = mobile_featured_media | default: desk_featured_media -%}
{%- assign desk_featured_media = desk_featured_media | default: mobile_featured_media -%}

<div class="Product__FeatureImageWrapper" style="background: url({{ desk_featured_media | img_url: '1x1', format: 'jpg' }})">
  <div class="Product__FeatureImage Product__FeatureImage--{{ section.settings.featured_image_size }} Image--lazyLoad Image--zoomOut hide-no-js" data-expand="-25" data-bgset="{{ mobile_featured_media | img_url: 'x850' }} [(max-width: 640px)] | {{ desk_featured_media | img_url: '1500x' }}"></div>

  <noscript>
    <div class="Product__FeatureImage Product__FeatureImage--{{ section.settings.featured_image_size }}" style="background-image: url({{ desk_featured_media | img_url: '1500x' }})"></div>
  </noscript>
</div>

<style>
  #shopify-section-{{ section.id }} + .shopify-section--bordered {
    border-top: 0;
  }
</style>
{%- else -%}
<style>
  /* This is a bit hacky but allows to circumvent the complete independency of section (as next section included in the page does not know anything about this page) */

  @media screen and (max-width: 640px) {
    #shopify-section-{{ section.id }} + .shopify-section--bordered {
      border-top: 0;
    }

    #shopify-section-{{ section.id }} + .shopify-section--bordered > .Section {
      padding-top: 0;
    }
  }
</style>
{%- endif -%}

{%- comment -%}
--------------------------------------------------------------------------------------------------------------------
PHOTO SWIPE

This is the root container for the zoom functionality. Must not be removed, as order element is important.
--------------------------------------------------------------------------------------------------------------------
{%- endcomment -%}

{%- if section.settings.enable_image_zoom -%}
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
  <!-- Background of PhotoSwipe -->
  <div class="pswp__bg"></div>

  <!-- Slides wrapper with overflow:hidden. -->
  <div class="pswp__scroll-wrap">

    <!-- Container that holds slides. Do not remove as content is dynamically added -->
    <div class="pswp__container">
      <div class="pswp__item"></div>
      <div class="pswp__item"></div>
      <div class="pswp__item"></div>
    </div>

    <!-- Main UI bar -->
    <div class="pswp__ui pswp__ui--hidden">
      <button class="pswp__button pswp__button--prev RoundButton" data-animate-left title="{{ 'product.slideshow.previous' | t }}">{% render 'icon' with 'arrow-left' %}</button>
      <button class="pswp__button pswp__button--close RoundButton RoundButton--large" data-animate-bottom title="{{ 'product.slideshow.close' | t }}">{% render 'icon' with 'close' %}</button>
      <button class="pswp__button pswp__button--next RoundButton" data-animate-right title="{{ 'product.slideshow.next' | t }}">{% render 'icon' with 'arrow-right' %}</button>
    </div>
  </div>
</div>
{%- endif -%}

{% schema %}
{
"name": "Product page",
"class": "shopify-section--bordered",
"settings": [
{
"type": "checkbox",
"id": "show_share_buttons",
"label": "Show social sharing buttons",
"default": true
},
{
"type": "checkbox",
"id": "show_vendor",
"label": "Show vendor",
"default": true
},
{
"type": "checkbox",
"id": "show_sku",
"label": "Show SKU",
"default": false
},
{
"type": "checkbox",
"id": "show_taxes_included",
"label": "Show price taxes notice",
"default": false
},
{
"type": "checkbox",
"id": "description_below_add_to_cart",
"label": "Description below add to cart",
"default": false
},
{
"type": "select",
"id": "selector_mode",
"label": "Selector type",
"options": [
{
"value": "block",
"label": "Block"
},
{
"value": "dropdown",
"label": "Dropdown"
}
],
"default": "dropdown"
},
{
"type": "checkbox",
"id": "show_color_swatch",
"label": "Show color swatch",
"default": false,
"info": "Some colors appear white? [Learn more](http://support.maestrooo.com/article/80-product-uploading-custom-color-for-color-swatch)."
},
{
"type": "checkbox",
"id": "show_color_carousel",
"label": "Show color carousel",
"info": "A pop-up selector with variant images for choosing colors. Only enables when color swatch is disabled.",
"default": false
},
{
"type": "checkbox",
"id": "show_quantity_selector",
"label": "Show quantity selector",
"default": true
},
{
"type": "checkbox",
"id": "show_inventory_quantity",
"label": "Show inventory quantity",
"info": "Make sure that your inventory is tracked. [Learn more](https://help.shopify.com/manual/products/inventory#set-up-inventory-tracking).",
"default": false
},
{
"type": "range",
"id": "inventory_quantity_threshold",
"label": "Inventory quantity threshold",
"info": "Only show inventory quantity if below threshold. Choose 0 to always show.",
"min": 0,
"max": 50,
"step": 1,
"default": 0
},
{
"type": "checkbox",
"id": "show_price_in_button",
"label": "Show price in add to cart button",
"default": false
},
{
"type": "checkbox",
"id": "show_payment_button",
"label": "Show dynamic checkout button",
"info": "Each customer will see their preferred payment method from those available on your store, such as PayPal or Apple Pay. [Learn more](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
"default": true
},
{
"type": "checkbox",
"id": "show_pickup_availability",
"label": "Show local pickup availability",
"info": "Show customers where they can pick up the product. [Learn more](https://help.shopify.com/en/manual/shipping/setting-up-and-managing-your-shipping/local-methods/loca...)",
"default": false
},
{
"type": "header",
"content": "Media"
},
{
"type": "paragraph",
"content": "Learn more about [media types](https://help.shopify.com/en/manual/products/product-media)"
},
{
"type": "select",
"id": "image_size",
"label": "Size",
"options": [
{
"value": "small",
"label": "Small"
},
{
"value": "medium",
"label": "Medium"
},
{
"value": "large",
"label": "Large"
},
{
"value": "fill",
"label": "Fill screen"
}
],
"default": "large"
},
{
"type": "checkbox",
"id": "stack_images",
"label": "Stack images on desktop",
"default": true
},
{
"type": "checkbox",
"id": "show_thumbnails",
"label": "Show thumbnails on desktop",
"default": true
},
{
"type": "checkbox",
"id": "enable_image_zoom",
"label": "Enable zoom",
"default": true
},
{
"type": "checkbox",
"id": "enable_video_looping",
"label": "Enable video looping",
"default": false
},
{
"type": "header",
"content": "Tabs"
},
{
"type": "page",
"id": "tab_page_1_handle",
"label": "First page"
},
{
"type": "page",
"id": "tab_page_2_handle",
"label": "Second page"
},
{
"type": "paragraph",
"content": "The theme also allows you to add specific tabs for a given product only. [Learn more about this feature](http://support.maestrooo.com/article/83-product-adding-different-tabs-per-product)."
},
{
"type": "header",
"content": "Reviews"
},
{
"type": "paragraph",
"content": "You need to install [Shopify's free Product Reviews](https://apps.shopify.com/product-reviews) app before enabling this option."
},
{
"type": "checkbox",
"id": "reviews_enabled",
"label": "Enable",
"default": false
},
{
"type": "header",
"content": "Featured image"
},
{
"type": "paragraph",
"content": "You can highlight an image after product tabs by adding the ALT tag \"featured\" to a given image. [Learn more](http://support.maestrooo.com/article/152-product-highlight-a-featured-image)."
},
{
"type": "select",
"id": "featured_image_size",
"label": "Section size",
"options": [
{
"value": "small",
"label": "Small"
},
{
"value": "normal",
"label": "Normal"
},
{
"value": "large",
"label": "Large"
}
],
"default": "large"
}
]
}
{% endschema %}

Hope it helps!

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!

View solution in original post

942 Views
1 Like
Report
Replies 7 (7)

AvadaCommerce
Shopify Partner
3879 839 983
‎03-29-2022 12:07 AM

Hi @banggear 

 

Can you share code product.json or product.liquid?

 

Thanks you

banned
961 Views
0 Likes
Report
In response to AvadaCommerce

banggear
Shopify Partner
8 0 0
‎03-29-2022 06:00 AM

{%- capture section_settings -%}
{
"enableHistoryState": true,
"templateSuffix": {{ product.template_suffix | json }},
"showInventoryQuantity": {{ section.settings.show_inventory_quantity | json }},
"showSku": {{ section.settings.show_sku | json }},
"stackProductImages": {{ section.settings.stack_images | json }},
"showThumbnails": {{ section.settings.show_thumbnails | json }},
"enableVideoLooping": {{ section.settings.enable_video_looping | json }},
"inventoryQuantityThreshold": {{ section.settings.inventory_quantity_threshold }},
"showPriceInButton": {{ section.settings.show_price_in_button | json }},
"enableImageZoom": {{ section.settings.enable_image_zoom | json }},
"showPaymentButton": {{ section.settings.show_payment_button | json }},
"useAjaxCart": {% if settings.cart_type == 'drawer' %}true{% else %}false{% endif %}
}
{%- endcapture -%}

<section class="Product Product--{{ section.settings.image_size }}" data-section-id="{{ section.id }}" data-section-type="product" data-section-settings='{{ section_settings }}'>
<div class="Product__Wrapper">
{%- capture action_list_items -%}
{%- if section.settings.enable_image_zoom -%}
<div class="Product__ActionItem hidden-lap-and-up">
<button class="RoundButton RoundButton--small RoundButton--flat" data-action="open-product-zoom">{% render 'icon' with 'plus' %}</button>
</div>
{%- endif -%}

{%- if section.settings.show_share_buttons -%}
<div class="Product__ActionItem hidden-lap-and-up">
<button class="RoundButton RoundButton--small RoundButton--flat" data-action="toggle-social-share" data-animate-bottom aria-expanded="false">
<span class="RoundButton__PrimaryState">{% render 'icon' with 'share' %}</span>
<span class="RoundButton__SecondaryState">{% render 'icon' with 'close' %}</span>
</button>

{%- assign share_url = shop.url | append: product.url -%}
{%- assign twitter_text = product.title -%}
{%- assign pinterest_description = product.description | strip_html | truncatewords: 15 | url_param_escape -%}
{%- assign pinterest_image = product.featured_media | img_url: '1024x' | prepend: 'https:' -%}

<div class="Product__ShareList" aria-hidden="true">
<a class="Product__ShareItem" href="https://www.facebook.com/sharer.php?u={{ share_url }}" target="_blank" rel="noopener">{%- render 'icon' with 'facebook' -%} Facebook</a>
<a class="Product__ShareItem" href="https://pinterest.com/pin/create/button/?url={{ share_url }}{% if pinterest_image != blank %}&media={{ pinterest_image }}{% endif %}&description={{ pinterest_description }}" target="_blank" rel="noopener">{%- render 'icon' with 'pinterest' -%} Pinterest</a>
<a class="Product__ShareItem" href="https://twitter.com/share?{% if twitter_text != blank %}text={{twitter_text}}&{% endif %}url={{ share_url }}" target="_blank" rel="noopener">{%- render 'icon' with 'twitter' -%} Twitter</a>
</div>
</div>
{%- endif -%}
{%- endcapture -%}

{%- comment -%}
--------------------------------------------------------------------------------------------------------------------
PRODUCT GALLERY
--------------------------------------------------------------------------------------------------------------------
{%- endcomment -%}

{%- assign initial_media_id = product.featured_media.id -%}
{%- assign initial_media_index = 0 -%}
{%- assign media_count = 0 -%}

{%- capture slideshow_media -%}
{%- for media in product.media -%}
{%- if media.alt == 'featured' or media.alt == 'featured mobile' -%}
{%- continue -%}
{%- endif -%}

{%- if product.selected_variant and media.id == product.selected_variant.featured_media.id -%}
{%- assign initial_media_index = media_count -%}
{%- assign initial_media_id = media.id -%}
{%- endif -%}

{%- capture supported_sizes -%}{%- render 'image-size', sizes: '200,400,600,700,800,900,1000,1200,1400,1600', image: media -%}{%- endcapture -%}

{%- case media.media_type -%}
{%- when 'image' -%}
<div id="Media{{ media.id }}" tabindex="0" class="Product__SlideItem Product__SlideItem--image Carousel__Cell {% if initial_media_id == media.id %}is-selected{% endif %}" data-media-type="image" data-media-id="{{ media.id }}" data-media-position="{{ media.position }}" data-image-media-position="{% increment image_position %}">
<div class="AspectRatio AspectRatio--withFallback" style="padding-bottom: {{ 100.0 | divided_by: media.aspect_ratio }}%; --aspect-ratio: {{ media.aspect_ratio }};">
{% assign image_url = media | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}

<img class="Image--lazyLoad Image--fadeIn" data-src="{{ image_url }}" data-widths="[{{ supported_sizes }}]" data-sizes="auto" data-expand="-100" alt="{{ media.alt | escape }}" data-max-width="{{ media.width }}" data-max-height="{{ media.height }}" data-original-src="{{ media | img_url: 'master' }}">
<span class="Image__Loader"></span>

<noscript>
<img src="{{ media | img_url: '800x' }}" alt="{{ media.alt | escape }}">
</noscript>
</div>
</div>

{%- when 'external_video' -%}
<div id="Media{{ media.id }}" tabindex="-1" class="Product__SlideItem Product__SlideItem--video Carousel__Cell {% if initial_media_id == media.id %}is-selected{% endif %}" data-media-type="external_video" data-media-id="{{ media.id }}" data-media-position="{{ media.position }}" data-video-host="{{ media.host | escape }}" data-video-id="{{ media.external_id | escape }}">
<div class="Image--lazyLoad Image--fadeIn" data-expand="-100">
<div class="VideoWrapper">
{{- media | external_video_tag: image_size: '1024x' -}}
</div>
</div>
</div>

{%- when 'video' -%}
<div id="Media{{ media.id }}" tabindex="-1" class="Product__SlideItem Product__SlideItem--video Carousel__Cell {% if initial_media_id == media.id %}is-selected{% endif %}" data-media-type="video" data-media-id="{{ media.id }}" data-media-position="{{ media.position }}">
<div class="Image--lazyLoad Image--fadeIn" data-expand="-100">
<div class="VideoWrapper VideoWrapper--native" style="padding-bottom: {{ 100.0 | divided_by: media.aspect_ratio }}%">
{{- media | video_tag: image_size: '1024x', controls: true -}}
</div>
</div>
</div>

{%- when 'model' -%}
<div id="Media{{ media.id }}" tabindex="-1" class="Product__SlideItem Product__SlideItem--model Carousel__Cell {% if initial_media_id == media.id %}is-selected{% endif %}" data-media-type="model" data-media-id="{{ media.id }}" data-media-position="{{ media.position }}">
<div class="Image--lazyLoad Image--fadeIn" data-expand="-100">
<div class="ModelWrapper">
{{- media | model_viewer_tag: image_size: '1024x', reveal: 'interaction', toggleable: true -}}
</div>
</div>
</div>
{%- endcase -%}

{%- assign media_count = media_count | plus: 1 -%}
{%- endfor -%}
{%- endcapture -%}

{%- if product.media.size > 0 -%}
<div class="Product__Gallery {% if section.settings.stack_images %}Product__Gallery--stack{% endif %} {% if section.settings.show_thumbnails and media_count > 1 %}Product__Gallery--withThumbnails{% else %}Product__Gallery--withDots{% endif %}">
<span id="ProductGallery" class="Anchor"></span>

{%- if action_list_items != blank -%}
<div class="Product__ActionList hidden-lap-and-up {% if product.media[initial_media_index].media_type != 'image' %}is-hidden{% endif %}">
{{ action_list_items }}
</div>
{%- endif -%}

{%- capture slideshow_nav -%}
{%- if media_count > 1 -%}
{%- if section.settings.show_thumbnails -%}
<div class="Product__SlideshowNav Product__SlideshowNav--thumbnails">
<div class="Product__SlideshowNavScroller">
{%- for media in product.media -%}
{%- if media.alt == 'featured' or media.alt == 'featured mobile' -%}
{%- continue -%}
{%- endif -%}

{%- capture nav_item_badge -%}
{%- case media.media_type -%}
{%- when 'model' -%}
<span class="Product__SlideshowNavBadge">{% render 'icon', icon: 'media-model-badge' %}</span>

{%- when 'video' or 'external_video' -%}
<span class="Product__SlideshowNavBadge">{% render 'icon', icon: 'media-video-badge' %}</span>
{%- endcase -%}
{%- endcapture -%}

{%- if section.settings.stack_images -%}
<a href="#Media{{ media.id }}" data-offset="-25" data-focus-on-click data-media-id="{{ media.id }}" class="Product__SlideshowNavImage AspectRatio {% if forloop.first %}is-selected{% endif %}" style="--aspect-ratio: {{ media.preview_image.aspect_ratio }}">
<img src="{{ media | img_url: '160x' }}" alt="{{ media.alt | escape }}">
{{- nav_item_badge -}}
</a>
{%- else -%}
<a href="{{ media | img_url: '1024x' }}" data-media-id="{{ media.id }}" class="Product__SlideshowNavImage AspectRatio {% if forloop.first %}is-selected{% endif %}" style="--aspect-ratio: {{ media.preview_image.aspect_ratio }}">
<img src="{{ media | img_url: '160x' }}" alt="{{ media.alt | escape }}">
{{- nav_item_badge -}}
</a>
{%- endif -%}
{%- endfor -%}
</div>
</div>
{%- endif -%}

{%- if section.settings.stack_images -%}
<div class="Product__SlideshowNav Product__SlideshowNav--dots">
<div class="Product__SlideshowNavScroller">
{%- for media in product.media -%}
{%- if media.alt == 'featured' or media.alt == 'featured mobile' -%}
{%- continue -%}
{%- endif -%}

<a href="#Media{{ media.id }}" data-offset="-25" data-focus-on-click class="Product__SlideshowNavDot {% if forloop.first %}is-selected{% endif %}"></a>
{%- endfor -%}
</div>
</div>
{%- endif -%}
{%- endif -%}
{%- endcapture -%}

{%- if section.settings.stack_images -%}
{{- slideshow_nav -}}
{%- endif -%}

{%- capture flickity_options -%}
{
"prevNextButtons": false,
"pageDots": false,
"adaptiveHeight": true,
"watchCSS": true,
"dragThreshold": 8,
"initialIndex": {{ initial_media_index }},
"arrowShape": {"x0": 20, "x1": 60, "y1": 40, "x2": 60, "y2": 35, "x3": 25}
}
{%- endcapture -%}

<div class="Product__Slideshow {% if section.settings.enable_image_zoom %}Product__Slideshow--zoomable{% endif %} Carousel" data-flickity-config='{{ flickity_options }}'>
{{ slideshow_media }}
</div>

{%- comment -%}Add the "view in your space" button, which allows to show the product in customer's environment (if the device supports it){%- endcomment -%}
{%- assign first_3d_model = product.media | where: 'media_type', 'model' | first -%}

{%- if first_3d_model -%}
<button class="Product__ViewInSpace Button Button--full" data-shopify-xr data-shopify-model3d-id="{{ first_3d_model.id }}" data-shopify-model3d-default-id="{{ first_3d_model.id }}" data-shopify-title="{{ product.title | escape }}" data-shopify-xr-hidden>
{%- render 'icon', icon: 'media-view-in-space' -%} {{- 'product.general.view_in_space' | t -}}
</button>
{%- endif -%}

{%- if media_count > 1 -%}
{%- comment -%}
IMPLEMENTATION NOTE: The reason we create ourselves our own UI instead of relying of the built-in feature of Flickity is that,
since the media API, Shopify requires to add arrows next to the dot. Unfortunately this layout is not
achievable easily using Flickity options only, so we have to run our own
{%- endcomment -%}

<div class="Product__SlideshowMobileNav {% if section.settings.stack_images or section.settings.show_thumbnails %}hidden-desk{% endif %}">
<button class="Product__SlideshowNavArrow Product__SlideshowNavArrow--previous" type="button" data-direction="previous" aria-label="{{ 'general.accessibility.previous' | t }}">
{% render 'icon' with 'media-arrow-left' %}
</button>

<div class="flickity-page-dots">
{%- for i in (1..media_count) -%}
<button type="button" class="dot {% if forloop.index0 == initial_media_index %}is-selected{% endif %}" data-index="{{ forloop.index0 }}"></button>
{%- endfor -%}
</div>

<button class="Product__SlideshowNavArrow Product__SlideshowNavArrow--next" type="button" data-direction="next" aria-label="{{ 'general.accessibility.next' | t }}">
{% render 'icon' with 'media-arrow-right' %}
</button>
</div>
{%- endif -%}

{%- unless section.settings.stack_images -%}
{{- slideshow_nav -}}
{%- endunless -%}
</div>
{%- endif -%}

{%- capture product_aside -%}
{%- comment -%}
--------------------------------------------------------------------------------------------------------------------
PRODUCT TABS
--------------------------------------------------------------------------------------------------------------------
{%- endcomment -%}

{%- render 'product-tabs' -%}

{%- comment -%}
--------------------------------------------------------------------------------------------------------------------
PRODUCT WEAR IT WITH

We allow merchants to add a tag that looks like __with:product-handle to feature an additional product
--------------------------------------------------------------------------------------------------------------------
{%- endcomment -%}

{%- for tag in product.tags -%}
{%- if tag contains '__with' -%}
{%- assign product_handle = tag | split: '__with:' | last -%}
{%- assign associated_product = all_products[product_handle] -%}

{%- if associated_product != empty -%}
<div class="Section Section--spacingNormal">
<header class="SectionHeader SectionHeader--center">
<h3 class="SectionHeader__Heading Heading u-h4">{{ 'product.buy_it_with.title' | t }}</h3>
</header>

{% render 'product-item', product: associated_product, use_horizontal: true, show_labels: false, show_product_info: true, show_vendor: false, show_price_on_hover: false %}
</div>

{%- break -%}
{%- endif -%}
{%- endif -%}
{%- endfor -%}
{%- endcapture -%}

<div class="Product__InfoWrapper">
<div class="Product__Info {% if media_count == 0 %}Product__Info--noGallery{% endif %}">
<div class="Container">
{%- render 'product-meta', product: product, show_description: true -%}

{%- if product.template_suffix != 'coming-soon' -%}
{%- render 'product-form', product: product -%}
{%- endif -%}

{%- if section.settings.description_below_add_to_cart -%}
<div class="ProductMeta__Description">
<div class="Rte">
{%- comment -%}
We have figured out that some merchants were copy-pasting huge chunk of code into the product description,
which can make the theme crashes if it contains some special attributes used by the theme. We therefore make sure to process this
{%- endcomment -%}

{{ product.description | replace: 'data-section-type', 'data-section-type-placeholder' }}
</div>

{%- if section.settings.show_share_buttons -%}
<div class="ProductMeta__ShareButtons hidden-pocket">
<span class="ProductMeta__ShareTitle Heading Text--subdued u-h7">{{ 'product.form.share' | t }}</span>

{%- assign share_url = shop.url | append: product.url -%}
{%- assign twitter_text = product.title -%}
{%- assign pinterest_description = product.description | strip_html | truncatewords: 15 | url_param_escape -%}
{%- assign pinterest_image = product.featured_image | img_url: 'large' | prepend: 'https:' -%}

<div class="ProductMeta__ShareList Text--subdued">
<a class="ProductMeta__ShareItem" href="https://www.facebook.com/sharer.php?u={{ share_url }}" target="_blank" rel="noopener" aria-label="Facebook">{%- render 'icon' with 'facebook' -%}</a>
<a class="ProductMeta__ShareItem" href="https://twitter.com/share?{% if twitter_text != blank %}text={{twitter_text}}&{% endif %}url={{ share_url }}" target="_blank" rel="noopener" aria-label="Twitter">{%- render 'icon' with 'twitter' -%}</a>
<a class="ProductMeta__ShareItem" href="https://pinterest.com/pin/create/button/?url={{ share_url }}{% if pinterest_image != blank %}&media={{ pinterest_image }}{% endif %}&description={{ pinterest_description }}" target="_blank" rel="noopener" aria-label="Pinterest">{%- render 'icon' with 'pinterest' -%}</a>
</div>
</div>
{%- endif -%}
</div>
{%- endif -%}

{%- if section.settings.stack_images and product_aside != blank and media_count > 0 -%}
<div class="Product__QuickNav hidden-pocket">
<div class="Product__QuickNavWrapper">
<a href="#ProductAside" class="Heading Link Link--secondary u-h7">{{ 'product.form.view_info' | t }} {% render 'icon' with 'select-arrow-right' %}</a>
<a href="#ProductGallery" class="Heading Link Link--secondary u-h7">{{ 'product.form.view_images' | t }} {% render 'icon' with 'select-arrow-right' %}</a>
</div>
</div>
{%- endif -%}
</div>
</div>
</div>

{%- if product_aside != blank -%}
<div class="Product__Aside">
<span id="ProductAside" class="Anchor"></span>
{{- product_aside -}}
</div>
{%- endif -%}
</div>
</section>
{% comment %}Start automatically added Judge.me widget{% endcomment %}
{% render 'judgeme_widgets', widget_type: 'judgeme_review_widget', concierge_install: true, product: product %}
{% comment %}End automatically added Judge.me widget{% endcomment %}


{%- comment -%}
--------------------------------------------------------------------------------------------------------------------
FEATURED IMAGE

We allow merchants to use one image as a "featured image" by adding the alt tag "featured"
--------------------------------------------------------------------------------------------------------------------
{%- endcomment -%}

{%- for media in product.media -%}
{%- if media.alt == 'featured' -%}
{%- assign desk_featured_media = media.preview_image -%}
{%- endif -%}

{%- if media.alt == 'featured mobile' -%}
{%- assign mobile_featured_media = media.preview_image -%}
{%- endif -%}
{%- endfor -%}

{%- if desk_featured_media or mobile_featured_media -%}
{%- assign mobile_featured_media = mobile_featured_media | default: desk_featured_media -%}
{%- assign desk_featured_media = desk_featured_media | default: mobile_featured_media -%}

<div class="Product__FeatureImageWrapper" style="background: url({{ desk_featured_media | img_url: '1x1', format: 'jpg' }})">
<div class="Product__FeatureImage Product__FeatureImage--{{ section.settings.featured_image_size }} Image--lazyLoad Image--zoomOut hide-no-js" data-expand="-25" data-bgset="{{ mobile_featured_media | img_url: 'x850' }} [(max-width: 640px)] | {{ desk_featured_media | img_url: '1500x' }}"></div>

<noscript>
<div class="Product__FeatureImage Product__FeatureImage--{{ section.settings.featured_image_size }}" style="background-image: url({{ desk_featured_media | img_url: '1500x' }})"></div>
</noscript>
</div>

<style>
#shopify-section-{{ section.id }} + .shopify-section--bordered {
border-top: 0;
}
</style>
{%- else -%}
<style>
/* This is a bit hacky but allows to circumvent the complete independency of section (as next section included in the page does not know anything about this page) */

@media screen and (max-width: 640px) {
#shopify-section-{{ section.id }} + .shopify-section--bordered {
border-top: 0;
}

#shopify-section-{{ section.id }} + .shopify-section--bordered > .Section {
padding-top: 0;
}
}
</style>
{%- endif -%}

{%- comment -%}
--------------------------------------------------------------------------------------------------------------------
PHOTO SWIPE

This is the root container for the zoom functionality. Must not be removed, as order element is important.
--------------------------------------------------------------------------------------------------------------------
{%- endcomment -%}

{%- if section.settings.enable_image_zoom -%}
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
<!-- Background of PhotoSwipe -->
<div class="pswp__bg"></div>

<!-- Slides wrapper with overflow:hidden. -->
<div class="pswp__scroll-wrap">

<!-- Container that holds slides. Do not remove as content is dynamically added -->
<div class="pswp__container">
<div class="pswp__item"></div>
<div class="pswp__item"></div>
<div class="pswp__item"></div>
</div>

<!-- Main UI bar -->
<div class="pswp__ui pswp__ui--hidden">
<button class="pswp__button pswp__button--prev RoundButton" data-animate-left title="{{ 'product.slideshow.previous' | t }}">{% render 'icon' with 'arrow-left' %}</button>
<button class="pswp__button pswp__button--close RoundButton RoundButton--large" data-animate-bottom title="{{ 'product.slideshow.close' | t }}">{% render 'icon' with 'close' %}</button>
<button class="pswp__button pswp__button--next RoundButton" data-animate-right title="{{ 'product.slideshow.next' | t }}">{% render 'icon' with 'arrow-right' %}</button>
</div>
</div>
</div>
{%- endif -%}

{% schema %}
{
"name": "Product page",
"class": "shopify-section--bordered",
"settings": [
{
"type": "checkbox",
"id": "show_share_buttons",
"label": "Show social sharing buttons",
"default": true
},
{
"type": "checkbox",
"id": "show_vendor",
"label": "Show vendor",
"default": true
},
{
"type": "checkbox",
"id": "show_sku",
"label": "Show SKU",
"default": false
},
{
"type": "checkbox",
"id": "show_taxes_included",
"label": "Show price taxes notice",
"default": false
},
{
"type": "checkbox",
"id": "description_below_add_to_cart",
"label": "Description below add to cart",
"default": false
},
{
"type": "select",
"id": "selector_mode",
"label": "Selector type",
"options": [
{
"value": "block",
"label": "Block"
},
{
"value": "dropdown",
"label": "Dropdown"
}
],
"default": "dropdown"
},
{
"type": "checkbox",
"id": "show_color_swatch",
"label": "Show color swatch",
"default": false,
"info": "Some colors appear white? [Learn more](http://support.maestrooo.com/article/80-product-uploading-custom-color-for-color-swatch)."
},
{
"type": "checkbox",
"id": "show_color_carousel",
"label": "Show color carousel",
"info": "A pop-up selector with variant images for choosing colors. Only enables when color swatch is disabled.",
"default": false
},
{
"type": "checkbox",
"id": "show_quantity_selector",
"label": "Show quantity selector",
"default": true
},
{
"type": "checkbox",
"id": "show_inventory_quantity",
"label": "Show inventory quantity",
"info": "Make sure that your inventory is tracked. [Learn more](https://help.shopify.com/manual/products/inventory#set-up-inventory-tracking).",
"default": false
},
{
"type": "range",
"id": "inventory_quantity_threshold",
"label": "Inventory quantity threshold",
"info": "Only show inventory quantity if below threshold. Choose 0 to always show.",
"min": 0,
"max": 50,
"step": 1,
"default": 0
},
{
"type": "checkbox",
"id": "show_price_in_button",
"label": "Show price in add to cart button",
"default": false
},
{
"type": "checkbox",
"id": "show_payment_button",
"label": "Show dynamic checkout button",
"info": "Each customer will see their preferred payment method from those available on your store, such as PayPal or Apple Pay. [Learn more](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
"default": true
},
{
"type": "checkbox",
"id": "show_pickup_availability",
"label": "Show local pickup availability",
"info": "Show customers where they can pick up the product. [Learn more](https://help.shopify.com/en/manual/shipping/setting-up-and-managing-your-shipping/local-methods/loca...)",
"default": false
},
{
"type": "header",
"content": "Media"
},
{
"type": "paragraph",
"content": "Learn more about [media types](https://help.shopify.com/en/manual/products/product-media)"
},
{
"type": "select",
"id": "image_size",
"label": "Size",
"options": [
{
"value": "small",
"label": "Small"
},
{
"value": "medium",
"label": "Medium"
},
{
"value": "large",
"label": "Large"
},
{
"value": "fill",
"label": "Fill screen"
}
],
"default": "large"
},
{
"type": "checkbox",
"id": "stack_images",
"label": "Stack images on desktop",
"default": true
},
{
"type": "checkbox",
"id": "show_thumbnails",
"label": "Show thumbnails on desktop",
"default": true
},
{
"type": "checkbox",
"id": "enable_image_zoom",
"label": "Enable zoom",
"default": true
},
{
"type": "checkbox",
"id": "enable_video_looping",
"label": "Enable video looping",
"default": false
},
{
"type": "header",
"content": "Tabs"
},
{
"type": "page",
"id": "tab_page_1_handle",
"label": "First page"
},
{
"type": "page",
"id": "tab_page_2_handle",
"label": "Second page"
},
{
"type": "paragraph",
"content": "The theme also allows you to add specific tabs for a given product only. [Learn more about this feature](http://support.maestrooo.com/article/83-product-adding-different-tabs-per-product)."
},
{
"type": "header",
"content": "Reviews"
},
{
"type": "paragraph",
"content": "You need to install [Shopify's free Product Reviews](https://apps.shopify.com/product-reviews) app before enabling this option."
},
{
"type": "checkbox",
"id": "reviews_enabled",
"label": "Enable",
"default": false
},
{
"type": "header",
"content": "Featured image"
},
{
"type": "paragraph",
"content": "You can highlight an image after product tabs by adding the ALT tag \"featured\" to a given image. [Learn more](http://support.maestrooo.com/article/152-product-highlight-a-featured-image)."
},
{
"type": "select",
"id": "featured_image_size",
"label": "Section size",
"options": [
{
"value": "small",
"label": "Small"
},
{
"value": "normal",
"label": "Normal"
},
{
"value": "large",
"label": "Large"
}
],
"default": "large"
}
]
}
{% endschema %}

950 Views
0 Likes
Report
In response to AvadaCommerce

banggear
Shopify Partner
8 0 0
‎03-29-2022 06:49 AM

Hi, I have attached product-template.liquid file Thank you

951 Views
0 Likes
Report
In response to banggear

LitCommerce
Astronaut
2860 684 749
‎03-29-2022 01:04 PM

This is an accepted solution.

Hi @banggear,

Please change code:

{%- capture section_settings -%}
{
"enableHistoryState": true,
"templateSuffix": {{ product.template_suffix | json }},
"showInventoryQuantity": {{ section.settings.show_inventory_quantity | json }},
"showSku": {{ section.settings.show_sku | json }},
"stackProductImages": {{ section.settings.stack_images | json }},
"showThumbnails": {{ section.settings.show_thumbnails | json }},
"enableVideoLooping": {{ section.settings.enable_video_looping | json }},
"inventoryQuantityThreshold": {{ section.settings.inventory_quantity_threshold }},
"showPriceInButton": {{ section.settings.show_price_in_button | json }},
"enableImageZoom": {{ section.settings.enable_image_zoom | json }},
"showPaymentButton": {{ section.settings.show_payment_button | json }},
"useAjaxCart": {% if settings.cart_type == 'drawer' %}true{% else %}false{% endif %}
}
{%- endcapture -%}

<section class="Product Product--{{ section.settings.image_size }}" data-section-id="{{ section.id }}" data-section-type="product" data-section-settings='{{ section_settings }}'>
  <div class="Product__Wrapper">
    {%- capture action_list_items -%}
    {%- if section.settings.enable_image_zoom -%}
    <div class="Product__ActionItem hidden-lap-and-up">
      <button class="RoundButton RoundButton--small RoundButton--flat" data-action="open-product-zoom">{% render 'icon' with 'plus' %}</button>
    </div>
    {%- endif -%}

    {%- if section.settings.show_share_buttons -%}
    <div class="Product__ActionItem hidden-lap-and-up">
      <button class="RoundButton RoundButton--small RoundButton--flat" data-action="toggle-social-share" data-animate-bottom aria-expanded="false">
        <span class="RoundButton__PrimaryState">{% render 'icon' with 'share' %}</span>
        <span class="RoundButton__SecondaryState">{% render 'icon' with 'close' %}</span>
      </button>

      {%- assign share_url = shop.url | append: product.url -%}
      {%- assign twitter_text = product.title -%}
      {%- assign pinterest_description = product.description | strip_html | truncatewords: 15 | url_param_escape -%}
      {%- assign pinterest_image = product.featured_media | img_url: '1024x' | prepend: 'https:' -%}

      <div class="Product__ShareList" aria-hidden="true">
        <a class="Product__ShareItem" href="https://www.facebook.com/sharer.php?u={{ share_url }}" target="_blank" rel="noopener">{%- render 'icon' with 'facebook' -%} Facebook</a>
        <a class="Product__ShareItem" href="https://pinterest.com/pin/create/button/?url={{ share_url }}{% if pinterest_image != blank %}&media={{ pinterest_image }}{% endif %}&description={{ pinterest_description }}" target="_blank" rel="noopener">{%- render 'icon' with 'pinterest' -%} Pinterest</a>
        <a class="Product__ShareItem" href="https://twitter.com/share?{% if twitter_text != blank %}text={{twitter_text}}&{% endif %}url={{ share_url }}" target="_blank" rel="noopener">{%- render 'icon' with 'twitter' -%} Twitter</a>
      </div>
    </div>
    {%- endif -%}
    {%- endcapture -%}

    {%- comment -%}
    --------------------------------------------------------------------------------------------------------------------
    PRODUCT GALLERY
    --------------------------------------------------------------------------------------------------------------------
    {%- endcomment -%}

    {%- assign initial_media_id = product.featured_media.id -%}
    {%- assign initial_media_index = 0 -%}
    {%- assign media_count = 0 -%}

    {%- capture slideshow_media -%}
    {%- for media in product.media -%}
    {%- if media.alt == 'featured' or media.alt == 'featured mobile' -%}
    {%- continue -%}
    {%- endif -%}

    {%- if product.selected_variant and media.id == product.selected_variant.featured_media.id -%}
    {%- assign initial_media_index = media_count -%}
    {%- assign initial_media_id = media.id -%}
    {%- endif -%}

    {%- capture supported_sizes -%}{%- render 'image-size', sizes: '200,400,600,700,800,900,1000,1200,1400,1600', image: media -%}{%- endcapture -%}

    {%- case media.media_type -%}
    {%- when 'image' -%}
    <div id="Media{{ media.id }}" tabindex="0" class="Product__SlideItem Product__SlideItem--image Carousel__Cell {% if initial_media_id == media.id %}is-selected{% endif %}" data-media-type="image" data-media-id="{{ media.id }}" data-media-position="{{ media.position }}" data-image-media-position="{% increment image_position %}">
      <div class="AspectRatio AspectRatio--withFallback" style="padding-bottom: {{ 100.0 | divided_by: media.aspect_ratio }}%; --aspect-ratio: {{ media.aspect_ratio }};">
        {% assign image_url = media | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}

        <img class="Image--lazyLoad Image--fadeIn" data-src="{{ image_url }}" data-widths="[{{ supported_sizes }}]" data-sizes="auto" data-expand="-100" alt="{{ media.alt | escape }}" data-max-width="{{ media.width }}" data-max-height="{{ media.height }}" data-original-src="{{ media | img_url: 'master' }}">
        <span class="Image__Loader"></span>

        <noscript>
          <img src="{{ media | img_url: '800x' }}" alt="{{ media.alt | escape }}">
        </noscript>
      </div>
    </div>

    {%- when 'external_video' -%}
    <div id="Media{{ media.id }}" tabindex="-1" class="Product__SlideItem Product__SlideItem--video Carousel__Cell {% if initial_media_id == media.id %}is-selected{% endif %}" data-media-type="external_video" data-media-id="{{ media.id }}" data-media-position="{{ media.position }}" data-video-host="{{ media.host | escape }}" data-video-id="{{ media.external_id | escape }}">
      <div class="Image--lazyLoad Image--fadeIn" data-expand="-100">
        <div class="VideoWrapper">
          {{- media | external_video_tag: image_size: '1024x' -}}
        </div>
      </div>
    </div>

    {%- when 'video' -%}
    <div id="Media{{ media.id }}" tabindex="-1" class="Product__SlideItem Product__SlideItem--video Carousel__Cell {% if initial_media_id == media.id %}is-selected{% endif %}" data-media-type="video" data-media-id="{{ media.id }}" data-media-position="{{ media.position }}">
      <div class="Image--lazyLoad Image--fadeIn" data-expand="-100">
        <div class="VideoWrapper VideoWrapper--native" style="padding-bottom: {{ 100.0 | divided_by: media.aspect_ratio }}%">
          {{- media | video_tag: image_size: '1024x', controls: true -}}
        </div>
      </div>
    </div>

    {%- when 'model' -%}
    <div id="Media{{ media.id }}" tabindex="-1" class="Product__SlideItem Product__SlideItem--model Carousel__Cell {% if initial_media_id == media.id %}is-selected{% endif %}" data-media-type="model" data-media-id="{{ media.id }}" data-media-position="{{ media.position }}">
      <div class="Image--lazyLoad Image--fadeIn" data-expand="-100">
        <div class="ModelWrapper">
          {{- media | model_viewer_tag: image_size: '1024x', reveal: 'interaction', toggleable: true -}}
        </div>
      </div>
    </div>
    {%- endcase -%}

    {%- assign media_count = media_count | plus: 1 -%}
    {%- endfor -%}
    {%- endcapture -%}

    {%- if product.media.size > 0 -%}
    <div class="Product__Gallery {% if section.settings.stack_images %}Product__Gallery--stack{% endif %} {% if section.settings.show_thumbnails and media_count > 1 %}Product__Gallery--withThumbnails{% else %}Product__Gallery--withDots{% endif %}">
      <span id="ProductGallery" class="Anchor"></span>

      {%- if action_list_items != blank -%}
      <div class="Product__ActionList hidden-lap-and-up {% if product.media[initial_media_index].media_type != 'image' %}is-hidden{% endif %}">
        {{ action_list_items }}
      </div>
      {%- endif -%}

      {%- capture slideshow_nav -%}
      {%- if media_count > 1 -%}
      {%- if section.settings.show_thumbnails -%}
      <div class="Product__SlideshowNav Product__SlideshowNav--thumbnails">
        <div class="Product__SlideshowNavScroller">
          {%- for media in product.media -%}
          {%- if media.alt == 'featured' or media.alt == 'featured mobile' -%}
          {%- continue -%}
          {%- endif -%}

          {%- capture nav_item_badge -%}
          {%- case media.media_type -%}
          {%- when 'model' -%}
          <span class="Product__SlideshowNavBadge">{% render 'icon', icon: 'media-model-badge' %}</span>

          {%- when 'video' or 'external_video' -%}
          <span class="Product__SlideshowNavBadge">{% render 'icon', icon: 'media-video-badge' %}</span>
          {%- endcase -%}
          {%- endcapture -%}

          {%- if section.settings.stack_images -%}
          <a href="#Media{{ media.id }}" data-offset="-25" data-focus-on-click data-media-id="{{ media.id }}" class="Product__SlideshowNavImage AspectRatio {% if forloop.first %}is-selected{% endif %}" style="--aspect-ratio: {{ media.preview_image.aspect_ratio }}">
            <img src="{{ media | img_url: '160x' }}" alt="{{ media.alt | escape }}">
            {{- nav_item_badge -}}
          </a>
          {%- else -%}
          <a href="{{ media | img_url: '1024x' }}" data-media-id="{{ media.id }}" class="Product__SlideshowNavImage AspectRatio {% if forloop.first %}is-selected{% endif %}" style="--aspect-ratio: {{ media.preview_image.aspect_ratio }}">
            <img src="{{ media | img_url: '160x' }}" alt="{{ media.alt | escape }}">
            {{- nav_item_badge -}}
          </a>
          {%- endif -%}
          {%- endfor -%}
        </div>
      </div>
      {%- endif -%}

      {%- if section.settings.stack_images -%}
      <div class="Product__SlideshowNav Product__SlideshowNav--dots">
        <div class="Product__SlideshowNavScroller">
          {%- for media in product.media -%}
          {%- if media.alt == 'featured' or media.alt == 'featured mobile' -%}
          {%- continue -%}
          {%- endif -%}

          <a href="#Media{{ media.id }}" data-offset="-25" data-focus-on-click class="Product__SlideshowNavDot {% if forloop.first %}is-selected{% endif %}"></a>
          {%- endfor -%}
        </div>
      </div>
      {%- endif -%}
      {%- endif -%}
      {%- endcapture -%}

      {%- if section.settings.stack_images -%}
      {{- slideshow_nav -}}
      {%- endif -%}

      {%- capture flickity_options -%}
      {
      "prevNextButtons": false,
      "pageDots": false,
      "adaptiveHeight": true,
      "watchCSS": true,
      "dragThreshold": 8,
      "initialIndex": {{ initial_media_index }},
      "arrowShape": {"x0": 20, "x1": 60, "y1": 40, "x2": 60, "y2": 35, "x3": 25}
      }
      {%- endcapture -%}

      <div class="Product__Slideshow {% if section.settings.enable_image_zoom %}Product__Slideshow--zoomable{% endif %} Carousel" data-flickity-config='{{ flickity_options }}'>
        {{ slideshow_media }}
      </div>

      {%- comment -%}Add the "view in your space" button, which allows to show the product in customer's environment (if the device supports it){%- endcomment -%}
      {%- assign first_3d_model = product.media | where: 'media_type', 'model' | first -%}

      {%- if first_3d_model -%}
      <button class="Product__ViewInSpace Button Button--full" data-shopify-xr data-shopify-model3d-id="{{ first_3d_model.id }}" data-shopify-model3d-default-id="{{ first_3d_model.id }}" data-shopify-title="{{ product.title | escape }}" data-shopify-xr-hidden>
        {%- render 'icon', icon: 'media-view-in-space' -%} {{- 'product.general.view_in_space' | t -}}
      </button>
      {%- endif -%}

      {%- if media_count > 1 -%}
      {%- comment -%}
      IMPLEMENTATION NOTE: The reason we create ourselves our own UI instead of relying of the built-in feature of Flickity is that,
      since the media API, Shopify requires to add arrows next to the dot. Unfortunately this layout is not
      achievable easily using Flickity options only, so we have to run our own
      {%- endcomment -%}

      <div class="Product__SlideshowMobileNav {% if section.settings.stack_images or section.settings.show_thumbnails %}hidden-desk{% endif %}">
        <button class="Product__SlideshowNavArrow Product__SlideshowNavArrow--previous" type="button" data-direction="previous" aria-label="{{ 'general.accessibility.previous' | t }}">
          {% render 'icon' with 'media-arrow-left' %}
        </button>

        <div class="flickity-page-dots">
          {%- for i in (1..media_count) -%}
          <button type="button" class="dot {% if forloop.index0 == initial_media_index %}is-selected{% endif %}" data-index="{{ forloop.index0 }}"></button>
          {%- endfor -%}
        </div>

        <button class="Product__SlideshowNavArrow Product__SlideshowNavArrow--next" type="button" data-direction="next" aria-label="{{ 'general.accessibility.next' | t }}">
          {% render 'icon' with 'media-arrow-right' %}
        </button>
      </div>
      {%- endif -%}

      {%- unless section.settings.stack_images -%}
      {{- slideshow_nav -}}
      {%- endunless -%}
    </div>
    {%- endif -%}

    {%- capture product_aside -%}
    {%- comment -%}
    --------------------------------------------------------------------------------------------------------------------
    PRODUCT TABS
    --------------------------------------------------------------------------------------------------------------------
    {%- endcomment -%}

    {%- render 'product-tabs' -%}

    {%- comment -%}
    --------------------------------------------------------------------------------------------------------------------
    PRODUCT WEAR IT WITH

    We allow merchants to add a tag that looks like __with:product-handle to feature an additional product
    --------------------------------------------------------------------------------------------------------------------
    {%- endcomment -%}

    {%- for tag in product.tags -%}
    {%- if tag contains '__with' -%}
    {%- assign product_handle = tag | split: '__with:' | last -%}
    {%- assign associated_product = all_products[product_handle] -%}

    {%- if associated_product != empty -%}
    <div class="Section Section--spacingNormal">
      <header class="SectionHeader SectionHeader--center">
        <h3 class="SectionHeader__Heading Heading u-h4">{{ 'product.buy_it_with.title' | t }}</h3>
      </header>

      {% render 'product-item', product: associated_product, use_horizontal: true, show_labels: false, show_product_info: true, show_vendor: false, show_price_on_hover: false %}
    </div>

    {%- break -%}
    {%- endif -%}
    {%- endif -%}
    {%- endfor -%}
    {%- endcapture -%}

    <div class="Product__InfoWrapper">
      <div class="Product__Info {% if media_count == 0 %}Product__Info--noGallery{% endif %}">
        <div class="Container">
          {%- render 'product-meta', product: product, show_description: true -%}

          {%- if product.template_suffix != 'coming-soon' -%}
          {%- render 'product-form', product: product -%}
          {%- endif -%}

          {%- if section.settings.description_below_add_to_cart -%}
          <div class="ProductMeta__Description">
            {%- if section.settings.show_share_buttons -%}
            <div class="ProductMeta__ShareButtons hidden-pocket">
              <span class="ProductMeta__ShareTitle Heading Text--subdued u-h7">{{ 'product.form.share' | t }}</span>

              {%- assign share_url = shop.url | append: product.url -%}
              {%- assign twitter_text = product.title -%}
              {%- assign pinterest_description = product.description | strip_html | truncatewords: 15 | url_param_escape -%}
              {%- assign pinterest_image = product.featured_image | img_url: 'large' | prepend: 'https:' -%}

              <div class="ProductMeta__ShareList Text--subdued">
                <a class="ProductMeta__ShareItem" href="https://www.facebook.com/sharer.php?u={{ share_url }}" target="_blank" rel="noopener" aria-label="Facebook">{%- render 'icon' with 'facebook' -%}</a>
                <a class="ProductMeta__ShareItem" href="https://twitter.com/share?{% if twitter_text != blank %}text={{twitter_text}}&{% endif %}url={{ share_url }}" target="_blank" rel="noopener" aria-label="Twitter">{%- render 'icon' with 'twitter' -%}</a>
                <a class="ProductMeta__ShareItem" href="https://pinterest.com/pin/create/button/?url={{ share_url }}{% if pinterest_image != blank %}&media={{ pinterest_image }}{% endif %}&description={{ pinterest_description }}" target="_blank" rel="noopener" aria-label="Pinterest">{%- render 'icon' with 'pinterest' -%}</a>
              </div>
            </div>
            {%- endif -%}
          </div>
          {%- endif -%}

          {%- if section.settings.stack_images and product_aside != blank and media_count > 0 -%}
          <div class="Product__QuickNav hidden-pocket">
            <div class="Product__QuickNavWrapper">
              <a href="#ProductAside" class="Heading Link Link--secondary u-h7">{{ 'product.form.view_info' | t }} {% render 'icon' with 'select-arrow-right' %}</a>
              <a href="#ProductGallery" class="Heading Link Link--secondary u-h7">{{ 'product.form.view_images' | t }} {% render 'icon' with 'select-arrow-right' %}</a>
            </div>
          </div>
          {%- endif -%}
        </div>
      </div>
    </div>

    {%- if product_aside != blank -%}
    <div class="Product__Aside">
      <span id="ProductAside" class="Anchor"></span>
      {{- product_aside -}}
    </div>
    {%- endif -%}
  </div>
</section>
<div style="clear:both"></div>
<div class="Product">
  <div class="ProductMeta__Description">
    <div class="Rte">
      {%- comment -%}
      We have figured out that some merchants were copy-pasting huge chunk of code into the product description,
      which can make the theme crashes if it contains some special attributes used by the theme. We therefore make sure to process this
      {%- endcomment -%}

      {{ product.description | replace: 'data-section-type', 'data-section-type-placeholder' }}
    </div>
  </div>
</div>
{% comment %}Start automatically added Judge.me widget{% endcomment %}
{% render 'judgeme_widgets', widget_type: 'judgeme_review_widget', concierge_install: true, product: product %}
{% comment %}End automatically added Judge.me widget{% endcomment %}


{%- comment -%}
--------------------------------------------------------------------------------------------------------------------
FEATURED IMAGE

We allow merchants to use one image as a "featured image" by adding the alt tag "featured"
--------------------------------------------------------------------------------------------------------------------
{%- endcomment -%}

{%- for media in product.media -%}
{%- if media.alt == 'featured' -%}
{%- assign desk_featured_media = media.preview_image -%}
{%- endif -%}

{%- if media.alt == 'featured mobile' -%}
{%- assign mobile_featured_media = media.preview_image -%}
{%- endif -%}
{%- endfor -%}

{%- if desk_featured_media or mobile_featured_media -%}
{%- assign mobile_featured_media = mobile_featured_media | default: desk_featured_media -%}
{%- assign desk_featured_media = desk_featured_media | default: mobile_featured_media -%}

<div class="Product__FeatureImageWrapper" style="background: url({{ desk_featured_media | img_url: '1x1', format: 'jpg' }})">
  <div class="Product__FeatureImage Product__FeatureImage--{{ section.settings.featured_image_size }} Image--lazyLoad Image--zoomOut hide-no-js" data-expand="-25" data-bgset="{{ mobile_featured_media | img_url: 'x850' }} [(max-width: 640px)] | {{ desk_featured_media | img_url: '1500x' }}"></div>

  <noscript>
    <div class="Product__FeatureImage Product__FeatureImage--{{ section.settings.featured_image_size }}" style="background-image: url({{ desk_featured_media | img_url: '1500x' }})"></div>
  </noscript>
</div>

<style>
  #shopify-section-{{ section.id }} + .shopify-section--bordered {
    border-top: 0;
  }
</style>
{%- else -%}
<style>
  /* This is a bit hacky but allows to circumvent the complete independency of section (as next section included in the page does not know anything about this page) */

  @media screen and (max-width: 640px) {
    #shopify-section-{{ section.id }} + .shopify-section--bordered {
      border-top: 0;
    }

    #shopify-section-{{ section.id }} + .shopify-section--bordered > .Section {
      padding-top: 0;
    }
  }
</style>
{%- endif -%}

{%- comment -%}
--------------------------------------------------------------------------------------------------------------------
PHOTO SWIPE

This is the root container for the zoom functionality. Must not be removed, as order element is important.
--------------------------------------------------------------------------------------------------------------------
{%- endcomment -%}

{%- if section.settings.enable_image_zoom -%}
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
  <!-- Background of PhotoSwipe -->
  <div class="pswp__bg"></div>

  <!-- Slides wrapper with overflow:hidden. -->
  <div class="pswp__scroll-wrap">

    <!-- Container that holds slides. Do not remove as content is dynamically added -->
    <div class="pswp__container">
      <div class="pswp__item"></div>
      <div class="pswp__item"></div>
      <div class="pswp__item"></div>
    </div>

    <!-- Main UI bar -->
    <div class="pswp__ui pswp__ui--hidden">
      <button class="pswp__button pswp__button--prev RoundButton" data-animate-left title="{{ 'product.slideshow.previous' | t }}">{% render 'icon' with 'arrow-left' %}</button>
      <button class="pswp__button pswp__button--close RoundButton RoundButton--large" data-animate-bottom title="{{ 'product.slideshow.close' | t }}">{% render 'icon' with 'close' %}</button>
      <button class="pswp__button pswp__button--next RoundButton" data-animate-right title="{{ 'product.slideshow.next' | t }}">{% render 'icon' with 'arrow-right' %}</button>
    </div>
  </div>
</div>
{%- endif -%}

{% schema %}
{
"name": "Product page",
"class": "shopify-section--bordered",
"settings": [
{
"type": "checkbox",
"id": "show_share_buttons",
"label": "Show social sharing buttons",
"default": true
},
{
"type": "checkbox",
"id": "show_vendor",
"label": "Show vendor",
"default": true
},
{
"type": "checkbox",
"id": "show_sku",
"label": "Show SKU",
"default": false
},
{
"type": "checkbox",
"id": "show_taxes_included",
"label": "Show price taxes notice",
"default": false
},
{
"type": "checkbox",
"id": "description_below_add_to_cart",
"label": "Description below add to cart",
"default": false
},
{
"type": "select",
"id": "selector_mode",
"label": "Selector type",
"options": [
{
"value": "block",
"label": "Block"
},
{
"value": "dropdown",
"label": "Dropdown"
}
],
"default": "dropdown"
},
{
"type": "checkbox",
"id": "show_color_swatch",
"label": "Show color swatch",
"default": false,
"info": "Some colors appear white? [Learn more](http://support.maestrooo.com/article/80-product-uploading-custom-color-for-color-swatch)."
},
{
"type": "checkbox",
"id": "show_color_carousel",
"label": "Show color carousel",
"info": "A pop-up selector with variant images for choosing colors. Only enables when color swatch is disabled.",
"default": false
},
{
"type": "checkbox",
"id": "show_quantity_selector",
"label": "Show quantity selector",
"default": true
},
{
"type": "checkbox",
"id": "show_inventory_quantity",
"label": "Show inventory quantity",
"info": "Make sure that your inventory is tracked. [Learn more](https://help.shopify.com/manual/products/inventory#set-up-inventory-tracking).",
"default": false
},
{
"type": "range",
"id": "inventory_quantity_threshold",
"label": "Inventory quantity threshold",
"info": "Only show inventory quantity if below threshold. Choose 0 to always show.",
"min": 0,
"max": 50,
"step": 1,
"default": 0
},
{
"type": "checkbox",
"id": "show_price_in_button",
"label": "Show price in add to cart button",
"default": false
},
{
"type": "checkbox",
"id": "show_payment_button",
"label": "Show dynamic checkout button",
"info": "Each customer will see their preferred payment method from those available on your store, such as PayPal or Apple Pay. [Learn more](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
"default": true
},
{
"type": "checkbox",
"id": "show_pickup_availability",
"label": "Show local pickup availability",
"info": "Show customers where they can pick up the product. [Learn more](https://help.shopify.com/en/manual/shipping/setting-up-and-managing-your-shipping/local-methods/loca...)",
"default": false
},
{
"type": "header",
"content": "Media"
},
{
"type": "paragraph",
"content": "Learn more about [media types](https://help.shopify.com/en/manual/products/product-media)"
},
{
"type": "select",
"id": "image_size",
"label": "Size",
"options": [
{
"value": "small",
"label": "Small"
},
{
"value": "medium",
"label": "Medium"
},
{
"value": "large",
"label": "Large"
},
{
"value": "fill",
"label": "Fill screen"
}
],
"default": "large"
},
{
"type": "checkbox",
"id": "stack_images",
"label": "Stack images on desktop",
"default": true
},
{
"type": "checkbox",
"id": "show_thumbnails",
"label": "Show thumbnails on desktop",
"default": true
},
{
"type": "checkbox",
"id": "enable_image_zoom",
"label": "Enable zoom",
"default": true
},
{
"type": "checkbox",
"id": "enable_video_looping",
"label": "Enable video looping",
"default": false
},
{
"type": "header",
"content": "Tabs"
},
{
"type": "page",
"id": "tab_page_1_handle",
"label": "First page"
},
{
"type": "page",
"id": "tab_page_2_handle",
"label": "Second page"
},
{
"type": "paragraph",
"content": "The theme also allows you to add specific tabs for a given product only. [Learn more about this feature](http://support.maestrooo.com/article/83-product-adding-different-tabs-per-product)."
},
{
"type": "header",
"content": "Reviews"
},
{
"type": "paragraph",
"content": "You need to install [Shopify's free Product Reviews](https://apps.shopify.com/product-reviews) app before enabling this option."
},
{
"type": "checkbox",
"id": "reviews_enabled",
"label": "Enable",
"default": false
},
{
"type": "header",
"content": "Featured image"
},
{
"type": "paragraph",
"content": "You can highlight an image after product tabs by adding the ALT tag \"featured\" to a given image. [Learn more](http://support.maestrooo.com/article/152-product-highlight-a-featured-image)."
},
{
"type": "select",
"id": "featured_image_size",
"label": "Section size",
"options": [
{
"value": "small",
"label": "Small"
},
{
"value": "normal",
"label": "Normal"
},
{
"value": "large",
"label": "Large"
}
],
"default": "large"
}
]
}
{% endschema %}

Hope it helps!

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!
943 Views
1 Like
Report
In response to LitCommerce

Lulukoh
Tourist
9 0 14
‎08-29-2023 04:13 AM

Hi, I have the same request. Could you help me too? How can I contact you directly?

675 Views
0 Likes
Report

LitCommerce
Astronaut
2860 684 749
‎03-29-2022 05:56 AM

Hi @banggear,

Please send me the code of sections > product-template.liquid file, I will help you to check and change it.

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!
956 Views
0 Likes
Report
In response to LitCommerce

banggear
Shopify Partner
8 0 0
‎03-29-2022 06:03 AM
@LitCommerce wrote:

Hi @banggear,

Please send me the code of sections > product-template.liquid file, I will help you to check and change it.

{%- capture section_settings -%}
{
"enableHistoryState": true,
"templateSuffix": {{ product.template_suffix | json }},
"showInventoryQuantity": {{ section.settings.show_inventory_quantity | json }},
"showSku": {{ section.settings.show_sku | json }},
"stackProductImages": {{ section.settings.stack_images | json }},
"showThumbnails": {{ section.settings.show_thumbnails | json }},
"enableVideoLooping": {{ section.settings.enable_video_looping | json }},
"inventoryQuantityThreshold": {{ section.settings.inventory_quantity_threshold }},
"showPriceInButton": {{ section.settings.show_price_in_button | json }},
"enableImageZoom": {{ section.settings.enable_image_zoom | json }},
"showPaymentButton": {{ section.settings.show_payment_button | json }},
"useAjaxCart": {% if settings.cart_type == 'drawer' %}true{% else %}false{% endif %}
}
{%- endcapture -%}

<section class="Product Product--{{ section.settings.image_size }}" data-section-id="{{ section.id }}" data-section-type="product" data-section-settings='{{ section_settings }}'>
<div class="Product__Wrapper">
{%- capture action_list_items -%}
{%- if section.settings.enable_image_zoom -%}
<div class="Product__ActionItem hidden-lap-and-up">
<button class="RoundButton RoundButton--small RoundButton--flat" data-action="open-product-zoom">{% render 'icon' with 'plus' %}</button>
</div>
{%- endif -%}

{%- if section.settings.show_share_buttons -%}
<div class="Product__ActionItem hidden-lap-and-up">
<button class="RoundButton RoundButton--small RoundButton--flat" data-action="toggle-social-share" data-animate-bottom aria-expanded="false">
<span class="RoundButton__PrimaryState">{% render 'icon' with 'share' %}</span>
<span class="RoundButton__SecondaryState">{% render 'icon' with 'close' %}</span>
</button>

{%- assign share_url = shop.url | append: product.url -%}
{%- assign twitter_text = product.title -%}
{%- assign pinterest_description = product.description | strip_html | truncatewords: 15 | url_param_escape -%}
{%- assign pinterest_image = product.featured_media | img_url: '1024x' | prepend: 'https:' -%}

<div class="Product__ShareList" aria-hidden="true">
<a class="Product__ShareItem" href="https://www.facebook.com/sharer.php?u={{ share_url }}" target="_blank" rel="noopener">{%- render 'icon' with 'facebook' -%} Facebook</a>
<a class="Product__ShareItem" href="https://pinterest.com/pin/create/button/?url={{ share_url }}{% if pinterest_image != blank %}&media={{ pinterest_image }}{% endif %}&description={{ pinterest_description }}" target="_blank" rel="noopener">{%- render 'icon' with 'pinterest' -%} Pinterest</a>
<a class="Product__ShareItem" href="https://twitter.com/share?{% if twitter_text != blank %}text={{twitter_text}}&{% endif %}url={{ share_url }}" target="_blank" rel="noopener">{%- render 'icon' with 'twitter' -%} Twitter</a>
</div>
</div>
{%- endif -%}
{%- endcapture -%}

{%- comment -%}
--------------------------------------------------------------------------------------------------------------------
PRODUCT GALLERY
--------------------------------------------------------------------------------------------------------------------
{%- endcomment -%}

{%- assign initial_media_id = product.featured_media.id -%}
{%- assign initial_media_index = 0 -%}
{%- assign media_count = 0 -%}

{%- capture slideshow_media -%}
{%- for media in product.media -%}
{%- if media.alt == 'featured' or media.alt == 'featured mobile' -%}
{%- continue -%}
{%- endif -%}

{%- if product.selected_variant and media.id == product.selected_variant.featured_media.id -%}
{%- assign initial_media_index = media_count -%}
{%- assign initial_media_id = media.id -%}
{%- endif -%}

{%- capture supported_sizes -%}{%- render 'image-size', sizes: '200,400,600,700,800,900,1000,1200,1400,1600', image: media -%}{%- endcapture -%}

{%- case media.media_type -%}
{%- when 'image' -%}
<div id="Media{{ media.id }}" tabindex="0" class="Product__SlideItem Product__SlideItem--image Carousel__Cell {% if initial_media_id == media.id %}is-selected{% endif %}" data-media-type="image" data-media-id="{{ media.id }}" data-media-position="{{ media.position }}" data-image-media-position="{% increment image_position %}">
<div class="AspectRatio AspectRatio--withFallback" style="padding-bottom: {{ 100.0 | divided_by: media.aspect_ratio }}%; --aspect-ratio: {{ media.aspect_ratio }};">
{% assign image_url = media | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}

<img class="Image--lazyLoad Image--fadeIn" data-src="{{ image_url }}" data-widths="[{{ supported_sizes }}]" data-sizes="auto" data-expand="-100" alt="{{ media.alt | escape }}" data-max-width="{{ media.width }}" data-max-height="{{ media.height }}" data-original-src="{{ media | img_url: 'master' }}">
<span class="Image__Loader"></span>

<noscript>
<img src="{{ media | img_url: '800x' }}" alt="{{ media.alt | escape }}">
</noscript>
</div>
</div>

{%- when 'external_video' -%}
<div id="Media{{ media.id }}" tabindex="-1" class="Product__SlideItem Product__SlideItem--video Carousel__Cell {% if initial_media_id == media.id %}is-selected{% endif %}" data-media-type="external_video" data-media-id="{{ media.id }}" data-media-position="{{ media.position }}" data-video-host="{{ media.host | escape }}" data-video-id="{{ media.external_id | escape }}">
<div class="Image--lazyLoad Image--fadeIn" data-expand="-100">
<div class="VideoWrapper">
{{- media | external_video_tag: image_size: '1024x' -}}
</div>
</div>
</div>

{%- when 'video' -%}
<div id="Media{{ media.id }}" tabindex="-1" class="Product__SlideItem Product__SlideItem--video Carousel__Cell {% if initial_media_id == media.id %}is-selected{% endif %}" data-media-type="video" data-media-id="{{ media.id }}" data-media-position="{{ media.position }}">
<div class="Image--lazyLoad Image--fadeIn" data-expand="-100">
<div class="VideoWrapper VideoWrapper--native" style="padding-bottom: {{ 100.0 | divided_by: media.aspect_ratio }}%">
{{- media | video_tag: image_size: '1024x', controls: true -}}
</div>
</div>
</div>

{%- when 'model' -%}
<div id="Media{{ media.id }}" tabindex="-1" class="Product__SlideItem Product__SlideItem--model Carousel__Cell {% if initial_media_id == media.id %}is-selected{% endif %}" data-media-type="model" data-media-id="{{ media.id }}" data-media-position="{{ media.position }}">
<div class="Image--lazyLoad Image--fadeIn" data-expand="-100">
<div class="ModelWrapper">
{{- media | model_viewer_tag: image_size: '1024x', reveal: 'interaction', toggleable: true -}}
</div>
</div>
</div>
{%- endcase -%}

{%- assign media_count = media_count | plus: 1 -%}
{%- endfor -%}
{%- endcapture -%}

{%- if product.media.size > 0 -%}
<div class="Product__Gallery {% if section.settings.stack_images %}Product__Gallery--stack{% endif %} {% if section.settings.show_thumbnails and media_count > 1 %}Product__Gallery--withThumbnails{% else %}Product__Gallery--withDots{% endif %}">
<span id="ProductGallery" class="Anchor"></span>

{%- if action_list_items != blank -%}
<div class="Product__ActionList hidden-lap-and-up {% if product.media[initial_media_index].media_type != 'image' %}is-hidden{% endif %}">
{{ action_list_items }}
</div>
{%- endif -%}

{%- capture slideshow_nav -%}
{%- if media_count > 1 -%}
{%- if section.settings.show_thumbnails -%}
<div class="Product__SlideshowNav Product__SlideshowNav--thumbnails">
<div class="Product__SlideshowNavScroller">
{%- for media in product.media -%}
{%- if media.alt == 'featured' or media.alt == 'featured mobile' -%}
{%- continue -%}
{%- endif -%}

{%- capture nav_item_badge -%}
{%- case media.media_type -%}
{%- when 'model' -%}
<span class="Product__SlideshowNavBadge">{% render 'icon', icon: 'media-model-badge' %}</span>

{%- when 'video' or 'external_video' -%}
<span class="Product__SlideshowNavBadge">{% render 'icon', icon: 'media-video-badge' %}</span>
{%- endcase -%}
{%- endcapture -%}

{%- if section.settings.stack_images -%}
<a href="#Media{{ media.id }}" data-offset="-25" data-focus-on-click data-media-id="{{ media.id }}" class="Product__SlideshowNavImage AspectRatio {% if forloop.first %}is-selected{% endif %}" style="--aspect-ratio: {{ media.preview_image.aspect_ratio }}">
<img src="{{ media | img_url: '160x' }}" alt="{{ media.alt | escape }}">
{{- nav_item_badge -}}
</a>
{%- else -%}
<a href="{{ media | img_url: '1024x' }}" data-media-id="{{ media.id }}" class="Product__SlideshowNavImage AspectRatio {% if forloop.first %}is-selected{% endif %}" style="--aspect-ratio: {{ media.preview_image.aspect_ratio }}">
<img src="{{ media | img_url: '160x' }}" alt="{{ media.alt | escape }}">
{{- nav_item_badge -}}
</a>
{%- endif -%}
{%- endfor -%}
</div>
</div>
{%- endif -%}

{%- if section.settings.stack_images -%}
<div class="Product__SlideshowNav Product__SlideshowNav--dots">
<div class="Product__SlideshowNavScroller">
{%- for media in product.media -%}
{%- if media.alt == 'featured' or media.alt == 'featured mobile' -%}
{%- continue -%}
{%- endif -%}

<a href="#Media{{ media.id }}" data-offset="-25" data-focus-on-click class="Product__SlideshowNavDot {% if forloop.first %}is-selected{% endif %}"></a>
{%- endfor -%}
</div>
</div>
{%- endif -%}
{%- endif -%}
{%- endcapture -%}

{%- if section.settings.stack_images -%}
{{- slideshow_nav -}}
{%- endif -%}

{%- capture flickity_options -%}
{
"prevNextButtons": false,
"pageDots": false,
"adaptiveHeight": true,
"watchCSS": true,
"dragThreshold": 8,
"initialIndex": {{ initial_media_index }},
"arrowShape": {"x0": 20, "x1": 60, "y1": 40, "x2": 60, "y2": 35, "x3": 25}
}
{%- endcapture -%}

<div class="Product__Slideshow {% if section.settings.enable_image_zoom %}Product__Slideshow--zoomable{% endif %} Carousel" data-flickity-config='{{ flickity_options }}'>
{{ slideshow_media }}
</div>

{%- comment -%}Add the "view in your space" button, which allows to show the product in customer's environment (if the device supports it){%- endcomment -%}
{%- assign first_3d_model = product.media | where: 'media_type', 'model' | first -%}

{%- if first_3d_model -%}
<button class="Product__ViewInSpace Button Button--full" data-shopify-xr data-shopify-model3d-id="{{ first_3d_model.id }}" data-shopify-model3d-default-id="{{ first_3d_model.id }}" data-shopify-title="{{ product.title | escape }}" data-shopify-xr-hidden>
{%- render 'icon', icon: 'media-view-in-space' -%} {{- 'product.general.view_in_space' | t -}}
</button>
{%- endif -%}

{%- if media_count > 1 -%}
{%- comment -%}
IMPLEMENTATION NOTE: The reason we create ourselves our own UI instead of relying of the built-in feature of Flickity is that,
since the media API, Shopify requires to add arrows next to the dot. Unfortunately this layout is not
achievable easily using Flickity options only, so we have to run our own
{%- endcomment -%}

<div class="Product__SlideshowMobileNav {% if section.settings.stack_images or section.settings.show_thumbnails %}hidden-desk{% endif %}">
<button class="Product__SlideshowNavArrow Product__SlideshowNavArrow--previous" type="button" data-direction="previous" aria-label="{{ 'general.accessibility.previous' | t }}">
{% render 'icon' with 'media-arrow-left' %}
</button>

<div class="flickity-page-dots">
{%- for i in (1..media_count) -%}
<button type="button" class="dot {% if forloop.index0 == initial_media_index %}is-selected{% endif %}" data-index="{{ forloop.index0 }}"></button>
{%- endfor -%}
</div>

<button class="Product__SlideshowNavArrow Product__SlideshowNavArrow--next" type="button" data-direction="next" aria-label="{{ 'general.accessibility.next' | t }}">
{% render 'icon' with 'media-arrow-right' %}
</button>
</div>
{%- endif -%}

{%- unless section.settings.stack_images -%}
{{- slideshow_nav -}}
{%- endunless -%}
</div>
{%- endif -%}

{%- capture product_aside -%}
{%- comment -%}
--------------------------------------------------------------------------------------------------------------------
PRODUCT TABS
--------------------------------------------------------------------------------------------------------------------
{%- endcomment -%}

{%- render 'product-tabs' -%}

{%- comment -%}
--------------------------------------------------------------------------------------------------------------------
PRODUCT WEAR IT WITH

We allow merchants to add a tag that looks like __with:product-handle to feature an additional product
--------------------------------------------------------------------------------------------------------------------
{%- endcomment -%}

{%- for tag in product.tags -%}
{%- if tag contains '__with' -%}
{%- assign product_handle = tag | split: '__with:' | last -%}
{%- assign associated_product = all_products[product_handle] -%}

{%- if associated_product != empty -%}
<div class="Section Section--spacingNormal">
<header class="SectionHeader SectionHeader--center">
<h3 class="SectionHeader__Heading Heading u-h4">{{ 'product.buy_it_with.title' | t }}</h3>
</header>

{% render 'product-item', product: associated_product, use_horizontal: true, show_labels: false, show_product_info: true, show_vendor: false, show_price_on_hover: false %}
</div>

{%- break -%}
{%- endif -%}
{%- endif -%}
{%- endfor -%}
{%- endcapture -%}

<div class="Product__InfoWrapper">
<div class="Product__Info {% if media_count == 0 %}Product__Info--noGallery{% endif %}">
<div class="Container">
{%- render 'product-meta', product: product, show_description: true -%}

{%- if product.template_suffix != 'coming-soon' -%}
{%- render 'product-form', product: product -%}
{%- endif -%}

{%- if section.settings.description_below_add_to_cart -%}
<div class="ProductMeta__Description">
<div class="Rte">
{%- comment -%}
We have figured out that some merchants were copy-pasting huge chunk of code into the product description,
which can make the theme crashes if it contains some special attributes used by the theme. We therefore make sure to process this
{%- endcomment -%}

{{ product.description | replace: 'data-section-type', 'data-section-type-placeholder' }}
</div>

{%- if section.settings.show_share_buttons -%}
<div class="ProductMeta__ShareButtons hidden-pocket">
<span class="ProductMeta__ShareTitle Heading Text--subdued u-h7">{{ 'product.form.share' | t }}</span>

{%- assign share_url = shop.url | append: product.url -%}
{%- assign twitter_text = product.title -%}
{%- assign pinterest_description = product.description | strip_html | truncatewords: 15 | url_param_escape -%}
{%- assign pinterest_image = product.featured_image | img_url: 'large' | prepend: 'https:' -%}

<div class="ProductMeta__ShareList Text--subdued">
<a class="ProductMeta__ShareItem" href="https://www.facebook.com/sharer.php?u={{ share_url }}" target="_blank" rel="noopener" aria-label="Facebook">{%- render 'icon' with 'facebook' -%}</a>
<a class="ProductMeta__ShareItem" href="https://twitter.com/share?{% if twitter_text != blank %}text={{twitter_text}}&{% endif %}url={{ share_url }}" target="_blank" rel="noopener" aria-label="Twitter">{%- render 'icon' with 'twitter' -%}</a>
<a class="ProductMeta__ShareItem" href="https://pinterest.com/pin/create/button/?url={{ share_url }}{% if pinterest_image != blank %}&media={{ pinterest_image }}{% endif %}&description={{ pinterest_description }}" target="_blank" rel="noopener" aria-label="Pinterest">{%- render 'icon' with 'pinterest' -%}</a>
</div>
</div>
{%- endif -%}
</div>
{%- endif -%}

{%- if section.settings.stack_images and product_aside != blank and media_count > 0 -%}
<div class="Product__QuickNav hidden-pocket">
<div class="Product__QuickNavWrapper">
<a href="#ProductAside" class="Heading Link Link--secondary u-h7">{{ 'product.form.view_info' | t }} {% render 'icon' with 'select-arrow-right' %}</a>
<a href="#ProductGallery" class="Heading Link Link--secondary u-h7">{{ 'product.form.view_images' | t }} {% render 'icon' with 'select-arrow-right' %}</a>
</div>
</div>
{%- endif -%}
</div>
</div>
</div>

{%- if product_aside != blank -%}
<div class="Product__Aside">
<span id="ProductAside" class="Anchor"></span>
{{- product_aside -}}
</div>
{%- endif -%}
</div>
</section>
{% comment %}Start automatically added Judge.me widget{% endcomment %}
{% render 'judgeme_widgets', widget_type: 'judgeme_review_widget', concierge_install: true, product: product %}
{% comment %}End automatically added Judge.me widget{% endcomment %}


{%- comment -%}
--------------------------------------------------------------------------------------------------------------------
FEATURED IMAGE

We allow merchants to use one image as a "featured image" by adding the alt tag "featured"
--------------------------------------------------------------------------------------------------------------------
{%- endcomment -%}

{%- for media in product.media -%}
{%- if media.alt == 'featured' -%}
{%- assign desk_featured_media = media.preview_image -%}
{%- endif -%}

{%- if media.alt == 'featured mobile' -%}
{%- assign mobile_featured_media = media.preview_image -%}
{%- endif -%}
{%- endfor -%}

{%- if desk_featured_media or mobile_featured_media -%}
{%- assign mobile_featured_media = mobile_featured_media | default: desk_featured_media -%}
{%- assign desk_featured_media = desk_featured_media | default: mobile_featured_media -%}

<div class="Product__FeatureImageWrapper" style="background: url({{ desk_featured_media | img_url: '1x1', format: 'jpg' }})">
<div class="Product__FeatureImage Product__FeatureImage--{{ section.settings.featured_image_size }} Image--lazyLoad Image--zoomOut hide-no-js" data-expand="-25" data-bgset="{{ mobile_featured_media | img_url: 'x850' }} [(max-width: 640px)] | {{ desk_featured_media | img_url: '1500x' }}"></div>

<noscript>
<div class="Product__FeatureImage Product__FeatureImage--{{ section.settings.featured_image_size }}" style="background-image: url({{ desk_featured_media | img_url: '1500x' }})"></div>
</noscript>
</div>

<style>
#shopify-section-{{ section.id }} + .shopify-section--bordered {
border-top: 0;
}
</style>
{%- else -%}
<style>
/* This is a bit hacky but allows to circumvent the complete independency of section (as next section included in the page does not know anything about this page) */

@media screen and (max-width: 640px) {
#shopify-section-{{ section.id }} + .shopify-section--bordered {
border-top: 0;
}

#shopify-section-{{ section.id }} + .shopify-section--bordered > .Section {
padding-top: 0;
}
}
</style>
{%- endif -%}

{%- comment -%}
--------------------------------------------------------------------------------------------------------------------
PHOTO SWIPE

This is the root container for the zoom functionality. Must not be removed, as order element is important.
--------------------------------------------------------------------------------------------------------------------
{%- endcomment -%}

{%- if section.settings.enable_image_zoom -%}
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
<!-- Background of PhotoSwipe -->
<div class="pswp__bg"></div>

<!-- Slides wrapper with overflow:hidden. -->
<div class="pswp__scroll-wrap">

<!-- Container that holds slides. Do not remove as content is dynamically added -->
<div class="pswp__container">
<div class="pswp__item"></div>
<div class="pswp__item"></div>
<div class="pswp__item"></div>
</div>

<!-- Main UI bar -->
<div class="pswp__ui pswp__ui--hidden">
<button class="pswp__button pswp__button--prev RoundButton" data-animate-left title="{{ 'product.slideshow.previous' | t }}">{% render 'icon' with 'arrow-left' %}</button>
<button class="pswp__button pswp__button--close RoundButton RoundButton--large" data-animate-bottom title="{{ 'product.slideshow.close' | t }}">{% render 'icon' with 'close' %}</button>
<button class="pswp__button pswp__button--next RoundButton" data-animate-right title="{{ 'product.slideshow.next' | t }}">{% render 'icon' with 'arrow-right' %}</button>
</div>
</div>
</div>
{%- endif -%}

{% schema %}
{
"name": "Product page",
"class": "shopify-section--bordered",
"settings": [
{
"type": "checkbox",
"id": "show_share_buttons",
"label": "Show social sharing buttons",
"default": true
},
{
"type": "checkbox",
"id": "show_vendor",
"label": "Show vendor",
"default": true
},
{
"type": "checkbox",
"id": "show_sku",
"label": "Show SKU",
"default": false
},
{
"type": "checkbox",
"id": "show_taxes_included",
"label": "Show price taxes notice",
"default": false
},
{
"type": "checkbox",
"id": "description_below_add_to_cart",
"label": "Description below add to cart",
"default": false
},
{
"type": "select",
"id": "selector_mode",
"label": "Selector type",
"options": [
{
"value": "block",
"label": "Block"
},
{
"value": "dropdown",
"label": "Dropdown"
}
],
"default": "dropdown"
},
{
"type": "checkbox",
"id": "show_color_swatch",
"label": "Show color swatch",
"default": false,
"info": "Some colors appear white? [Learn more](http://support.maestrooo.com/article/80-product-uploading-custom-color-for-color-swatch)."
},
{
"type": "checkbox",
"id": "show_color_carousel",
"label": "Show color carousel",
"info": "A pop-up selector with variant images for choosing colors. Only enables when color swatch is disabled.",
"default": false
},
{
"type": "checkbox",
"id": "show_quantity_selector",
"label": "Show quantity selector",
"default": true
},
{
"type": "checkbox",
"id": "show_inventory_quantity",
"label": "Show inventory quantity",
"info": "Make sure that your inventory is tracked. [Learn more](https://help.shopify.com/manual/products/inventory#set-up-inventory-tracking).",
"default": false
},
{
"type": "range",
"id": "inventory_quantity_threshold",
"label": "Inventory quantity threshold",
"info": "Only show inventory quantity if below threshold. Choose 0 to always show.",
"min": 0,
"max": 50,
"step": 1,
"default": 0
},
{
"type": "checkbox",
"id": "show_price_in_button",
"label": "Show price in add to cart button",
"default": false
},
{
"type": "checkbox",
"id": "show_payment_button",
"label": "Show dynamic checkout button",
"info": "Each customer will see their preferred payment method from those available on your store, such as PayPal or Apple Pay. [Learn more](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
"default": true
},
{
"type": "checkbox",
"id": "show_pickup_availability",
"label": "Show local pickup availability",
"info": "Show customers where they can pick up the product. [Learn more](https://help.shopify.com/en/manual/shipping/setting-up-and-managing-your-shipping/local-methods/loca...)",
"default": false
},
{
"type": "header",
"content": "Media"
},
{
"type": "paragraph",
"content": "Learn more about [media types](https://help.shopify.com/en/manual/products/product-media)"
},
{
"type": "select",
"id": "image_size",
"label": "Size",
"options": [
{
"value": "small",
"label": "Small"
},
{
"value": "medium",
"label": "Medium"
},
{
"value": "large",
"label": "Large"
},
{
"value": "fill",
"label": "Fill screen"
}
],
"default": "large"
},
{
"type": "checkbox",
"id": "stack_images",
"label": "Stack images on desktop",
"default": true
},
{
"type": "checkbox",
"id": "show_thumbnails",
"label": "Show thumbnails on desktop",
"default": true
},
{
"type": "checkbox",
"id": "enable_image_zoom",
"label": "Enable zoom",
"default": true
},
{
"type": "checkbox",
"id": "enable_video_looping",
"label": "Enable video looping",
"default": false
},
{
"type": "header",
"content": "Tabs"
},
{
"type": "page",
"id": "tab_page_1_handle",
"label": "First page"
},
{
"type": "page",
"id": "tab_page_2_handle",
"label": "Second page"
},
{
"type": "paragraph",
"content": "The theme also allows you to add specific tabs for a given product only. [Learn more about this feature](http://support.maestrooo.com/article/83-product-adding-different-tabs-per-product)."
},
{
"type": "header",
"content": "Reviews"
},
{
"type": "paragraph",
"content": "You need to install [Shopify's free Product Reviews](https://apps.shopify.com/product-reviews) app before enabling this option."
},
{
"type": "checkbox",
"id": "reviews_enabled",
"label": "Enable",
"default": false
},
{
"type": "header",
"content": "Featured image"
},
{
"type": "paragraph",
"content": "You can highlight an image after product tabs by adding the ALT tag \"featured\" to a given image. [Learn more](http://support.maestrooo.com/article/152-product-highlight-a-featured-image)."
},
{
"type": "select",
"id": "featured_image_size",
"label": "Section size",
"options": [
{
"value": "small",
"label": "Small"
},
{
"value": "normal",
"label": "Normal"
},
{
"value": "large",
"label": "Large"
}
],
"default": "large"
}
]
}
{% endschema %}

950 Views
0 Likes
Report

Community Blog Articles

b2b-store-_2_.webp
The 9 Questions You Need To Answer When Starting a B2B Store

Starting a B2B store is a big undertaking that requires careful planning and execution. W...

By JasonH Sep 23, 2024
page_thumb_platform Cropped.png
Get ready for peak holiday selling season 2024

By investing 30 minutes of your time, you can unlock the potential for increased sales,...

By Jacqui Sep 11, 2024
03 leaderboard.webp
Highlights | Top Contributors August '24

We appreciate the diverse ways you participate in and engage with the Shopify Communi...

By JasonH Sep 9, 2024
Terms of Service Privacy Policy