Marble Documentation
Contact usBigStart.io
  • Marble - Documentation
  • Global settings
    • Info
    • Color styles
    • Typography
    • Buttons
    • Global
    • Currency format
    • Cart
    • Products
    • Swatches
    • Social media
    • Favicon
    • Checkout
  • Global Features
    • Focal Points
    • Custom product badges
  • Global sections
    • Cookie banner
    • Newsletter popup
    • Announcement bar
    • Header
    • Product quick view
    • Footer
  • Content sections
    • Content sections
    • Common settings
    • Hero
    • Richtext
    • Featured products
    • Marquee
    • 70/30 Images with content
    • Image with text
    • Featured collections
    • Featured collection
    • Banner
    • Promo bar
    • Shop the look
    • Featured blog
    • USPs
    • Newsletter banner
    • 50/50 Image
    • 50/50 Text
    • Card Grid
    • Custom liquid
    • Featured product
    • Promo columns
    • Richtext with logos
    • Social feed
    • Testimonials
    • Video
    • Store
    • Masonry
    • Countdown offer section
    • Separator
    • Recently viewed
    • Image gallery
    • Products grid
    • Collage grid
  • Pages
    • Collections list
    • Collection page
    • Product page
    • Size guide page
    • Cart page
    • FAQ page
    • Contact page
    • Creating custom pages
    • Blog
Powered by GitBook
On this page
  • Swatches option name
  • Custom swatches
  • Size option
  • Swatches definitions
  1. Global settings

Swatches

PreviousProductsNextSocial media

Last updated 1 year ago

The color swatches can be enabled and shown on all product cards and in the product page itself.

Examples:

The settings are as follows.

Swatches option name

This should be the name of the option like Color , Material etc. where you want to show swatches. The value in the field should match the option name taken from Shopify's admin page:

If you want to show the swatches for your Color option - then in this field you should enter Color. If you want the swatches to be shown for Material then enter Material in this field.

Custom swatches

By default, the browser converts the color names to HTML hex codes. So if you add a color value like Red or Blue you'll automatically see the browser interpretation for these colors like pure red and pure blue colors.

However, If you want to use custom hex color codes OR images, and custom color names, you can add them by assigning them with pairs of color name and hex code or image name. Then, once these names are used in the products colors - you'll see them in the swatches.

To do so - list the pairs in the given textarea with the following format: ColorName=#hexcode or ColorName=swatch.png. Each entry should be on a new line. Example: Dark red=#ff0000 .

Example with more entries:

Size option

This field is used to tell the theme which variant option is actually used for the sizes. Based on that field additional settings will be available like showing size chart and picking the variants style like buttons/dropdowns.

The value here should match the size option name from Shopify's admin page:

Swatches definitions

There are additional options for choosing the type and styles of the swatches.

  • Type: Swatches and Variant images

  • Shape: Portrait, Square, Circle

  • Size: picked in pixels for mobile and desktop

This settings above are available to be set separately for Product page, Product cards and Filters section.

Example 1:

Example 2:

Updated: you can now have swatches for more than one variant group. For example you can have swatches for both Color and Material by just listing them both in the field separated with comma , like this: