Wishlist Plus Customizations Guide

Make these checks before you change anything. They take a couple of minutes and prevent most "my change didn't show up" moments.
​

Go to Shopify Admin > Online Store > Themes > Customize > App embeds and make sure App Control Centre is switched on for the theme you're editing, and that Storefront UI Elements is switched on too if it's listed. If either is missing or won't stay on, see "Theme and App Embed checks".
​

Online Store 2.0 themes, including Shopify's current free themes, let you place Wishlist Plus blocks directly in your product template. If your theme is a vintage theme from before Online Store 2.0, contact Swym support for the best way to set up Wishlist Plus.
​

If either is missing, Swym support can switch the newer components on for your store.
​

[Note] Switching to a new theme? Theme-level customizations don't move across on their own. See "Configuration Scope and Manual Transfer" in Install and Configure Wishlist Plus App on your Shopify store for how to copy them over.
​

[Pro Tip] Customize a copy of your live theme first. Go to Shopify Admin > Online Store > Themes, open the ... menu next to your live theme, and choose Duplicate. Customize the copy, preview it, then publish it. A duplicate keeps the theme-level Wishlist Plus settings of the theme it was copied from.

​

This section covers the wishlist icon on the product cards in your collection grids: how it gets there, and how to change where it sits and how it looks.
​

Wishlist Plus can add the PLP icon in three ways. Most stores use Quick Save.

[Warning] Use one automatic setup at a time. If Collections Advanced is switched on, it replaces Quick Save's icons entirely rather than just taking priority over them, so switch one off before relying on the other.
​

Expected outcome: a wishlist icon appears on every product card in your collection grids, and shoppers can tap it to save a product without leaving the page.

If your theme isn't recognized. Wishlist Plus recognizes many popular themes automatically. If it can't recognize yours, a banner says your theme's selectors weren't recognized, and two fields under Theme Integration need filling in:

To find these, see "Finding CSS selectors".

[Note] If your collection grid is built by a third-party app, such as a product filter or search app, that app controls the product card markup, and Wishlist Plus may not be able to attach to it automatically. Use the manual setup, or ask that app's support team about adding the wishlist button.

Products that load later. Quick Save also adds icons to product cards that load after the page opens, for example after a shopper filters, sorts, or scrolls to load more products. There's nothing extra to set up.
​

If your store uses different product card markup in different places, such as collection grids and recommendation sections, you can enter more than one selector in each field, separated by commas. Wishlist Plus pairs them up in order: the first Product Tile Selector with the first Product Link Selector, the second with the second, and so on, so use the same number of entries in both fields, listed in the same order.
​

For a full field-by-field reference, see Customize Collections Wishlist Icon and Variant Selector Settings.
​

[Note] Collections Advanced settings are saved in that one theme. Products that load later, after filtering or infinite scroll, may need an extra script. See "Initialize Wishlist Buttons (For Dynamic Content)" in Troubleshooting Wishlist Button Issues.
​

Add the product tag swym-wl-disabled to any product you don't want shoppers to save. You'll find the Tags field on the product's page in Shopify Admin > Products. The tag hides the Quick Save icon for that product, hides the Basic Button on its product page, and stops Smart Save from adding it automatically. The Collections Advanced embed doesn't read this tag.
​

Quick Save code editor. On the Collections tab, switch the preview from Mock Preview to Code Editor. You'll see three tabs: Before HTML (the icon before the product is saved), After HTML (the icon once it's saved), and CSS. Giving each state its own HTML is the most reliable way to show different colors for saved and unsaved products, because the Icon Color setting colors the icon's outline in both states.
​

Keep these placeholders in your HTML so the icon keeps working:

{{PRODUCT_URL}} (the product's link) isn't in the default templates, so there's nothing to preserve there unless you've added it yourself.
​

If you remove the color or thickness placeholders, the matching setting is greyed out until you click Reset to Defaults to restore them (this also replaces any custom CSS you've added, so copy it somewhere safe first). If Show Social Count is on and your HTML is missing {{SOCIAL_COUNT}}, saving is blocked with "Cannot Save: Required {{SOCIAL_COUNT}} placeholder is missing in Before HTML!" until you add it back in. If you see "Form Settings May Not Apply," your HTML no longer matches a built-in template, so position, color, and thickness may not take effect until you reset.
​

Manual and classic icons. For icons added with Liquid code, or by the older storefront script, target these classes in your theme's CSS:
​

The icon itself is drawn by Wishlist Plus's own script as a character in :after, so the color rule needs :after and !important to override the built-in color, as shown above. For the full manual setup and button markup, see Adding the Wishlist Button to Your Collections Page through Liquid.
​

[Pro Tip] Manual buttons don't read the swym-wl-disabled tag. To hide a manual button on tagged products, wrap it in {% unless product.tags contains 'swym-wl-disabled' %} and {% endunless %}.
​

The Header Launch Point is how shoppers open their wishlist from anywhere on your store. This section covers choosing a launch point, setting it up, and customizing its item count badge.
​

[Note] No Launch Point tab? Your store uses the earlier layout, where this choice is called Launch From and sits on the Wishlist Page tab.
​

[Note] This choice of Header, Floating Button, or Navigation Menu applies to your whole store, not just the theme you have selected here.

Expected outcome: a heart icon appears in your header. Clicking it opens the shopper's wishlist, and the badge updates as they save items. The badge hides itself while the wishlist is empty. The icon takes your header's text color, so it matches your other header icons.
​

Finding your header selector. Right-click your Cart icon and choose Inspect. Move up the HTML from the <a> tag until the highlight covers the group of icons in your header. That element's class is your selector: a class becomes .classname, and an ID becomes #idname. Then narrow your browser window to phone width and repeat for the mobile selector, since many themes use a different header on mobile. For more help, see "Finding CSS selectors".
​

The Navigation Menu option isn't configured in the Wishlist Plus app. You add the link to your menu yourself.

Any link on your store whose address contains #swym-wishlist opens the shopper's wishlist when it's clicked. The link uses your menu's own styling and has no count badge.
​

[Warning] Whatever you save in the CSS tab replaces the header icon's built-in styles, rather than adding to them. Edit the rules that are already there instead of deleting them, and keep a copy of the original CSS before you start.

The built-in styles use these classes:

For example, to change the badge colors, edit only the color lines inside the existing .swym-header-icon-count rule:
​

Hand-coded header icon. If you'd rather build the header icon into your theme code yourself, see Adding the Wishlist button to your header menu using a code snippet.

The Add to Wishlist button on your product pages is usually the first place a shopper saves an item. This section covers choosing your button, placing it relative to Add to Cart, and styling it.
​

To open the PDP settings:

Basic Button. Under Button Position, choose a tab and an option:

Add To Wishlist Button app block. Go to Shopify Admin > Online Store > Themes > Customize, open a product page, and select the block. Set Button Position to Default; Product Image (Top Left, Top Right, Bottom Left, or Bottom Right); Product Title (Left or Right); or Add to Cart Button (Left or Right). Fine-tune it with Vertical Offset, from -25 to 25 pixels, and Occupy Full Width, which is on by default.

Advanced Button. If your store has a Swym Wishlist Button block in its product template, drag it to the spot you want, such as directly above or below Add to Cart. Either way, choose a Button Position on the Advanced Button tab (this field is per-theme):

[Note] If the button disappears after you move it onto the product image, your theme's image markup may not be recognized. Try a different placement, or see Troubleshooting Wishlist Button Issues.
​

Basic Button

On the Advanced Button tab, Button Text and Social Proof are the same storewide fields listed here; they aren't separate per-theme settings.

Add To Wishlist Button app block

Advanced Button: set Button Text on the Advanced Button tab, then use the code editor, described below, for colors, fonts, borders, and layout.

[Pro Tip] Selling in more than one language? Set the button's wording for each language at Shopify Admin > Apps > Wishlist Plus > Configurations > Multi Language Support.
​

Expected outcome: the Advanced Button replaces the Basic Button on your product pages.
​

To switch back, remove the Swym Wishlist Button block in the theme editor and save; Wishlist Plus returns to the Basic Button automatically, and your Advanced Button code stays saved in case you come back to it.

[Note] On newer stores, the Advanced Button is already active with no block to place or remove. If that's your store and you need to switch back to the Basic Button, contact Swym support rather than looking for a block, since the setting isn't surfaced in Shopify Admin.
​

The Advanced Button tab has three code editor tabs:

Each tab opens read-only to prevent accidental edits. Click the pencil icon to unlock a tab, make your changes, then click Save All.

Keep these placeholders where they apply:

Common CSS declarations, added inside the existing rules in the CSS tab:
​

If your custom HTML no longer matches a built-in template, the default layout options are switched off. Click Reset Defaults to delete your custom HTML and CSS and go back to the built-in versions; back up anything you want to keep first. Advanced Button HTML and CSS are saved to the theme you selected; Button Text and Social Proof are storewide, as noted above.
​