Header Integration: Adding Wishlist Icon to Navigation

Adding a Wishlist icon to your store's header provides customers with quick access to their saved items. Follow these steps to integrate the icon into your navigation:

Step 1: Check Theme Preset

1. Open the App Embeds settings in your Shopify theme editor.
2. Ensure a compatible theme is selected in the Theme Preset dropdown.
   • If your theme is listed, the Wishlist icon will be automatically added to the header based on the preset configuration.
3. Save your changes and preview your store to verify the icon is visible.

Step 2: Add Custom CSS Selector (If Needed)

If the icon doesn’t appear or your theme is not listed in the preset:

1. Identify the Header Element:

• • Use browser developer tools (e.g., Chrome DevTools) to inspect your header structure.
  • Locate the CSS selector for the desired location of the Wishlist icon (e.g., .header-links, .nav-bar).

2.Enter the Selector:

• • Go to App Embeds and input the identified selector in the Header Navigation Selector field.
  • Example: .headericon--cart places the Wishlist icon near the cart icon.

3.Save and Preview:

• • Save your changes in the editor.
  • Refresh your store to confirm the icon is positioned correctly in the header.

Step 3: Customize Icon Appearance

1.Open the Wishlistify Appearance settings in your Shopify admin panel.

2.Adjust the header icon’s:

• • Size: Modify with the range slider.
  • Padding: Fine-tune spacing around the icon.
  • Color: Match the icon to your store’s branding.

3.Save your changes and review the updates on your live store.

Tips for Success

• Test the icon’s functionality by clicking it to ensure it navigates to the Wishlist page.
• Use custom selectors for unique header layouts or advanced design requirements.