├── swatch-lip.liquid
├── swatch.liquid
└── swatch.css.liquid


/swatch-lip.liquid:
--------------------------------------------------------------------------------
 1 | {% comment %}
 2 |   Set the extension of your color files below. Use 'png', 'jpeg', 'jpg' or 'gif'.
 3 | {% endcomment %}
 4 | 
 5 | {% assign file_extension = 'png' %}
 6 | 
 7 | {% if swatch-lip == blank %}
 8 | <p class="swatch error">
 9 |   You must include the snippet swatch-lip.liquid with a list of your colors. 
10 |   Use <tt>{% raw %}{% include 'swatch-lip' with 'comma-separated list of colors' %}{% endraw %}</tt> Example: <tt>{% raw %}{% include 'swatch-lip' with 'Ivory, Hot Pink, Navy Blue, Olive' %}{% endraw %}</tt>.
11 | </p>
12 | {% else %}
13 | 
14 | {% assign all_colors = swatch-lip | split: ',' %}
15 | 
16 | <div class="swatch clearfix">
17 |   <div class="header">Color</div>
18 |   {% assign values = '' %}
19 |   {% for c in all_colors %}
20 |     {% assign color = c | strip %}
21 |     <div data-value="{{ color | escape }}" class="swatch-element color {{ color | handle }}">
22 |       <div class="tooltip">{{ color }}</div>
23 |       <input id="{{ color | handle }}" type="radio" name="properties[Color]" value="{{ color | escape }}"{% if forloop.first %} checked{% endif %} />
24 |       <label for="{{ color | handle }}" style="background-color: {{ color | split: ' ' | last | handle }}; background-image: url({{ color | handle | append: '.' | append: file_extension | asset_url }})"></label>
25 |     </div>
26 |   {% endfor %}
27 | </div>
28 | 
29 | {% endif %}


--------------------------------------------------------------------------------
/swatch.liquid:
--------------------------------------------------------------------------------
 1 | {% comment %}
 2 |   Set the extension of your color files below. Use 'png', 'jpeg', 'jpg' or 'gif'.
 3 | {% endcomment %}
 4 | 
 5 | {% assign file_extension = 'png' %}
 6 | 
 7 | {% if swatch == blank %}
 8 | <div class="swatch error">
 9 |   <p>You must include the snippet swatch.liquid with the name of a product option.</p> 
10 |   <p>Use: <code>{% raw %}{% include 'swatch' with 'name of your product option here' %}{% endraw %}</code></p>
11 |   <p>Example: <code>{% raw %}{% include 'swatch' with 'Color' %}{% endraw %}</code></p>
12 | </div>
13 | {% else %}
14 | 
15 | {% assign found_option = false %}
16 | {% assign is_color = false %}
17 | {% assign option_index = 0 %}
18 | 
19 | {% for option in product.options %}
20 |   {% if option == swatch %}
21 |     {% assign found_option = true %}
22 |     {% assign option_index = forloop.index0 %}
23 |     <style>
24 |       label[for="product-select-option-{{ option_index }}"] { display: none; }
25 |       #product-select-option-{{ option_index }} { display: none; }
26 |       #product-select-option-{{ option_index }} + .custom-style-select-box { display: none !important; }
27 |     </style>
28 |     <script>$(window).load(function() { $('.selector-wrapper:eq({{ option_index }})').hide(); });</script>
29 |     {% assign downcased_option = swatch | downcase %}
30 |     {% if downcased_option contains 'color' or downcased_option contains 'colour' %}
31 |       {% assign is_color = true %}
32 |     {% endif %}
33 |   {% endif %}
34 | {% endfor %}
35 | 
36 | {% unless found_option %}
37 | <div class="swatch error">
38 |   <p>You included the snippet swatch.liquid with the name of a product option — <code>'{{ swatch }}'</code> — that does not belong to your product.</p>
39 |   <p>Use <code>{% raw %}{% include 'swatch' with 'name of your product option here' %}{% endraw %}</code></p>
40 |   <p>Example: <code>{% raw %}{% include 'swatch' with 'Color' %}{% endraw %}</code></p>
41 |   <p><strong>This is case-sensitive!</strong> Do not put in <code>'color'</code> if your product option name is <code>'Color'</code>.</p>
42 | </div>
43 | {% else %}
44 | <div class="swatch clearfix" data-option-index="{{ option_index }}">
45 |   <div class="header">{{ swatch }}</div>
46 |   {% assign values = '' %}
47 |   {% for variant in product.variants %}
48 |     {% assign value = variant.options[option_index] %}
49 |     {% unless values contains value %}
50 |       {% assign values = values | join: ',' %}
51 |       {% assign values = values | append: ',' | append: value %} 
52 |       {% assign values = values | split: ',' %}
53 |       <div data-value="{{ value | escape }}" class="swatch-element {% if is_color %}color {% endif %}{{ value | handle }} {% if variant.available %}available{% else %}soldout{% endif %}">
54 |         {% if is_color %}
55 |         <div class="tooltip">{{ value }}</div>
56 |         {% endif %}
57 |         <input id="swatch-{{ option_index }}-{{ value | handle }}" type="radio" name="option-{{ option_index }}" value="{{ value | escape }}"{% if forloop.first %} checked{% endif %} {% unless variant.available %}disabled{% endunless %} />
58 |         {% if is_color %}
59 |         <label for="swatch-{{ option_index }}-{{ value | handle }}" style="background-color: {{ value | split: ' ' | last | handle }}; background-image: url({{ value | handle | append: '.' | append: file_extension | asset_url }})">
60 |           <img class="crossed-out" src="{{ 'soldout.png' | asset_url }}" />
61 |         </label>
62 |         {% else %}
63 |         <label for="swatch-{{ option_index }}-{{ value | handle }}">
64 |           {{ value }}
65 |           <img class="crossed-out" src="{{ 'soldout.png' | asset_url }}" />
66 |         </label>
67 |         {% endif %}
68 |       </div>
69 |     {% endunless %}
70 |     {% if variant.available %}
71 |     <script>
72 |       jQuery('.swatch[data-option-index="{{ option_index }}"] .{{ value | handle }}').removeClass('soldout').addClass('available').find(':radio').removeAttr('disabled');
73 |     </script>
74 |     {% endif %}
75 |   {% endfor %}
76 | </div>
77 | 
78 | {% endunless %}
79 | 
80 | {% endif %}


--------------------------------------------------------------------------------
/swatch.css.liquid:
--------------------------------------------------------------------------------
  1 | /* 
  2 |    Swatches Styles
  3 | */
  4 | 
  5 | {% assign width = '50px' %}
  6 | {% assign height = '35px' %}
  7 | .swatch { 
  8 |   margin:1em 0; 
  9 | }
 10 | /* Label */
 11 | .swatch .header {
 12 |   margin: 0.5em 0;
 13 | }
 14 | /* Hide radio buttons.*/
 15 | .swatch input { 
 16 |   display:none;
 17 | }
 18 | .swatch label {
 19 |   /* Rounded corners */
 20 |   -webkit-border-radius:2px;
 21 |   -moz-border-radius:2px;
 22 |   border-radius:2px;
 23 |   /* To give width and height */
 24 |   float:left;
 25 |   /* Color swatches contain no text so they need to have a width. */
 26 |   min-width:{{ width }} !important; 
 27 |   height:{{ height }} !important;
 28 |   /* No extra spacing between them */
 29 |   margin:0;
 30 |   /* The border when the button is not selected */
 31 |   border:#ccc 1px solid;
 32 |   /* Background color */
 33 |   background-color:#ddd;
 34 |   /* Styling text */
 35 |   font-size:13px;
 36 |   text-align:center;
 37 |   line-height:{{ height }};
 38 |   white-space:nowrap;
 39 |   text-transform:uppercase;
 40 | }
 41 | .swatch-element label { padding:0 10px; }
 42 | .color.swatch-element label { padding:0; }
 43 | /* Styling selected swatch */
 44 | /* Slightly raised */
 45 | .swatch input:checked + label {
 46 |   -webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.8);
 47 |   -moz-box-shadow:0px 1px 2px rgba(0,0,0,0.8);
 48 |   box-shadow:0px 1px 2px rgba(0,0,0,0.8);
 49 |   border-color:transparent;
 50 | } 
 51 | .swatch .swatch-element {
 52 |   float:left;
 53 |   -webkit-transform:translateZ(0); /* webkit flicker fix */
 54 |   -webkit-font-smoothing:antialiased; /* webkit text rendering fix */
 55 |   /* Spacing between buttons */
 56 |   margin:0px 10px 10px 0;
 57 |   /* To position the sold out graphic and tooltip */
 58 |   position:relative;
 59 | }
 60 | /* Image with the cross in it */
 61 | .crossed-out { position:absolute; width:100%; height:100%; left:0; top:0; }
 62 | .swatch .swatch-element .crossed-out { display:none; }
 63 | .swatch .swatch-element.soldout .crossed-out { display:block; }
 64 | .swatch .swatch-element.soldout label {
 65 |   filter: alpha(opacity=60); /* internet explorer */
 66 |   -khtml-opacity: 0.6;      /* khtml, old safari */
 67 |   -moz-opacity: 0.6;       /* mozilla, netscape */
 68 |   opacity: 0.6;           /* fx, safari, opera */
 69 | }
 70 | /* Tooltips */
 71 | .swatch .tooltip {
 72 |   text-align:center;
 73 |   background:gray;
 74 |   color:#fff;
 75 |   bottom:100%;
 76 |   padding: 10px;
 77 |   display:block;
 78 |   position:absolute;
 79 |   width:100px;
 80 |   left:{{ width | remove: 'px' | to_number | divided_by: 2 | minus: 50 | plus: 2 }}px;
 81 |   margin-bottom:15px;
 82 |   /* Make it invisible by default */
 83 |   filter:alpha(opacity=0);
 84 |   -khtml-opacity: 0;
 85 |   -moz-opacity: 0;
 86 |   opacity:0;
 87 |   visibility:hidden;
 88 |   /* Animations */
 89 |   -webkit-transform: translateY(10px);
 90 |      -moz-transform: translateY(10px);
 91 |       -ms-transform: translateY(10px);
 92 |        -o-transform: translateY(10px);
 93 |           transform: translateY(10px);
 94 |   -webkit-transition: all .25s ease-out;
 95 |      -moz-transition: all .25s ease-out;
 96 |       -ms-transition: all .25s ease-out;
 97 |        -o-transition: all .25s ease-out;
 98 |           transition: all .25s ease-out;
 99 |   -webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
100 |      -moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
101 |       -ms-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
102 |        -o-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
103 |           box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
104 |   z-index: 10000;
105 |   -moz-box-sizing:border-box; 
106 |   -webkit-box-sizing:border-box; 
107 |   box-sizing:border-box;
108 | }
109 | .swatch .tooltip:before {
110 |   bottom:-20px;
111 |   content:" ";
112 |   display:block;
113 |   height:20px;
114 |   left:0;
115 |   position:absolute;
116 |   width:100%;
117 | }
118 | /* CSS triangle */
119 | .swatch .tooltip:after {
120 |   border-left:solid transparent 10px;
121 |   border-right:solid transparent 10px;
122 |   border-top:solid gray 10px;
123 |   bottom:-10px;
124 |   content:" ";
125 |   height:0;
126 |   left:50%;
127 |   margin-left:-13px;
128 |   position:absolute;
129 |   width:0;
130 | }
131 | .swatch .swatch-element:hover .tooltip {
132 |   filter:alpha(opacity=100);
133 |   -khtml-opacity:1;
134 |   -moz-opacity:1;
135 |   opacity:1;
136 |   visibility:visible;
137 |   -webkit-transform:translateY(0px);
138 |      -moz-transform:translateY(0px);
139 |       -ms-transform:translateY(0px);
140 |        -o-transform:translateY(0px);
141 |           transform:translateY(0px);
142 | }
143 | .swatch.error {
144 |   background-color:#E8D2D2!important;
145 |   color:#333!important;
146 |   padding:1em;
147 |   border-radius:5px;
148 | }
149 | .swatch.error p {
150 |   margin:0.7em 0;
151 | }
152 | .swatch.error p:first-child {
153 |   margin-top:0;
154 | }
155 | .swatch.error p:last-child {
156 |   margin-bottom:0;
157 | }
158 | .swatch.error code {
159 |   font-family:monospace;
160 | }


--------------------------------------------------------------------------------