GP Product OptionsGP Product Options
Login
← Back to Blog
Design•5 min read

Fine-Tuning Swatch Sizes, Shapes, and Spacing in GP Product Options Settings

Alex Mercer2026-07-11

E-commerce design relies heavily on visual details. The way product options are presented can make the difference between a high-converting store and one that feels amateurish. Simply enabling color or image swatches is not enough; their size, shape, borders, and spacing must align with your store theme and product type to create a polished shopping experience.

GP Product Options provides merchants with direct styling controls. Instead of relying on rigid, pre-configured layouts or custom CSS coding, you can adjust swatch dimensions, margins, border radiuses, and spacing directly from the option settings. Here is a comprehensive guide to fine-tuning your swatch designs.

Choosing the Right Swatch Shape

The shape of your swatches should complement the type of products you sell. GP Product Options supports three primary shapes: circular, square, and rounded square (or card style).

Circular Swatches

Circular swatches are best suited for solid, uniform colors. They are commonly used in apparel, cosmetics, and paint stores. A circular boundary keeps the product page feeling soft, organic, and clean. However, circular shapes are not ideal for showing texture patterns, as the curved edges crop out details.

Square Swatches

Square swatches utilize the entire bounding box to display the option. This layout is standard for fabric patterns, wood grains, metal finishes, and tiles. Because the edges are not cropped, customers can see the direction of a pattern or grain clearly.

Rounded Square Swatches

Rounded squares offer a modern compromise. They soften the harsh 90-degree corners of square swatches while preserving almost the entire pattern area. This shape matches contemporary design trends found in popular Shopify themes like Dawn and Sense.

Adjusting Swatch Sizes for Different Products

The ideal size for a swatch depends on what you are selling. A color swatch for a t-shirt does not need to be as large as a marble texture swatch for a custom kitchen island.

  • Small (24px - 32px): Perfect for basic colors (e.g., red, blue, green) where the customer does not need to inspect fine details. This size keeps the product form compact and clean.
  • Medium (36px - 48px): The standard size for most e-commerce stores. It is large enough to show basic textures (such as leather grain or knitted fabric) while remaining finger-friendly on mobile devices.
  • Large (50px - 64px): Recommended for intricate patterns, complex designs, or wood grains. A larger size allows customers to see the quality of the material without needing to zoom.

Setting Spacing, Gaps, and Layout Formats

Proper spacing prevents your product options from looking cluttered. GP Product Options allows you to control the grid layout and gap sizing between individual swatch elements.

Gap and Margin Controls

The gap refers to the empty space between swatches. A gap of 8px to 12px is standard. If the gap is too small, swatches bleed together, making it difficult for the user to tap the correct option on mobile. If the gap is too large, the option set takes up excessive vertical space on the product page.

Wrapping Behavior

When a product has dozens of color options, they must wrap cleanly to the next line. GP Product Options uses CSS flexbox principles natively. This structure ensures that when swatches run out of horizontal space, they flow onto the next line automatically without overlapping other elements or breaking the container bounds.

Swatch Shape and Size Comparison

Shape Best Use Case Texture Display Quality Layout Footprint Recommended Size
Circular Solid colors, apparel, cosmetics Low (corners cropped) Compact 32px
Square Wood grains, tiles, metal finishes High (full area utilized) Standard 48px
Rounded Square Modern apparel, fabrics, accessories High (minimal cropping) Standard 40px

How to Customize Swatch Layouts in the Dashboard

Follow these steps to customize the size, shape, and spacing of your swatches in GP Product Options:

  1. Open the GP Product Options app in your Shopify admin.
  2. Select the Option Set you wish to edit and click to open it.
  3. Click on the specific Color Swatch or Image Swatch option field in the left sidebar.
  4. Navigate to the Design Settings section within the option drawer.
  5. Set your Swatch Width and Swatch Height using pixel values (e.g., 40px by 40px).
  6. Adjust the Border Radius to change the shape:
    • Enter 0px for a sharp square.
    • Enter 4px to 8px for a rounded square.
    • Enter 50% (or match the height value) for a perfect circle.
  7. Use the Item Spacing input to define the horizontal and vertical gaps (e.g., 10px).
  8. Save your changes and preview the live product page to verify the formatting.