Manual theme icon placement
When manual placement is needed
If your store is using an unknown or Partially Supported theme, Wysh may ask you to place its icons manually in your theme code. This is done during the Theme Configuration step in the Setup Guide.
Manual placement lets you choose exactly where the Wysh wishlist icon appears in your theme header, collection product cards, and product pages.
Before editing theme code, make sure you are working on the correct theme in Shopify. If possible, duplicate your theme first so you have a backup.
Before you start
Open Wysh in your Shopify admin and review the Setup Guide.
Confirm whether your theme is marked Partial Support.
In Shopify, go to Online Store > Themes.
On your current theme, open the actions menu and select Edit code.
Some common placement examples are available in the How It Works page inside the Wysh app for reference.
Header icon
Add this placeholder if you want customers to open My Wishlist from your store header.
In Shopify admin, go to Online Store > Themes. Open the actions menu for your theme and select Edit code.
In the Sections folder, look for header.liquid or a similarly named header file.
Copy and paste this code where you want the wishlist icon to appear in the header:
<a id="wysh-header-badge-wrapper"></a>Click Save to apply the changes.
Place the header placeholder near your account, cart, or other header action icons if you want the wishlist entry point to feel natural for customers.
Collection page icon
Add this placeholder if you want the wishlist icon to appear on collection grids or product cards, so customers can save items without opening the full product page.
In Shopify admin, go to Online Store > Themes, open the actions menu for your theme, and select Edit code.
Look for the file that controls product cards. Common locations include:
snippets/product-card.liquidsnippets/card-product.liquidsections/main-collection-product-grid.liquid
Copy and paste this code into the product card template where you want the wishlist icon to appear:
<div data-wysh-collection-button-placeholder></div>Click Save to apply the changes.
Product page icon
Add this placeholder if you want the wishlist icon to appear beside the main product purchase actions, such as Add to cart and Buy it now.
In Shopify admin, go to Online Store > Themes, open the actions menu for your theme, and select Edit code.
Look for the file that controls the product form or product layout. Common locations include:
sections/main-product.liquidsnippets/product-form.liquidtemplates/product.liquid
Copy and paste this code where you want the wishlist icon to appear in the product template:
<div data-wysh-product-button-placeholder></div>Click Save to apply the changes.
Check that placement worked
Open your storefront and confirm the header icon appears where you added it.
Open a collection page and check that the wishlist icon appears on product cards.
Open a product page and confirm the icon appears beside Add to cart and Buy it now.
Test saving an item to make sure it is added to My Wishlist.
Troubleshooting
First, make sure the code was pasted into the correct file and that you clicked Save. Then confirm that the storefront embedded app is enabled and that you completed the Theme Configuration step in Wysh.
Move the placeholder higher or lower in the same theme file until it appears where you want it. The exact position depends on your theme layout.
Many Shopify themes split product cards and product forms across several snippets. If the first file does not control the visible area you want, check the other common locations listed in this guide.
Open the How It Works page inside Wysh to review common placement examples before updating your theme code.
Related guides
Complete app setup, including the Setup Guide, storefront embedded app, POS Smart Grid, and theme setup.
See how the product page wishlist icon works for customers once placement is complete.