Color Swatch Setting

Color Swatch Setting

This feature allows you to display color swatches (visual representations of colors) for products with color options, instead of just displaying the color names as text.
product-with-color-options
Configuring Color Swatches on Product Page:
  1. Under the Product Information Settings, then go to Theme Settings > add information for swatch.
  2. For each color option you want to display as a swatch:
    1. In the Label field, enter the exact name of the color option as it appears in your product variants (e.g., "Color," "Colour").
    2. In the Swatches field, enter the corresponding color code (e.g., White: #FFFFFF).


Configuring Color Swatches on Collection Page:
  1. In the Theme Editor, click on Theme Settings.
  2. Enter the color swatch information as above. For example: Swatches Label: Color; Swatches: White: #FFFFFF.

Note:
  1. Label: The "Label" must match the option name in your product's variant.
  2. Swatches: The "Swatches" are the different values for that color option in your product's variant (e.g., "Red", "Blue", "Green").

    • Related Articles

    • Menu Setting

      Optimize your store’s navigation with Tapita’s advanced menu options, including a customizable multi-column dropdown (mega menu). This guide provides step-by-step instructions for creating and configuring menus to enhance the user experience. ...

    • Header Setting

      The header is a crucial element of your online store, serving as the primary navigation point and brand identifier. This guide will walk you through the various settings available to customize your header and create a seamless shopping experience. ...

    • Azzel Theme Setting

      On the customization page, click on the second icon to access the theme settings. Now, let’s explore each component in the theme settings one by one! Color With the Colors setting, you can create and customize unique color palettes for different ...

    • (Azzel Theme) Mood Preset Configuration Guide: New Features & Settings

      Important: The Azzel theme now includes two distinct presets to choose from: 1st preset: Azzel, access through https://themes.shopify.com/themes/azzel/presets/azzel 2nd preset: Mood, access through https://themes.shopify.com/themes/azzel/presets/mood ...

    • Video with Text

      This section allows users to display information, products, or collections alongside a video. First, configure the video as follows: Section Body: Video Ratio: Select the video ratio. Choose a video to display. Video Information: Color Scheme: Choose ...