Syncing Styles Across Your Store: Using the One-Click Style Toggle
Why spend double the time configuring your store? If you’ve already perfected the look of the swatches on your individual product pages, you can instantly bring that same professional styling to your collection and search result pages.
What is the "Apply Product Styles to All" Toggle?
Located within the Collection Page Settings tab, this feature acts as a "master switch." When enabled, it tells the app to ignore separate collection settings and instead mirror exactly what you have set up in your Product Page Settings.
The Benefits of Syncing:
Brand Consistency: Ensures that a "Circular Swatch" for color looks the same whether a customer is on the homepage or a product page.
Instant Updates: If you change a "Size" option from a standard Button to a Button Pill on your product page, the change happens automatically on your collection grid.
Zero Manual Entry: No need to re-map HEX codes or upload custom images twice.
How to Activate the Sync
Open the Product Variant Options app dashboard.
Navigate to the Collection Page Settings tab.
Locate the option labeled Apply Product styles to all at the top of the interface.
Simply click the option to enable it.
Note: Once this is active, the individual option rows (like Color, Size, etc.) in the Collection Page tab will be grayed out or hidden, as they are now pulling data directly from your Product Page configuration.
When Should You Turn the Sync OFF?
While syncing is a massive time-saver, there are specific scenarios where you might want to manage collection pages separately:
Space Constraints: You want detailed Polaroid Swatches on the product page but need simple Circular Swatches on the collection grid to save space.
Minimalist Grids: You want to show colors on the product page but prefer to hide size options on the collection grid to keep the UI clean.
Different Visual Sources: You want to show Custom Texture Images on the product page but use Variant Images (actual product thumbnails) on the collection page.
Managing the Look After Syncing
Even when your styles are synced, you still have control over the fine details.
In the Customize Styles tab, you can use the Product Page and Collection Page toggles at the top to set different border thicknesses or animation effects. This allows you to keep the type of swatch the same (e.g., both are Buttons) while making the collection page version smaller or more subtle.
Quick Check: Is it Working?
If you’ve flipped the switch but don't see a change:
Refresh your storefront: Sometimes your browser cache needs a quick nudge.
Check the Active Badge: Ensure the style you are syncing has the green Active badge in the Customize Styles menu.
Need Help?
Our support team is dedicated to helping you build a beautiful storefront:
Live Chat: Available directly within the app dashboard.
Email Support: wecare@keficommerce.com