Adding Swatches to Collection Page (Shopify)

Overview

• Customization compatible with Dawn version 15 and other free Shopify themes (e.g., Refresh, Sense, Origin).
• Previous version for Dawn v14 needed updates due to the release of v15.

Why Add Swatches?

• Helps customers browse products without entering the product page, reducing clicks.
• Can increase conversion rates by making it easier for customers to see products.

Setting Up Swatches

Pre-requisites

1. Follow Product Page Swatches tutorial: It sets up foundational elements needed for collection page swatches.
2. Ensure you have Dawn version 15 or equivalent theme.

Steps Overview

1. Customize Theme Settings:

   • Ensure that “Show second image on Hover” is unchecked.
   • Applies to product grid settings on collection, product, homepage, and search results pages.

2. Create/Modify Files:

   • New files:
     • card-variant-swatch-custom.liquid: Controls how swatches behave.
     • card-product-variant-selection-custom.js: JavaScript for swatch interactions.
     • CSS file: Controls styles (shapes, sizes) of swatches.
   • Modified files:
     • card-product.liquid: Defines product cards; include swatch code, update classes for styling.
     • theme.liquid: Includes JavaScript file on all pages (search, product, collection, etc.).
     • Other files:
       • Add necessary data IDs in search-results.liquid and related-products.liquid.

Detailed Steps

1. Theme settings adjustments:

   • Uncheck “Show second image on Hover” for collection, product, homepage, and search results pages.

2. Create and Customize Files:

   • card-variant-swatch-custom.liquid: Custom code for swatches.
   • card-product-variant-selection-custom.js: Handles swatch JavaScript interactions.
   • Define swatch shapes and sizes in CSS.
   • Modify card-product.liquid for swatch placement and interactions.
   • Update theme.liquid to call necessary JS across the store.
   • Ensure necessary data IDs are in search-results.liquid and related-products.liquid.
   • Adjust global.js for proper functioning of product recommendations.

3. Enabling in Shopify Admin:

   • Go to theme customizer and open product card swatches menu.
   • Enable product card swatches.

4. Testing and Refining:

   • Ensure swatches appear on collection page, product page, homepage, etc.
   • Adjust settings like lazy loading of images or variant option names as per store needs.

5. Version Overrides:

   • Use Meta fields to override specific product swatches.
   • Set up unique JSON parameters for individual product-level swatch customization.

Additional Configurations

• Lazy Load Variant Images: Improves page responsiveness by pre-loading variant images.
• Shape and Size: Customize the shape (circle/square) and size of the swatches.
• Variant Swatch Map Meta Object: Allows defining specific swatch settings using JSON.

Troubleshooting

• Check file names and paths: Ensure no typos in file names or paths (e.g., JavaScript file references).
• Verify theme settings: Confirm all theme customizer settings are correctly set.

Conclusion

• Swatches should now work across collection pages, product recommendations, search results, etc.
• Fine-tuning settings can help optimize performance and usability.
• Reach out for personalized help if needed.