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 next 2 versatile swatch types - Button With Circle Swatch, Button With Square Swatch, Button With Image Swatch - 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. Customization Configurations

Button With Circle Swatch and Button With Square Swatch 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 With Circle Swatch

Button With Square Swatch

2.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).

2.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.

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

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.

2.4. Option Set Display (Global) 

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

Click the segmented buttons: Default (default), Slider, or Collapse.

Preview on page/card to ensure it fits your design.

Slider 

Slider button style

Define how the slider button looks: Arrow, Chevron, Triangle.

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.
   

Spacing between buttons

Control both horizontal and vertical gaps between the button 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).

Border radius (Button With Square Swatch only)

Control the corner rounding of the button.

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

Swatch Size

Control the size of the swatch items. 

1. Slide to adjust the value to your desired number. (default: 35 px).
2. Adjust the size for the best visualization of the circle / square swatch. 
   

Spacing between swatches & texts

Control the horizontal gaps between the swatches and texts for breathing room.

1. Add the spacing between the swatches and text items. 
2. Slide to adjust the value to your desired number.(e.g., 8 px).
   

Button padding

Control the spacing between the border of the button with the swatches and texts item within.

1. Add the spacing between the border of the button with the swatches and texts item within. 
2. Slide to adjust the value to your desired number.(e.g., 8 px).
   

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.
   

Swatch Alignment

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

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

2.6. Normal swatch

Default state for unselected swatches.

Text color

Adjust the text color for unselected options.

Customize via color picker or enter a HEX code.

Background color

Adjust the background color for unselected options.

Customize via color picker or enter a HEX code.

Font weight

Choose the weight of the normal swatch 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.

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 swatch

Interactive state when users mouse over a swatch option.

Text color

Adjust the text color for hovered options.

Customize via color picker or enter a HEX code.

Background color

Adjust the background color for hovered options.

Customize via color picker or enter a HEX code.

Font weight

Choose the weight of the hovered swatch 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.

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.

Hover Animation

Add subtle motion for engagement.

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

Hover animation

Hover swatch configuration

2.8. Selected swatch

For the chosen option.

Text color

Adjust the text color for the selected swatch.

Customize via color picker or enter a HEX code.

Background color

Adjust the background color for the selected swatch.

Customize via color picker or enter a HEX code.

Font weight

Choose the weight of the selected swatch 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.

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 swatch

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

Text color

Adjust the text color for disabled swatches.

Customize via color picker or enter a HEX code.

Background color

Adjust the background color for disabled swatches.

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. 

• 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. 

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

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

• Ensures intuitive UX for sold-out items.

Now you know how to customize the Button With Circle Swatch and Button With Square Swatch styles to make your product page appearance align well with your product page and stock management. If you need any help on this, please contact our team via support@tapita.io