While the Swym Wishlist Plus "Basic Button" is designed to work out-of-the-box for most themes, some merchants require deeper control over the button’s appearance, behavior, and placement.
The Advanced Button feature allows you to customize the button’s HTML and CSS directly, providing full creative freedom to match your brand’s unique aesthetic.
1. Enabling the Advanced Button
To get started, you must first switch from the Basic configuration to the Advanced setup within the Swym Admin App.
Open your Swym Wishlist Plus app.
Navigate to Configurations > Features > Help Shoppers Save Favorites.
Click Settings on the Wishlist button card.
Select the Advanced Button tab.
2. Activating the Button on the Theme Editor
The Advanced Button requires theme-level activation to integrate correctly with your Shopify theme's layout.
Select your Theme from the dropdown menu (usually your Live Theme).
Click Activate Button on Theme Editor.
This opens the Shopify Theme Editor in a new tab.
In the Theme Editor sidebar, find the Swym Wishlist Button block. You can now drag and drop it to your preferred location (e.g., above or below the "Add to Cart" button).
Click Save in the top right corner of the Shopify Theme Editor.
Note: After saving in the Theme Editor, return to the Swym Admin App and refresh the page to ensure all settings are synced.
3. Configuring Button Placement
You can choose how the button is anchored to your product page elements:
Inline with Product Details: Positions the button near the title, price, or "Add to Cart" button.
Overlay on Product Image: Places the button as an icon over the main product image.
Product Title: Places the button near the product title.
Custom Placement: For advanced layouts, provide a specific CSS Selector (e.g.,
.my-custom-container) to anchor the button to a specific element in your code.
4. Customizing HTML & CSS
The Advanced Button provides built-in code editors for full styling control. While these settings are also visible in the Shopify Theme Editor, we recommend using the Swym Admin App as your primary workspace for code changes.
HTML Editing
You can modify the HTML structure for two different states:
HTML (Before Click): The button's default appearance.
HTML (After Click): The state shown after a customer adds the item to their wishlist.
CSS Styling
Click the CSS tab to add custom styling. To prevent accidental edits, the editor is locked by default. Click the Edit (Pencil) icon to unlock it.
Common customizations:
Background Color: e.g.,
background: #FF0000;Border Styling: e.g.,
border: none;Border Radius: e.g.,
border-radius: 8px;
⚠️ Important: Preserve Required Variables
When modifying the HTML for your Before Click or After Click states, ensure you do not remove the required liquid variables. These variables are essential for the button to function and display the correct data.
Depending on your button settings, make sure the following are present in your code:
{{WishlistAddCTA}}: Displays the "Add to Wishlist" text label.
{{WishlistAddedCTA}}: Displays the "Added to Wishlist" text label.
{{SOCIAL_COUNT}}: Displays the number of times the product has been wishlisted by all users.
If these variables are removed, the button may appear blank or fail to update its status when clicked.
5. Saving and Previewing
To see your changes live:
Make your edits in the Advanced Button tab.
Click Save in the Swym Admin App.
Refresh your Shopify Theme Editor or your live storefront to see the updated styles.
Frequently Asked Questions
How do I switch back to the Basic Button?
To revert to the out-of-the-box Basic Button, you must manually remove the app block from your theme:
Open your Shopify Theme Editor.
Locate the Swym Wishlist Button block in the sidebar.
Click on the block and select Remove block.
Click Save. Once the app block is removed, Swym will automatically detect the change and reactivate the Basic Button configuration for your product pages. Your advanced HTML/CSS customizations will remain saved in the Swym Admin App if you choose to return to the Advanced Button later.
Do I need to be a developer to use this?
While the Advanced Button is designed for those comfortable with HTML/CSS, the editor allows for simple changes (like hex code colors) that are easy for anyone to follow.
Why don't I see my changes immediately?
Because the values are stored within your Theme Settings, you must click Save in the Admin App and Refresh your browser tab to see the sync reflected across the platform