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');
    }

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

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

Two changes to make in theme.liquid
It will add 'Page 2' etc to the meta description for collection/blog pages, to make those different.
It adds a canonical tag for tag-filtered pages, back to the base collection/blog page.


*** This is the standard meta description code: ***

{% if page_description %}
<meta name="description" content="{{ page_description | escape }}" />
{% endif %}

willbroderick

.clickyboxes {
  margin: 0.4em 0 1em;
  padding: 0;
  
  li {
    display: inline;
    vertical-align: top;
    
    a {
      display: inline-block;

willbroderick

/// Crop and scale images to a specific ratio
$.fn.cropImageToRatio = function(params){
  //params
  var params = $.extend({
    ratio: 4/3,
    wrapper: '<div/>'
  }, params);
  //loop all images
  return $(this).each(function(){
    //only allow init once

willbroderick

{% if settings.show_multiple_currencies %}

{{ "//cdn.shopify.com/s/javascripts/currencies.js" | script_tag }}
{{ "jquery.currencies.min.js" | asset_url | script_tag }}

<script>

{% if settings.currency_format %}
Currency.format = '{{ settings.currency_format }}';
{% endif %}

willbroderick

$(window).on('debouncedresize load', function(){
    $('[data-normheights]').each(function(){
        var $items = $(this).find($(this).data('normheights')),
            childFilter = $(this).data('normheights-inner'),
            tallest = 0,
            lastYOffset = 0,
            row = [];
        $items.each(function(index){
            var $img = $(this).find(childFilter);
            var yOffset = $(this).offset().top;

willbroderick

/*
Stagger an event across a collection of elements. Useful for making the pretties.

Example - for loading in ajax results with a class-based css3 transition, where results are initially hidden with hide():
$('#ajax-results').on('loaded', function(){
  $(this).children('.result').addClass('pre-transition').slideDown(250).staggerEvent(function(el){
    $(el).removeClass('pre-transition');
  }, 150, 250);
});
*/

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