Swatch King offers flexibility in how swatches are presented on the collection page, ensuring you tailor the experience to your store's design and your customer preferences.
Step 1: Navigating to Collection Page Settings in Theme Editor
From your Shopify admin, go to Online Store > Themes.
Find the theme that you want to edit, and then click Customize.
On the sidebar, click the App embeds icon.
View the settings for the Swatch King app embed by clicking the expand icon
▸next to the app embed name.
Step 2: Configuring Swatch Alignment and Position
Swatch Alignment: Decide where you'd like the swatches to appear in relation to other elements:
Left: Aligns swatches to the left side.
Right: Aligns swatches to the right.
Center: Centrally aligns the swatches.
Swatch Position: Determine the position of the swatch relative to other product details:
After Image: Displays swatches immediately after the product image.
After Price: Places swatches right after the product's price.
After Title: Showcases swatches following the product's title.
Step 3: Additional Collection Page Settings
Change Variant Image on Swatch Hover: When activated, hovering over a swatch will update the main image in the collection card to reflect that specific variant.
Auto-Select Variant: Enable this to automatically showcase the first available variant. Doing so will dynamically update the collection card's title, price, and image to match the preselected variant.
