{"id":2753,"date":"2019-06-18T16:01:50","date_gmt":"2019-06-18T16:01:50","guid":{"rendered":"https:\/\/croissant.huysmans.me\/?post_type=manual_documentation&p=2753"},"modified":"2019-06-18T16:03:08","modified_gmt":"2019-06-18T16:03:08","slug":"product-variant-swatches","status":"publish","type":"manual_documentation","link":"https:\/\/croissant.huysmans.me\/fr\/documentation\/shop\/product-variant-swatches\/","title":{"rendered":"Product variant swatches"},"content":{"rendered":"

If you use product variants in your shop, you can optionally decide to display the variants in 3 different ways.\u00a0Please note that these optinal variant options will only be displayed if a product has a single variant type (ex: color). If your product has more than 1 (ex: Size + Color), the default variant dropdown will be displayed.<\/strong><\/p>\n

\n
\n

Default<\/h4>\n

\"\"<\/div>\n

\n

Squares<\/h4>\n

\"\"<\/div>\n<\/div>\n

\n
\n

Coloured circle<\/h4>\n

\"\"<\/div>\n

\n

Image circle<\/h4>\n

\"\"<\/div>\n<\/div>\n

    \n
  1. To get started, enable the “Show variant picker (square, color or image)” theme option.<\/li>\n
  2. Then select if you want to show the custom variant picker on all products by default, or if you want enable it for certain products only.\n
      \n
    • Show variant picker by default on all products<\/strong>If you select this option, the square variant picker will be displayed by default on\u00a0ALL products<\/strong>\u00a0as long as there is not more than 1 type of product variant. If you want to\u00a0disable<\/strong>\u00a0the variant picker for a specific product, type in “disabled<\/strong>” in the Data 03 field of the product. To enable the Data 01, Data 02 and Data 03 field, please visit\u00a0backoffice > Settings > Workflow<\/strong>\u00a0and enable “custom template data” option. Once that is enabled, a new set of field will be added at the bottom of your products forms.
      \nYou can also\u00a0replace<\/strong>\u00a0the main size guide by another one by following the steps in the section below.<\/p>\n

      If you want to enable the\u00a0coloured circle<\/strong>\u00a0or the\u00a0image circle<\/strong>, please refer to the section below<\/li>\n

    • On specific products<\/strong>Select this option if you do not want to display the variant picker on all product pages by default, but want to enable it on specific products. To\u00a0show<\/strong>\u00a0the square variant picker for a specific product, type in “enabled<\/strong>” in the Data 03 field of the product page.\n

      If you want to enable the\u00a0coloured circle<\/strong>\u00a0or the\u00a0image circle<\/strong>, please refer to the section below<\/li>\n

    • Enable the coloured circle<\/strong>To enable the couloured circle, you must manually enter a comma separated list of HEX code (ex: “#de4748”) with the hastag in front of each HEX code. All codes must be in the\u00a0exact same order<\/strong>\u00a0as the variants in the “INVENTORY & VARIANTS” section of your product settings. Here is an example displaying 4 couloured circle: “#164371, #616161, #e5e6ab, #ffffff”.<\/li>\n
    • Enable the image circle<\/strong>To enable the image circle, you must manually enter a comma separated list of image URL extentions (ex: “\/198866666\/texture-metal2.jpg, \/198866660\/texture-metal1.jpg”) with the \/ in front of each URL extentions. To upload an image, go to\u00a0Backoffice > Tools > Files<\/strong>\u00a0and click on “Upload files”. Once the image is uploaded, copy the part of the URL that comes\u00a0AFTER<\/strong>\u00a0“https:\/\/cdn.webshopapp.com\/shops\/STORE_ID\/files…” as seen in the image below:\n

      \"\"We recomment uploading a small square 60px by 60px image. All URLs must be in the\u00a0exact same order<\/strong>\u00a0as the variants in the “INVENTORY & VARIANTS” section of your product settings.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n","protected":false},"author":1,"featured_media":0,"parent":1791,"menu_order":0,"template":"","manualdocumentationcategory":[17],"manual_doc_tag":[],"class_list":["post-2753","manual_documentation","type-manual_documentation","status-publish","hentry","manualdocumentationcategory-croissant-documentation"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/croissant.huysmans.me\/fr\/wp-json\/wp\/v2\/manual_documentation\/2753","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/croissant.huysmans.me\/fr\/wp-json\/wp\/v2\/manual_documentation"}],"about":[{"href":"https:\/\/croissant.huysmans.me\/fr\/wp-json\/wp\/v2\/types\/manual_documentation"}],"author":[{"embeddable":true,"href":"https:\/\/croissant.huysmans.me\/fr\/wp-json\/wp\/v2\/users\/1"}],"version-history":[{"count":3,"href":"https:\/\/croissant.huysmans.me\/fr\/wp-json\/wp\/v2\/manual_documentation\/2753\/revisions"}],"predecessor-version":[{"id":2756,"href":"https:\/\/croissant.huysmans.me\/fr\/wp-json\/wp\/v2\/manual_documentation\/2753\/revisions\/2756"}],"up":[{"embeddable":true,"href":"https:\/\/croissant.huysmans.me\/fr\/wp-json\/wp\/v2\/manual_documentation\/1791"}],"wp:attachment":[{"href":"https:\/\/croissant.huysmans.me\/fr\/wp-json\/wp\/v2\/media?parent=2753"}],"wp:term":[{"taxonomy":"manualdocumentationcategory","embeddable":true,"href":"https:\/\/croissant.huysmans.me\/fr\/wp-json\/wp\/v2\/manualdocumentationcategory?post=2753"},{"taxonomy":"manual_doc_tag","embeddable":true,"href":"https:\/\/croissant.huysmans.me\/fr\/wp-json\/wp\/v2\/manual_doc_tag?post=2753"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}