Yoolk Liquid

Home Theme-templates Products-show

products/show.liquid

The products/show.liquid template is used to render the product details information. You can access to the current product by invoking {{ product }}.

product detail

Discount Badge

The discount badge will display inside product box when its have discount.

<div class="product-box ecommerce-discount-tip">
  {{ product.discount_in_percentage | discount_badge: 'waterdrop' }}
  <!--product image here -->
  </div>

Note: There are three styles to apply discount bage [circle, waterdrop, rectangle] circle is the default one.

Add Product to Cart

Make sure Shopping Cart JavaScript/StyleSheet Libraries have been applied see here.

{% if product.add_to_cart? %}
<div class="js-shopping-cart">
<div class="add-to-cart-wrapper clearfix">
  <div class="css-class">
    <input id="js-item-qty" type="text" name="quantity" class="form-control" value="1">
    <div class="input-group-btn-vertical">
      <button class="btn btn-default js-item-qty-up" type="button">
        <i class="fa fa-angle-up"></i>
      </button>
      <button class="btn btn-default js-item-qty-down" type="button">
        <i class="fa fa-angle-down"></i>
      </button>
    </div>
  </div>
  <a href="javascript:void(0)" class="btn btn-color js-add-to-cart" data-product-id='{{product.id}}'>
    {{ 'theme-name.ecommerce.add_to_cart' | translate }}
  </a>
  <div id="add-to-cart-errors" class="cart-errors text-danger"></div>
</div>
</div>
{% endif %}

Apply Image Fly to Cart Effect

Add js-image-fly-to-cart class to the big image.

<div class="js-shopping-cart">
<img src="{{ image | attachment_url: 'large' }}" class="js-image-fly-to-cart" alt="{{ product.name }}" />
</div>

Apply Social Share

<div class="social-share">
  {% addthis_share %}
    {% facebook %}
    {% twitter %}
    {% g_plus %}
    {% pinterest %}
  {% endaddthis_share %}
</div>

Add {{ '//s7.addthis.com/js/300/addthis_widget.js' | javascript_include_tag }} at to bottom of the page

Requirements for the Theme

If you’re looking to submit your theme to the Yoolk Theme, the products/show.liquid template of your theme must meet the following conditions: