Skip to content

Instantly share code, notes, and snippets.

@whistlerbrad
Last active December 18, 2017 21:22
Show Gist options
  • Select an option

  • Save whistlerbrad/6a49d017488910549e37308925cb35d6 to your computer and use it in GitHub Desktop.

Select an option

Save whistlerbrad/6a49d017488910549e37308925cb35d6 to your computer and use it in GitHub Desktop.
Liquid file for 1.6
<!-- /snippets/product-no-price.liquid -->
<div itemscope itemtype="http://schema.org/Product" class="product-page">
<div class="wrapper">
<meta itemprop="url" content="{{ shop.url }}{{ product.url }}">
<meta itemprop="image" content="{{ product.featured_image.src | img_url: 'grande' }}">
<meta itemprop="price" content="{{ product.price | money }}">
{% if settings.product_breadcrumbs %}
{% include 'breadcrumb' %}
{% endif %}
{% assign current_variant = product.selected_variant %}
<div class="grid product-single">
<div class="grid__item large--two-thirds text-center">
<div class="product__slides product-single__photos" id="ProductPhoto">
{% assign featured_image = current_variant.featured_image | default: product.featured_image %}
<div class="product__photo" data-thumb="{{ featured_image.src | img_url: 'small_cropped' }}">
<img src="{{ featured_image | img_url: '1024x1024' }}" alt="{{ image.alt | escape }}" data-image-id="{{ featured_image.id }}" class="productImg">
</div>
{% for image in product.images %}
{% unless image contains featured_image %}
<div class="product__photo{% unless forloop.first == true %} product__photo--additional{% endunless %}" data-thumb="{{ image.src | img_url: 'small_cropped' }}">
<img src="{{ image.src | img_url: '1024x1024' }}" alt="{{ image.alt | escape }}" data-image-id="{{ image.id }}" class="productImg">
</div>
{% endunless %}
{% endfor %}
</div>
<div id="ProductThumbs" class="{% if settings.product_thumb_enable %} product__thumbs--square{% else %} product__thumbs--dot{% endif %}"></div>
</div>
<div class="grid__item large--one-third" id="productInfo">
<div class="text-center">
{% if settings.product_show_vendor and product.vendor %}
<p class="uppercase vendor__link">{{ product.vendor | link_to_vendor }}</p>
{% endif %}
<h1 itemprop="name" class="h2">{{ product.title }}</h1>
{% comment %}
If the product description is over 1000 characters or contains an embed code,
place the description in a full width container below the image and cart button.
{% endcomment %}
{% assign description_position = settings.description_position %}
{% if description_position == 'auto' %}
{% if product.description.size > 1000 or product.description contains 'iframe' %}
{% assign description_position = 'below' %}
{% else %}
{% assign description_position = 'sidebar' %}
{% endif %}
{% endif %}
{% if description_position == 'sidebar' %}
<div class="product-description rte" itemprop="description">
{{ product.description }}
</div>
{% endif %}
</div>
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
{% comment %}
Get first variant, or deep linked one
{% endcomment %}
{% assign variant = product.selected_or_first_available_variant %}
<meta itemprop="priceCurrency" content="{{ shop.currency }}">
<link itemprop="availability" href="http://schema.org/{% if product.available %}InStock{% else %}OutOfStock{% endif %}">
</div>
{% if settings.product_social_enable %}
{% capture link %}{{ shop.url }}{{ product.url }}{% endcapture %}
{% capture title %}{{ product.title | url_param_escape }}{% endcapture %}
<div class="share text-center" data-permalink="{{ link }}">
{% if settings.share_enable_facebook %}
<a target="_blank" href="//www.facebook.com/sharer.php?u={{ link }}" class="share__link">
<span class="icon icon-facebook" aria-hidden="true"></span>
<span class="share__text">{{ 'general.share.facebook' | t }}</span>
</a>
{% endif %}
{% if settings.share_enable_twitter %}
<a target="_blank" href="//twitter.com/share?url={{ link }}&amp;text={{ shareTitle }}" class="share__link">
<span class="icon icon-twitter" aria-hidden="true"></span>
<span class="share__text">{{ 'general.share.twitter' | t }}</span>
</a>
{% endif %}
{% if settings.share_enable_pinterest %}
<a target="_blank" href="http://pinterest.com/pin/create/button/?url={{ link }}&amp;media={{ product.featured_image | product_img_url: '1024x1024' | prepend: 'http:' }}&amp;description={{ shareTitle }}" class="share__link">
<span class="icon icon-pinterest" aria-hidden="true"></span>
<span class="share__text">{{ 'general.share.pinterest' | t }}</span>
</a>
{% endif %}
{% if settings.share_enable_google %}
<a target="_blank" href="//plus.google.com/share?url={{ link }}" class="share__link">
<span class="icon icon-google" aria-hidden="true"></span>
<span class="share__text">{{ 'general.share.google' | t }}</span>
</a>
{% endif %}
</div>
{% endif %}
{% comment %}
If the user is on a collection product page (ie with /collections/collection-handle/products/product-handle)
in the URL, we can show next/previous links to other products in the collection.
{% endcomment %}
{% if collection and settings.product_nav_enable %}
{% if collection.previous_product or collection.next_product %}
<p class="product__arrows">
{% if collection.previous_product %}
{% capture prev_url %}{{ collection.previous_product}}#content{% endcapture %}
<span class="left">
<a href="{{ prev_url }}" class="btn btn--clear btn--small uppercase" rel="prev">
{{ 'products.general.previous_product_html' | t }}
</a>
</span>
{% endif %}
{% if collection.next_product %}
{% capture next_url %}{{ collection.next_product}}#content{% endcapture %}
<span class="right">
<a href="{{ next_url }}" class="btn btn--clear btn--small uppercase" rel="next">
{{ 'products.general.next_product_html' | t }}
</a>
</span>
{% endif %}
</p>
{% endif %}
{% endif %}
</div>
</div>
</div>
</div>
{% if description_position == 'below' %}
<div class="wrapper">
<div class="product-description--below rte" itemprop="description">
{{ product.description }}
</div>
</div>
{% endif %}
<div class="wrapper">
<div id="shopify-product-reviews" data-id="{{product.id}}">{{ product.metafields.spr.reviews }}</div>
</div>
{% if settings.related_products_enable %}
{% include 'product-related-items' %}
{% endif %}
{% comment %}
To take advantage of a callback on the select dropdown, add option_selection.js
and customize the JS in timber.productPage as needed.
Currently, timber.productPage does the following:
- Hides your <select> tag from above
- Breaks out the product variants into separate product options, if more than one exists
- Generates a <select> tag for each product option
- Enables/disables elements based on variant availability
Callback notes:
- Keep the callback available to the global scope (window.selectCallback) so that advanced
addons can override it.
* E.g. multiple currencies http://docs.shopify.com/manual/configuration/store-customization/currencies-and-translations/currencies/how-to-toggle-between-two-currencies
{% endcomment %}
{{ 'option_selection.js' | shopify_asset_url | script_tag }}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment