{"id":15691734,"url":"https://github.com/adrien2p/shopify-debut-swatch","last_synced_at":"2025-04-30T03:44:33.096Z","repository":{"id":113647913,"uuid":"321408837","full_name":"adrien2p/shopify-debut-swatch","owner":"adrien2p","description":"Add swatch to debut theme on Shopify easily  in 2020","archived":false,"fork":false,"pushed_at":"2020-12-15T15:36:07.000Z","size":990,"stargazers_count":8,"open_issues_count":0,"forks_count":6,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-30T03:44:29.216Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"Liquid","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/adrien2p.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-12-14T16:34:24.000Z","updated_at":"2023-11-06T04:49:58.000Z","dependencies_parsed_at":null,"dependency_job_id":"a367f0cb-b935-4784-ae8a-3a8bad8ddc41","html_url":"https://github.com/adrien2p/shopify-debut-swatch","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adrien2p%2Fshopify-debut-swatch","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adrien2p%2Fshopify-debut-swatch/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adrien2p%2Fshopify-debut-swatch/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adrien2p%2Fshopify-debut-swatch/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/adrien2p","download_url":"https://codeload.github.com/adrien2p/shopify-debut-swatch/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251638750,"owners_count":21619661,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-03T18:24:03.258Z","updated_at":"2025-04-30T03:44:33.070Z","avatar_url":"https://github.com/adrien2p.png","language":"Liquid","funding_links":[],"categories":[],"sub_categories":[],"readme":"# shopify-debut-swatch\n\n\u003cp align=\"center\"\u003e\n  \u003cimg width=\"460\" height=\"300\" src=\"swatch-result.gif\" alt=\"shopify-debut-swatch GIF\"\u003e\n\u003c/p\u003e\n\nI did that repository because there is only poor and outaded documentation about that subject.\nThe purpose of that repo is to help anybody to add `swatch` for color, size, etc... to his own `debut` theme on Shopify.\n\nHere are the steps I did to be able to have the `swatch` working properly.\n\n### Step 1: Create a new snippet\n\n- Go to Shopify\n- Click `Online store`\n- On your current theme click on `Actions`\n- Click on `Edit code`\n\n\u003e Here you are in the edit code section and you have access to all the code available for your theme.\n\n- On the left side search for `Snippets`\n- Click on `Add a new snippet`\n- Write `swatch`\n- Press `Enter`\n\n\u003e Once you've done that, you can edit that file and past the code below.\n\n```liquid\n{% if swatch == blank %}\n\u003cdiv class=\"swatch error\"\u003e\n  \u003cp\u003eYou must include the snippet swatch.liquid with the name of a product option.\u003c/p\u003e \n  \u003cp\u003eUse: \u003ccode\u003e{% raw %}{% include 'swatch' with 'name of your product option here' %}{% endraw %}\u003c/code\u003e\u003c/p\u003e\n  \u003cp\u003eExample: \u003ccode\u003e{% raw %}{% include 'swatch' with 'Color' %}{% endraw %}\u003c/code\u003e\u003c/p\u003e\n\u003c/div\u003e\n{% else %}\n\n{% assign found_option = false %}\n{% assign is_color = false %}\n{% assign option_index = 0 %}\n\n{% for option in product.options %}\n  {% if option == swatch %}\n    {% assign found_option = true %}\n    {% assign option_index = forloop.index0 %}\n    \u003cstyle\u003e\n      label[for=\"product-select-option-{{ option_index }}\"] { display: none; }\n      #product-select-option-{{ option_index }} { display: none; }\n      #product-select-option-{{ option_index }} + .custom-style-select-box { display: none !important; }\n    \u003c/style\u003e\n    \u003cscript\u003e$(window).load(function() { $('.selector-wrapper:eq({{ option_index }})').hide(); });\u003c/script\u003e\n    {% assign downcased_option = swatch | downcase %}\n    {% if downcased_option contains 'color' or downcased_option contains 'coulor' %}\n      {% assign is_color = true %}\n    {% endif %}\n  {% endif %}\n{% endfor %}\n\n{% unless found_option %}\n\u003cdiv class=\"swatch error\"\u003e\n  \u003cp\u003eYou included the snippet swatch.liquid with the name of a product option — \u003ccode\u003e'{{ swatch }}'\u003c/code\u003e — that does not belong to your product.\u003c/p\u003e\n  \u003cp\u003eUse \u003ccode\u003e{% raw %}{% include 'swatch' with 'name of your product option here' %}{% endraw %}\u003c/code\u003e\u003c/p\u003e\n  \u003cp\u003eExample: \u003ccode\u003e{% raw %}{% include 'swatch' with 'Color' %}{% endraw %}\u003c/code\u003e\u003c/p\u003e\n  \u003cp\u003e\u003cstrong\u003eThis is case-sensitive!\u003c/strong\u003e Do not put in \u003ccode\u003e'color'\u003c/code\u003e if your product option name is \u003ccode\u003e'Color'\u003c/code\u003e.\u003c/p\u003e\n\u003c/div\u003e\n{% else %}\n\u003cdiv class=\"swatch clearfix\" data-option-index=\"{{ option_index | plus: 1 }}\"\u003e\n  \u003cdiv class=\"header\"\u003e{{ swatch }}\u003c/div\u003e\n  {% assign values = '' %}\n  {% for variant in product.variants %}\n    {% assign value = variant.options[option_index] %}\n    {% unless values contains value %}\n      {% assign values = values | join: ',' %}\n      {% assign values = values | append: ',' | append: value %} \n      {% assign values = values | split: ',' %}\n      \u003cdiv data-value=\"{{ value | escape }}\" class=\"swatch-element {% if is_color %}color {% endif %}{{ value | handle }} {% if variant.available %}available{% else %}soldout{% endif %}\"\u003e\n        \u003cinput class=\"single-option-selector-{{ section.id }}\" data-index=\"option{{ option_index | plus: 1 }}\" 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 %} /\u003e\n        {% if is_color %}\n        \u003clabel for=\"swatch-{{ option_index }}-{{ value | handle }}\" style=\"background-color: {{ value | split: ' - ' | last }};\"\u003e\n          \u003cdiv class=\"crossed-out\"\u003e\u003c/div\u003e\n        \u003c/label\u003e\n        {% else %}\n        \u003clabel for=\"swatch-{{ option_index }}-{{ value | handle }}\"\u003e\n          {{ value }}\n          \u003cdiv class=\"crossed-out\"\u003e\u003c/div\u003e\n        \u003c/label\u003e\n        {% endif %}\n      \u003c/div\u003e\n    {% endunless %}\n    {% if variant.available %}\n    \u003cscript\u003e\n      jQuery('.swatch[data-option-index=\"{{ option_index | plus: 1 }}\"] .{{ value | handle }}').removeClass('soldout').addClass('available').find(':radio').removeAttr('disabled');\n    \u003c/script\u003e\n    {% endif %}\n  {% endfor %}\n\u003c/div\u003e\n\n{% endunless %}\n\n{% endif %}\n```\n\n\u003e I have updated all the code needed to have a `swatch` working nicely.\n\n### Step 2: Update the style\n\n\u003e Once the snippet has been created you will have to set up the appropriate style (of course, you can update it accordingly to your needs).\n\n- On the left side search for `Assets`\n- Click on `Add a new asset`\n- Write `custom`\n- Select `css.liquid`\n- Press `Enter`\n\n\u003e Once you've done that, you can edit that file and past the code below.\n\n```css\n/* SWATCH */\n\n{% assign width = '50px' %}\n{% assign height = '35px' %}\n.swatch { \n  margin:1em 0; \n}\n/* Label */\n.swatch .header {\n  margin: 0.5em 0;\n}\n/* Hide radio buttons.*/\n.swatch input { \n  display:none;\n}\n.swatch label {\n  /* Rounded corners */\n  -webkit-border-radius:50px;\n  -moz-border-radius:50px;\n  border-radius:50px;\n  /* To give width and height */\n  float:left;\n  /* Color swatches contain no text so they need to have a width. */\n  min-width:{{ width }} !important; \n  height:{{ height }} !important;\n  /* No extra spacing between them */\n  margin:0;\n  /* The border when the button is not selected */\n  border:#ccc 1px solid;\n  /* Background color */\n  background-color:#ddd;\n  /* Styling text */\n  font-size:13px;\n  text-align:center;\n  line-height:{{ height }};\n  white-space:nowrap;\n  text-transform:uppercase;\n}\n.swatch-element label { \n  padding:0 10px; \n  width: 3rem !important;\n  height: 3rem !important; \n}\n.color .swatch-element label { \n  padding:0; \n}\n/* Styling selected swatch */\n/* Slightly raised */\n.swatch input[type='radio']:checked + label {\n  -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,0.8);\n  -moz-box-shadow: 0px 0px 10px rgba(0,0,0,0.8);\n  box-shadow: 0px 0px 10px rgba(0,0,0,0.8);\n  border-color: #fff;\n} \n.swatch .swatch-element {\n  float:left;\n  -webkit-transform:translateZ(0); /* webkit flicker fix */\n  -webkit-font-smoothing:antialiased; /* webkit text rendering fix */\n  /* Spacing between buttons */\n  margin:0px 10px 10px 0;\n  /* To position the sold out graphic and tooltip */\n  position:relative;\n}\n/* Image with the cross in it */\n.crossed-out { position:absolute; width:100%; height:100%; left:0; top:0; }\n.swatch .swatch-element .crossed-out { display:none; }\n.swatch .swatch-element.soldout .crossed-out { display:block; }\n.swatch .swatch-element.soldout label {\n  filter: alpha(opacity=60); /* internet explorer */\n  -khtml-opacity: 0.6;      /* khtml, old safari */\n  -moz-opacity: 0.6;       /* mozilla, netscape */\n  opacity: 0.6;           /* fx, safari, opera */\n}\n/* Tooltips */\n.swatch .tooltip {\n  text-align:center;\n  background:gray;\n  color:#fff;\n  bottom:100%;\n  padding: 10px;\n  display:block;\n  position:absolute;\n  width:100px;\n  left:{{ width | remove: 'px' | to_number | divided_by: 2 | minus: 50 | plus: 2 }}px;\n  margin-bottom:15px;\n  /* Make it invisible by default */\n  filter:alpha(opacity=0);\n  -khtml-opacity: 0;\n  -moz-opacity: 0;\n  opacity:0;\n  visibility:hidden;\n  /* Animations */\n  -webkit-transform: translateY(10px);\n     -moz-transform: translateY(10px);\n      -ms-transform: translateY(10px);\n       -o-transform: translateY(10px);\n          transform: translateY(10px);\n  -webkit-transition: all .25s ease-out;\n     -moz-transition: all .25s ease-out;\n      -ms-transition: all .25s ease-out;\n       -o-transition: all .25s ease-out;\n          transition: all .25s ease-out;\n  -webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);\n     -moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);\n      -ms-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);\n       -o-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);\n          box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);\n  z-index: 10000;\n  -moz-box-sizing:border-box; \n  -webkit-box-sizing:border-box; \n  box-sizing:border-box;\n}\n.swatch .tooltip:before {\n  bottom:-20px;\n  content:\" \";\n  display:block;\n  height:20px;\n  left:0;\n  position:absolute;\n  width:100%;\n}\n/* CSS triangle */\n.swatch .tooltip:after {\n  border-left:solid transparent 10px;\n  border-right:solid transparent 10px;\n  border-top:solid gray 10px;\n  bottom:-10px;\n  content:\" \";\n  height:0;\n  left:50%;\n  margin-left:-13px;\n  position:absolute;\n  width:0;\n}\n.swatch .swatch-element:hover .tooltip {\n  filter:alpha(opacity=100);\n  -khtml-opacity:1;\n  -moz-opacity:1;\n  opacity:1;\n  visibility:visible;\n  -webkit-transform:translateY(0px);\n     -moz-transform:translateY(0px);\n      -ms-transform:translateY(0px);\n       -o-transform:translateY(0px);\n          transform:translateY(0px);\n}\n.swatch.error {\n  background-color:#E8D2D2!important;\n  color:#333!important;\n  padding:1em;\n  border-radius:5px;\n}\n.swatch.error p {\n  margin:0.7em 0;\n}\n.swatch.error p:first-child {\n  margin-top:0;\n}\n.swatch.error p:last-child {\n  margin-bottom:0;\n}\n.swatch.error code {\n  font-family:monospace;\n}\n```\n\n- On the left side search for `theme.liquid`\n- Search for `href=\"{{ 'theme.css' | asset_url }}\"`\n- Add the link to the stylesheet `\u003clink rel=\"stylesheet\" href=\"{{ 'custom.css' | asset_url }}\" type=\"text/css\" media=\"print\" onload=\"this.media='all';\"\u003e`\n\n### Step 3: Update product-template.liquid\n\nNow that you have your snippet and the style, you can update the product-template to add the `swatch` element.\n\n- On the left side search for `product-template.liquid`\n- Search in the document for `unless product.has_only_default_variant`\n\n\u003e Now you can paste the code below to replace the block that you found.\n\n```liquid\n{% unless product.has_only_default_variant %}\n  \u003cdiv class=\"product-form__controls-group\"\u003e\n    {% for option in product.options_with_values %}\n      {% if option.name != 'Color' %}\n        \u003cdiv class=\"selector-wrapper js product-form__item\"\u003e\n            \u003clabel for=\"SingleOptionSelector-{{ forloop.index0 }}\"\u003e\n              {{ option.name }}\n            \u003c/label\u003e\n            \u003cselect class=\"single-option-selector single-option-selector-{{ section.id }} product-form__input\"\n                    id=\"SingleOptionSelector-{{ forloop.index0 }}\"\n                    data-index=\"option{{ forloop.index }}\"\n                    \u003e\n              {% for value in option.values %}\n              \u003coption value=\"{{ value | escape }}\"{% if option.selected_value == value %} selected=\"selected\"{% endif %}\u003e{{ value }}\u003c/option\u003e\n              {% endfor %}\n            \u003c/select\u003e\n        \u003c/div\u003e\n       {% else %}\n       \u003c!-- SWATCHES: uncomment the code above to rollback and remove the code below --\u003e\n         {% include 'swatch' with 'Color' %}\n         \u003c!-- END SWATCHES --\u003e\n      {% endif %}\n    {% endfor %}\n  \u003c/div\u003e\n{% endunless %}\n```\n\n### Step 4: Edit the theme.js\n\n\u003e In order that in your cart-popup the colors are display correctly follow the next steps.\n\n- On the left side search for `theme.js`\n- Search in the document for `_getVariantOptionList: function(variantOptions)`\n- Replace `variantOption.value` with `variantOption.value.split(' - ')[0]`\n\n### Step 5: Edit the cart-template.liquid\n\n\u003e In order that in your cart the colors are display correctly follow the next steps.\n\n- On the left side search for `cart-template.liquid`\n- Search in the document for `product-details__item product-details__item--variant-option`\n- Replace `{{ option.value }}` with `{{ option.value | split: ' - ' | first | handle }}`\n\n### Step 6: update your products\n\n- Go to products\n- Edit a product which contains color variant\n- Edit the color variant such has `{{Text shown to the customer}} - {{your color as string or hex (red or #f00}}`\n\n## Conclusion\n\nNow you should be able to see the `swatch` element on your product page such as the image at the beginning of that readme!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fadrien2p%2Fshopify-debut-swatch","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fadrien2p%2Fshopify-debut-swatch","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fadrien2p%2Fshopify-debut-swatch/lists"}