Color swatch settings

Overview #

The Color Swatch Settings group is designed to manage the appearance and functionality of color swatches across the theme. These settings allow you to customize how color options are displayed for products, enhancing the visual appeal and usability of your store. While these settings apply globally, they can be overridden at the section or block level for more granular control.

Key components and functionality #

Display color swatches

This setting determines whether color swatches are shown for products. Enabling this option allows customers to see and select color variants directly from the product listing, providing a more interactive shopping experience.

• Default: false

Swatch style

This setting allows you to choose the shape of the color swatches. Different styles can enhance the visual appeal and usability of the product listings.

• Options:
  1. Circle
  2. Landscape
  3. Portrait
  4. Square
  5. Widescreen
• Default: Circle

Desktop column count

This setting specifies the number of color swatch columns displayed on desktop devices. Adjusting the column count can help optimize the layout for different screen sizes.

• Range: 1 to 8
• Default: 4

Mobile column count

This option controls the number of color swatch columns on mobile devices, ensuring a responsive design that adapts to smaller screens. You might consider using different settings for mobile to accommodate the unique layout needs of smaller devices.

• Range: 1 to 8
• Default: 4

Option names for color swatches

This setting allows you to specify which product option names should display as color swatches. It is important to use the exact option names, not the values, to ensure the correct swatches are shown.

Usage examples #

1. Enabling color swatches: You might consider enabling the Display color swatches setting to allow customers to quickly identify and select their preferred color options directly from the product listings.

2. Customizing swatch style: Consider choosing a swatch style that complements your store's design. For a modern look, you might opt for the "Circle" style, or choose "Square" if you prefer a more traditional appearance.

3. Optimizing layout for devices: Adjust the Desktop column count and Mobile column count settings to ensure that color swatches are displayed in an organized manner across different devices. For example, you might set the desktop column count to 4 for a balanced layout and the mobile column count to 2 for easy navigation on smaller screens.

By configuring these settings, you can create a visually appealing and user-friendly interface that enhances the overall shopping experience.