- Go to your Shopify
admin/settings/filespage - Open your browser Dev tools, go to the console
Then, depending on the option you choose:
- Make sure your browser is set to download files automatically and doesn't ask for the download location every time
admin/settings/files pageThen, depending on the option you choose:
| <section class="slider"> | |
| <div class="flexslider"> | |
| <ul class="slides"> | |
| <li><img src="http://imgur.com/..." alt=""></li> | |
| <li><img class="lazy" data-src="http://imgur.com/..." alt=""></li> | |
| <li><img class="lazy" data-src="http://imgur.com/..." alt=""></li> | |
| <li><img class="lazy" data-src="http://imgur.com/..." alt=""></li> | |
| <li><img class="lazy" data-src="http://imgur.com/..." alt=""></li> | |
| </ul> | |
| </div> |
| /** | |
| * A mixin which helps you to add depth to elements according to the Google Material Design spec: | |
| * http://www.google.com/design/spec/layout/layout-principles.html#layout-principles-dimensionality | |
| * | |
| * Please note that the values given in the specification cannot be used as is. To create the same visual experience | |
| * the blur parameter has to be doubled. | |
| * | |
| * Author: Florian Kutschera (@gefangenimnetz), Conceptboard GmbH (@conceptboardapp) | |
| * | |
| * Example usage: |
| /* | |
| Fill an HTML template with a Shopify product | |
| MIT license. | |
| Example use: | |
| <span class="prev" data-fill-with-product="{{ collection.previous_product | split: '/' | last }}"> | |
| <script type="text/template"> | |
| <a href="{{ collection.previous_product }}" title="[encode:title]"> | |
| <span class="title">[title]</span> | |
| <img src="[img:600x]" /> |
| <script> | |
| Shopify.queryParams = {}; | |
| if (location.search.length) { | |
| for (var aKeyValue, i = 0, aCouples = location.search.substr(1).split('&'); i < aCouples.length; i++) { | |
| aKeyValue = aCouples[i].split('='); | |
| if (aKeyValue.length > 1) { | |
| Shopify.queryParams[decodeURIComponent(aKeyValue[0])] = decodeURIComponent(aKeyValue[1]); | |
| } | |
| } | |
| } |
| <div> | |
| <label for="sort-by">Sort by</label> | |
| <select id="sort-by"> | |
| <option value="manual">Featured</option> | |
| <option value="price-ascending">Price: Low to High</option> | |
| <option value="price-descending">Price: High to Low</option> | |
| <option value="title-ascending">A-Z</option> | |
| <option value="title-descending">Z-A</option> | |
| <option value="created-ascending">Oldest to Newest</option> | |
| <option value="created-descending">Newest to Oldest</option> |
| ////////////////////////////////////////////////////////////// | |
| // Font Variables (http://cssfontstack.com/) | |
| ////////////////////////////////////////////////////////////// | |
| // | |
| // Serif font-stacks | |
| // | |
| $baskerville-font-stack: "Big Caslon", "Book Antiqua", "Palatino Linotype", Georgia, serif !default; |
| {% comment %} | |
| Use: | |
| {% include 'split_images_from_content' with collection.description %} | |
| <div class="header">{{ split_images }}</div> | |
| <div class="description">{{ split_content }}</div> | |
| {% endcomment %} | |
| {% assign num_to_split = 1 %} | |
| {% assign split_content = split_images_from_content %} | |
| {% assign split_images = '' %} |
| {% if template contains 'collection' and collection.all_tags.size > 1 %} | |
| <!-- A recursive loop to catch and filter out the different tag categories --> | |
| {% assign c = 0 %} | |
| {% for t in collection.all_tags %} | |
| {% capture cat %}{{ cat }}{% capture temp_cat %}{% if t contains '_' %}{% assign cat_grp = t | split: '_' %}{{ cat_grp.first }}{% endif %}{% endcapture %}{% unless cat contains temp_cat %}{% if t contains '_' %}{% assign new_cat_grp = t | split: '_' %}{{ new_cat_grp.first }}{% endif %}{% unless forloop.last %}+{% endunless %}{% assign c = c | plus: 1 %}{% endunless %}{% endcapture %} | |
| {% endfor %} | |
| <!-- create array of tag categories --> | |
| {% assign cat_array = cat | split: '+' %} |