## 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..
```html
<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.
```liquid
{% 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.