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

bobbygrace

Hello, visitors! If you want an updated version of this styleguide in repo form with tons of real-life examples… check out Trellisheets! https://github.com/trello/trellisheets

---

Trello CSS Guide

“I perfectly understand our CSS. I never have any issues with cascading rules. I never have to use !important or inline styles. Even though somebody else wrote this bit of CSS, I know exactly how it works and how to extend it. Fixes are easy! I have a hard time breaking our CSS. I know exactly where to put new CSS. We use all of our CSS and it’s pretty small overall. When I delete a template, I know the exact corresponding CSS file and I can delete it all at once. Nothing gets left behind.”

You often hear updog saying stuff like this. Who’s updog? Not much, who is up with you?

bc-zz

// Modals - Navi 0.1
// Usage:
//    $.navi()
//    <a href="{fallback_url}" data-modal="{id_of_modal}">Hey! Listen!</a>

jQuery.navi = function(){
  jQuery('[data-modal]').click(function(e){
    e.preventDefault()
    var modal = jQuery('#' + $(this).attr('data-modal'))
    

defunkt

Mustache.tmbundle

1. Download the zip
2. Open the zip
3. Double click Mustache.tmbundle