# Swish Documentation The Wishlist solution for Shopify brands with ambition. ### Setting up Swish Swish is able to be set up and sent live on your store quickly and easily using our out of the box settings and app embeds. While performing this yourself is straight forward, we also offer an entirely free setup and installation service that ensures the Wishlist is perfectly matched to your store. If you would like us to install Swish for you, please visit our app within your Shopify admin and raise a support ticket, or reach out to us via and we'd be glad to help. If you require more advanced customisations, our team will try to assist where possible and within reason. Stores with development resources may wish to take advantage of our versioned [code editor](https://app.gitbook.com/o/1nlVEKuXTsmJAeFBSBUZ/s/nXXi1yNhTBzSF0GRtx54/~/changes/20/customizations/code-editor) for fine grain control and complete customisability of the front end experience. If you're getting started and would like to install yourself, please [Install Swish](https://apps.shopify.com/wishlist-king) from the Shopify app store. # Getting Started Swish can be setup on your store using the **App Embeds** within the **Theme Customiser,** which are easy to use and don't require any coding. For developers who require further customisations there is an advanced [**Code Editor**](https://app.gitbook.com/o/1nlVEKuXTsmJAeFBSBUZ/s/nXXi1yNhTBzSF0GRtx54/~/changes/20/customizations/code-editor) within the app settings. While setting Swish up on your store is straight forward, we offer an entirely free setup and installation service which ensures that all elements of the Wishlist elements are styled and functioning perfectly. We recommend this approach for most merchants. {% hint style="info" %} **Migrating from another Wishlist app?** \ We can import existing customer Wishlists from other apps for you. {% endhint %} Install the app from the [Shopify app store](https://apps.shopify.com/wishlist-king) and follow the onboarding steps within the app. All new customers will receive a 30 day free trial. ### Quick Start 1. Open theme editor in Shopify admin 2. Activate the **App Settings** embed * Make sure to select a theme preset! 3. Activate **Collection Buttons** embed 4. Activate **Floating Wishlist Link** embed 5. Activate **Wishlist Page** embed 6. Add **Product Page Button** app block via sections # App Settings Enables the app + customisation and styling settings. Found under Theme Customiser → App Embeds, Swish’s App Settings app embed is a central place to enable and manage settings for the Wishlist on your store. Here you can define the visual styling of the Wishlist components that will show across the various parts of your site, as well as managing other Wishlist settings. {% hint style="info" %} **This extension controls visibility of the Wishlist on your site.** The App Settings embed needs to be activated for Swish to run. Turning it off will hide and disable all Wishlist components across your store. {% endhint %} ### Theme Presets Library Swish has predefined settings for every popular theme in the Shopify theme store. Simply select your theme from the Theme Preset list. Selecting your theme ensures the correct placement of Wishlist components across your store. Our presets are optimised to work with the latest version of official themes from the Shopify theme store. Third-party themes as well as older versions may not work out of the box and may require advanced customisations. We will be glad to assist here. If your theme is not listed, you can set this to “Custom”. {% hint style="info" %} **Make sure to select your theme preset!** Selecting your theme makes the app setup process far easier. If your theme is not listed, please use the theme preset called "Custom" {% endhint %} ### Colors Define a colour scheme to style your Wishlist components. ![Color scheme applied to Wishlist button](/files/ZesUW6O33hhMigeQSwTm) Color scheme applied to Wishlist button ### Buttons Define basic button styles. ![Button settings applied to Wishlist button](/files/T5zkN8dOn8jlIz6n1ciI) Button settings applied to Wishlist button ### Inputs Define basic inputs styles. ![Inputs settings applied to product option dropdown](/files/Gvjr2rzIdF1DuKjuPuaC) Inputs settings applied to product option dropdown ### Shadows Define your shadow style. ![Shadows settings applied to floating Wishlist link](/files/tV0w5ASUYpRr0ECGFOs5) Shadows settings applied to floating Wishlist link ### Preferences #### Access mode With access mode, you can restrict access to your store's Wishlist. * **Unrestricted Access** Customers can use the Wishlist without having to have an account and don’t need be logged in. Anyone can start a Wishlist with one click. * **Require Login Before Use** Customers must have an account and must be logged in to use the Wishlist. * **Require Login to View Wishlist** All customers can add products to the Wishlist with one click. No account needed. However, customers will need an account and be logged in to view their Wishlist. This can incentivise customers to create an account in your store. #### Multi variant mode Determines whether multiple variants of the same product can be added to the Wishlist. By default only one variant per product will be shown on the Wishlist page as this is what most stores require. The variant can be changed on the Wishlist page, like on the product page itself. * **OFF (Default)** Only one variant per product can be added to the Wishlist. The variant can be changed on the Wishlist page. * **ON** Multiple variants of the same product can be added to the Wishlist. #### Wishlist path This property can be used to setup a custom Wishlist page. Learn more #### Currency codes Show or hide currency codes for prices. * **On**: $10.00 USD * **Off**: $10.00 # Collection Buttons Wishlist buttons for product collections. These buttons will float on top of the product images. Our collection buttons work straight out of the box for all current themes from the official Shopify theme store. If your theme is not listed in our presets, or for some reason isn’t compatible, we will manually add some code to make this work. {% hint style="info" %} **Requires the correct theme preset in App Settings** Most themes from the Shopify theme store will work with our Theme Presets. Some themes may require a manual step to enable the Collection Buttons. {% endhint %} ### Style Select a Wishlist button style. This uses the global [colour](https://www.notion.so/App-Settings-49f83f5f7fc84a6cba90d06254c637f9?pvs=21) and [button](https://www.notion.so/App-Settings-49f83f5f7fc84a6cba90d06254c637f9?pvs=21) values from [app settings](https://www.notion.so/App-Settings-49f83f5f7fc84a6cba90d06254c637f9?pvs=21). ![collection-style.png](/files/c7n6G5KBVpL1egv5VbJI) ### Position Position the floating button relative to the product image (e.g. bottom right corner). ### Offset Offset the the floating button position. * **Horizontal offset** Negative values move the button left, positive values move the button right. * **Vertical offset** Negative values move the button down, positive values move the button up. ### Background Collection buttons will always have a clickable area of 48px width and height. This helps especially on touch devices to make sure the buttons are easy to use. However, you can adjust the visible background size and styling without effecting the clickable area. ![collection-background.png](/files/lXxO2nUtvLx8UGaBtBQH) ### Shadow Adds a shadow to the collection button. This uses the global [shadow](https://www.notion.so/App-Settings-49f83f5f7fc84a6cba90d06254c637f9?pvs=21) values from [app settings](https://www.notion.so/App-Settings-49f83f5f7fc84a6cba90d06254c637f9?pvs=21). ### Icon Adjust the Wishlist button icon style. Icons will use the global [colour](https://www.notion.so/App-Settings-49f83f5f7fc84a6cba90d06254c637f9?pvs=21) values from [app settings](https://www.notion.so/App-Settings-49f83f5f7fc84a6cba90d06254c637f9?pvs=21). ![collection-icon.png](/files/fhUyO2aETQsgiLaJMnqL) ### Search & filter app preset We have presets for popular collection filter and search apps to inject our Wishlist buttons into their code. In some cases a [manual setup](https://www.notion.so/Collection-Buttons-1-b6d57207ef014717a69749bf18b5f02b?pvs=21) is required. * AI Search, Filter & Recommend by Boost * Algolia Search and Discovery * Smart Product Filter & Search by Globo * Smart Search Bar & Filters by Searchanise * Smart Search & Product Filter by SoBooster ### Manual setup To manually setup Wishlist buttons for your collections, every button requires two things: * **Product link** The product link is used to connect the Wishlist button to a specific product/variant. * **Reference element** The Wishlist button will float over this element (e.g. product image). #### Product link selector The product link is defined by a [CSS selector](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors), which points to an anchor element with a product page href. We recommend to be as specific as possible with this selector to avoid injecting the button in unwanted places. We often use a selector with a pattern match to reference product links. ```css .card .card__heading > .full-unstyled-link[href*="/products/"] ``` #### Floating reference The reference element is defined in a single line of JavaScript code. The code gets a single argument named target, which is a light wrapper around the product link. If you want the buttons to float over the product link element, you can just set this value to `target`. In case you want to float the Wishlist button over another element, use these chain-able methods to reference another element. * `closest(selector: string)` Query a parent html element. [Learn more](https://developer.mozilla.org/en-US/docs/Web/API/Element/closest) * `find(selector: string)` Query a child html element. [Learn more](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector) ```jsx target.closest(".card").find(".card__media") ``` # Floating Wishlist Link Floating link to Wishlist page. The floating Wishlist link is an easy “no code” way to add a link to your customers' Wishlist page to your site. It floats in a corner of the browser and can be hidden when the Wishlist is empty. {% hint style="info" %} **Custom Header Link** A custom header link requires changes in our app's Code Editor due to limitations of Shopify’s theme editor. Send us a customisation request through the app to have us do this for you. {% endhint %} ### Style Select a floating Wishlist link style. This uses the global [colour](https://www.notion.so/App-Settings-49f83f5f7fc84a6cba90d06254c637f9?pvs=21) and [button](https://www.notion.so/App-Settings-49f83f5f7fc84a6cba90d06254c637f9?pvs=21) values from [app settings](https://www.notion.so/App-Settings-49f83f5f7fc84a6cba90d06254c637f9?pvs=21). ![floating-style.png](/files/IzfIhZB3o0NFvp8DPguF) ### Visibility Controls when the floating Wishlist link is shown. * **Always Visible** Always show the floating Wishlist link. * **Hide when Wishlist empty** Hides the floating Wishlist link until a product was added to the Wishlist. ### Position Position the floating Wishlist link relative to the browser window (e.g. bottom right). ### Offset Offset the the floating Wishlist link position. * **Horizontal offset** Negative values move the button left, positive values move the button right. * **Vertical offset** Negative values move the button down, positive values move the button up. ### Border radius Use this setting to adjust the border radius. When set to 0 the link is a square, setting it to the max value will create a circle. ### Shadow Adds a shadow to the floating Wishlist link. This uses the global [shadow](https://www.notion.so/App-Settings-49f83f5f7fc84a6cba90d06254c637f9?pvs=21) values from [app settings](https://www.notion.so/App-Settings-49f83f5f7fc84a6cba90d06254c637f9?pvs=21). ### Icon Adjust the icon size and stroke thickness. ### Counter Style Various styling options for the counter. ### Counter Visibility * **Always show counter** Permanently show the counter. * **Hide counter when 0** Hides the counter when Wishlist is empty. * **Always hide counter** Permanently hide the counter. # Product Page Buttons Wishlist buttons for product pages. These buttons can be added and configured through the theme editor. More advanced setups and button placements can be achieved via code access. {% hint style="info" %} **Theme 2.0 required.** Product page buttons are app blocks, which can only be used in 2.0 themes. Other themes need to add these buttons via [Code Editor](/customizations/code-editor). {% endhint %} ### Style Select a Wishlist button style. This uses the global colour and button values from app settings. ![product-style.png](/files/8D8zjTb7WJ3lNrttKSUA) ### Alignment Adjust the Wishlist button alignment when it’s not displayed [full width](https://www.notion.so/Product-Page-Buttons-1-2aa354d5617e4e7f95b01e444f045a06?pvs=21). Use content alignment when the button is set to [full width](https://www.notion.so/Product-Page-Buttons-1-2aa354d5617e4e7f95b01e444f045a06?pvs=21). ![product-alignment.png](/files/hTARpEqYUUW5RZhnSEwh) ### Spacing Adjust the Wishlist button spacing. All values are in px. Note: Negative values can be used in order to reduce the spacing if surrounding elements have excessive margins. ![product-spacing.png](/files/YUm84RCJQGRbSdaLdqCv) ### Max width Use this setting to restrict the maximum width of the Wishlist button. When set to 0 the max width is turned off. ### Full width When active the button will stretch to fill the entire available space or its [max width](https://www.notion.so/Product-Page-Buttons-1-2aa354d5617e4e7f95b01e444f045a06?pvs=21). ### Show text Hide or show the Wishlist button text. ### Show icon Hide or show the Wishlist button icon. ### Icon Adjust the Wishlist button icon style. Icons will use the global [colour](https://www.notion.so/App-Settings-49f83f5f7fc84a6cba90d06254c637f9?pvs=21) values from [app settings](https://www.notion.so/App-Settings-49f83f5f7fc84a6cba90d06254c637f9?pvs=21). ![product-icon.png](/files/Nm9DJKbFcENkja9Hwqsw) # Wishlist Page This embed adds a Wishlist page to your store. ### Column width Adjust the column width of the product grid. Smaller columns means more products per row. ### Page width Defines a maximum allowed width. On larger screens the Wishlist page will not exceed this value (in px). ### Padding Adjust the top and bottom padding of the Wishlist page. ### Show share button Show or hide the Wishlist share button. ### Remove from Wishlist When this option is enabled, products will be removed from the Wishlist when added to cart. ### Product options Set the way product option selectors (variants) are displayed. * **Dropdowns** Display product options as dropdowns. * **Swatches** Display products options as swatches. * **None** Hide the product option selectors. ### Product option style Set the product option input style. ### Call to action Set the call to action for Wishlist products. * **Add to cart** Displays an add to cart button. * **View product** Displays a button that navigates to the product page. * **None** Hide button. ### Call to action style Set the call to action button style. ### Alignment Align text on the product cards left, right or centre. ### Image aspect ratio Set an aspect ratio for product images. We use the [aspect ratio CSS syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio) for this setting. Below is a list of common values. Note: If your store uses the same aspect ratio for all images it is best to set this to the exact aspect ratio of your images. Note: If your store uses various aspect ratios it is best to set this to Square 1/1. * Landscape: `4/3` * Portrait: `4/5` * Square: `1/1` * Tall portait: `2/3` ### Image fit Defines how product images display within the image aspect ratio set above. * **Contain** Displays the entire product image without any cropping, adding empty space if needed. * **Cover** Crops the product image to cover the entire area defined in aspect ratio. ### Show vendor Show or hide the product vendor. ### Show product title Show or hide the product title. ### Show price Show or hide the product price. ### Show option name Show or hide the product option name (e.g. Size, Colour, etc). # Code Editor Code Access for advanced customisations. With code access you can further customise Wishlist King beyond the functionality of the Shopify theme editor. This feature requires technical knowledge about themes and writing code. Just like our theme extensions, Code Access will not modify your theme code. Because of this, all modifications will automatically carry over when a theme is updated. # Custom Wishlist Page Setup a custom Wishlist page. The app’s default Wishlist page can simply be enabled via an app embed. Alternatively you can setup a custom Wishlist page following the steps outlined below. This will enable you to add additional code to the Wishlist page template and also change the default page address from /apps/wishlist to something like /pages/wishlist or /pages/favourites etc. {% hint style="info" %} **Custom Wishlist address.**\ A custom Wishlist page will no longer use the default address /apps/wishlist and instead use /pages/your-handle. {% endhint %} ### Step By Step * Create a new page in Shopify admin * Enter a name and then click: Edit website SEO * Remember the page handle (e.g. wishlist) * Open the theme editor and find the Swish App Settings embed * Change the wishlist path setting to: /pages/your-handle * Replace “your-handle” with the actual page handle * Open the template menu at the top centre of the theme editor * Select: Pages > Create template * Enter name: Wishlist * Select: Create template * Add section to new template named: Wishlist Page * Hide the default page section * Save the new template * In Shopify admin, navigate to: Online Store > Pages * Open the previously create Wishlist page * Assign thew new template named Wishlist * Save your changes * The custom Wishlist page is now available on your store ### Alternative Code Setup In some cases you might want to manually add the Wishlist Page to your liquid code. You can use the below snippet, which will render the default Wishlist Page. {% hint style="info" %} **Wishlist Embed required.** Using this technique still requires the Wishlist App embed to be activated. {% endhint %} ```html ``` # Instant Header Link Add an instantly rendering header link to your theme. When we inject our default header link through Code Access, there will be a slight delay before it gets rendered. This is to ensure that the app has the least possible impact on your store’s performance. This article explains how to add an **instantly rendering Wishlist link** to your theme’s Liquid code. We then use Code Access to convert the static element into an interactive element that automatically reacts to the Wishlist data. {% hint style="info" %} **Liquid code modification required** Updating your theme’s Liquid code should be done by a theme developer. Note: These changes may get lost when you update your theme. {% endhint %} ### 1. Add markup to header section Use the code below to render a basic Wishlist link in your header section. You can adjust the markup and styling to your needs. ```html
0
``` You should now see a static header link in your online store. In the next step will turn it into a dynamic link again. ### 2. Setup Headless Wishlist Link With Code Access we turn the instant but static header link into a dynamic / interactive link that is connected to the customer’s Wishlist. It will then show the state of the Wishlist and dynamically update when the Wishlist is being interacted with. Copy and paste the below code into the “Headless Wishlist Link” tab in Code Access. ```jsx export function inject({ theme }) { theme.watch( { selector: ".wishlist-header-link .wkh-button", }, (target) => { theme.createHeadlessComponent("wishlist-link-headless", { host: target, }); } ); } export function define({ WishlistElementHeadless }) { return class WishlistLinkHeadless extends WishlistElementHeadless { getStateConfig() { return { wishlist: true, }; } getWishlistUrl() { if (this.app.settings.loginRequired) { return this.app.routes.accountLoginUrl; } return this.app.routes.wishlistUrl; } updated() { const numItems = this.wishlist ? this.wishlist.numItems : 0; this.host.href = this.getWishlistUrl(); this.host.classList.toggle("wkh-selected", numItems > 0); this.host.querySelector(".wkh-counter").innerText = numItems; } }; } ``` # Custom Colour Swatches Add custom colour swatches for your product options. Some stores render product variants as colour swatches instead of dropdowns. Since there is no standardised way to set this up in Shopify, this customisation needs to be adjusted to your specific setup. {% hint style="info" %} **Requires coding.** This customisation requires some light coding. If you are not a developer, please have us do this for you. {% endhint %} ### Update app settings First we need to adjust the app settings so that product variants are rendered as swatches. Open the theme editor and find the Wishlist Page embed. Update the product options setting to: Swatches. You can then further style the input settings in the main App Settings embed. You should now see product options on the Wishlist page rendered as swatches with text values. ![Screenshot 2023-08-24 at 16.59.24.png](/files/zd9He0zwANa2Hf3zrz3k) ### Setup a custom colour map With Code Access we modify the **Custom Product Cards** to understand how an option name is mapped to a colour or image. The sample below assumes that you have uploaded png files in Shopify, which have the same name as your production option values. How exactly an option value is mapped to a colour or image will vary from store to store. ```jsx class WishlistProductCard extends WishlistElement { // Only replace the function below, not the entire file getColorMap(option) { if (option.name === "Color") { return option.values.reduce((colorMap, value) => { const handle = this.app.utils.url.handlelize(value); const color = handle.split("_").pop(); const image = this.app.utils.url.getFileUrl(`${handle}.png`); return { ...colorMap, [handle]: { image, color }, } }, {}); } } } ``` # Save for Later Button Add a save for later button to the shopping cart. This guides explains how to add a Save for Later button to your cart. The Save for Later button will move a product from the cart to the Wishlist. In this guide we will use Shopify’s Dawn theme as an example. Other themes will work as well, but might require minor adjustments. {% hint style="info" %} **Requires coding** . This customisation requires some light coding. If you are unfamiliar with code, we will be glad to do this for you. {% endhint %} ### Code Access The Save for Later button is a Code Access customisation. Make sure that the Code Access app embed is activated in the theme editor, otherwise the code will not be loaded into your theme. In Code Access navigate to Save for Later section on the left and uncomment the sample code. (Select All, Command+/) The customisation consists of two functions: `inject` and `define`. Use the **inject** function to add the button to your cart’s line items. The **define** function will create the web component that renders and controls the button. #### Inject web component Every line item in your cart will have a link to the product page. We use the link url to read the product information (handle, variant) for each line item. The first thing you need to adjust is the product link selector in line 6 of the sample code. The selector varies from theme to theme and must point to an anchor element that links the to line item’s product page. ```jsx export function inject({ theme }) { theme.watch( { // Line 6 selector: '.cart-item .cart-item__name[href*="/products/"]', }, (target) => { // ... } ); } ``` Next we will adjust the code that inserts the element into your cart. Because the product link is usually nested in the line item markup, we move up the DOM tree with `closest` and then `find` the element that we want to inject the Save for Later button into. This is in line 9 of the sample code. Both of these css selectors are theme specific and need to be adjusted to work with your theme. ```jsx export function inject({ theme }) { theme.watch( { selector: '.cart-item .cart-item__name[href*="/products/"]', }, (target) => { // Line 9 target.closest(".cart-item").find(".cart-item__quantity").append( theme.createComponent("save-for-later", { // ... }) ); } ); } ``` #### Update the click handler When the Save for Later button is clicked, it will first add the product to your customer’s Wishlist and then trigger the line item’s remove function. The easiest method to integrate with your cart’s remove function is to trigger a click on the cart’s already existing remove button. Find line 96 in the sample code in Code Access. Again we move up the DOM tree (relative to the Save for later button’s location) with `closest` and then `find` the remove button. Both css selectors are theme specific and need to be adjusted to work with your theme. ```jsx // Line 96 const cartRemoveButton = this.closest(".cart-item").querySelector(".cart-remove-button"); cartRemoveButton.click(); ``` The web component provided in our sample code will render a button with a heart icon. The markup of this component can be adjusted if needed, but it is not required and not part of this guide. You should now see the Save for Later button in your line items. ![Save for Later button in Dawn theme](/files/tUEJir1sxjI4vJMlwdLP) Save for Later button in Dawn theme # Wishlist Notifications Trigger notifications for certain Wishlist events. This guides explains how to trigger notifications for certain Wishlist events. You can for example trigger a popup when a product has been added to the Wishlist. In an effort to keep Wishlist King as light as possible, we have not added a Popup or Toast library. This needs to be added on your end. {% hint style="info" %} **Requires coding.** This customisation requires some light coding. If you are unfamiliar with code, please get in touch for help. {% endhint %} ### Code Access Notifications can be triggered with Event Subscribers in Code Access. Make sure that the Code Access app embed is enabled in the theme editor, otherwise the code will not load into your theme. In Code Access navigate to Save for Later in the left hand column. Here you will find some default event subscribers. We recommend to leave these as they are. #### Subscribe to Wishlist Event Every customer interaction with the Wishlist will trigger an event. In this example we will subscribe to the event `wk:wishlist:add:success` which is triggered after a product was added the to the Wishlist. The event data will differ depending on the event type. In this example we log the product title to the browser console. Use this as a starting point to implement your own customisations. ```jsx export function setup({ app }) { // Add this below the other subscribers app.events.subscribe("wk:wishlist:add:success", (event) => { console.log(`${event.data.product.title} added to Wishlist`); }); } ``` #### Wishlist Events Here is a list of all the events that can be subscribed to. * wk:wishlist:add:success * wk:wishlist:add:error * wk:wishlist:remove:success * wk:wishlist:remove:error * wk:wishlist:change-variant:success * wk:wishlist:change-variant:error * wk:wishlist:clear:success * wk:wishlist:clear:error * wk:wishlist:share:success * wk:wishlist:share:error * wk:wishlist:add-to-cart:success * wk:wishlist:add-to-cart:error * wk:wishlist:add-all-to-cart:success * wk:wishlist:add-all-to-cart:error * wk:wishlist:page-view * wk:wishlist:login-required * wk:customer:login * wk:customer:logout # Swish API Leverage the power of Swish's API to create powerful integrations with your favourite tools and services. The Swish API allows you to read and write information across your store's Swish profiles. You can do things like read a Wishlist, add new items and lists and much, much more. You can view the Swish API docs [here](https://developers.swish.app/) # Klaviyo Integration An over view of Swish's Klaviyo integration Swish has a powerful Klaviyo integration that enables you to send Wishlist powered product and customer events as well as profile level wishlist data. This guide will take you through setting up the Klaviyo integration, including setting up Klaviyo Flows that can be triggered by events sent from Swish. Swish sends the following data and events to Klaviyo:
Data TypeNameDescription
Customer EventAdded product to WishlistWhen a customer adds a product to their Wishlist.
Customer EventRemoved product from WishlistWhen a customer removes a product to their Wishlist.
Customer EventViewed WishlistWhen a user views their Wishlist page.
Product EventWishlist product back in stock

When a unit of stock for a saved item becomes available after being previously sold out.

A minimum stock level for this event can be set within the Klaviyo integration settings in the Swish app in your Shopify admin.

Product EventWishlist product low in stock

When the stock level of a saved item drops below a specified level.

A minimum stock level for this event can be set within the Klaviyo integration settings in the Swish app in your Shopify admin.

Product EventWishlist product price drop

When the price of a Wishlist item drops by more than a set %.

The minimum price drop % for this event can be set within the Klaviyo integration settings in the Swish app in your Shopify admin.

Custom Profile AttributeLatestWishlistItems The Item ID for the 10 most recently saved items in a customer's wishlist
Custom Profile AttributePrimaryWishlistId

A customer's unique Wishlist ID.

This can be appended to storename.com/app/wishlist/PrimaryWishlistId to share a public link to the customer's wishlist.

These events and profile attributes enable you to leverage the full power of Klaviyo, including email and SMS, to drive additional value from the Wishlist. # Klaviyo Integration Setup A quick guide on integration Klaviyo with Swish. ### Integration Guide Integrating Klaviyo with Swish is simple. Follow these steps to push ### Creating a new Private API Key in Klaviyo Creating a private API key in Klaviyo is an essential first step for integrating Klaviyo with Swish. This new Private API key and your existing Klaviyo Public API Key need to be entered into the Klaviyo integration settings within the Swish app in your Shopify admin. Creating a new Private API key is straight forward: In Klaviyo select your profile from the bottom left hand corner of the page and select **Settings → Account → API keys**: ![](/files/hSYKERzE8Z7F7vwSJomJ) Select the API keys section within **Settings → Account**, taking note of your Public API Key. Click **Create Private API Key**: ![](/files/DjsbgrEP7ZpoveWdrepQ) **Name** your new private API key to distinguish it from any other existing private API Keys. Select **Full Access Key** and press **Create.** ![Klaviyo API Key Creation.png](/files/I9H4gvpXxzebnOeXbVnP) Copy the private API key and take note of the public API key from the API Keys page. ![Private-Key.jpg](/files/cEofKgJ09CosNn6mOmMy) Visit the Swish app in your Shopify admin. Click **Settings** and then select **Klaviyo** from the integrations list.
Add your public API key into the first field. Paste the private API key you have created into the second field and click **Save**:
Now it’s time to configure your stock and price related events # Configuring Events In Swish ## Configuring Events Swish allows you to set specific conditions for certain events, ensuring a seamless customer experience. To set these conditions, head to your Shopify admin and select Swish from your Apps. These options can be found under **Settings -> Klaviyo** Here you will find settings for **Back In Stock, Low In Stock** and **Price Drop** events. ### **Back In Stock** Recover lost sales by notifying your customers when an item on their Wishlist comes back in stock.

Back In Stock Event Settings

### **Available settings:** #### **Minimum stock** Back In Stock events will only occur when the stock on hand for the saved item is at or above the minimum stock level #### **Ignore saved product variant** Activating this setting will turn on Back In Stock events for all variants of a Wishlisted product, regardless of the variant the customer has specified in their Wishlist. ### **Low In Stock** Delight customers by notifying them when an item on their Wishlist is low in stock.

Low In Stock Event Settings

### **Available settings:** #### **Stock threshold** Low In Stock events will only occur when the stock on hand for a customers saved Variant drops below the Stock Threshold value #### **Minimum stock** Low In Stock events will only occur when the stock on hand is at or below the minimum stock level #### **Ignore saved product variant** Activating this setting will turn on Low In Stock events for all variants of a Wishlisted product, regardless of the variant the customer has saved to their Wishlist. ### Price Drop Drive revenue by notifying customers when the price of an item in their Wishlist drops.

Price Drop Event Settings

### **Available settings:** #### **Minimum Price Change** Price Drop events will only occur when the price for a customers saved Variant drops by at least the minimum price *change* amount #### **Minimum stock** Price Drop events will only occur when the stock on hand is at or above the minimum stock level #### **Ignore saved product variant** Activating this setting will turn on Price Drop events for all variants of a Wishlisted product, regardless of the variant the customer has specified in their Wishlist
Once you’ve configured your events, you'll need to simulate the events on your store front in order for them to appear in Klaviyo as triggers you can use to start Flows. # Testing Events ## Sending Test Events In order to set up a flow in Klaviyo a trigger event must exist on a customer profile. The easiest way to achieve this is to simulate the various event types that Swish sends to Klaviyo. The steps to achieve this are straightforward 1. Visit your store 2. Sign into a customer account on your store front 3. Add an item with a variant selected from your product page 4. Noting the stock thresholds you have set for your **Low In Stock** event, adjust the inventory for the variant you saved to the Wishlist to a value lower than the Stock Threshold but higher than the Minimum stock value 5. To simulate the **Back In Stock** event, now adjust the inventory for the saved variant to 0, and then adjust it to a stock level higher than the Minimum Stock level set in your event preferences 6. Now, adjust the price of the variant by a % greater than specified in the Minimum Price Change field in the **Price Drop** event settings. 7. Finally, return the price and stock levels back to their original levels. 8. Check the Klaviyo profile for the customer account you logged into at Step 2 to ensure that the following events are present 1. Added product to Wishlist 2. Wishlist product back in stock 3. Wishlist product low in stock 4. Wishlist product price drop Now that Wishlist events are setup and present in Klaviyo, you can starting building Flows using Wishlist events as the trigger. # Setting Up Klaviyo Flows ## Wishlist Flows Each event type sent from Swish can be used to trigger flows in Klaviyo. Each metric (ie. Event) will be triggered either by a customer wishlist update, price or inventory update change ## **Klaviyo Flow Setup** Setting up Klaviyo flows requires some basic knowledge of Klaviyo Flows as well as template tags and variables, but it is not overly complicated. Firstly, setup a new Flow Click **Flows → Create flow**
Select **Build your own**
Name your flow (eg. "Wishlist - Low In Stock")
Under **Select Trigger** choose **Your Metrics** and then **API**:
Select the Wishlist metric you would like to use to trigger your flow (eg. Wishlist product low in stock)
Click **Save**. Now it's time to create the email. #### Add an email step Under **Actions**, click and drag **Email** beneath the flow trigger
Select the **Email** you’ve just added to the **Flow** Enter the email name, subject line and preview text. You can also edit the sender name and sender email address at this step.
The final step to setting up a flow is to [configure email content.](/integrations/klaviyo-integration/configuring-email-content) Once you're familiar with setting up a Flow, you can set up Wishlist Emails and Notifications using the following Flow guides: {% content-ref url="/pages/DTvU9gcrlfcpkr2bQSes" %} [Wishlist Welcome Flow](/integrations/klaviyo-integration/setting-up-klaviyo-flows/wishlist-welcome-flow) {% endcontent-ref %} {% content-ref url="/pages/bRuRw4dcrdIKdxOuVHcC" %} [Wishlist Reminder Flow](/integrations/klaviyo-integration/setting-up-klaviyo-flows/wishlist-reminder-flow) {% endcontent-ref %} {% content-ref url="/pages/h3oPNymxidQgCbIGsUt3" %} [Low In Stock Flow](/integrations/klaviyo-integration/setting-up-klaviyo-flows/low-in-stock-flow) {% endcontent-ref %} {% content-ref url="/pages/lymThg2rsX0usrhUzNYK" %} [Back In Stock Flow](/integrations/klaviyo-integration/setting-up-klaviyo-flows/back-in-stock-flow) {% endcontent-ref %} {% content-ref url="/pages/dHtOG591sn04IQngfMP0" %} [Price Drop Flow](/integrations/klaviyo-integration/setting-up-klaviyo-flows/price-drop-flow) {% endcontent-ref %} # Wishlist Welcome Flow ## **Wishlist Welcome** When a user creates a Wishlist for the first time it is a nice touch to send them a Welcome email outlining how your brand uses the Wishlist function and the associated custom notifications you’ll send them, as well as reminding them of the items they have added to their Wishlist. Depending on your customer behaviour and other flows you have within Klaviyo, it may make sense to send this anywhere from shortly after their first **Added product to Wishlist** event, to a few hours or one day post their first **Added product to Wishlist** event. Flow setup: 1. Use the “**Added product to Wishlist”** event as the Trigger for this flow 2. Add a time delay if you wish to send this after a period of time 3. Customise your email content. This is a great place to explain the benefits of your Wishlist to the customer, outlining the types of notifications they can receive based on the other Wishlist flows you’ll setup as well as additional benefits the Wishlist offers them when shopping on site. The **Added product to Wishlist** event also contains the list of the 10 most recently added items from the customers wishlist, which allows you to display multiple products within the email if you wish to. 4. For the Wishlist Welcome email, we add a step that creates a Profile property of “Wishlist Welcome” = “True”. This allows us to use this Profile property as a filter on our other reminder flow, ensuring a customer doesn’t receive both the reminder email and the welcome email at once, as both of these will use the **Added product to Wishlist** event as the trigger 5. As the Welcome email should only be sent to the customer once, we also add an a additional filter of “Has not received this email” and we skip anyone who has received this message “at any time”
\ Once you have finished configuring the flow logic, you can add content using the following guide[Inserting A Single Product Into An Email Template](/integrations/klaviyo-integration/configuring-email-content/inserting-a-single-product-into-an-email-template)\
# Wishlist Reminder Flow ## **Wishlist Reminder** Nudging customers to revisit their Wishlist and your site is a great way to drive already engaged traffic back to your site. These visitors have already shown a high level of interest and intent, and a timely reminder to revisit their Wishlist is often all thats needed to get them over the line on a purchase. Depending on your customers buying and Wishlisting behaviour, you may want to use different time delays. Below, we are waiting 1 day after an *Added product to wishlist* event occurs, and then using a conditional split to check whether there have been any *Added product to wishlist* events since the profile entered the flow. If there have been no products added to the Wishlist since entering the flow they will continue on to receive the notification. If the profile does have *Added product to wishlist* events, each of these events will enter them into this flow again. Only once the profile has no additional *Added product to wishlist* events since entering the flow, will they proceed to the next step. This is to ensure we are waiting for the user to cease adding products to their Wishlist before we send them a Wishlist reminder, and it also ensures that the *Added product to wishlist* event also carries with it a list of the most recently added products. Once a profile has ceased adding to their Wishlist for 24 hours, we then have a 6 day wait to see if they have placed an order. This time delay and conditional split based on whether or not they’ve Placed an order is optional, but for this Flow we don’t want to send a wishlist reminder if they’ve purchased recently. To make sure this flow isn’t sent at the same time as the Welcome email (both are triggered by the *Added product to Wishlist* event) we set a trigger profile filter of The final step is to send the Wishlist reminder email.
Once you have finished configuring the flow logic, you can add content by following the instructions on[Inserting Multiple Products Into An Email Template](/integrations/klaviyo-integration/configuring-email-content/inserting-multiple-products-into-an-email-template) # Low In Stock Flow **Wishlist Low In Stock** Letting a customer know that an item on their Wishlist is low in stock is both a great customer service touch and a strong sales driver. The email associated with this event should send 5 minutes after the trigger event occurs. This delay ensures Klaviyo has a current record of the product availability before the notification is sent. This flow will send for whenever an item in a users wishlist meets the low in stock thresholds you set when you [congfigured your events](https://app.gitbook.com/o/1nlVEKuXTsmJAeFBSBUZ/s/nXXi1yNhTBzSF0GRtx54/~/changes/16/integrations/klaviyo-integration/configuring-events-in-swish) in Swish.

Low In Stock Flow Logic

Once you have finished configuring the flow logic, you can add content using the following guide[Inserting A Single Product Into An Email Template](/integrations/klaviyo-integration/configuring-email-content/inserting-a-single-product-into-an-email-template) # Back In Stock Flow ## **Back In Stock** The email associated with this event should send briefly after the trigger event occurs. This flow will send whenever an item in a users wishlist meets the Back In Stock thresholds you set when you [configured your events](/integrations/klaviyo-integration/configuring-events-in-swish) in Swish.
Once you have finished configuring the flow logic, you can add content using the following guide[Inserting A Single Product Into An Email Template](/integrations/klaviyo-integration/configuring-email-content/inserting-a-single-product-into-an-email-template) # Price Drop Flow **Price Drop** Informing customers of pricing changes to their Wishlist Items is a great way to drive conversion and re-engage customers {% hint style="info" %} Pricing updates to larger product catalogs can take time to execute in Shopify, and you may want to send other brand comms around a price adjustment, we typically suggest a longer delay for Price Drop emails to ensure the site is fully updated when you send the notification. {% endhint %}
Once you have finished configuring the flow logic, you can add content using the following guide[Inserting A Single Product Into An Email Template](/integrations/klaviyo-integration/configuring-email-content/inserting-a-single-product-into-an-email-template) # Configuring Email Content The events that Swish sends to Klaviyo contain the following data
DataDescriptionNotes
ProductIdThe Shopify Product ID of the event item
VariantIdThe Shopify Variant ID of the event item This value is only present when there is a variant selected for the saved item
ItemIDEither the VariantId if present, or the ProductId if no variant is selectedThe ItemID ensures that the most accurate product data is loaded. Where no variant has been selected for the saved item, the ProductId is used
LatestWishlistItemsUp to 10 ItemID's of the customers most recently saved itemsThis data can be referenced to display a users most recently saved items within a flow
You can use Klaviyo's **catalog lookup tag references** to add dynamic product information such as descriptions, prices and product images in your Wishlist emails or SMS templates. Please see [this](http://help.klaviyo.com/hc/en-us/articles/360004785571) Klaviyo help article further information on catalog lookup tag references. The Swish x Klaviyo integration uses three different template's, depending on the data source and the email type. {% content-ref url="/pages/IMR5NwsSXTA6yvSf6TIV" %} [Flows and Events](/integrations/klaviyo-integration/configuring-email-content/flows-and-events) {% endcontent-ref %} # Flows and Events Used for Low In Stock, Back In Stock and Price Drop notifications As outlined in Setting Up Klaviyo Flows, Swish events can be used to trigger flows in Klaviyo. The following table lists each metric, a short description of why it's triggered, and some examples of the types of flows that are usually setup in Klaviyo to trigger a notification email or SMS to customers. Events are triggered by Customer wishlist actions and Product price or inventory changes.
Flow TypesTrigger EventEvent Description
Wishlist Welcome &
Wishlist Reminder		Added product to WishlistWhen a customer adds a product to their Wishlist.
Low In Stock AlertWishlist product low in stock

When the stock level of a Wishlisted item drops below a specified level.

A minimum stock level for this event can be set within the Klaviyo integration settings in the Swish app in your Shopify admin.

Back In Stock AlertWishlist product back in stock

When a unit of stock for a Wishlisted item becomes available after being previously sold out.

A minimum stock level for this event can be set within the Klaviyo integration settings in the Swish app in your Shopify admin.

Price Drop AlertWishlist product price drop

When the price of a Wishlist item drops by more than a set %.

The minimum price drop % for this event can be set within the Klaviyo integration settings in the Swish app in your Shopify admin.

# Inserting A Single Product Into An Email Template Swish sends events for changes to item availability and price. These events are perfect for triggering personalised customer notifications about a specific item in their Wishlist.\ \ The most common single product flows are Low In Stock, Back In Stock and Price Drop alerts. The simplest way to insert product information from a Wishlist event is by using a **Table** content block in your email templates. To add a Table content block and integrate the catalog lookup tags for displaying your products and content, follow these steps: Under **Blocks** select and drag a **Table** onto your template where you would like your product image and details to appear.
Tables utilise Static data within the Styles setting by default. For a Single Product Email this is the correct approach and should not be changes.
Determine which side of your Table content block will contain the product information and which side will feature the product image (We recommend image left and text right):


Select the left-hand side of the table and click **Image**, and then click **Select Image**: Select **Dynamic Image** and enter this code into the field for the image URL: ```html {% catalog event.ItemId integration='shopify' %}{{ catalog_item.featured_image.full.src }}{% endcatalog %} ```
Next, press **Save** Now, enter this code into the Link address field ```html {% catalog event.ItemId integration='shopify' %}{{ catalog_item.url }}{% endcatalog %} ```
Now, to insert product details we use the text column the box on the right-hand side of the **Cell selector** and then select **Text** under Column content. Here you can utilise the relevant catalog lookup tags from the table above. In this example we are going to include the Product title, variant title and current price using the following code: **NOTE: This code must be pasted into the Source code within the text editor:**
Once you have the Source Code editor open, paste the below code ```html

{% catalog event.ItemId integration='shopify' %}{{ catalog_item.title }}{% endcatalog %}

{% catalog event.ItemId integration='shopify' %} {% if catalog_item.variant %} {% currency_format catalog_item.variant.price %} {% if catalog_item.variant.metadata|lookup:"compare_at_price" and catalog_item.variant.metadata|lookup:"compare_at_price"|divide:1 > catalog_item.variant.price|divide:1 %} {% currency_format catalog_item.variant.metadata|lookup:"compare_at_price" %} {% elif catalog_item.metadata|lookup:"compare_at_price" and catalog_item.metadata|lookup:"compare_at_price"|divide:1 > catalog_item.variant.price|divide:1 %} {% currency_format catalog_item.metadata|lookup:"compare_at_price" %} {% endif %} {% else %} {% currency_format catalog_item.metadata|lookup:"price" %} {% if catalog_item.metadata|lookup:"compare_at_price" and catalog_item.metadata|lookup:"compare_at_price"|divide:1 > 0 %} {% currency_format catalog_item.metadata|lookup:"compare_at_price" %} {% endif %} {% endif %} {% endcatalog %}

```
You can now preview and send a test email to ensure that everything is setup and working as expected! # Inserting Multiple Products Into An Email Template Swish sends events when a users interacts with their Wishlist, including when a users adds to, removes from or views their Wishlist. These behavioural events can be used to trigger emails that feature multiple products from a customers Wishlist such as Wishlist Welcome and Reminder flows. The method explained below needs to utilise our `LatestWishlistItems` event, which can contain up to 10 of the most recent wishlisted products in a customer's Wishlist. The simplest way to insert product information from a Wishlist event is by using a **Table** content block in your email templates. To add a Table content block and integrate the catalog lookup tags for displaying your products and content, follow these steps: Under **Blocks** select and drag a **Table** onto your template where you would like your product image and details to appear.
Tables utilise Static data within the Styles setting by default. For emails that feature multiple products from an event, the data should be set to **Dynamic**. The following code should be added to the **Row collection** field. *Note: the `slice` value determines the amount of products that will be shown in the email. (10 max.)* ``` event.LatestWishlistItems|slice:10 ``` The **Row Alias** should be set to "`item`". Delete the second column.
Now, to insert product details we ensure the Cell content is set to Text and open the **\** code editor.
Here you can utilise the relevant catalog lookup tags from the table above. In this example we are going to include the Product title, variant title and current price using the following code: **NOTE: This code must be pasted into the Source code within the text editor:** Once you have the Source Code editor open, paste the below code ```html

{% catalog item.ItemId integration='shopify' %}{{ catalog_item.title }}{% endcatalog %}

{% catalog item.ItemId integration='shopify' %} {% if catalog_item.variant %} {% currency_format catalog_item.variant.price %} {% if catalog_item.variant.metadata|lookup:"compare_at_price" and catalog_item.variant.metadata|lookup:"compare_at_price"|divide:1 > catalog_item.variant.price|divide:1 %} {% currency_format catalog_item.variant.metadata|lookup:"compare_at_price" %} {% elif catalog_item.metadata|lookup:"compare_at_price" and catalog_item.metadata|lookup:"compare_at_price"|divide:1 > catalog_item.variant.price|divide:1 %} {% currency_format catalog_item.metadata|lookup:"compare_at_price" %} {% endif %} {% else %} {% currency_format catalog_item.metadata|lookup:"price" %} {% if catalog_item.metadata|lookup:"compare_at_price" and catalog_item.metadata|lookup:"compare_at_price"|divide:1 > 0 %} {% currency_format catalog_item.metadata|lookup:"compare_at_price" %} {% endif %} {% endif %} {% endcatalog %}

```
You can now preview and send a test email to ensure that everything is setup and working as expected! # Google Analytics Send wishlist events to Google Analytics. Swish integrates with Google Analytics 4 and tracks the native [add to wishlist event](https://developers.google.com/analytics/devguides/collection/ga4/reference/events?sjid=489349706315954270-EU\&client_type=gtag#add_to_wishlist). This is only available in the latest version of the app and will track automatically, when GA4 is setup on your store. If your store is still using Universal Analytics, this will not work. It is recommended by Shopify to [migrate to Google Analytics 4](https://help.shopify.com/en/manual/reports-and-analytics/google-analytics/migrating-to-google-analytics-4). They are sunsetting Universal Analytics on July, 2023. ### Opportunities * Analyse your customers’ Wishlist engagement * Improve your [ecommerce measurements](https://developers.google.com/analytics/devguides/collection/ga4/ecommerce?client_type=gtag) * Improve your [Google Ads remarketing](https://www.shopify.com/blog/6019860-how-to-use-google-remarketing-for-ecommerce) * Improve your [Google Ads retargeting](https://www.shopify.com/blog/google-ads-retargeting) ### Wishlist purchase journey This diagram shows how many products that were added to Wishlist have been purchased.

Final result in Google Analytics

#### Create new exploration Open Google Analytics and follow these steps: * Open the explore section * Start a new funnel exploration * Click the edit icon next to steps #### Setup funnel steps Setup the funnel steps as show in the screenshots below.

Funnel page 1/2

Funnel page 2/2

# Meta Pixel Track Wishlist events in Meta Pixel. Swish integrates with Meta Pixel and tracks the native [add to wishlist event](https://www.facebook.com/business/help/402791146561655?id=1205376682832142). This is only available in the latest version of the app and will track automatically, when Meta Pixel is setup on your store. ### Opportunities * [Create a custom audience](https://www.facebook.com/business/help/666509013483225) with event `Add to wishlist` * Improve your [Facebook retargeting](https://www.shopify.com/blog/facebook-retargeting) # Maestra Track Wishlist events in Maestra. Maestra is an omnichannel marketing hub designed for online retail and DTC brands. Using Wishlist King, you can monitor your customers' Wishlist activities in Maestra and construct marketing flows related to Wishlist activity. ### Code Access Add the below code in Code Access > Event Subscribers. ```jsx export function setup({ app }) { // Leave the default subscribers and add the code below app.events.subscribe("wk:wishlist:add:success", (event) => { const { product, variant } = event.data; mindbox?.("async", { operation: "AddToWishList", data: { customer: { email: app.customer?.email, }, addProductToList: { productGroup: { ids: { shopifyUK: product.id, } }, product: { ids: { shopifyUK: variant?.id, } } } } }); }); app.events.subscribe("wk:wishlist:remove:success", (event) => { const { product, variant } = event.data; mindbox?.("async", { operation: "RemoveFromWishList", data: { customer: { email: app.customer?.email, }, removeProductFromList: { productGroup: { ids: { shopifyUK: product.id, } }, product: { ids: { shopifyUK: variant?.id, } } } } }); }); } ``` # How long is a wishlist saved for? Wishlists are saved in the browser indefinitely and will remain available unless the user clears their browser data or history. Once a customer logs in, their wishlist is linked to their account. \ This allows them to access the same wishlist across any device or browser, as long as they are logged in. # Can I add a custom icon? Yes, you can replace the default heart icon with a custom SVG icon across your store. To do this, your icon must meet the following requirements: * **Format**: SVG * **Dimensions**: 64x64 pixels * **Design**: Include both `stroke` and `fill` properties Once your icon is ready, upload it via **Swish’s Settings > Code Editor > Custom Icons**. (You can refer to the attached sample for guidance.) ```svg ``` # Installing the app on multiple themes In **Swish’s Settings > Code Editor**, you’ll find three environments available: * `main` * `staging-1` * `staging-2` If you’d like to install the app on two different themes, you can: 1. **Use a different environment for each theme** by selecting it from the **Code Editor > Environment** dropdown. 2. In the **Theme Editor**, go to the **App Embeds** section and select the corresponding code environment under the `{Code} Access` embed. This allows each theme to run its own version of the app’s code independently.

Select your working environment (e.g., main, staging-1, or staging-2). Each environment can be mapped to a different theme.

In your theme's editor within Swish's {Code} Access embed, match the selected environment to the one used in Swish’s Code Editor.

# How can I customise Wishlist Text & Translations? You can customise the text shown in the Wishlist, including button labels, messages, and callouts, to match your brand voice or translate it into another language. ### Where to Update Translations Translations can be updated directly in the **Swish app** via the: > **Swish App > Settings > Code Editor > Translations** This editor allows you to control all Wishlist-related UI copy using a structured JSON object.\ \ ![](/files/X4Myf4i9nH7RGYoL9IVk)\ \ Once updated and saved, your changes will appear instantly on the storefront wherever the wishlist is used. # How to Add a Customer's Name to the Wishlist Page? To personalize the Wishlist Page, you can modify the header to include the logged-in customer's name. This enhancement helps customers quickly identify their own wishlist when viewing it. This customisation can be achieved directly in the **Custom Product Card code** within **Swish’s > Settings > Code Editor**. #### How It Works The `renderHeader` function determines whether a customer is logged in: * **If a customer *****is***** logged in:**\ Their name will appear at the start of the wishlist title (e.g., *“John's Wishlist”*). * **If *****no***** customer is logged in:**\ The header will default to the generic wishlist title (e.g., *“Wishlist”*). ```javascript renderHeader() { const title = this.app.customer ? `${this.app.customer.name}'s ${this.getTranslation("wishlist_page.title")}` : this.getTranslation("wishlist_page.title"); return html`

${title}

${this.renderWishlistEmptyCallout()} ${this.renderLoginCallout()} ${this.renderControls()}
`; } ``` # How to show a quantity selector on the wishlist page? This guide walks you through how to display and style a quantity selector in your Wishlist using Swish’s Code Editor. ### Enable Quantity Selector In **Swish → Settings → Code Editor → Custom CSS**, add: ```css wishlist-page .wk-page .wk-form .wk-quantity { display: inline-flex; } ```
## Show quantity selector with horizontal counter
### Update the Quantity Markup In **Swish → Settings → Code Editor → Custom Product Card**, update the .wk-quantity block from: ```javascript
``` to: ```javascript
``` ### Add Quantity Counter Logic In **Swish → Settings → Code Editor → Custom Product Card**, add the following to your component’s JavaScript: ```javascript updated() { const input = this.renderRoot.querySelector(".wk-quantity-input"); const minus = this.renderRoot.querySelector(".wk-qty-minus"); const plus = this.renderRoot.querySelector(".wk-qty-plus"); if (input && minus && plus) { minus.addEventListener("click", () => { let value = parseInt(input.value) || 1; if (value > 1) input.value = value - 1; }); plus.addEventListener("click", () => { let value = parseInt(input.value) || 1; input.value = value + 1; }); } } ``` ### Style the Counter Buttons In **Swish → Settings → Code Editor → Custom CSS** (example CSS) ```css wishlist-page .wk-page .wk-form .wk-quantity { display: inline-flex; margin: 0; width: 50%; height: 45px; flex-wrap: nowrap; flex-direction: row; border: 1px solid #00000063; } .wk-qty-btn { height: 100%; width: 100%; padding: 0; display: flex; justify-content: center; align-items: center; } ``` # How to require login to view or use the wishlist? Swish gives you flexible access control for your wishlist. You can decide whether users can view or interact with the wishlist with or without being logged in. ### How to Set Login Requirements #### To require a login for viewing or using the wishlist: 1. Locate Swish's App Settings app embed in the theme editor.
2. Within the App Settings app embed, scroll down to the Preferences section.
3. In the Access mode dropdown select the preferred access level.
4. Save the changes.
### Access Mode Options Explained | Option | Description | | ----------------------------------------- | --------------------------------------------------------------------------------------------- | | ✅ **Unrestricted access** | Anyone can view or use the wishlist without logging in. | | 🔒 **Require login before use** | Users must log in **before they can add items** to their wishlist. | | 🔒 **Require login to view list** | Users must log in to **view their wishlist**. | | 🙈 **Hide wishlist without login** | Hides wishlist UI unless the user is logged in. | | 🧑‍💼 **Hide wishlist without B2B login** | Hides wishlist UI for non-B2B users. Customers must be logged into a **Shopify B2B account**. | # Incorrect Pricing Displayed on Wishlist Page This is typically due to one of the following two causes: ### 1. Compare at Price Not Showing **Summary** Shopify may **suppress the “Compare at” price** in certain regions due to compliance regulations. **Reference:** [Shopify’s Pricing Indication Directive](https://help.shopify.com/en/manual/compliance/legal/pricing-indication-directive) > Shopify has a feature that hides **compare at prices** for stores in the **European Economic Area (EEA)** to comply with pricing indication regulations. > > When this is enabled, **our app will not render compare at prices** for customers browsing from these regions. How to Re-enable “Compare at” Prices for EEA Customers: * Go to **Settings → Markets → Preferences**. * **Uncheck**: `Hide compare-at prices for European Economic Area (EEA) customers`. * Save your changes. ### 2. Dynamic or Region-Based Price Differences **Summary** Price discrepancies can be caused by **Shopify's tax settings**, **Markets configuration**, or **regional adjustments,** even if localised pricing wasn’t explicitly set up. **Details** * **Tax & Market Settings Can Affect Price Display**\ If your store uses the following settings, then product prices may be adjusted at the API level to reflect estimated taxes for the customer’s region: * **“Show prices including taxes”** enabled in the Admin * **“Include taxes depending on customer's country”** enabled under **Settings → Markets → Preferences** * **API May Return Adjusted Prices:**\ Even if **Shopify Markets** is not actively used or localized pricing isn't set, Shopify may **still apply adjustments** when a **country context** is present in the Storefront API query. * **No Localized Pricing ≠ No Adjustments:**\ Simply having no explicit regional pricing does **not** guarantee the base price will be returned, **tax-inclusive settings** or **market adjustments** can still apply implicitly. **Suggested Troubleshooting Steps** 1. **Check Shopify tax settings:** * Is **"Show prices including taxes"** enabled? * Are taxes set to be **included or adjusted based on the customer’s country**? 2. **Check Market preferences:** * Go to **Settings → Markets → Preferences** * Review whether **country-specific features or tax rules** are enabled. 3. **Verify if price adjustment apps are active** * Some apps may alter prices silently based on region or language. 4. **Check for any hidden pricing adjustments** for the country in question (e.g., Spain)