Customizing Circle Swatch, Square Swatch, Polaroid Swatch styles

Customizing Circle Swatch, Square Swatch, Polaroid Swatch styles

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 first 3 versatile swatch types - Circle Swatch, Square Swatch, Polaroid 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.

 

Notes
NOTE: Appearance on Page and Appearance on Card 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 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

Circle Swatch, Square Swatch, and Polaroid Swatch 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.

 

Circle Swatch

 

Square Swatch

 

Polaroid Swatch

 

 

2.1. Spacing (Global)

Notes
*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 spacing to your desired value (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)

Notes
*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
  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. (smaller, e.g., 12px, larger, e.g., 16px). 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)

Notes
*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)

Notes
*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

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

Size

Set the dimensions of individual swatches (square by default) for visual balance.

Slide to adjust the value to your desired number. (default: 48px, 32px for compact views).

Applies uniformly; scale down for mobile.

 

Spacing

Control gaps around and within swatches for breathing room. 

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


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.

Label Alignment

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

Select Left (default), Center, or Right from the buttons.

Align with your overall page layout.

 

Swatch Alignment

Align swatches horizontally within their container.

Choose Left, Center (default), or Right.

Useful for right-aligned e-commerce cards.

 

 

2.6. Normal swatch

Default state for unselected swatches.

Swatch Padding

Inner space around the color fill to prevent edge bleeding.

Slide to adjust the value to your desired number. Slider default: 2px.

Higher values create softer edges.

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.

Swatch Padding

Same as Normal.

Default 2px; Slide to adjust the value to your desired number.


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/Glow.

 

 

2.8. Selected swatch

For the chosen option.

Swatch Padding

Maintain inner space; optional increase for prominence.

Default 2px slider. Slide to adjust the value to your desired number.

 

Border

Thicken for selection highlight.

Choose from: 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).

Swatch Padding

Slide to adjust the value to your desired number to add spacing for the swatch (Default 2px).

 

Border

Soften for unavailability.

Choose from: None (default), Single, Double, or Dashed.

 

Border Color

Mute tones to signal disablement.

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

 

Cross Line 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 cross 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 Circle Swatch, Square Swatch and Polaroid Swatch 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


    • Related Articles

    • Customizing Button With Circle Swatch and Button With Square Swatch styles

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

    • Customizing Button With Image Swatch and Image With Price Swatch styles

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

    • Customizing Button, Pill Button, Dropdown styles

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

    • Changelog Grouptify

      [15/05/2025] App Requires New Permission for Data Storage Grouptify now needs the "Write products" permission to help manage group information stored in product metafields. [14/05/2025] App Requires New Permission for Data Storage Grouptify now needs ...

    • How to Bulk Configure Grouptify Swatch Style

      Managing swatch styles across multiple product groups becomes challenging when you need to update colors or images for specific option values. This guide demonstrates how to efficiently configure swatch styles in bulk using Grouptify's swatch ...