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 Image Swatch and Image With Price 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 Image Swatch and Image With Price Swatch have similar conditions and options for configurations (except for Shapes & Layout configuration). 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 Image Swatch

Image With Price 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.

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

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. 

Expand button position: Choose where the expand button locates - Left or Right.

Max items to show: Decide the maximum number of items to show. Slide to adjust the value to your desired number.

Limit text color: Adjust the color of the limit text via color picker or enter a HEX code.

Limit text size: Decide the size of the limit text. Slide to adjust the value to your desired number.

Limit text boldness: Choose among 3 options: Light, Medium, Bold.

2.5. Shape & Layout 

2.5.1. Shapes & Layout - Button With Image Swatch 

Font Size

Set the font size for the item options.

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

Applies uniformly; scale down for mobile.

Horizontal padding (Button)

Control gaps on the left of 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).

Vertical padding (Button)

Control gaps above and below 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).

Spacing 

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 Width (Button)

Add a stroke around buttons 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 (Button)

Control the corner rounding of the button.

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

Swatch Width

Control the width of the swatch items. 

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

Swatch Ratio

Control the ratio of the Image swatches.

Choose from available image ratios: 1:1, 2:3. 3:2, 4:5, 5:4. 

Border Width (Swatch)

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 button sections above.

Border Radius (Swatch)

Control the corner rounding of the swatches.

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

Spacing Between Items

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

Add the spacing between the swatches and text items. 

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

Spacing Between Swatches & Buttons

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

Add the spacing between the swatches and text items. 

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

Select Left (default), Center, or Right.

Align with your overall page layout.

Item Alignment

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

Select Left (default), Center, or Right.

Align with your overall page layout.

2.5.2 Shape & Layout - Image With Price Swatch 

Swatch Width

Control the width of the swatch items. 

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

Swatch Spacing

Control both horizontal and vertical spacing between the swatch items. 

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

Swatch Ratio

Control the ratio of the Image swatches.

Choose from available image ratios: 1:1, 2:3. 3:2, 4:5, 5:4. 

Border Width 

Add a stroke around the swatch items 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 swatch items.

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

Content Box Padding

Control the spacing around the content box (including Option label value and price within).

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

Content Box Spacing

Control the spacing between the Option label value and the price within.

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

Content Box Alignment

Position content box relative to the image swatches (e.g., centered for symmetry).

Select Left (default), Center, or Right.

Align with your overall page layout.

Title Font Size

Set the font size for the option label value (title) options.

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

Applies uniformly; scale down for mobile.

Price Font Size

Set the font size for the price within.

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

Applies uniformly; scale down for mobile.

Show Variant Price

Choose to show the price or hide the price of the variant.

At the dropdown, choose ‘Yes’ or ‘No’.

Label Alignment

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

Select Left (default), Center, or Right.

Align with your overall page layout.

Item Alignment

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

Select Left (default), Center, or Right.

Align with your overall page layout.

2.6. Normal swatch

Default state for unselected swatches.

Text color

Adjust the text color for the unselected swatches.

Customize via color picker or enter a HEX code.

Price color

Adjust the text color price for the unselected swatches.

Customize via color picker or enter a HEX code.

Content box background

Adjust the background color for the content box of the unselected swatches.

Customize via color picker or enter a HEX code.

Title font weight

Choose the weight of the title — 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.

Price font weight

Choose the weight of the price — 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 Color

Tint the border to match your palette.

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

Border type

Style the outline for the unselected swatches.

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

Preview the line style.

2.7. Hover swatch

Interactive state when users mouse over a swatch option.

Text color

Adjust the text color for the swatches.

Customize via color picker or enter a HEX code.

Price color

Adjust the text color price for the swatches.

Customize via color picker or enter a HEX code.

Content box background

Adjust the background color for the content box of the swatches.

Customize via color picker or enter a HEX code.

Title font weight

Choose the weight of the title — 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.

Price font weight

Choose the weight of the price — 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 Color

Tint the border to match your palette.

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

Border type

Style the outline.

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

Preview the line style.

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 swatch

For the chosen option.

Text color

Adjust the text color for the swatches.

Customize via color picker or enter a HEX code.

Price color

Adjust the text color price for the swatches.

Customize via color picker or enter a HEX code.

Content box background

Adjust the background color for the content box of the swatches.

Customize via color picker or enter a HEX code.

Title font weight

Choose the weight of the title — 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.

Price font weight

Choose the weight of the price — 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 Color

Tint the border to match your palette.

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

Border type

Style the outline.

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

Preview the line style.

 

2.9. Disabled swatch

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

Text color

Adjust the text color for the swatches.

Customize via color picker or enter a HEX code.

Price color

Adjust the text color price for the swatches.

Customize via color picker or enter a HEX code.

Content box background

Adjust the background color for the content box of the swatches.

Customize via color picker or enter a HEX code.

Title font weight

Choose the weight of the title — 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.

Price font weight

Choose the weight of the price — 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 Color

Tint the border to match your palette.

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

Border type

Style the outline.

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

Preview the line style.

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. 

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. 

• Ensures intuitive UX for sold-out items.

Now you know how to customize the Button With Image Swatch and Image With Price 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