Adding Wishlist Button to Collection Pages

The Wishlist button is automatically added to the product grid in your collection pages if you have selected a compatible theme in the App Embeds settings. However, if your theme is not listed or the button does not appear as expected, you can manually configure it using a custom CSS selector.

Scenario 1: Compatible Theme Selected

1. Ensure Theme Selection:
   • Go to App Embeds in your Shopify theme editor.
   • Verify that a compatible theme is selected in the Theme Preset dropdown.
2. Automatic Integration:
   • The Wishlist button will be automatically added to your product grid without requiring additional configuration.
3. Test:
   • Preview your collection page to confirm the buttons are visible on each product.

Scenario 2: Theme Not Listed or Button Not Visible

1. Access CSS Selector Settings:

• Open the App Embeds settings in your theme editor.
• Locate the Product Card Wrapper Selector field.

2. Input a Custom CSS Selector:

• Identify the wrapper class for product cards in your collection grid.
• Example: Use .product-card-wrapper if this matches your theme's structure.

3. Save and Test:

• Save your changes in the theme editor.
• Refresh your collection page to ensure the Wishlist button appears correctly.

Tips for Success

• Use browser developer tools (e.g., Chrome DevTools) to inspect your collection grid and find the appropriate CSS selector.
• If you’re unsure about the selector, leave it empty to use the default from the selected theme preset.