{"id":21247,"date":"2023-10-18T15:26:36","date_gmt":"2023-10-18T09:26:36","guid":{"rendered":"https:\/\/hasthemes.com\/?post_type=docs&#038;p=21247"},"modified":"2024-04-28T14:54:32","modified_gmt":"2024-04-28T08:54:32","password":"","slug":"swatchly-demo-showcase","status":"publish","type":"docs","link":"https:\/\/hasthemes.com\/docs\/swatchly-demo-showcase\/","title":{"rendered":"Swatchly Demo Showcase"},"content":{"rendered":"\n<p>Explore the Swatchly demo showcase to witness the diverse range of swatch configurations and functionalities available for enhancing product variation displays on WooCommerce. This demo provides a hands-on experience, showcasing the different swatch types and their interactive features.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" style=\"font-size:22px\"><strong>Shop Page Demo<\/strong><\/h3>\n\n\n\n<p>Explore Swatchly in action on the shop page, showcasing a variety of swatches to enhance your product listings. Experience an interactive display of product variations for an engaging shopping experience.<\/p>\n\n\n\n<p><strong>Demo Link:<\/strong> <a href=\"https:\/\/theplugindemo.com\/swatchly\/\" target=\"_blank\" rel=\"noopener\"><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-ast-global-color-0-color\">Swatchly Shop Page Demo<\/mark><\/a><\/p>\n\n\n\n<figure class=\"wp-block-image size-full has-custom-border\"><a href=\"https:\/\/hasthemes.com\/wp-content\/uploads\/2023\/10\/Swatchly-Shop-Page-Demo.png\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1232\" height=\"1953\" src=\"https:\/\/hasthemes.com\/wp-content\/uploads\/2023\/10\/Swatchly-Shop-Page-Demo.png\" alt=\"Shop page\" class=\"has-border-color wp-image-21248\" style=\"border-color:#fafafa;border-width:8px;border-radius:8px\" srcset=\"https:\/\/hasthemes.com\/wp-content\/uploads\/2023\/10\/Swatchly-Shop-Page-Demo.png 1232w, https:\/\/hasthemes.com\/wp-content\/uploads\/2023\/10\/Swatchly-Shop-Page-Demo-189x300.png 189w, https:\/\/hasthemes.com\/wp-content\/uploads\/2023\/10\/Swatchly-Shop-Page-Demo-646x1024.png 646w, https:\/\/hasthemes.com\/wp-content\/uploads\/2023\/10\/Swatchly-Shop-Page-Demo-768x1217.png 768w, https:\/\/hasthemes.com\/wp-content\/uploads\/2023\/10\/Swatchly-Shop-Page-Demo-969x1536.png 969w, https:\/\/hasthemes.com\/wp-content\/uploads\/2023\/10\/Swatchly-Shop-Page-Demo-323x512.png 323w\" sizes=\"(max-width: 1232px) 100vw, 1232px\" \/><\/a><\/figure>\n\n\n\n<div style=\"height:25px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" style=\"font-size:22px\"><strong>Single Product \/ Product Details Page Demo<\/strong><\/h3>\n\n\n\n<p>Discover how Swatchly transforms the single product and product details page, presenting an array of swatches to visualize product variations effectively. Navigate through product details effortlessly with intuitive swatches.<\/p>\n\n\n\n<p><strong>Demo Link:<\/strong> <a href=\"https:\/\/theplugindemo.com\/swatchly\/\" target=\"_blank\" rel=\"noopener\"><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-ast-global-color-0-color\"><\/mark><\/a><a href=\"https:\/\/theplugindemo.com\/swatchly\/product\/short-sleeve-classic-plaid-shirt\/\" target=\"_blank\" rel=\"noopener\"><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-ast-global-color-0-color\">Swatchly Single Product Demo<\/mark><\/a><\/p>\n\n\n\n<figure class=\"wp-block-image size-full has-custom-border\"><a href=\"https:\/\/hasthemes.com\/wp-content\/uploads\/2023\/10\/Swatchly-Single-Product-Demo.png\"><img decoding=\"async\" width=\"1226\" height=\"684\" src=\"https:\/\/hasthemes.com\/wp-content\/uploads\/2023\/10\/Swatchly-Single-Product-Demo.png\" alt=\"Single Product \/ Product Details Page Demo\" class=\"has-border-color wp-image-21249\" style=\"border-color:#fafafa;border-width:8px;border-radius:8px\" srcset=\"https:\/\/hasthemes.com\/wp-content\/uploads\/2023\/10\/Swatchly-Single-Product-Demo.png 1226w, https:\/\/hasthemes.com\/wp-content\/uploads\/2023\/10\/Swatchly-Single-Product-Demo-300x167.png 300w, https:\/\/hasthemes.com\/wp-content\/uploads\/2023\/10\/Swatchly-Single-Product-Demo-1024x571.png 1024w, https:\/\/hasthemes.com\/wp-content\/uploads\/2023\/10\/Swatchly-Single-Product-Demo-768x428.png 768w, https:\/\/hasthemes.com\/wp-content\/uploads\/2023\/10\/Swatchly-Single-Product-Demo-360x201.png 360w\" sizes=\"(max-width: 1226px) 100vw, 1226px\" \/><\/a><\/figure>\n\n\n\n<div style=\"height:25px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" style=\"font-size:22px\"><strong>Product Page with Multiple Attributes Demo<\/strong><\/h3>\n\n\n\n<p>Experience the versatility of Swatchly on the product page, showcasing multiple attributes and their respective swatches. Witness seamless navigation through various product variations with clarity and ease.<\/p>\n\n\n\n<p><strong>Demo Link:<\/strong> <a href=\"https:\/\/theplugindemo.com\/swatchly\/\" target=\"_blank\" rel=\"noopener\"><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-ast-global-color-0-color\"><\/mark><\/a><a href=\"https:\/\/theplugindemo.com\/swatchly\/product\/short-sleeve-classic-plaid-shirt\/\" target=\"_blank\" rel=\"noopener\"><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-ast-global-color-0-color\">Swatchly Product Page with Multiple Attributes<\/mark><\/a><\/p>\n\n\n\n<figure class=\"wp-block-image size-full has-custom-border\"><a href=\"https:\/\/hasthemes.com\/wp-content\/uploads\/2023\/10\/Swatchly-Single-Product-Demo.png\"><img decoding=\"async\" width=\"1226\" height=\"684\" src=\"https:\/\/hasthemes.com\/wp-content\/uploads\/2023\/10\/Swatchly-Single-Product-Demo.png\" alt=\"Product Page with Multiple Attributes Demo\" class=\"has-border-color wp-image-21249\" style=\"border-color:#fafafa;border-width:8px;border-radius:8px\" srcset=\"https:\/\/hasthemes.com\/wp-content\/uploads\/2023\/10\/Swatchly-Single-Product-Demo.png 1226w, https:\/\/hasthemes.com\/wp-content\/uploads\/2023\/10\/Swatchly-Single-Product-Demo-300x167.png 300w, https:\/\/hasthemes.com\/wp-content\/uploads\/2023\/10\/Swatchly-Single-Product-Demo-1024x571.png 1024w, https:\/\/hasthemes.com\/wp-content\/uploads\/2023\/10\/Swatchly-Single-Product-Demo-768x428.png 768w, https:\/\/hasthemes.com\/wp-content\/uploads\/2023\/10\/Swatchly-Single-Product-Demo-360x201.png 360w\" sizes=\"(max-width: 1226px) 100vw, 1226px\" \/><\/a><\/figure>\n\n\n\n<div style=\"height:25px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" style=\"font-size:22px\"><strong><strong><strong>Image Swatches Demo<\/strong><\/strong><\/strong><\/h3>\n\n\n\n<p>Immerse yourself in the image swatches demo by Swatchly, offering a visually appealing representation of product variations. See how images enhance the selection process for a captivating shopping journey.<\/p>\n\n\n\n<p><strong>Demo Link:<\/strong> <a href=\"https:\/\/theplugindemo.com\/swatchly\/product\/premium-jeans\/\" target=\"_blank\" rel=\"noopener\"><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-ast-global-color-0-color\"><\/mark><\/a><a href=\"https:\/\/theplugindemo.com\/swatchly\/product\/mens-classic-fit-9-short\/\" target=\"_blank\" rel=\"noopener\"><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-ast-global-color-0-color\">Swatchly Image Swatches Demo<\/mark><\/a><\/p>\n\n\n\n<figure class=\"wp-block-image size-large has-custom-border\"><a href=\"https:\/\/hasthemes.com\/wp-content\/uploads\/2023\/10\/Swatchly-Image-Swatches-Demo.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"560\" src=\"https:\/\/hasthemes.com\/wp-content\/uploads\/2023\/10\/Swatchly-Image-Swatches-Demo-1024x560.png\" alt=\"Image Swatches Demo\" class=\"has-border-color wp-image-21251\" style=\"border-color:#fafafa;border-width:8px;border-radius:8px\" srcset=\"https:\/\/hasthemes.com\/wp-content\/uploads\/2023\/10\/Swatchly-Image-Swatches-Demo-1024x560.png 1024w, https:\/\/hasthemes.com\/wp-content\/uploads\/2023\/10\/Swatchly-Image-Swatches-Demo-300x164.png 300w, https:\/\/hasthemes.com\/wp-content\/uploads\/2023\/10\/Swatchly-Image-Swatches-Demo-768x420.png 768w, https:\/\/hasthemes.com\/wp-content\/uploads\/2023\/10\/Swatchly-Image-Swatches-Demo-360x197.png 360w, https:\/\/hasthemes.com\/wp-content\/uploads\/2023\/10\/Swatchly-Image-Swatches-Demo.png 1226w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<div style=\"height:25px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" style=\"font-size:22px\"><strong>Label Swatches Demo<\/strong><\/h3>\n\n\n\n<p>Dive into the label swatches demo with Swatchly, showcasing a sleek and organized way to present product variations. Explore how labels enhance the aesthetic and navigation of product options.<\/p>\n\n\n\n<p><strong>Demo Link:<\/strong> <a href=\"https:\/\/theplugindemo.com\/swatchly\/product\/premium-jeans\/\" target=\"_blank\" rel=\"noopener\"><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-ast-global-color-0-color\">Swatchly Label Swatches Demo<\/mark><\/a><\/p>\n\n\n\n<figure class=\"wp-block-image size-full has-custom-border\"><a href=\"https:\/\/hasthemes.com\/wp-content\/uploads\/2023\/10\/Label-Swatches-Demo.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1228\" height=\"667\" src=\"https:\/\/hasthemes.com\/wp-content\/uploads\/2023\/10\/Label-Swatches-Demo.png\" alt=\"Label Swatches Demo\" class=\"has-border-color wp-image-21252\" style=\"border-color:#fafafa;border-width:8px;border-radius:8px\" srcset=\"https:\/\/hasthemes.com\/wp-content\/uploads\/2023\/10\/Label-Swatches-Demo.png 1228w, https:\/\/hasthemes.com\/wp-content\/uploads\/2023\/10\/Label-Swatches-Demo-300x163.png 300w, https:\/\/hasthemes.com\/wp-content\/uploads\/2023\/10\/Label-Swatches-Demo-1024x556.png 1024w, https:\/\/hasthemes.com\/wp-content\/uploads\/2023\/10\/Label-Swatches-Demo-768x417.png 768w, https:\/\/hasthemes.com\/wp-content\/uploads\/2023\/10\/Label-Swatches-Demo-360x196.png 360w\" sizes=\"(max-width: 1228px) 100vw, 1228px\" \/><\/a><\/figure>\n\n\n\n<div style=\"height:25px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" style=\"font-size:22px\"><strong>Color Swatches Demo<\/strong><\/h3>\n\n\n\n<p>Delve into the color swatches demo by Swatchly, displaying product variations through a vibrant spectrum of colors. Experience a visually appealing way to select product options based on color preferences.<\/p>\n\n\n\n<p><strong>Demo Link:<\/strong> <a href=\"https:\/\/theplugindemo.com\/swatchly\/product\/hamosons-classic-briefcase\/\" target=\"_blank\" rel=\"noopener\"><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-ast-global-color-0-color\">Swatchly Color Swatches Demo<\/mark><\/a><\/p>\n\n\n\n<figure class=\"wp-block-image size-large has-custom-border\"><a href=\"https:\/\/hasthemes.com\/wp-content\/uploads\/2023\/10\/Swatchly-Color-Swatches-Demo.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"558\" src=\"https:\/\/hasthemes.com\/wp-content\/uploads\/2023\/10\/Swatchly-Color-Swatches-Demo-1024x558.png\" alt=\"Color Swatches Demo\" class=\"has-border-color wp-image-21253\" style=\"border-color:#fafafa;border-width:8px;border-radius:8px\" srcset=\"https:\/\/hasthemes.com\/wp-content\/uploads\/2023\/10\/Swatchly-Color-Swatches-Demo-1024x558.png 1024w, https:\/\/hasthemes.com\/wp-content\/uploads\/2023\/10\/Swatchly-Color-Swatches-Demo-300x164.png 300w, https:\/\/hasthemes.com\/wp-content\/uploads\/2023\/10\/Swatchly-Color-Swatches-Demo-768x419.png 768w, https:\/\/hasthemes.com\/wp-content\/uploads\/2023\/10\/Swatchly-Color-Swatches-Demo-360x196.png 360w, https:\/\/hasthemes.com\/wp-content\/uploads\/2023\/10\/Swatchly-Color-Swatches-Demo.png 1229w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<div style=\"height:25px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Explore the Swatchly demo showcase to witness the diverse range of swatch configurations and functionalities available for enhancing product variation displays on WooCommerce. This demo provides a hands-on experience, showcasing the different swatch types and their interactive features. Shop Page Demo Explore Swatchly in action on the shop page, showcasing a variety of swatches to [&hellip;]<\/p>\n","protected":false},"author":6,"featured_media":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","_mi_skip_tracking":false,"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"doc_category":[245],"doc_tag":[],"class_list":["post-21247","docs","type-docs","status-publish","hentry","doc_category-how-to-use-swatchly"],"acf":[],"year_month":"2025-11","word_count":274,"total_views":"1344","reactions":{"happy":"0","normal":"0","sad":"0"},"author_info":{"name":"Kausar mamun","author_nicename":"mamun","author_url":"https:\/\/hasthemes.com\/author\/mamun\/"},"doc_category_info":[{"term_name":"Swatchly","term_url":"https:\/\/hasthemes.com\/docs-category\/how-to-use-swatchly\/"}],"doc_tag_info":[],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false,"htmega_size_585x295":false,"htmega_size_1170x536":false,"htmega_size_396x360":false,"betterdocs-category-thumb":false},"uagb_author_info":{"display_name":"Kausar mamun","author_link":"https:\/\/hasthemes.com\/author\/mamun\/"},"uagb_comment_info":0,"uagb_excerpt":"Explore the Swatchly demo showcase to witness the diverse range of swatch configurations and functionalities available for enhancing product variation displays on WooCommerce. This demo provides a hands-on experience, showcasing the different swatch types and their interactive features. Shop Page Demo Explore Swatchly in action on the shop page, showcasing a variety of swatches to&hellip;","knowledge_base_info":[],"knowledge_base_slug":[],"_links":{"self":[{"href":"https:\/\/hasthemes.com\/wp-json\/wp\/v2\/docs\/21247","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hasthemes.com\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/hasthemes.com\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/hasthemes.com\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/hasthemes.com\/wp-json\/wp\/v2\/comments?post=21247"}],"version-history":[{"count":3,"href":"https:\/\/hasthemes.com\/wp-json\/wp\/v2\/docs\/21247\/revisions"}],"predecessor-version":[{"id":25635,"href":"https:\/\/hasthemes.com\/wp-json\/wp\/v2\/docs\/21247\/revisions\/25635"}],"wp:attachment":[{"href":"https:\/\/hasthemes.com\/wp-json\/wp\/v2\/media?parent=21247"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/hasthemes.com\/wp-json\/wp\/v2\/doc_category?post=21247"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/hasthemes.com\/wp-json\/wp\/v2\/doc_tag?post=21247"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}