Giving shoppers access to their wishlist on pages that aren’t a dedicated wishlist page is simple. You can do so by following these steps.
How to Render Custom Wishlists on Existing Pages
Step 1: Open the page template (example: /customers/account.liquid)
We’ll use the Accounts page as an example here. This will allow you to place a wishlist on the existing Accounts page as shown in the GIF above.
You can do this for any page on your site. If you have trouble finding the right backend file for the page you want to include a wishlist on, please consult the developer of your theme.
Step 2: Add the wishlist render code
Once you decide which page you want a wishlist on, you’ll need to add the wishlist render code to it.
<!-- Swym Wishlist on Existing Page -->
<br>
<div class="grid">
<div class="grid__item medium-up--five-sixths medium-up--push-one-twelfth">
<!-- Section Heading →
<div class="section-header text-center">
<h1>My Wishlist</h1>
</div>
<!-- Render Wishlisted Products -->
<div class="rte">
{{ page.content }}
<div id="wishlist-items-container"></div>
</div>
</div>
</div>
<!-- Swym Wishlist render JS + CSS -->
<script src="{{ 'swym-custom-wishlist.js' | asset_url }}" async="async"></script>
<!-- Swym Custom Page CSS -->
{% include 'swym-custom-wishlist-page-css'%}Step 3: Add the wishlist rendering JS
With the wishlist render code in place, you’re one step closer. To make the wishlist function, you’ll need to add some JavaScript.
Add a new asset: “swym-custom-wishlist.js”
Keep in mind that any JavaScript code or Swym API calls required for the wishlist can be added in this file.
Add the following code to your new .js file
/* Product Tile Markup - You can play around with this to change the
information that appears on the Wishlisted Product tiles */
var productCardMarkup = `<div class="swym-wishlist-grid">
{{#products}}
<a href="{{du}}"aria-label="{{dt}}" class="swym-wishlist-item swym-is-anchor">
<button id="swym-remove-productBtn" aria-label="Delete" data-variant-id="{{epi}}" data-product-id="{{empi}}" class="swym-delete-btn swym-nav swym-nav-1 swym-is-button">
<span class="swym-icon">
</span>
</button>
<div class="swym-wishlist-image-wrapper">
<img alt="" class="swym-wishlist-image" src="{{iu}}">
</div>
<button class="swym-is-button">
<div class="swym-title swym-title-1">
{{dt}}
</div>
</button>
<div class="swym-variant-title swym-text swym-title-2 swym-variant-title-spacer">
{{variantinfo}}
</div>
<div class="swym-product-price swym-text swym-text-1">
<div class="swym-product-final-price swym-value">
{{cu}}{{pr}}
</div>
</div>
<button id="swym-custom-add-toCartBtn" data-state-cart="{{#isInCart}} swym-added{{/isInCart}}" data-product-url="{{du}}" data-variant-id="{{epi}}" data-product-id="{{empi}}" class="swym-add-to-cart-btn swym-button swym-button-1 swym-is-button swym-is-button">
{{#isInCart}}Added to cart{{/isInCart}}{{^isInCart}}Add to cart{{/isInCart}}
</button>
</a>
{{/products}}
</div>`;
function getVariantInfo(variants) {
try {
let variantKeys = ((variants && variants != "[]") ? Object.keys(JSON.parse(variants)[0]) : []),
variantinfo;
if (variantKeys.length > 0) {
variantinfo = variantKeys[0];
if (variantinfo == "Default Title") {
variantinfo = "";
}
} else {
variantinfo = "";
}
return variantinfo;
} catch (err) {
return variants;
}
}
function onAddToCartClick(e) {
e.preventDefault();
var productId = e.currentTarget.getAttribute("data-product-id");
var variantId = e.currentTarget.getAttribute("data-variant-id");
var du = e.target.getAttribute("data-product-url");
e.target.innerHTML = "Adding..";
window._swat.replayAddToCart({
empi: productId,
du: du
}, variantId, function(c) {
e.target.innerHTML = "Added to Cart";
e.target.setAttribute("data-state-cart", "swym-added");
console.log("Successfully added product to cart.", c);
}, function(e) {
console.log(e);
});
}
function onRemoveBtnClick(e) {
e.preventDefault();
var epi = +e.currentTarget.getAttribute("data-variant-id");
var empi = +e.currentTarget.getAttribute("data-product-id");
window._swat.fetch(function(products) {
products.forEach(function(product) {
if (epi && empi && product.epi == epi && product.empi == empi){
window._swat.removeFromWishList(product, function() {
if (!window.SwymCallbacks) {
window.SwymCallbacks = [];
}
window.SwymCallbacks.push(swymRenderWishlist);
});
}
});
})
}
function swymRenderWishlist(swat) {
// Get wishlist items
swat.fetch(function(products) {
console.log(products)
var wishlistContentsContainer = document.getElementById("wishlist-items-container");
var formattedWishlistedProducts = products.map(function(p) {
p = SwymUtils.formatProductPrice(p); // formats product price and adds currency to product Object
p.isInCart = _swat.platform.isInDeviceCart(p.epi) || (p.et == _swat.EventTypes.addToCart);
p.variantinfo = (p.vi ? getVariantInfo(p.vi) : "");
return p;
});
var productCardsMarkup = SwymUtils.renderTemplateString(productCardMarkup, {
products: formattedWishlistedProducts
});
if(wishlistContentsContainer){
wishlistContentsContainer.innerHTML = productCardsMarkup;
attachClickListeners();
} else{
console.log("Container not found, Wishlist Page element not found");
}
});
}
function attachClickListeners() {
var addToCartButtons = document.querySelectorAll("#swym-custom-add-toCartBtn");
var removeBtns = document.querySelectorAll("#swym-remove-productBtn");
// Add to cart Btns
for (var i = 0; i < addToCartButtons.length; i++) {
addToCartButtons[i].addEventListener('click', onAddToCartClick, false);
}
// Remove Buttons
for (var k = 0; k < removeBtns.length; k++) {
removeBtns[k].addEventListener('click', onRemoveBtnClick, false);
}
console.log("Events attached!");
}
if (!window.SwymCallbacks) {
window.SwymCallbacks = [];
}
window.SwymCallbacks.push(swymRenderWishlist); /* Init Here */Here is a brief explanation of each function used:
- productCardMarkup – This is the HTML template that will be used to display each product in the wishlist section
- getVariantInfo – This function gets variant information for each product
- onAddToCartClick – This function adds a product to the cart from the wishlist
- onRemoveBtnClick – This function is used to remove a product from the wishlist
- swymRenderWishlist – This function renders the wishlist on the existing page
- attachClickListeners – This function adds events to the “Add to Cart” and “Remove buttons” to make them work when the customer clicks on them
- Initialize the render function
Step 4: Add the wishlist section CSS
With the functionality of your wishlist in place, it’s time to make it look nice. Here you’ll add the CSS that makes your wishlist section appealing to customers.
Create a new snippet called: “swym-custom-wishlist-page-css”
Add the following CSS in your new file
<style class="custom-swym-wishlist-css">
#wishlist-items-container {
max-width: 1180px;
margin: auto;
}
#wishlist-items-container .swym-wishlist-grid {
max-width: 900px;
margin: auto;
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: left;
}
.swym-wishlist-grid .swym-is-anchor {
opacity: 1;
cursor: pointer;
text-decoration: none;
touch-action: manipulation;
}
.swym-wishlist-grid * {
font-size: 100%;
font: inherit;
font-family: "HelveticaNeue",Helvetica,Verdana,Arial,sans-serif;
line-height: 1.4em;
vertical-align: baseline;
box-sizing: border-box;
border: 0;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-webkit-box-sizing: border-box;
margin: 0;
padding: 0;
text-transform: none;
}
a.swym-wishlist-item.swym-is-anchor {
background: #fff;
border: 1px solid #333;
width: 21%;
margin: 0 4% 4% 0;
display: flex;
flex-direction: column;
position: relative;
justify-content: space-between;
cursor: pointer;
}
button.swym-delete-btn.swym-nav.swym-nav-1.swym-is-button {
position: absolute;
right: 8px;
top: 8px;
width: 25px;
height: 25PX;
background: #fff;
display: flex;
align-items: center;
justify-content: center;
}
.swym-wishlist-grid .swym-wishlist-image-wrapper {
overflow: hidden !important;
height: 180px;
}
.swym-wishlist-grid .swym-wishlist-image-wrapper img {
max-width: 100%;
}
.swym-wishlist-grid .swym-is-button {
text-align: left;
background: inherit;
height: auto;
width: auto;
z-index: auto;
display: inline-block;
background: 0;
border: 0;
text-transform: none;
bottom: auto;
box-shadow: none;
clear: none;
cursor: pointer;
font-family: inherit;
font-size: medium;
font-style: normal;
font-variant: normal;
font-weight: normal;
height: auto;
left: auto;
letter-spacing: normal;
line-height: normal;
margin: 0;
max-height: none;
max-width: none;
min-height: 0;
min-width: 0;
opacity: 1;
padding: 0;
position: static;
right: auto;
text-align: inherit;
text-decoration: none;
text-transform: none;
top: auto;
transform: none;
visibility: visible;
}
.swym-wishlist-grid .swym-wishlist-item .swym-delete-btn ::before {
color: #000;
content: "X";
font-size: 16px;
}
button.swym-add-to-cart-btn.swym-button.swym-button-1.swym-is-button.swym-is-button {
z-index : 1000;
}
button.swym-delete-btn.swym-nav.swym-nav-1.swym-is-button {
z-index : 1000;
}
.swym-is-button .swym-title.swym-title-1 {
font-weight: bold;
font-size: 16px;
color: #4f4f4f;
margin: 12px 15px 6px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.swym-wishlist-grid .swym-wishlist-item .swym-variant-title {
font-size: 14px;
line-height: 16px;
color: #333;
margin: 0 15px 10px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.swym-wishlist-grid .swym-wishlist-item .swym-product-price {
color: #333;
font-weight: bold;
font-size: 18px;
padding: 0 15px 13px;
display: flex;
align-items: center;
flex-wrap: wrap;
}
.swym-wishlist-grid .swym-product-price .swym-product-final-price {
display: inline-block;
margin-right: .4em;
}
.swym-wishlist-grid .swym-wishlist-item .swym-add-to-cart-btn {
background: #dc3b1a;
font-weight: bold;
font-size: 14px;
text-align: center;
text-transform: uppercase;
padding: 6px;
display: block;
color: #fff;
}
/* Mobile Screens */
@media only screen and (max-width: 900px){
#wishlist-items-container .swym-wishlist-grid .swym-wishlist-item {
width: 48%;
max-width: none;
margin: 0 4% 4% 0;
}
#wishlist-items-container .swym-wishlist-grid .swym-wishlist-item {
width: auto ;
margin: 0 0 4% 0;
padding: 0px;
}
#wishlist-items-container .swym-wishlist-grid {
justify-content: center;
}
}
/* Ipad */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (-webkit-min-device-pixel-ratio: 1) {
.swym-wishlist-grid .swym-wishlist-image-wrapper {
overflow: hidden !important;
height: 280px;
}
}
/* Landscape */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 1) {
.swym-wishlist-grid .swym-wishlist-image-wrapper {
overflow: hidden !important;
height: 100px;
}
}
button#swym-custom-add-toCartBtn[data-state-cart="swym-added"]{
background : green;
}
/* Add your own CSS here */
</style>After adding this CSS snippet, your wishlist should be ready to render on any page in your store!
You can download the two example files used in this guide here.
While these steps should make it simple to enable custom wishlists on existing pages, certain themes could cause issues. If you find yourself having trouble or have a question, please email us and we’d be happy to help.
Was this article helpful?
That’s Great!
Thank you for your feedback
Sorry! We couldn't be helpful
Thank you for your feedback
Feedback sent
We appreciate your effort and will try to fix the article