Install Wysh, sign up to a plan, complete the in-app Setup Guide, enable the storefront embedded app, add Wysh to the POS Smart Grid, and finish manual theme steps for partially supported themes.

<h2 data-pm-slice="1 3 []" id="isPasted" style="line-height: 2;">Install Wysh with the setup wizard</h2>Wysh setup is now completed in the setup wizard inside the app. The wizard walks you through choosing a theme, selecting default or custom settings, and enabling Wysh in your theme editor.This guide explains the new storefront setup flow for Shopify merchants. It focuses on installing Wysh on your online store.<hr>NOTE<blockquote>Theme choices made in the setup wizard are app-level settings. Theme editor block settings are theme-level settings. By default, if you set custom styling or placement in the wizard, those wizard settings override styling set through theme blocks.</blockquote><hr><h2 id="before-you-start">Before you start</h2><ul><li>You need access to your Shopify admin.</li><li>You need permission to manage apps and edit your online store theme.</li><li>Make sure you know which theme you want to install Wysh on. You can choose your live theme or a draft theme in the wizard.</li></ul><h2 id="install-wysh">Install Wysh</h2><ul><li style="font-size: 16px;">Step 1: Start the Wysh installation Install Wysh in Shopify, then open the app from your Shopify admin. In Wysh, click the button to start the installation wizard. </li><li style="font-size: 16px;">Step 2: Select the theme The wizard shows all themes in your store. Select the theme where you want Wysh to be installed. You can choose:</li><li>Your live theme if you want to set up Wysh on the storefront customers currently see.</li><li>A draft theme if you want to test setup before publishing changes.</li></ul><hr>TIP<blockquote>If you are making design changes first, choose a draft theme so you can review everything before publishing it live.</blockquote><hr><ul><li style="font-size: 16px;">Step 3: Choose default or custom settings Next, choose Default settings or&#xA0;Custom settings. You can choose only one option in the wizard. </li><li style="font-size: 16px;">Default settings If you choose default settings, Wysh uses: <ul><li style="line-height: 1.5;">A default black and white colour scheme</li><li style="line-height: 1.5;">Standard styling</li><li style="line-height: 1.5;">A floating wishlist badge instead of a header icon </li></ul></li><li>Custom settings If you choose custom settings, you can set:<ul><li style="font-size: 16px; line-height: 2;">Icon colours across different areas of the storefront</li><li style="font-size: 16px; line-height: 2;">Whether the wishlist icon is floating or placed in the header</li><li style="font-size: 16px; line-height: 2;">Where the wishlist icon appears on collection pages</li></ul></li></ul><hr>WARNING<blockquote>Wizard customisation is app-level. Theme editor block settings are theme-level. If you set custom styling or placement in the setup wizard, those wizard settings always override styling set through theme blocks unless you later enable Override Wizard Settings in the embed section.</blockquote><hr><ul><li style="font-size: 16px;">Step 4: Enable the Wysh embed When the wizard prompts you to embed Wysh, click the button to open your theme editor.</li></ul>In the theme editor:<ol><ol style="list-style-type: decimal;"><li>Open the App embeds area.</li><li>Turn on the Wysh embed.</li><li>Save your changes.</li></ol></ol>This enables Wysh on the theme you selected in the wizard.<h2 id="isPasted" style="line-height: 2;">Override Wizard Settings</h2>The Wysh embed includes an Override Wizard Settings option.If this option is enabled, theme settings in the theme editor take precedence over wizard settings. Use this when you want to stop using wizard styling and switch to theme-level settings instead.<hr>INFO<blockquote>Default behavior: wizard settings win over theme block settings. When Override Wizard Settings is enabled: theme editor settings win over wizard settings.</blockquote><hr> <img src="https://attachments.gorgias.help/1QNmd2YL9kd69XA0/hc/Q9r0k7BmLK92vg13/2026071412-c535aff4-a9e2-486e-ae80-561963cdcb03-11e10ef9-79f6-411c-8e6d-614863b47d50.png" alt="image (13)" width="428" height="403" class="fr-fic fr-dii"><h2 style="line-height: 2;" id="app-level-vs-theme-level-settings">App-level vs theme-level settings</h2>Wysh has two places where styling and placement can be controlled:<ul><li>Setup wizard: app-level settings that apply from inside Wysh</li><li>Theme editor: theme-level settings that apply inside a specific Shopify theme</li></ul>This matters when you update colours, icon placement, or display options.<hr>WARNING<blockquote>Wizard settings apply when you choose custom settings during setup. These are app-level settings and, by default, they override styling or placement set through theme blocks.</blockquote>WARNING<blockquote>Theme editor settings apply at the theme level. If you want those settings to control the storefront instead of the wizard, enable Override Wizard Settings in the Wysh embed.</blockquote>WARNING<blockquote>Use the setup wizard if you want a guided setup with central app settings. Use theme-level settings if you want to control styling directly inside a specific Shopify theme.</blockquote><hr><h2 style="line-height: 2;" id="partially-supported-themes">Partially supported themes</h2>Some themes are only partially supported. If your theme is partially supported, you still need to use manual placement to finish setup.Follow the manual placement guide here: <a href="https://wysh.gorgias.help/en-GB/manual-theme-icon-placement-7385512" target="_blank" rel="noopener noreferrer">Manual theme icon placement</a>.<hr>WARNING<blockquote>Even if the wizard is completed, a partially supported theme may still require manual placement so the wishlist icon appears in the right place on your storefront. </blockquote><hr><h2 style="line-height: 2;" id="check-that-wysh-is-working">Check that Wysh is working</h2>After setup, confirm everything is working on the selected theme:<ul><li>The Wysh embed is turned on in the theme editor</li><li>The wishlist icon appears in the location you expected</li><li>Your colours and styling match your chosen wizard or theme settings</li><li>Collection page icon placement matches your selected setup options</li></ul><hr>WARNING<blockquote>If you installed Wysh on a draft theme, preview that theme before publishing it live. </blockquote><hr><h2 style="line-height: 2;" id="troubleshooting">Troubleshooting</h2>If you don&apos;t see Wysh after completing the setup:<ul><li>Make sure you completed the setup wizard in Wysh.</li><li>Confirm you selected the correct theme in the wizard.</li><li>Open the theme editor and make sure the Wysh app embed is turned on.</li><li>Save the theme editor after enabling the embed.</li><li>If you are working on a draft theme, preview that draft theme rather than the live theme.</li><li>If your theme is partially supported, complete manual placement using <a href="https://wysh.gorgias.help/en-GB/manual-theme-icon-placement-7385512" target="_blank" rel="noopener noreferrer">Manual theme icon placement</a>.</li></ul>Changes in the theme editor are not applying:This usually happens because wizard settings are overriding theme-level settings.By default, if you chose custom styling or placement in the setup wizard, those wizard settings take precedence over theme block settings.To use theme editor settings instead:<ol><li>Open your theme editor.</li><li>Open the Wysh embed settings.</li><li>Enable Override Wizard Settings.</li><li>Save your changes.</li></ol>After that, theme-level settings should apply instead of the wizard settings.My theme is partially supported:If your theme is partially supported, the wizard may not place the wishlist icon in the correct location by itself.You still need to manually place the icon in your theme. Follow the guide here: <a href="https://wysh.gorgias.help/en-GB/manual-theme-icon-placement-7385512" target="_blank" rel="noopener noreferrer">Manual theme icon placement</a>.This is expected behaviour for partially supported themes.

Install Wysh on your store

Use this guide when Wysh shows Partial Support or your theme is unsupported. It explains where to paste the header, collection, and product page placeholders in Shopify theme code.

<h2 data-pm-slice="1 1 []" id="isPasted" style="line-height: 2;">When manual placement is needed</h2>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.<hr>WARNING<blockquote>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. </blockquote><hr><h2 style="line-height: 2;" id="before-you-start">Before you start</h2><ul><li>Open Wysh in your Shopify admin and review the Setup Guide.</li><li>Confirm whether your theme is marked Partial Support.</li><li>In Shopify, go to Online Store &gt; Themes.</li><li>On your current theme, open the actions menu and select Edit code.</li></ul><hr>INFO<blockquote>Some common placement examples are available in the How It Works page inside the Wysh app for reference.</blockquote><hr><h2 style="line-height: 2;" id="header-icon">Header icon</h2>Add this placeholder if you want customers to open My Wishlist from your store header.<ol><li style="font-size: 16px;">Open your theme code In Shopify admin, go to Online Store &gt; Themes. Open the actions menu for your theme and select Edit code.</li><li style="font-size: 16px;">Find your header file In the Sections folder, look for <code>header.liquid</code> or a similarly named header file.</li><li style="font-size: 16px;">Paste the header placeholder Copy and paste this code where you want the wishlist icon to appear in the header: <code>&lt;div data-wysh-header-badge-placeholder&gt;&lt;/div&gt;</code></li><li style="font-size: 16px; color: rgb(0, 0, 0);">Save your changes Click Save to apply the changes.</li></ol><hr>TIP<blockquote>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. </blockquote><hr><h2 style="line-height: 2;" id="collection-page-icon">Collection page icon</h2>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.<ol><li style="font-size: 16px;">Open your theme code In Shopify admin, go to Online Store &gt; Themes, open the actions menu for your theme, and select Edit code.</li><li style="font-size: 16px;">Find the product card template Look for the file that controls product cards. Common locations include: snippets/product-card.liquid snippets/card-product.liquid sections/main-collection-product-grid. liquid</li><li style="font-size: 16px;">Paste the collection placeholder Copy and paste this code into the product card template where you want the wishlist icon to appear: <code>&lt;div data-wysh-collection-button-placeholder&gt;&lt;/div&gt;</code></li><li style="color: rgb(0, 0, 0); font-size: 16px;">Save your changes Click Save to apply the changes.</li></ol><h2 style="line-height: 2;" id="product-page-icon">Product page icon</h2>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.<ol><li style="font-size: 16px;">Open your theme code In Shopify admin, go to Online Store&#xA0;&gt; Themes, open the actions menu for your theme, and select Edit code.</li><li style="font-size: 16px;">Find the product template Look for the file that controls the product form or product layout. Common locations include: sections/main-product.liquid snippets/product-form.liquid templates/product.liquid</li><li style="font-size: 16px;">Paste the product placeholder Copy and paste this code where you want the wishlist icon to appear in the product template: <code>&lt;div data-wysh-product-button-placeholder&gt;&lt;/div&gt;</code></li><li style="font-size: 16px;">Save your changes Click Save to apply the changes.</li></ol><img src="https://attachments.gorgias.help/1QNmd2YL9kd69XA0/hc/Q9r0k7BmLK92vg13/2026071412-9d9a4f45-2d03-4def-ae8d-c8596bb2c108-631f1e4b-3c2d-4ee8-be39-0427bcc7f2a3.png" alt="Example of the Wysh wishlist icon displayed beside Add to cart and Buy it now on a product page" class="fr-fic fr-dii"><h2 style="line-height: 2;" id="check-that-placement-worked">Check that placement worked</h2><ul><li>Open your storefront and confirm the header icon appears where you added it.</li><li>Open a collection page and check that the wishlist icon appears on product cards.</li><li>Open a product page and confirm the icon appears beside Add to cart and Buy it now.</li><li>Test saving an item to make sure it is added to My Wishlist.</li></ul><h2 style="line-height: 2;" id="troubleshooting">Troubleshooting</h2>Q. I added the code, but the icon does not appear:A. 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.<hr>Q. The icon appears in the wrong place:A. 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.<hr>Q. I have multiple possible theme files:A. 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.<hr>Q. Where can I see examples before editing my theme?A. Open the How It Works page inside Wysh to review common placement examples before updating your theme code.

Getting Started

Install Wysh on your store

Manual theme icon placement