Variation Swatches

Skip to content
  • Shop
    • My Account
    • Cart
    • Checkout
  • 0 items
  • 0 items
  • 0 items

Cart

Your cart is currently empty.

Return to shop

Variation Swatches Created by XplodedThemes | Proudly powered by WordPress

Live demos

  • Ajax Add To Cart
  • Catalog Mode
  • Floating Cart
  • Points & Rewards
  • Quick View
  • Variation Swatches
  • Variations As Singles
Live demo

Try Variation Swatches

Shop DisplayPick one

  • Always Visible Swatches sit right on each product card, ready to pick. Opens Product Grid
  • On Hover Swatches appear when you hover over a product card. Opens Product Grid
  • On Click Swatches open on the card when you click Select options. Opens Product Grid
  • Modal Select options opens a popup with a product preview and large swatches. Opens Product Grid
  • Bottom Drawer Select options slides up a drawer from the bottom of the screen. Opens Product Grid
  • Top Drawer Select options drops a drawer down from the top of the screen. Opens Product Grid
  • Right Drawer Select options slides in a side panel from the right. Opens Product Grid
  • Left Drawer Select options slides in a side panel from the left. Opens Product Grid
  • Catalog Mode Cards show one row of swatches that switch the product photo as you hover them. Opens Product Grid

Swatch ShapePick one

  • Mixed Round color dots with softly rounded image and text swatches. Opens Single Product
  • Square Every swatch has sharp square corners. Opens Single Product
  • Circle Every swatch is a circle, including image and size swatches. Opens Single Product
  • Rounded Every swatch is a square with softly rounded corners. Opens Single Product

TooltipsPick one

  • Mixed Hovering a swatch shows its name, or a picture preview for colors. Opens Color Swatches
  • Text Hovering a label swatch shows its name in a small bubble. Opens Color Swatches
  • None Swatches show no tooltip on hover. Opens Single Product

Out of StockPick one

  • Blur + Cross Sold-out and unavailable options stay visible, faded and crossed out. Opens Out of Stock
  • Blur Sold-out and unavailable options stay visible but faded. Opens Out of Stock
  • Hide Sold-out and unavailable options disappear from the swatches. Opens Out of Stock
  • Selectable Sold-out options look like the rest and show Out of stock once picked. Opens Out of Stock

Option NamesPick one

  • Above Swatches On the product page, each option name sits above its swatches. Opens Single Product
  • With Selected Value The option name also shows what you picked, like Color: Blue. Opens Single Product
  • Beside Swatches Option names sit to the left of the swatches, in the theme layout. Opens Single Product
  • Hidden Option names are hidden so only the swatches show. Opens Single Product

ExtrasCombine any

  • Featured Attribute Color swatches on the product page show larger than the other options. Opens Single Product
  • Large Swatches Swatches on the product page are bigger and easier to tap. Opens Single Product
  • Swatch Captions Image and color swatches on the product page show their name underneath. Opens Single Product
  • Stretched Labels Text swatches like sizes stretch to fill the full row on the product page. Opens Single Product
  • Auto Select First The first option of each attribute is picked as soon as the page loads. Opens Single Product
  • Quantity Field Product cards in the shop get a quantity box next to Add to cart. Opens Product Grid

Pages

  • Product Grid
  • Shop
  • Single Product
  • Color Swatches
  • Out of Stock
Reset Customize Product page
Reset Customize Product page Purchase