Seventh > Theme settings > Color swatches & size options

Seventh features a highly flexible set of options when it comes to display color swatches, size options and combined products through metafields. All of the product card settings are controlled here, while product pages have separate control over how swatches are displayed.

Color swatches settings

Show color swatches

  • This enables color swatches in the theme. Color swatches refer to colors that are created using Shopify's metafields. This is a native feature in Shopify which is documented separately on Shopify's documentation > Adding color swatches using category metafields.

Disabling the color swatches here, will disable them everywhere (both in the product cards and product pages).

While color swatches are enabled here, they still have to be added as a separate block in the product card.

Swatches & product siblings (style)

Size

  • Choose the swatch's size. There is only a few px difference between the various options, except the "Thumbnail style", which creates a large preview of the swatch.

Corner roundness

  • Changes the shape of the swatches.

Image ratio

  • This setting is used in two scenarious:
    • When using the "XLarge (thumbnail style)" design for displaying color swatches or product siblings.
    • When you are using one of the minimal styles, but have the "Show variant / featured image on hover" option(s) checked.

Focal point

  • When swatches or product siblings are showing the featured image, instead of a color, you can choose the focal point of these images.

For example, if you have tall images featured models but display swatches as little squares, you may want the head of the models always visible, case in which you can select the "top" focal point.

Color swatches

These settings apply only for the color swatches displayed in product cards.

Display mode

  • Changes the way swatches are displayed
    • Color swatch - uses Shopify's native category metafields that you can customize, so they can either display solid colors, gradients, patterns or any custom image that you might set in your admin
    • Variant image - uses the variant images that are associated with each variant. If a variant doesn't have a featured image, the swatch will be empty (white background).

Show variant image on hover

  • Displays a small tooltip in which the associated variant image appears. It can only be used when the variants are displayed as swatches. If a variant doesn't have an associated image, the tooltip will not be displayed for that specific variant.

Styling product siblings swatches

Seventh allows you to create combined product listings, using metafields. Inside the theme settings you can only choose how these product siblings are displayed inside product cards.

The process of setting up product siblings is a separate topic and is detailed here: Seventh > Cards > Product card.

Display mode

  • Changes the way product siblings are displayed
    • Product thumbnail - the most straightforward method, each "sibling" being an individual product it has a featured media, so in this case, the featured image of each product will be used to display different siblings.
    • Custom color - a more advanced way to show product siblings, you have the ability to connect each product to a color and display that color instead of the product thumbnail
  • Show featured image on hover

Only when displaying siblings as colors, you can choose to still show the featured product image when hovering the little swatch (on desktop).

How to setup the custom color metafield

  1. Create a "color" type metafield, under your store's Settings > Metafields and metaobjects > Products.
  2. Copy the namespace and key of the metafield you've created and paste it in the "Custom color metafield" setting.
  3. For each product that is used in "siblings", set a custom color using the new metafield, that will be used in the swatches.

Tip: You can also use metaobjects for setting up custom colors in product siblings. In this case, you would want to:

  1. Create a metaobject definition that has at least a color field set up.
  2. Add the color definition from the created metaobject as a product metafield.
  3. When writing the namespace, write the entire reference, which would include both the namespace.key of the metafield, but also the reference to the color value.

Eg: if your metaobject is named "color-product-sibling" and the color field is named "color", the complete metafield reference would be "custom.color-product-sibling.value.color"

Using metaobjects is helpful if you want to add more fields to the metaobject, like the color's name for example, to be referenced later in the product page.

Configuring size options

Both the "color swatches" & "product siblings" block from the product card can have the size options appended to them. This allows you to display all the sizes that a product has, in a very compact form.

  • Show size options

When enabled, size options will be displayed in any of the two blocks (when you've added them in a product card).

  • Size option names

We need a way to identify which of the product variants are actually size variants (options). For this, we're using the option names as reference. We've included a few popular translations for sizes, but if yours is not here, you can add it to the list and it will automatically show up the values from the corresponding product option.

  • Size option label

Display some text before the size option in order to let customers know what this is about.

Tip: This feature is intended for showing sizes in the clothing industry. But you can change it's purpose by editing the option label and be able to show any product variants that you'd want here, not only sizes.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.