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.