Hiding the Floating Launchpoint on Specific Pages
By default, the floating launch point appears on all pages. Here’s how to hide it on select pages.
Case 1: Hide on a Single Page
Get the Page Pathname: Navigate to the page you want to hide the launchpoint on. In your browser's developer console, run
window.location.pathnameand copy the returned path (e.g.,/pages/contact-us).Create a Liquid Snippet: In your theme editor, create a new snippet file (e.g.,
swym-launchpoint-visibility.liquid).Add the Control Script: Paste the following code into the snippet file, replacing
/*pathname you copied*/with your page's path.<script> function swymCallbackFn(swat) { const toggleLaunchPointContainer = () => { const launchPointContainer = document.getElementById('notepad-anchor-title'); if (!launchPointContainer) return; if (window.location.pathname === '/*pathname you copied*/') { launchPointContainer.style.display = 'none'; } else { launchPointContainer.style.display = 'block'; } }; setTimeout(toggleLaunchPointContainer, 100); } if (!window.SwymCallbacks) { window.SwymCallbacks = []; } window.SwymCallbacks.push(swymCallbackFn); </script>Include the Snippet: In your
theme.liquidfile, add{% include 'swym-launchpoint-visibility' %}just before the closing</body>tag.
Case 2: Hide on Multiple Pages
To hide the launchpoint on several pages, use an array to make the script more scalable.
Add the Control Script: Create the
swym-launchpoint-visibility.liquidsnippet and use this code.<script> function swymCallbackFn(swat) { const toggleLaunchPointContainer = () => { const pagesToHideOn = [ "/pages/about-us", "/pages/contact", "/cart" ]; const launchPointContainer = document.getElementById('notepad-anchor-title'); if (!launchPointContainer) return; if (pagesToHideOn.includes(window.location.pathname)) { launchPointContainer.style.display = 'none'; } else { launchPointContainer.style.display = 'block'; } }; setTimeout(toggleLaunchPointContainer, 100); } if (!window.SwymCallbacks) { window.SwymCallbacks = []; } window.SwymCallbacks.push(swymCallbackFn); </script>Include the Snippet: Ensure the
{% include 'swym-launchpoint-visibility' %}tag is intheme.liquidbefore the closing</body>tag.
Rendering a Custom Wishlist on an Existing Page
You can display a customer's wishlist on any existing page, like their "My Account" page, for a more integrated experience.
Add Wishlist HTML to Page Template: In the template file (e.g.,
customers/account.liquid), paste the following HTML where you want the wishlist to appear.<div class="grid"> <div class="grid__item medium-up--five-sixths medium-up--push-one-twelfth"> <div class="section-header text-center"> <h2>My Wishlist</h2> </div> <div id="wishlist-items-container"></div> </div> </div> <script src="{{ 'swym-custom-wishlist.js' | asset_url }}" defer="defer"></script> {% include 'swym-custom-wishlist-css' %}Create the Wishlist JavaScript File: In your theme's
assetsfolder, create a file namedswym-custom-wishlist.jsand paste the full JavaScript code from the original documentation.Create the Wishlist CSS Snippet: In your theme's
snippetsfolder, createswym-custom-wishlist-page-css.liquidand paste the full<style>block from the original documentation.
Requiring Login to Add to Wishlist
This customization enforces a login requirement before a user can add a product to their wishlist.
On Product Detail Pages (PDP)
Add a Custom Wishlist Button: In your product template file (e.g.,
snippets/product-form.liquid), replace the default button with a custom one.<a href="#" class="custom-add-to-wishlist button">Add to Wishlist</a>
Add the Login Check Script: Paste the following script at the bottom of the same file.
<script> function wishlistLoginCheckHandler() { const isLoggedIn = {% if customer %}true{% else %}false{% endif %}; const customBtn = document.querySelector(".custom-add-to-wishlist"); if (!customBtn) return; customBtn.addEventListener("click", function(e) { e.preventDefault(); if (isLoggedIn) { let productData = { ...window.SwymPageData, et: _swat.EventTypes.addToWishList }; _swat.addToWishList(productData, () => console.log("Added to wishlist")); } else { window.location.href = "/account/login"; } }); } if (!window._swat) { if (!window.SwymCallbacks) { window.SwymCallbacks = []; } window.SwymCallbacks.push(wishlistLoginCheckHandler); } else { wishlistLoginCheckHandler(); } </script>
On Collection Pages
Modify the Product Grid Item: In the file that renders each product (e.g.,
snippets/product-card.liquid), add this code.{% include 'swym-product-view', product: product %} <button class="button swym-custom-collections swym-add-to-wishlist-view-product product_{{product.id}}" data-product-id="{{product.id | json}}">Add to Wishlist</button>Add Login Check Script to Collection Template: Add the following script to your main collection template file (e.g.,
templates/collection.liquid).<script> function wishlistCollectionsLoginCheckHandler() { const isLoggedIn = {% if customer %}true{% else %}false{% endif %}; document.querySelectorAll(".swym-custom-collections").forEach(button => { button.addEventListener('click', function(e) { e.preventDefault(); if (isLoggedIn) { const productId = this.getAttribute("data-product-id"); let productData = { ...SwymViewProducts[productId], et: _swat.EventTypes.addToWishList }; _swat.addToWishList(productData, () => { console.log("Added to wishlist"); this.textContent = "Added"; this.disabled = true; }); } else { window.location.href = "/account/login"; } }); }); } if (!window._swat) { if (!window.SwymCallbacks) { window.SwymCallbacks = []; } window.SwymCallbacks.push(wishlistCollectionsLoginCheckHandler); } else { wishlistCollectionsLoginCheckHandler(); } </script>
Common CSS Snippets for UI Customization
This collection of CSS snippets can address frequent customization requests.
Header & Navigation
Standardize the Header Icon:
i.icon.swym-launcher-header-icon { display: flex; justify-content: center; align-items: center; font-size: 1.6rem; } a#swym-inject-header { text-decoration: none; }Fill Header Icon When Wishlist Has Items:
body:has(span.swym-wishlist-header-counter.show-badge) i.icon-swym-wishlist:after { content: '\\f004'; color: #c02827; -webkit-text-stroke: 1px #000; }Style Wishlist Counter as a Dot:
span.swym-header-launcher-badge.cart-count-bubble { font-size: 0; padding: 0; width: 8px; height: 8px; border: 2px solid black; background-color: white; border-radius: 50%; top: 0; right: 0; }
Product Listing & Detail Pages (PLP & PDP)
Position PLP "Add to Wishlist" Button:
button.swym-button.swym-add-to-wishlist-view-product.swym-inject { position: absolute; bottom: 10px; right: 10px; font-size: 1.5rem; background: rgba(255, 255, 255, 0.7); border-radius: 50%; z-index: 1; padding: 0.5rem; line-height: 1; }Make PDP Button Full-Width:
.swym-btn-container.swym-inject, .swym-button-bar.swym-wishlist-button-bar.swym-inject { width: 100% !important; margin-left: 0; margin-right: 0; } button.swym-button.swym-add-to-wishlist { flex-grow: 1; text-indent: 0 !important; justify-content: center; }
Wishlist Page / Modal
Remove "Add to Cart" Button:
button.swym-add-to-cart-btn { display: none !important; }Prevent Product Title Truncation:
h2.swym-title.swym-title-1 { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; }Prevent Product Image Cut-Off:
.swym-wishlist-image-wrapper { height: auto !important; }Change "Remove" Icon to a Trash Can:
.swym-ui-component .swym-wishlist-grid .swym-wishlist-item .swym-delete-btn .swym-icon { position: relative; width: 14px; height: 16px; border: 2px solid transparent; box-shadow: 0 0 0 2px, inset -2px 0 0, inset 2px 0 0; border-bottom-left-radius: 1px; border-bottom-right-radius: 1px; margin-top: 4px; color: #c02827; } /* Additional pseudo-elements for trash can shape... */Hide Drafted/Unavailable Products:
ul.swym-wishlist-grid li:has(button.swym-add-to-cart-btn[aria-label="Unavailable"]) { display: none; }
Wishlist Layout & Styling
Create a "Collections Page" Layout for Wishlist:
.swym-ui-component.swym-wishlist-page.swym-simple-wishlist-page { max-width: unset !important; } ul.swym-wishlist-grid { max-width: 100% !important; display: grid !important; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); } /* Additional responsive styling... */Create a "List View" Layout for Wishlist:
ul.swym-wishlist-grid { flex-direction: column; gap: 1.5rem; } ul.swym-wishlist-grid li { width: 100% !important; margin: 0 !important; } /* Additional grid and responsive styling... */Add Rounded Corners to All UI Elements:
.swym-wishlist-outer-container, .swym-modal-content, /* ... */ { border-radius: 1rem; } /* ... */Display a Tooltip on Disabled "Share" Button:
button.swym-share-btn.swym-color-2.swym-disabled { position: relative; opacity: 0.5; } button.swym-share-btn.swym-color-2.swym-disabled:hover::before { content: 'Please log in to share your Wishlist'; /* ... tooltip styling ... */ }Display "MRP" Before Prices:
.swym-product-original-price.swym-value:before, .swym-product-final-price.swym-value:before { content: 'MRP : '; margin-right: 4px; }Hide Discount Price, Show Only Original Price:
.swym-product-final-price.swym-value { display: none !important; } .swym-product-original-price.swym-value { text-decoration: none !important; opacity: 1 !important; }
Other Components
Vertical Floating Launchpoint:
@media screen and (min-width: 571px) { #swym-anchor a#notepad-anchor-title { writing-mode: vertical-lr; text-orientation: mixed; padding: 1rem 0.5rem; border-radius: 5px 0 0 5px; } } /* ... */Move "Added to Wishlist" Toast Notification:
@media screen and (min-width: 900px) { .swym-notifications-container.swymTopLeft { left: auto !important; right: 0; transform: translateX(-20px); } }Change App's Global Font:
[class*="swym"]:not(body) { font-family: 'Your-Theme-Font', 'swym-font', sans-serif !important; }Change App's Global Default Color:
:root { --swym-new-default-color: #000000; } /* ... other color rules ... */
Need further assistance?
You can always reach out to us at [email protected]. If you're already on our Messenger, simply say "talk to an agent," and Fin will connect you with a member of our team who can provide further assistance.