shopifypartners

<img class="slideshow__image slideshow__image--{{ block.id }} lazyload"
  src="{{ block.settings.image | img_url: '300x' }}"
  data-src="{{ img_url }}"
  data-widths="[540, 720, 900, 1080, 1296, 1512, 1728, 1944, 2048]"
  data-aspectratio="{{ block.settings.image.aspect_ratio }}"
  data-sizes="auto"
  data-parent-fit="cover"
  alt="{{ block.settings.image.alt | escape }}">

estrattonbailey

{% assign account_page_title = 'Addresses' %}
{% include 'account-titles' %}

{% paginate customer.addresses by 10 %}

<section class="outer mv2 pt1">
  <div class="container--s mha">

    <div class="relative mv1 mb2">
      <button class="new-address button" onclick="barrel.toggleNewForm()">New Address +</button>

estrattonbailey

<div id="{{form_outer_id}}" class="address__form relative w1 {{form_classes}}" style="display: none;">

  {% form 'customer_address', form_action %}

    {% assign form_id = form.id %}
    {% capture form_script %}{% if form_id == 'new' %}barrel.toggleNewForm(event){% else %}barrel.toggleForm(event, {{form_id}}){% endif %}{% endcapture %}
    {% capture form_suffix %}{% if form_id and form_id != 'new' %}_{{form_id}}{% endif %}{% endcapture %}

    {% capture form_city_id %}{% if form_id == 'new' %}AddressCityNew{% else %}AddressCity{% endif %}{% endcapture%}
    {% capture form_country_id %}{% if form_id == 'new' %}AddressCountryNew{% else %}AddressCountry{% endif %}{% endcapture%}

carolineschnapp

What to do

1. Use the alt text to associate the additional images - besides the variant image - to the option value. Example: say you have 3 images that show the Blue variants, then a) associate the first image as variant image to all Blue variants, and b) set the alt text of the 2 additional images to 'Blue'.
2. Copy+paste the code found in the product.liquid snippet below at the bottom of your product.liquid template.

How that works, essentially

Only the images associated to the currently selected variant are shown. Other images are hidden.

What to expect, the specifics

zacwasielewski

// Adapted from the super-awesome technique described here:
// http://www.acusti.ca/blog/2014/11/28/towards-a-more-perfect-link-underline/

@mixin custom-underline($color, $underline-color, $hover-color, $hover-underline-color, $bg-color) {
  color: $color;
  text-decoration: none;
  // Underline via gradient background
  background-image: linear-gradient($underline-color 0%, $underline-color 100%);
  background-repeat: repeat-x;
  background-size: 1px 1px;

zacwasielewski

{% comment %}
Shopify responsive product images with srcset.

Example:

  Include this snippet on a product page or within a products loop:

  {% include 'product-image-srcset',
    sizes: '(max-width: 640px) 50vw, (min-width: 641px) and (max-width: 960px) 33vw, 25vw' %}

yratof

<?php 
	/* Pull apart OEmbed video link to get thumbnails out*/
	function get_video_thumbnail_uri( $video_uri ) {
	
		$thumbnail_uri = '';
		
		// determine the type of video and the video id
		$video = parse_video_uri( $video_uri );		
		
		// get youtube thumbnail

jasonbyrne

/**
 * Imperavi Redactor Plugin for Embedding Tweets
 * for version >= 9.1
 *
 * https://gist.github.com/jasonbyrne/6e96a907c781e90e0dbf
 *
 * @author Jason Byrne <jason.byrne@flocasts.com>
 * @version 0.5.1
 *
 * @forked https://gist.github.com/chekalskiy/7438084

gregrickaby

/**
 * Be sure to include library scripts in this order. Can be placed either
 * in the header or footer.
 */
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-infinitescroll/2.0b2.120519/jquery.infinitescroll.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/masonry/3.1.2/masonry.pkgd.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/3.0.4/jquery.imagesloaded.min.js"></script>

js62789

<!-- For iPad with high-resolution Retina display running iOS ≥ 7: -->
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="apple-touch-icon-152x152-precomposed.png">
<!-- For iPad with high-resolution Retina display running iOS ≤ 6: -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="apple-touch-icon-144x144-precomposed.png">
<!-- For iPhone with high-resolution Retina display running iOS ≥ 7: -->
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="apple-touch-icon-120x120-precomposed.png">
<!-- For iPhone with high-resolution Retina display running iOS ≤ 6: -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-icon-114x114-precomposed.png">
<!-- For the iPad mini and the first- and second-generation iPad on iOS ≥ 7: -->
<link rel="apple-touch-icon-precomposed" sizes="76x76" href="apple-touch-icon-76x76-precomposed.png">