Skip to content

Instantly share code, notes, and snippets.

@stephsharp
Last active October 24, 2022 03:00
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save stephsharp/7456d4f7386d5607b00f to your computer and use it in GitHub Desktop.
Save stephsharp/7456d4f7386d5607b00f to your computer and use it in GitHub Desktop.
Sample code for Stack Overflow question about using a single colour swatch in a Shopify theme (http://stackoverflow.com/questions/18978460/color-swatch-variant-dropdown-list-for-shopify-products)

This is for a Stack Overflow question about using colour swatches in a Shopify theme. It modifies the code provided in this tutorial on the Shopify wiki to only display one swatch that changes color depending on the selected option.

Related links:

...
{% include 'swatch' %}
...
var selectCallback = function(variant, selector) {
if (variant) {
jQuery('.swatch li span').css("background-color", variant.option2); // or whichever option 'colour' is in your case...
}
...
};
<style>
/* Style the swatch */
.swatch { margin:15px 0; }
.swatch ul { list-style-type:none; margin:0; padding:0; }
.swatch li {
/* Rounded corners */
-webkit-border-radius:2px;
-moz-border-radius:2px;
border-radius:2px;
/* Cross-browser inline-block */
display:-moz-inline-stack;
display:inline-block;
zoom:1;
*display:inline;
/* Content must stretch all the way to borders */
padding:0;
/* Background color */
background-color:#ddd;
/* Spacing between buttons */
margin:0px 5px 10px 0;
/* Fake that those are buttons, i.e. clicky */
cursor:pointer;
/* The border when the button is not selected */
border: #DDD 1px solid !important;
}
/* Styles for the text or color container within the swatch button */
.swatch li span { display:block; margin:5px 10px; }
/* Special styles for color swatches */
/* They don't contain text so they need to have a width and height */
.swatch li.color { width:50px; height:35px; }
/* The container of the image/color must be as big as its container */
.swatch li.color span { width:100%; height:100%; margin:0; }
</style>
<div class="swatch clearfix">
<ul>
<li class="color">
<span></span>
</li>
</ul>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment