Render a Wishlist Page / Modal in a container

Render the default wishlist UI in a container of your choice, in your custom page.


Render the wishlist default UI based on the respective API will be rendered within a container element on the storefront. This can be used to render the wishlist as a page or as a modal.


swat.ui.renderWishlistInContainer(containerElement, queryParams)

Create a Page in your theme, include the below div.

Create a page on the storefront with required HTML element and use the API to initialize the UI render within a SwymCallback. The URL to this page can be the wishlist as a page for the storefront.

<!-- Include html in the body -->
<div id="swym-wishlist-render-container"></div>


window.SwymCallbacks = window.SwymCallbacks || [];
window.SwymCallbacks.push(function(swat) {
  var wishlistContainerElement = document.querySelector("#swym-wishlist-render-container");
  var queryParams = swat.utils.getEncodedAsObject(;
  // Contains queryParams["lid"] to render a specific list id
  swat.ui.renderWishlistInContainer(wishlistContainerElement, queryParams);

API Parameters

wishlistContainerElementDOMElementTarget element to render User interface into
queryParamsObjectQuery string as object, lid key to set list id to open