If you want your Color Swatch styles to match your product page designs rather than a generic and default template, go for the ‘Appearance’ feature in G: Combined Listings. 

This feature allows you to flexibly create customized Color Swatch templates to match your business goals and product page and product card design. You can customize all types of Color Swatch. In this guide, we’ll explore the second 3 versatile swatch types - Customize Button, Pill Button, Dropdown - to help you craft a cohesive, flexibly functional look that helps your customers shop effortlessly. 

1. Choose your Color Swatch Style

First, on the left tab menu of the app G: Combined Listings, click on ‘Appearance’.

You will see all color swatch styles. To customize a style, simply click on it.

NOTE: Appearance on Page and Appearance on Card have the same condition and options for configurations. Therefore, this guide will give a comprehensive and applicable guideline for both Appearance on Page and Appearance on Card. 

To go to Appearance on Page and Appearance on Card configurations, locate to the left tab menu after clicking ‘Customize’ on a certain Color Swatch style. On the right side, you can see the preview section of how your customizations will show up on the storefront. 

This is an example of Appearance on Page and Appearance on Card after I click to ‘Customize’ the Circle Swatch style. 

Appearance on Page / Card configuration

Appearance on Page Interface

Appearance on Card Interface

2. Button and Pill Button Configurations

Button and Pill Button have the same condition and options for configurations. Therefore, this guide will tell you how to configure the swatches with a comprehensive and applicable guideline for both swatch styles and both Appearance on Page and Appearance on Card. 

Button

Pill Button

2.1. Spacing (Global) 

*Global means that all edits in this configuration will apply to all color swatch styles.

Spacing from top

1. Add the spacing above the color swatch block. 
2. Slide to adjust the value to your desired number. (e.g. 18 px).
   

Spacing from bottom

1. Add the spacing below the color swatch block. 
2. Slide to adjust the value to your desired number. (e.g. 18 px).
   

Spacing between options

1. Add the spacing between all options (e.g. increase spacing between Color Option and Size Option)
2. Slide to adjust the value to your desired number. (e.g. 11 px).
   

Spacing between Label & Option

1. Add the spacing between the Label Option and the Option items (e.g. increase spacing between the Label Option - Size and its Option items - XS, S, M, L).
2. Slide to adjust the value to your desired number. (e.g. 6 px).
   

2.2. Option label (Global)

*Global means that all edits in this configuration will apply to all color swatch styles.

Show option label

1. Toggle this ON to show the option label on the color swatch. Toggle this OFF to hide the option label on the color swatch.
   

Option label color

1. Custom the color of the option label (text).
2. Choose among available colors or enter a HEX color code (e.g. #000000 for Black text).
   

Option label size 

1. Slide to adjust the value to your desired number. Default: 14px.
2. Test on various screen sizes to ensure legibility.
   

Option Label Boldness

Choose the weight of the label text—Light for subtle, Bold for emphasis.

1. Select from the segmented buttons: Light, Medium (default), or Bold.
2. The preview reflects the change immediately; use Bold for headings in busy layouts.
   

2.3. Option label value (Global)

*Global means that all edits in this configuration will apply to all color swatch styles.

Show Option Value in Label

1. Enable this to include the selected value directly in the label (e.g., "Color", “Size”).
   

Option Value Color

Customize the color of value text to differentiate it from labels.

1. Click the color picker next to "#000000."
2. Choose from the palette or input a hex code (e.g., #333333 for dark gray). Ensure it contrasts well with backgrounds.
   

Option Value Size

Customize the size of the option value.

1. Slide to adjust the value to your desired number.  (default: 14px).
2. Type a pixel value in the field for precision. Balance with label size to avoid clutter.
   

Option Value Boldness

Set the font weight for values to make selections stand out.

1. Click Light, Medium (default), or Bold in the segmented control.
2. Preview how it pairs with the label boldness.
   

Option Value Connector

Choose a separator between label and value (e.g., "Color: Red" vs. "Color - Red") for stylistic flair.

Select from the buttons: Colon (default), Tilde, Hyphen, or Vertical Bar. The preview shows the updated string format.

2.4. Option Set Display (Global) 

*Global means that all edits in this configuration will apply to all color swatch styles.

Define how option sets are presented—Default for standard stacking, Slider for horizontal scrolling, or Collapse for space-saving accordions.

1. Click the segmented buttons: Default (default), Slider, or Collapse.
2. Preview on page/card to ensure it fits your design.
   

Slider 

Slider button style

1. Define how the slider button looks: Arrow, Chevron, Triangle.
2. Choose a color via color picker or enter a HEX code. 
   

Collapse

Shows limited values, the rest can be shown by clicking "+x" to expand. 

1. Expand button position: Choose where the expand button locates - Left or Right.
2. Max items to show: Decide the maximum number of items to show. Slide to adjust the value to your desired number.
3. Limit text color: Adjust the color of the limit text via color picker or enter a HEX code.
4. Limit text size: Decide the size of the limit text. Slide to adjust the value to your desired number.
5. Limit text boldness: Choose among 3 options: Light, Medium, Bold.
   

2.5. Shape & Layout 

Font Size

Set the font size for the item options.

1. Slide to adjust the value to your desired number. (default: 48px).
2. Applies uniformly; scale down for mobile.
   

Horizontal padding 

Control gaps on the left of the button items for breathing room.

1. Add the spacing between the color swatch block. Slide to adjust the value to your desired number.(e.g., 18 px).
   

Vertical padding 

Control gaps above and below the button items for breathing room.

1. Add the spacing between the color swatch block. Slide to adjust the value to your desired number.(e.g., 18 px).
   

Spacing 

Control both horizontal and vertical gaps between the button items for breathing room.

1. Add the spacing between the color swatch blocks. Slide to adjust the value to your desired number.(e.g., 18 px).
   

Border radius (Button Swatch only)

Control the corner rounding of the button.

1. Slide to adjust the value to your desired number. (e.g., 18 px, or 0 px by default - no corner rounding).
   

Border Width

Add a stroke around swatches for definition (thinner for subtle, thicker for emphasis).

1. Slide to adjust the value to your desired number. (default: 1px).
2. Pair with border colors in swatch sections below.
   

Label Alignment

Position labels relative to swatches (e.g., centered for symmetry).

1. Select Left (default), Center, or Right.
2. Align with your overall page layout.
   

Button Alignment

Position buttons relative to the option labels (e.g., centered for symmetry).

1. Select Left (default), Center, or Right.
2. Align with your overall page layout.
   

Button layout

Normal layout or stretch the buttons for a justified alignment.

1. Select a configuration option - Normal or Stretch.
   

Normal

Stretch

Align with your overall page layout.

 

2.6. Normal button

Default state for unselected swatches.

Text color

Adjust the text color for unselected buttons.

Customize via color picker or enter a HEX code.

Background color

Adjust the background color for unselected buttons.

Customize via color picker or enter a HEX code.

Border

Style the outline.

Select None (default), Single, Double, or Dashed.

Preview the line style.

Border Color

Tint the border to match your palette.

Color picker default: #788999 (gray); input a HEX code or select. Use neutrals for subtlety.

2.7. Hover button

Interactive state when users mouse over a swatch option.

Text color

Adjust the text color for hovered buttons.

Customize via color picker or enter a HEX code.

Background color

Adjust the background color for hovered buttons.

Customize via color picker or enter a HEX code.

Border

Enhance outline on hover for cues. 

None, Single (default), Double, or Dashed.

Border Color

Brighten or change on hover.

Default #788999; customize via color picker.

Hover Animation

Add subtle motion for engagement.

Dropdown: None (default) or other options like Scale up, Float down, etc.

Hover animation

Hover button configuration

2.8. Selected button

For the chosen option.

Text color

Adjust the text color for chosen buttons.

Customize via color picker or enter a HEX code.

Background color

Adjust the background color for chosen buttons.

Customize via color picker or enter a HEX code.

Border

Thicken for selection highlight. 

None, Single (default), Double, or Dashed.

Border Color

Use brand color for active states. 

Default #788999; picker for vibrancy.

2.9. Disabled button

For unavailable options (e.g., out-of-stock colors).

Text color

Adjust the text color for disabled buttons.

Customize via color picker or enter a HEX code.

Background color

Adjust the background color for disabled buttons.

Customize via color picker or enter a HEX code.

Border

Soften for unavailability.

None (default), Single, Double, or Dashed.

Border Color

Mute tones to signal disablement. 

Default #788999. Enter a HEX code or use the color picker. 

Strikethrough Color

Strikethrough color to visually indicate unavailability.

Picker default: #788999 (gray). Use red for stronger warnings.

Swatch Transform

Apply effects like fading or crossing out the swatch. 

1. Dropdown: 

None: no effect applied, the disabled swatches will look exactly like the normal swatches. (This may confuse visitors about your available options). 

Hide: Applying this will make the disabled swatches hidden completely from the storefront, leaving only normal swatches and the selected swatch shown. 

Fade: Applying this will fade the color swatch of the disabled swatches, indicating that these options are not available for sales. 

Strikethrough: Applying this will show a strikethrough line on the disabled swatch. 

Fade + Strikethrough: Applying both the ‘Fade’ and the ‘Strikethrough’ effect for a clearer suggestion of unavailable stocks. 

1. Ensures intuitive UX for sold-out items.

3. Dropdown Configurations

Appearance on Card

3.1. Spacing (Global) 

*Global means that all edits in this configuration will apply to all color swatch styles.

Spacing from top

Add the spacing above the color swatch block. 

Slide to adjust the value to your desired number. (e.g. 18 px).

Spacing from bottom

Add the spacing below the color swatch block. 

Slide to adjust the value to your desired number. (e.g. 18 px).

Spacing between options

Add the spacing between all options (e.g. increase spacing between Color Option and Size Option)

Slide to adjust the value to your desired number. (e.g. 11 px).

Spacing between Label & Option

Add the spacing between the Label Option and the Option items (e.g. increase spacing between the Label Option - Size and its Option items - XS, S, M, L).

Slide to adjust the value to your desired number. (e.g. 6 px).

3.2. Option label (Global)

*Global means that all edits in this configuration will apply to all color swatch styles.

Show option label

Toggle this ON to show the option label on the color swatch. Toggle this OFF to hide the option label on the color swatch.

Option label color

Custom the color of the option label (text).

Choose among available colors or enter a HEX color code (e.g. #000000 for Black text).

Option label size 

Slide to adjust the value to your desired number. Default: 14px.

Test on various screen sizes to ensure legibility.

Option Label Boldness

Choose the weight of the label text—Light for subtle, Bold for emphasis.

Select from the segmented buttons: Light, Medium (default), or Bold.

The preview reflects the change immediately; use Bold for headings in busy layouts.

3.3. Option label value (Global)

*Global means that all edits in this configuration will apply to all color swatch styles.

Show Option Value in Label

Enable this to include the selected value directly in the label (e.g., "Color", “Size”).

Option Value Color

Customize the color of value text to differentiate it from labels.

Click the color picker next to "#000000."

Choose from the palette or input a hex code (e.g., #333333 for dark gray). Ensure it contrasts well with backgrounds.

Option Value Size

Customize the size of the option value.

Slide to adjust the value to your desired number. (default: 14px).

Type a pixel value in the field for precision. Balance with label size to avoid clutter.

Option Value Boldness

Set the font weight for values to make selections stand out.

Click Light, Medium (default), or Bold in the segmented control.

Preview how it pairs with the label boldness.

Option Value Connector

Choose a separator between label and value (e.g., "Color: Red" vs. "Color - Red") for stylistic flair.

Select from the buttons: Colon (default), Tilde, Hyphen, or Vertical Bar. The preview shows the updated string format.

3.4. Option Set Display (Global) 

*Global means that all edits in this configuration will apply to all color swatch styles.

1. Click the segmented buttons: Default (default), Slider, or Collapse.
2. Preview on page/card to ensure it fits your design.

Slider 

Slider button style

1. Define how the slider button looks: Arrow, Chevron, Triangle.
2. Choose a color via color picker or enter a HEX code. 

Collapse

Shows limited values, the rest can be shown by clicking "+x" to expand. 

1. Expand dropdown position: Choose where the expand dropdown locates - Left or Right.
2. Max items to show: Decide the maximum number of items to show. Slide to adjust the value to your desired number. 
3. Limit text color: Adjust the color of the limit text via color picker or enter a HEX code.
4. Limit text size: Decide the size of the limit text. Slide to adjust the value to your desired number.
5. Limit text boldness: Choose among 3 options: Light, Medium, Bold.

3.5. Shape & Layout 

Core visual structure for swatches, affecting size, spacing, and alignment.

Font Size

Set the font size for the dropdown options.

Slide to adjust the value to your desired number. (default: 48px).

Applies uniformly; scale down for mobile.

Horizontal padding 

Control gaps on the left of the dropdown items for breathing room.

Add the spacing between the color swatch block. Slide to adjust the value to your desired number.(e.g., 18 px).

Vertical padding 

Control gaps above and below the dropdown items for breathing room.

Add the spacing between the color swatch block. Slide to adjust the value to your desired number. (e.g., 18 px).

Text color

Adjust the color of the text of the dropdown items. 

Click the color picker next to "#000000."

Choose from the palette or input a hex code (e.g., #333333 for dark gray). Ensure it contrasts well with backgrounds.

Background color 

Adjust the color of background of the dropdown items. 

Click the color picker next to "#000000."

Choose from the palette or input a hex code (e.g., #333333 for dark gray). Ensure it contrasts well with text.

Border

Explanation: Thicken for selection highlight. 

 None, Single (default), Double, or Dashed.

Border Width

Add a stroke around swatches for definition (thinner for subtle, thicker for emphasis).

Slide to adjust the value to your desired number. (default: 1px).

Pair with border colors in swatch sections below.

Border radius

Control the corner rounding of the dropdown.

Slide to adjust the value to your desired number. (e.g., 18 px, or 3 px by default).

Border color

Adjust the color of background of the dropdown items. 

Click the color picker next to "#000000."

Choose from the palette or input a hex code (e.g., #333333 for dark gray). 

Label Alignment

Position labels relative to swatches (e.g., centered for symmetry).

Select Left (default), Center, or Right on the dropdown.

Align with your overall page layout.

3.6. Normal option

Default state for unselected swatches.

Text color

Adjust the text color for unselected dropdowns.

Customize via color picker or enter a HEX code.

Background color

Adjust the background color for unselected dropdowns.

Customize via color picker or enter a HEX code.

3.7. Hover option

Interactive state when users mouse over a swatch option.

Text color

Adjust the text color for the dropdowns when the mouse cursor hovers over them.

Customize via color picker or enter a HEX code.

Background color

Adjust the background color for the dropdowns when the mouse cursor hovers over them.

Customize via color picker or enter a HEX code.

3.8. Selected option

For the chosen option.

Text color

Adjust the text color for selected dropdowns.

Customize via color picker or enter a HEX code.

Background color

Adjust the background color for selected dropdowns.

Customize via color picker or enter a HEX code.

3.9. Disabled option

For unavailable options (e.g., out-of-stock colors).

Text color

Adjust the text color for unavailable dropdown options.

Customize via color picker or enter a HEX code.

Background color

Adjust the background color for unavailable dropdown options.

Customize via color picker or enter a HEX code.

​