API tools faq
paste
Advertisement
Guest User

Product template

a guest
Jul 16th, 2021
79
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 12.84 KB | None | 0 0
raw download clone embed print report
  1. {% comment %}
  2. ** Product - default view **
  3. - Product template
  4. {% endcomment %}
  5.  
  6. {% assign collection_handles = product.collections | map: 'handle' %}
  7. {% assign variant = product.selected_or_first_available_variant %}
  8.  
  9. <section class="product__page mainContentArea">
  10.   <div class="product__container container">
  11.     <div  class="product-{{ product.id }}"
  12.          data-free-text="{{ settings.free_price_text }}"
  13.          data-product-id="{{ product.id }}"
  14.          >
  15.       <div class="section product__section clearfix js-product_section imageAlign--{{ section.settings.product_images_position }} flexContainer sixteen columns">
  16.  
  17.         <div class="product__images">
  18.           <div class="banner_holder bannerPosition--{{ section.settings.product_images_position }}">
  19.             {% if product.available %}
  20.               {% if settings.sale_banner_enabled and product.compare_at_price_max > product.price %}
  21.                 <div class="sale_banner thumbnail_banner">
  22.                   <span class="banner_text">{{ 'collections.general.sale' | t }}</span>
  23.                 </div>
  24.               {% endif %}
  25.             {% endif %}
  26.             {% if collection_handles contains 'new' %}
  27.               <div class="new_banner thumbnail_banner">
  28.                 <span class="banner_text">{{ 'collections.general.new' | t }}</span>
  29.               </div>
  30.             {% endif %}
  31.             {% if collection_handles contains 'pre-order' %}
  32.               <div class="preorder_banner thumbnail_banner">
  33.                 <span class="banner_text">{{ 'collections.general.pre_order' | t }}</span>
  34.               </div>
  35.             {% endif %}
  36.  
  37.           </div>
  38.           {% include 'product-images', set_product_height: section.settings.set_product_height %}
  39.         </div>
  40.  
  41.         <div class="product__details productText">
  42.           {% if section.settings.enable_shopify_product_badges and settings.enable_shopify_review_comments %}
  43.             <div class="product__stars">
  44.               <span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>
  45.             </div>
  46.           {% endif %}
  47.  
  48.           {% if section.settings.display_vendor or section.settings.display_sku %}
  49.             <p class="product__vendor">
  50.               {% if section.settings.display_vendor %}
  51.                 <span class="vendor">{{ product.vendor | link_to_vendor }}</span>
  52.               {% endif %}
  53.               {% if section.settings.display_vendor and section.settings.display_sku and variant.sku != blank %}
  54.               |
  55.               {% endif %}
  56.             </p>
  57.           {% endif %}
  58.  
  59.           {% if variant.sku != blank and section.settings.display_sku %}
  60.             <p class="product__sku">
  61.               <span>{{ variant.sku }}</span>
  62.             </p>
  63.           {% endif %}
  64.  
  65.           {% if section.settings.display_collections and product.collections.size > 0 %}
  66.             <p class="productInfo--collection">
  67.               <span class="label">{{ 'products.product.collections' | t }}:</span>
  68.               <span>
  69.                 {% for col in product.collections %}
  70.                   <a href="{{ col.url }}" title="{{ col.title }}">{{ col.title }}</a>{% unless forloop.last %},{% endunless %}
  71.                 {% endfor %}
  72.               </span>
  73.             </p>
  74.           {% endif %}
  75.  
  76.           <h1 class="product__title">{{ product.title }}</h1>
  77.  
  78.           {% assign product_tags = product.tags | join: ' ' %}
  79.           {% if product_tags contains 'meta-size-chart-' %}
  80.             {% for tag in product.tags %}
  81.               {% if tag contains 'meta-size-chart-' %}
  82.                 <a href="#" class="size_chart" data-featherlight="#size-chart{{ product.id }}">{{ 'products.product.size_chart' | t }} <span class="icon-right-arrow"></span></a>
  83.                 {% include 'popup-size-chart', product_id: product.id %}
  84.               {% endif %}
  85.             {% endfor %}
  86.           {% elsif settings.size_chart != blank %}
  87.             <a href="#" class="size_chart" data-featherlight="#size-chart{{ product.id }}">{{ 'products.product.size_chart' | t }} <span class="icon-right-arrow"></span></a>
  88.             {% include 'popup-size-chart', product_id: product.id %}
  89.           {% endif %}
  90.  
  91.           {% if collection_handles contains 'coming-soon' %}
  92.             <p class="product__price modal_price">{{ 'collections.general.coming_soon' | t }}</p>
  93.           {% else %}
  94.             <p class="product__price modal_price">
  95.               <span itemprop="price" content="{{ variant.price | money_without_currency | remove: "," }}" class="{% if variant.compare_at_price > variant.price %}sale{% endif %}">
  96.                 <span class="current_price {% if product.available == false %}sold_out_price{% endif %}">
  97.                   {% if variant.price > 0 %}
  98.                     <span class="money">{{ variant.price | money }}</span>
  99.                   {% else %}
  100.                     {{ settings.free_price_text }}
  101.                   {% endif %}
  102.                 </span>
  103.               </span>
  104.               <span class="was_price {% if product.available == false %}sold_out_price{% endif %}">
  105.                 {% if variant.price < variant.compare_at_price and variant.available %}
  106.                  <span class="money">{{ variant.compare_at_price | money }}</span>
  107.                 {% endif %}
  108.               </span>
  109.  
  110.               {% if section.settings.display_savings %}
  111.                 <span class="savings {% if product.available == false %}sold_out_price{% endif %}">
  112.                   {% if variant.price < variant.compare_at_price and variant.available %}
  113.                    {{ 'products.product.savings' | t }}  {{ variant.compare_at_price | minus: variant.price | times: 100 | divided_by: variant.compare_at_price }}% (<span class="money">{{ variant.compare_at_price | minus: variant.price | money }}</span>)
  114.                   {% endif %}
  115.                 </span>
  116.               {% endif %}
  117.               <span class="sold_out sold_out_text sale">{% if variant.available == false %} &mdash; {{ 'products.product.sold_out' | t }}{% endif %}</span>
  118.             </p>
  119.           {% endif %}
  120.  
  121.           {% if section.settings.product_form_position == 'bottom' %}
  122.             <div class="description-bottom">
  123.               {% unless collection_handles contains 'coming-soon' %}
  124.                 {% include 'product-form' with 'product' %}
  125.                 {% include 'product-notify-me' %}
  126.               {% endunless %}
  127.             </div>
  128.           {% endif %}
  129.  
  130.           {% if section.settings.product_form_position == 'top' %}
  131.             {% unless collection_handles contains 'coming-soon' %}
  132.               {% include 'product-form' with 'product' %}
  133.               {% include 'product-notify-me' %}
  134.             {% endunless %}
  135.           {% endif %}
  136.  
  137.           <div class="product__social socialShare">
  138.             {% if section.settings.display_social_buttons %}
  139.               <p class="product__socialLabel socialShare__text">{{ 'blogs.article.share_this' | t }}</p>
  140.               {% include "social-buttons" with "product" %}
  141.             {% endif %}
  142.           </div>
  143.         </div>
  144.        
  145.       </div>
  146.     </div>
  147.   </div>
  148.  
  149.  
  150.     <div class="container">
  151.       <div class="sixteen columns">
  152.         <div class="product__description description clearfix">
  153.           {{ product.description }}
  154.         </div>
  155.       </div>
  156.     </div>
  157.  
  158.   {% if section.settings.enable_reviews %}
  159.     {% include 'include-reviews' %}
  160.   {% endif %}
  161.  
  162.  
  163. </section>
  164.  
  165. {% if section.settings.set_product_height %}
  166.   {% style %}
  167.     .gallery-wrap model-viewer {
  168.       min-height: {{ section.settings.product_height }}px;
  169.     }
  170.  
  171.     .gallery-wrap .product_gallery img,
  172.     .gallery-wrap .product_gallery .plyr--html5 video,
  173.     .gallery-wrap .product_gallery .plyr--youtube {
  174.       max-height: {{ section.settings.product_height }}px;
  175.     }
  176.   {% endstyle %}
  177. {% endif %}
  178.  
  179. {% comment %} Shopify-XR {% endcomment %}
  180. {% if product.media %}
  181. <script>
  182.   window.ShopifyXR=window.ShopifyXR||function(){(ShopifyXR.q=ShopifyXR.q||[]).push(arguments)}
  183.     {% assign models = product.media | where: 'media_type', 'model' | json %}
  184.     ShopifyXR('addModels', {{ models }});
  185. </script>
  186. {% endif %}
  187.  
  188.  
  189. {% schema %}
  190. {
  191.   "name": "Product",
  192.   "class": "product-template",
  193.   "settings": [
  194.     {
  195.       "type": "header",
  196.       "content": "Product gallery"
  197.     },
  198.     {
  199.       "type": "checkbox",
  200.       "id": "product_thumbs",
  201.       "label": "Show thumbnails",
  202.       "default": true
  203.     },
  204.     {
  205.       "type": "checkbox",
  206.       "id": "gallery_arrows",
  207.       "label": "Show arrows",
  208.       "default": true
  209.     },
  210.     {
  211.       "type": "checkbox",
  212.       "id": "activate_zoom",
  213.       "label": "Magnify product images on hover",
  214.       "default": false
  215.     },
  216.     {
  217.       "type": "range",
  218.       "id": "slideshow_speed",
  219.       "label": "Gallery speed",
  220.       "min": 0,
  221.       "max": 6,
  222.       "unit": "sec",
  223.       "default": 0,
  224.       "info": "Set to 0 to disable autoplay."
  225.     },
  226.     {
  227.       "type": "select",
  228.       "id": "slideshow_animation",
  229.       "label": "Gallery transition",
  230.       "options": [
  231.         {
  232.           "value": "slide",
  233.           "label": "Slide"
  234.         },
  235.         {
  236.           "value": "fade",
  237.           "label": "Fade"
  238.         }
  239.       ],
  240.       "default": "slide"
  241.     },
  242.     {
  243.       "type": "select",
  244.       "id": "thumbnail_position",
  245.       "label": "Thumbnails",
  246.       "default": "bottom-thumbnails",
  247.       "options": [
  248.         {
  249.           "value": "left-thumbnails",
  250.           "label": "Left"
  251.         },
  252.         {
  253.           "value": "right-thumbnails",
  254.           "label": "Right"
  255.         },
  256.         {
  257.           "value": "bottom-thumbnails",
  258.           "label": "Bottom"
  259.         }
  260.       ]
  261.     },
  262.     {
  263.       "type": "checkbox",
  264.       "id": "enable_thumbnail_slider",
  265.       "label": "Enable thumbnail slider",
  266.       "default": true
  267.     },
  268.     {
  269.       "type": "header",
  270.       "content": "Product information"
  271.     },
  272.     {
  273.       "type": "checkbox",
  274.       "id": "enable_shopify_product_badges",
  275.       "label": "Display star rating on product",
  276.       "info": "Reviews app must be enabled. [Learn more](https://help.outofthesandbox.com/hc/en-us/articles/360008549274#section2)",
  277.       "default": false
  278.     },
  279.     {
  280.       "type": "checkbox",
  281.       "id": "display_collections",
  282.       "label": "Show collections"
  283.     },
  284.     {
  285.       "type": "checkbox",
  286.       "id": "display_vendor",
  287.       "label": "Show vendor"
  288.     },
  289.     {
  290.       "type": "checkbox",
  291.       "id": "display_sku",
  292.       "label": "Show SKU"
  293.     },
  294.     {
  295.       "type": "checkbox",
  296.       "id": "display_savings",
  297.       "label": "Show price savings",
  298.       "default": true
  299.     },
  300.     {
  301.       "type": "radio",
  302.       "id": "product_form_position",
  303.       "label": "Description position",
  304.       "options": [
  305.         {
  306.           "value": "top",
  307.           "label": "Above 'add to cart'"
  308.         },
  309.         {
  310.           "value": "bottom",
  311.           "label": "Below 'add to cart'"
  312.         }
  313.       ]
  314.     },
  315.     {
  316.       "type": "header",
  317.       "content": "Dynamic checkout button"
  318.     },
  319.     {
  320.       "type": "checkbox",
  321.       "id": "show_payment_button",
  322.       "label": "Show dynamic checkout button",
  323.       "default": true,
  324.       "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)"
  325.     },
  326.     {
  327.       "type": "checkbox",
  328.       "id": "display_social_buttons",
  329.       "label": "Show social media share icons",
  330.       "default": true
  331.     },
  332.     {
  333.       "type": "header",
  334.       "content": "Product reviews"
  335.     },
  336.     {
  337.       "type": "checkbox",
  338.       "id": "enable_reviews",
  339.       "label": "Show product reviews",
  340.       "info": "You will need to install the free [Shopify Product Reviews](https://apps.shopify.com/product-reviews) app.",
  341.       "default": true
  342.     },
  343.     {
  344.       "type": "header",
  345.       "content": "Media",
  346.       "info": "Learn more about [media types](https://help.shopify.com/en/manual/products/product-media)"
  347.     },
  348.     {
  349.       "type": "radio",
  350.       "id": "product_images_position",
  351.       "label": "Media position",
  352.       "options": [
  353.         {
  354.           "value": "left",
  355.           "label": "Left"
  356.         },
  357.         {
  358.           "value": "right",
  359.           "label": "Right"
  360.         }
  361.       ]
  362.     },
  363.     {
  364.       "type": "checkbox",
  365.       "id": "set_product_height",
  366.       "label": "Set height of product media",
  367.       "default": false
  368.     },
  369.     {
  370.       "type": "range",
  371.       "id": "product_height",
  372.       "label": "Product media height",
  373.       "min": 200,
  374.       "max": 800,
  375.       "step": 10,
  376.       "default": 500,
  377.       "unit": "px"
  378.     },
  379.     {
  380.       "type": "checkbox",
  381.       "id": "video_looping",
  382.       "label": "Enable video looping",
  383.       "default": false
  384.     }
  385.   ]
  386. }
  387. {% endschema %}
  388.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!