Product Page — Detail

About this module

A comprehensive Shopify product page block with title, price, variant swatches, quantity selector and an add-to-cart button.

Installation

1. 1

   Open Shopify Admin

   Go to Online Store → Themes.

2. 2

   Edit code

   Click the ellipsis (⋯) next to your theme and choose Edit Code.

3. 3

   Create the section

   In the Sections folder, click Add a new section, name it mh-product-detail, and replace the contents with the Liquid source below.

4. 4

   Save

   Save the file. The section now appears in the Theme Customizer.

5. 5

   Add it to the page

   Open the Theme Customizer, click Add section, search for it and add it where you like.

Usage

1. 1

   Paste the section

   Create `mh-product-detail` under Sections and paste the source.

   {{ 'styles.css' | asset_url | stylesheet_tag }}
   <div class="mh-pd">
     {% if section.settings.show_vendor and product.vendor != blank %}
       <span class="mh-pd-vendor">{{ product.vendor }}</span>
     {% endif %}
     <h1 class="mh-pd-title">{{ product.title }}</h1>
     <div class="mh-pd-price">
       <span class="mh-pd-current">{{ product.price | money }}</span>
       {% if product.compare_at_price > product.price %}<s class="mh-pd-compare">{{ product.compare_at_price | money }}</s>{% endif %}
     </div>
     <div class="mh-pd-desc">{{ product.description | truncatewords: 60 }}</div>
   
     <form action="/cart/add" method="post" class="mh-pd-form" id="AddToCartForm">
       {% for option in product.options_with_values %}
         <label class="mh-pd-label">{{ option.name }}</label>
         <div class="mh-pd-swatches" data-option="{{ forloop.index0 }}">
           {% for value in option.values %}
             <label class="mh-pd-swatch">
               <input type="radio" name="options[{{ option.name }}]" value="{{ value }}" {% if option.selected_value == value %}checked{% endif %} />
               <span>{{ value }}</span>
             </label>
           {% endfor %}
         </div>
       {% endfor %}
   
       {% if section.settings.show_quantity %}
         <label class="mh-pd-label">Quantity</label>
         <div class="mh-pd-qty">
           <button type="button" data-minus>−</button>
           <input type="number" name="quantity" value="1" min="1" />
           <button type="button" data-plus>+</button>
         </div>
       {% endif %}
   
       <input type="hidden" name="id" value="{{ product.selected_or_first_available_variant.id }}" />
       <button type="submit" class="mh-pd-add" {% unless product.available %}disabled{% endunless %}>
         {% if product.available %}{{ section.settings.add_to_cart_label }}{% else %}{{ section.settings.sold_out_label }}{% endif %}
       </button>
     </form>
   </div>
   
   <script>
   var form=document.getElementById('AddToCartForm');
   form.querySelector('[data-plus]')&&form.querySelector('[data-plus]').addEventListener('click',function(){var q=form.querySelector('input[name=quantity]');q.value=+q.value+1;});
   form.querySelector('[data-minus]')&&form.querySelector('[data-minus]').addEventListener('click',function(){var q=form.querySelector('input[name=quantity]');if(+q.value>1)q.value=+q.value-1;});
   </script>
   
   {% schema %}
   {
     "name": "MH Product Detail",
     "tag": "div",
     "settings": [
       { "type": "checkbox", "id": "show_vendor", "label": "Show vendor", "default": false },
       { "type": "checkbox", "id": "show_quantity", "label": "Show quantity", "default": true },
       { "type": "text", "id": "add_to_cart_label", "label": "Add to cart label", "default": "Add to cart" },
       { "type": "text", "id": "sold_out_label", "label": "Sold out label", "default": "Sold out" }
     ],
     "presets": [{ "name": "MH Product Detail", "category": "ModuleHarbor" }]
   }
   {% endschema %}

2. 2

   Configure in the customizer

   Adjust the settings that ship with the section schema.