Super Swatch Breakdown

Dormify Swatch Breakdown

Product Tags

Using product tags structured like data-{key}:{value}. This allows easy splitting and manipulation within liquid templates.

"data--apt:APT"
"data--color:Light Blue"
"data--color:Purple"
"data--sub-category:Decorative Pillows"

PLP Swatches

The general structure for swatches on the PLP looks something like the following..

<div class="swatch-li tooltip swatch-active">
  <span class="tooltiptext">Natural</span>
  <div class="swatch hex-swatch" 
       style="background-color: #ede6d6;"
       data-variant-color="Natural" 
       data-variant-url="/products/cori-knit-pillow-rectangle?variant=39514077066"
       data-product-id="10328857418" 
       data-variant-id="39514077066" 
       data-variant-image="//cdn.shopify.com/s/files/1/1765/3959/products/dormify_thro_cora-knit-with-sequin-pillow-12x20-natural-gold_1_large.jpg?v=1489608384">
    <img src="//cdn.shopify.com/s/files/1/1765/3959/files/natural.png?15681987176840146952" class="swatch-image">
  </div>
</div>

You can see each swatch on the PLP contains the following data- attributes.

"data-variant-color"
"data-variant-url"
"data-variant-id"
"data-variant-image"
"data-product-id"

There is an onClick event that essentially does the following..

onSwatchClick =>
  - Deactivate all swatches
  - Activate newly selected swatch
  - Update main image src
  - Update main image href with link to variant

Swatch Appearance

All swatch colors are set using images with a background-color fallback. All swatch images are uploaded using the file uploader in the settings panel. They are all named specifically to match the colors used in the product variants (i.e. purple.png, silver.png).

I'm assuming they just get included in the liquid template in someway similar to this. If the image doesn't exist, nothing gets output and we see the swatch get styled via the background-color.

{% for color in all_colors %}
  <div class="swatch" style="background-color: {{ color }}">
    {{ color | append: '.png' | file_url | img_tag }}
  </div>
{% endfor %}

PDP Swatches

Don't work correctly. Clicking the swatch shows the associated variant image but that image isn't a thumb in the main gallery. Things get a little broken, the hover zoom image doesn't get updated.

Parachute Swatch Breakdown

Product Tags

Using product tags structured like {key}-{value}. Keys must be hard coded in the templates because there is no "key" or "data" prefix to split on.

Some examples of tags are

"bedding-set"
"details-striped-linen"
"material-striped-linen"
"size-guide-duvet-cover"
"why-bedding"

The hard coded keys in this case would be "details", "materials", "size-guide", and "why". Splitting the tags on these keys would give you values like "striped-linen" and "duvet-cover" that you can use to pull in snippets or selectively show elements on the page.

PLP Swatches

The general structure for swatches on the PLP looks something like this

<div class="product-box" data-category="{{ category (i.e. 'striped') }}" data-materials="{{ material (i.e. 'material-striped') }}" data-colors>
  <!-- Images and text up here -->
  <div class="product-colors">
    <ul>
      <li class="option" data-option-title data-variant-url="{{ url }}" data-variant-img="{{ src }}">
        <span class="color granite-with-ivory material-striped-linen" data-color="granite-with-ivory"></span>  
      </li>
      <!-- More swatches here -->
    </ul>
  </div>
</div>

Check if the product has an option called "Color", loop through all the variants and get all the variants with unique colors (meaning, if you had 3 different colored shirts in S-M-L, you would end up pulling the 3 small shirts in different colors). Loop through all images and check if they have associated variants that match. Use the variant url and image to build the swatches.

There is an onClick that essentially does the following..

onSwatchClick => 
  - Remove selected class from option swatches
  - Add selected class to newly selected swatch
  - Update main image with variant image url
  - Update the main image url to point to the variant

Swatch Appearance

All swatch colors and images are hardcoded into the css. There is a set of rules for styling different swatch colors just using hex color codes and another set of rules for styling all "material" swatches using background images. These are all pngs stored in the theme asset folder. They don't have to figure out a way to do this dynamically because they have a very limited number of products colors and material options. When they want to add a new color or material, they have to add it to the CSS.

.color {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 1px solid #f2f2f2;
    border-radius: 3px;
}

.color.white {
    background-color: #fff
}

.color.white.material-percale {
    background-image: url("//cdn.shopify.com/s/files/1/0396/8269/t/912/assets/percale-white.png?5908988663676582384")
}

.color.white.material-sateen {
    background-image: url("//cdn.shopify.com/s/files/1/0396/8269/t/912/assets/sateen-white.png?5908988663676582384")
}

.color.white.material-percale-linen {
    background-image: url("//cdn.shopify.com/s/files/1/0396/8269/t/912/assets/quilt-white.png?5908988663676582384")
}

.color.white.material-linen {
    background-image: url("//cdn.shopify.com/s/files/1/0396/8269/t/912/assets/linen-white.png?5908988663676582384")
}

PLP Filtering

All filtering is done on the client, there is no server interaction. This is only possible because of their limited number of products. They only have ~40 products so they'll never have issues with pagination. Their filtering uses a query parameter called filters which has no server side effect when submitting the URL. The site returns the collection as normal, and then when the filters get initialized, the javascript looks at the url and sets the proper filters accordingly.

As an example, the filter row html looks like..

<li id="color-dark-grey" class="filter">
  <label>
    <input class="checkbox" type="checkbox" value="color-dark-grey">
    <span>Dark Grey</span>
   </label>
</li>

There is an onChange event for checkbox that does the following..

onCheckBoxChange =>
  - Get the color from the checkbox by pulling off the `color-` prefix
  - Use a series of if / else statements to click all swatches that are an exact or close match to the color.  This check is hard coded.
  - Update the URL using history.replaceState ( ../collections/all??filters={{ material }}+{{ color }} )
  - Misc. UI updates

Here's a small piece of what the if / else statements look like. You can see they have to hard code colors whatever colors they want to match the filterable colors.

var g = $(".colors-filter .checkbox:checked").val().replace("color-", "");

if("tan" == g) {
    $(".options").find(".sand").click(),
    $(".options").find(".oatmeal").click(),
    $(".options").find(".almond").click(),
    $(".options").find(".heather-tan").click(),
    $(".options").find(".dune").click(),
    $(".options").find(".toast").click()
}
else if("pink" == g) {
    $(".options").find(".blush").click()
}
else if("light-blue" == g) {
    $(".options").find(".powder").click(),
    $(".options").find(".surf").click(),
    $(".options").find(".denim").click()
}
else if("dark-blue" == g) {
    $(".options").find(".navy").click(),
    $(".options").find(".indigo").click()
}

New Color Badge

Loop through each product box, see if it has a class like new-color-{{ color }}. If it does, pop the {{ color }} part off and use that to select the corresponding swatch. We want to show the a new color over an old color automatically.

PDP Swatches and Galleries

PDP has a default gallery with all of the product images included in it. It also has a hidden list of galleries, one for each variant. These galleries are hidden / shown based on the selected swatch.

How does it build these variant galleries? Loop through all the product images and see if the file name matches the variant option value? Somewhat of a mystery..