Multiple Product Options Configuration (Capsule)

Product Setup

Product options must follow the following naming convention:

  • Parent Option / Child Option

With the separator being " / " (spaceslashspace). 

For example, lets say you have a product that comes in three colors (Black, Gold, and Burgundy). And each color product has sizes Small, Medium and Large. You'll need to create the following options for your product:

  • Black / Small
  • Black / Medium
  • Black / Large
  • Gold / Small
  • Gold / Medium
  • Gold  / Large
  • Burgundy / Small
  • Burgundy / Medium
  • Burgundy / Large

This will automatically create one set of options (colors) and another set of options (sizes). Since 'Black' , 'Gold' and 'Burgundy' are already preset color swatches in our swatch library, color swatches will automatically appear as the labels.

Two-tone color names must be separated with a slash, but without spaces. For example, if your color options are "Red/Black" and "Blue/White":

  • Red/Black / Small
  • Red/Black / Medium
  • Blue/White / Small
  • Blue/White / Medium

Product Image Setup

To hook a product image to a color, you'll need include the name of the color option in the file name for that image, before uploading it to the product. The name of the color needs to be added with underscores ("_") at the beginning and end of the color name. For example:

  • _Orange_
  • _Red-Black_ (for two tone, Red/Black color).
  • _Navy Blue_
  • _Heather Gray_

Lets say you have the color options 'Red' and 'Navy Blue'. Assume your product images originally had the following names:

  • product-image-1.jpg
  • product-image-2.jpg
  • product-image-3.jpg
  • product-image-4.jpg
  • product-image-5.jpg

Since you have two colors in this example, you'll need to attach the color name to at least two of the image names, when renaming:

  • product-image-1_Red_.jpg
  • product-image-2.jpg
  • product-image-3.jpg
  • product-image-4_Navy Blue_.jpg
  • product-image-5.jpg

This assumes that first image is of a 'Red' product photo and the fourth image is of a 'Navy Blue' product photo.

Preset Color Swatches

By default, the Capsule theme includes a library of preset color swatches. Simply name create your option name after a preset swatch, and "voila!"; a color swatch appears. So if your parent option name is 'Gold' (ex. 'Gold / Small', 'Gold / Medium'. etc.), the 'Gold' color swatch will appear.

Preset color swatches also apply to two-tone color options. So if your color option name is 'Purple/White' (ex. 'Purple/White / Small', 'Purple/White / Medium'), a two tone color swatch will appear, with one half being purple, the other half white.

NOTE: Please make sure to name the color swatch in title case form (ex. 'Red', 'Heather Gray', etc.). DO NOT name option in all caps or all lowercase.

Still need help? Contact Us Contact Us