willbroderick

{% 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 = '' %}

willbroderick

/*
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]" />

willbroderick

/* Take an image, or any other element with height/width attrs (e.g. iframe) and stretch it to fill parent
 * MIT license
 *
 * Dependencies:
 * imagesLoaded: https://github.com/desandro/imagesloaded
 *
 * Usage examples:
 * $('.fillcontainer img.main').willFillParent({ closest: '.fillcontainer', windowEvent: 'debouncedresize load' });
 * $('.video-bg > .video').willFillParent({ windowEvent: 'resize' });
 *

willbroderick

If you use a checkout logo, and want to use that as your Twitter card image on the home page,
add the following code at the very bottom of the twitter-card snippet:


{% if template == 'index' and settings.checkout_logo_image != blank %}
<meta property="twitter:image" content="https:{{ settings.checkout_logo_image | img_url: '600x600' }}">
{% endif %}

willbroderick

/*
* This will turn "I eat lots of poached eggs" into "I eat lots of poached eggs"
*
* So this:
*   | I eat lots of poached  |
*   | eggs
*
* Becomes:
*   | I eat lots of          |
*   | poached eggs           |

willbroderick

@media only screen and (max-width: 767px) {
#content .productlist .product { width: 48%; }
#content .productlist .product:nth-child(2n+1) { margin-left: 4%; }
#page-collection #content .productlist .product:nth-child(2n) { margin-left: 4%; }
#page-collection #content .productlist .product:nth-child(2n+1) { margin-left: 0; }
#content .productlist .product .foot .buttoncont, #content .productdetail .buttoncont { max-width: 100%; }
}

willbroderick

// copy this to the very bottom of themes.js.liquid (might need to change the '.rte' depending on theme - this one's for Showcase)

$('.rte table').wrap('<div style="overflow: auto; border: 1px solid rgba(0,0,0,0.0.5)">');

willbroderick

/// Bump-down a div to fit (position:fixed style) inside a browser
$(function(){
  if($('.bump-me-down').length > 0) {
    $(window).on('scroll process-bump-me-downs resize', function(){
      var scrollTop = $(window).scrollTop();
      var defaultPad = 20;
      $('.bump-me-down').each(function(){
        var thisOffset = $(this).offset().top;
        if($(this).data('bumpOffset')) {
          thisOffset -= $(this).data('bumpOffset');

willbroderick

{% comment %}##  Add this snippet, then replace {{ product | json }} with {% include 'product-json' %}  ##{% endcomment %}
{% capture product_json %}{{ product | json }}{% endcapture %}
{% assign product_json_split = product_json | split: '"inventory_quantity":' %}
{%- for str in product_json_split -%}
{%- if forloop.first -%}{{ str }}
{%- else -%}
"inventory_quantity":
{%- assign str_split = str | split: ',' -%}
{%- for str2 in str_split -%}
{%- unless forloop.first -%},{%- endunless -%}

willbroderick

// copy this to the very bottom of Assets/theme.js.liquid, below everything else in there

$(document).on('optionate', 'select[name="id"]', function(){
  var $this = $(this);
  setTimeout(function(){
    if(!$this.closest('.product-detail').find('.option-selectors select option[value=""]').length) {
      $this.closest('.product-detail').find('.option-selectors select').prepend('<option value="">Choose...</option>').val('').trigger('change');
      $this.closest('.product-detail').find('.price-area').html('&nbsp;');
      $this.closest('.product-detail').find('.gallery .thumbnails a:first').trigger('click');
    }