Theme updates or layout changes can sometimes cause wishlist icons to become hidden or misaligned. Shopify Sidekick, your AI store assistant, provides instant commands to audit, fix, and style wishlist touch points, eliminating the need to manually edit code.
This capability is under preview. We are constantly working to improve it - Drop us any feedback you have to let us address it and enable you to do more!
1. Header Icon Helper (swym-header-icon-helper)
Use this when: The wishlist icon is missing from your header or looks inconsistent with your Cart and Search icons.
What it does: Sidekick opens your header.liquid file to find the exact class of your Cart icon. It then injects the Wishlist SVG, matching the stroke-width, color, and hover states of your theme's native icons.
How to prompt Sidekick:
"Run the Header Icon Helper. Read my header.liquid file to find the cart icon class and set up the Swym Wishlist Launcher to match it perfectly."
2. Collections Icon Helper (swym-collections-icon-helper)
Use this when: Heart icons are missing from your product grid or are positioned incorrectly on product tiles.
What it does: This is a Diagnostic Skill. Sidekick reads your product-card.liquid or grid snippets to find the container and image selectors. It then asks you targeted questions:
“The icon is invisible; should I update the selectors?”
“The icon is visible but positioned wrong; where should it go?”
How to prompt Sidekick:
"Run the Collections Icon Helper. Audit my product grid files and tell me if the wishlist hearts are visible and styled correctly. If not, help me fix the position and selectors."
3. Product Page (PDP) Helper (swym-pdp-button-helper)
Use this when: You need the "Add to Wishlist" button on your product pages to align with your "Add to Cart" button.
What it does: Sidekick verifies the button placement on the Product Detail Page (PDP). It ensures the button's borders, padding, and hover effects match your theme's primary button styles.
How to prompt Sidekick:
"Run the PDP Button Helper. Make sure the wishlist button on my product pages matches my theme's 'Add to Cart' button style and is positioned correctly for both mobile and desktop."
Advanced Styling Commands
Because these Helpers use your theme's actual code, you can ask for high-level aesthetic changes after the initial setup:
State-Specific Styling: "For the Collections Icon, make the 'After Adding' state a solid red heart but keep the 'Before Adding' state as a 2px outline."
Selector Overrides: "I've changed my product grid layout. Re-run the Collections Icon Helper and find the new classes in my theme files."
Hover Effects: "Match the wishlist icon's hover transition to the 0.3s fade used by my theme's navigation links."
Best Practices for Merchants
Let it Read the Code: Always allow Sidekick to finish "reading" your .liquid files. This ensures it doesn't hallucinate class names like .header-icon if your theme actually uses
.site-nav__link--cart.Answer the Diagnostics: When the Collections Icon Helper asks you a diagnostic question (e.g., "Where should it be positioned?"), give a simple answer like "Top-left" or "Centered at the bottom."
Mobile Verification: Always ask at the end: "Does this look correct on the mobile preview as well?"
Example Prompts
Once your icons are healthy, you can use Sidekick to "design" the experience. You can ask Sidekick for specific aesthetic changes:
Change Position & Size
"Move the wishlist hearts from the top-right to the bottom-right of the product images."
"Make the header wishlist icon 15% larger so it stands out more on mobile."
Custom Colors & Effects
"Change the heart icon to a solid red color only when an item is saved."
"Give the wishlist heart a white circular background with 40% transparency."
"Add a subtle pulse animation to the heart whenever a customer clicks it."
Dark Mode & Accessibility
"I'm using a dark background for my header; change the wishlist icon stroke to white so it's visible."
"Ensure the wishlist icons have a high enough contrast ratio for accessibility."
Frequently Asked Questions
Does Sidekick actually change my theme code?
Sidekick identifies the correct selectors and updates our app settings for you. In some cases, it may add a small snippet of CSS to your app's custom style block to ensure a perfect visual match.
What if Sidekick can't find my Cart icon?
If you have a highly custom or "headless" header, Sidekick might ask for clarification. You can help it by saying: "The cart icon is inside a div with the class .custom-cart-wrapper."
Can I undo a change?
Yes! You can always tell Sidekick: "Revert the last CSS change you made to the wishlist icons," or simply reset your styles within the Swym Admin.
Why aren't my changes visible in the live store?
Ensure you have saved the updated settings within the theme editor. Changes will not appear in the actual store until they are saved.
How to get started
Open Shopify Sidekick and try your first command after installing it as a sidekick skill.
/swym-header-icon-helper
Give it a go and let us know!