Wishlist UI Customizations

Created by Subham Choudhury, Modified on Mon, 24 Jun at 1:42 PM by Subham Choudhury

TABLE OF CONTENTS

What this article is about and how to use it?
- For every customization you would like to make, here’s the procedure to add the CSS to your store.
Basic Customizations
- Customize the accent color of the Wishlist UI
- End result
Bonus Customizations!
Frequently Asked Questions:
Other features we support!

What this article is about and how to use it?

This help article will help you customize the Wishlist UI.
It is designed with a focus on users who have no prior coding experience.
To customize the UI, we use a styling language called “CSS”.
- If you are familiar with CSS and can write your own CSS styling for the UI, then the next section will show you how you can add the CSS to your store.
Please don’t worry that it has a lot of code. It was designed so that it is as easy as possible for you to deal with the code, without having to write your own. This doc contains all the CSS you need to style the Wishlist UI.
A hex value of the colors is already given as an example in each line of code. You can replace the hex code of the default color with that of the one you would like to use.
Specific steps for customizing the CSS are given in each step as we go along.
Check the next step to find out how to add this styling to your store.

For every customization you would like to make, here’s the procedure to add the CSS to your store.

Copy the CSS code
Open your Shopify Admin
Online Store → Themes
Click on “Customize” for the theme you want to add these changes to.
Click on the gear/settings button on the left that opens the Theme Settings. Here’s an image for your reference.
Scroll down and open the ‘Custom CSS’ toggle
Paste the copied CSS (the code) here
Click ‘Save’ on the top right corner.
Voila! The customizations should be applied to your store.

If they’re not applying, you can reach support by clicking on the chat icon on the bottom right corner of the page, and one of our active agents will be happy to help you :)

Basic Customizations

Here’s how our default Wishlist UI looks like today:

Customize the accent color of the Wishlist UI

Replace the given hex code (#434655) with the one you would like to use

.swym-ui-component .swym-bg-2, .swym-ui-components .swym-bg-2 {
    background: #000;
}

If you want to change the color of the text as well that’s displayed on this color, use this code instead.
Replace the #fff hex code with yours to change the color of the text

.swym-ui-component .swym-bg-2,
.swym-ui-components .swym-bg-2 {
  background: #000;
  color: #fff !important;
}

Here’s an example of how it should look like once you’ve changed the color hexcode and added the code to your store:

End result

The changes will also be applied to all the popups coming from our app!

Bonus Customizations!

BONUS #1: How do I change the font of all the text in the entire Wishlist UI?

You can use the following CSS and change the font-family according to your theme. Replace the “cursive” with the font you would like to use, and follow these steps to add this code to your store. .swym-ui-components *,

.swym-ui-component * {
font-family: cursive !important;
}

BONUS #2: How to enable Dark Mode for Wishlist UI?

If your store’s colors have a “Dark theme”, i.e. dark colors, then the Wishlist UI probably stands out very very much on your store.
The doc so far covers the background colors and text colors but doesn’t cover customizing the color of the entire UI, since it is not a frequent request we get.
Lucky for you, we have a solution for this. Check the following steps to customize the UI’s colors to dark mode. You can follow the same procedure as before. Replace the existing hex code with the one you would like to use, based on the instructions given within the code itself.

/* SWYM WISHLIST UI DARK MODE CSS BEGINS*/

/* ACCENT COLOR FOR HEADINGS */
.swym-color-2,.swym-htc-tab-item.swym-tab-sfl,.swym-htc-tab-item.swym-tab-wishlist,.swym-htc-tab-item.swym-tab-wishlist.swym-bg-2,.swym-wishlist-context-menu-content *,.swym-wishlist-context-menu-content * span,.swym-wishlist-context-menu-content .swym-icon:before, .swym-heading.swym-heading-2{
    color:#9653b9!important
}

/* ACCENT COLOR FOR TEXT (and similar elements) */
.swym-wishlist-detail-separator,.swym-heading.swym-heading-1,.swym-icon:before,.swym-modal-content *,.swym-nav.swym-nav-1,.swym-product-price.swym-sfl-price.swym-text-1 .swym-product-final-price.swym-value,.swym-selected-wishlist-text *,.swym-sfl-list-view *,.swym-text.swym-text-1,.swym-wishlist-item *,.swym-wishlist-product-detail-text-container-inner *,button#swym-user-login-status-btn, .swym-htc-tab-item.swym-tab-sfl.swym-selected,.swym-htc-tab-item.swym-tab-wishlist.swym-bg-2.swym-selected{
    color:#fff!important
}

/* ACCENT COLOR FOR BUTTONS. Change the "color" property if you want to have a different color on the buttons. Otherwise, leave as is. */
.swym-htc-tab-item.swym-tab-sfl.swym-selected,.swym-htc-tab-item.swym-tab-wishlist.swym-bg-2.swym-selected, .swym-bg-1.swym-bg-2,.swym-ui-component .swym-bg-2,.swym-ui-components .swym-bg-2, button.swym-sfl-add-all-to-cart-btn{
    background:#9653b9!important;
    color: auto !important;
}

/* Sets background of elements to black. Change this if you want to have a different color for the dark background */
.swym-wishlist-context-menu-content, .swym-wishlist-container-title-bar.swym-bg-1.swym-bg-2.swym-color-4, .swym-htc-tab-item.swym-tab-sfl,.swym-clear-wishlist-modal-dialog,.swym-modal-content,.swym-save-wishlist-modal-dialog,.swym-sfl-popup-dialog,.swym-share-wishlist-login-modal-dialog,.swym-share-wishlist-modal-dialog,.swym-ui-component .swym-add-wishlist-modal .swym-modal-content .swym-new-wishlist-btn,.swym-ui-component .swym-mailing-list-modal .swym-mailing-list-modal-dialog,.swym-wishlist-container-content,.swym-wishlist-item,.swym-wishlist-product-detail-tab-bar,select#option1, .swym-ui-component .swym-wishlist-list-card,textarea#swym-note{
    background:#160c1b!important
}

/* Remove this below code if you are using a light background. Otherwise, leave as is. */
.swym-ui-component .swym-wishlist-list-card,textarea#swym-note, .swym-wishlist-context-menu-content{
    box-shadow:0 0 10px rgba(255,255,255,.15) !important;
}


/* DO NOT TOUCH ANYTHING BELOW THIS POINT UNLESS YOU KNOW WHICH ELEMENTS YOU'RE CHANGING */
input.swym-new-wishlist-name.swym-no-zoom-fix.swym-input,span.swym-fave-count, .swym-ui-component .swym-input,.swym-ui-components .swym-input{
    background:unset!important
}
button.swym-sfl-add-all-to-cart-btn.swym-disabled{
    filter: brightness(0.5)
}
button.swym-clear-wishlist-btn.swym-button.swym-button-1.swym-is-button.swym-bg-2.swym-color-4{
    background:red!important
}
button.swym-wishlist-item.swym-option.swym-is-button.swym-hover-color-1.swym-selected.swym-highlight-1{
    background:#fff!important
}
button.swym-wishlist-item.swym-option.swym-is-button.swym-hover-color-1.swym-selected.swym-highlight-1 *{
    color:#000!important
}

/* SWYM WISHLIST UI DARK MODE CSS ENDS */

Here’s how the UI looks by simply using the above code:

BONUS #3: How to get rounded corners on all the elements and/or buttons?

You can use the below to add rounded corners to the elements in the Wishlist UI:

button.swym-sfl-add-all-to-cart-btn, .swym-wishlist-outer-container, .swym-modal-content, .swym-wishlist-item, button.swym-wishlist-list-card.swym-is-button.user-list, button.swym-share-btn.swym-color-2, button.swym-add-all-to-cart-btn, .swym-sfl-card-product-item, .swym-wishlist-context-menu-content, button.swym-button {
    border-radius: 1rem;
}
button.swym-close-btn.swym-bg-1.swym-bg-4.swym-color-4.swym-is-button {
    border-top-right-radius: 1rem;
}
.swym-wishlist-image-wrapper {
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
}
button.swym-sfl-add-to-cart-btn {
    border-bottom-right-radius: 1rem;
    border-bottom-left-radius: 1rem;
}
button.swym-add-to-cart-btn {
    border-top-right-radius: 0;
    border-top-left-radius: 0;
}

Frequently Asked Questions:

How do I remove the border around the product card?

You can use this code to remove the border around product card

   .swym-wishlist-item {
        border: 0 !important;
    }

Here’s how it looks after removing the border:

How do I make the size of the ‘Add to Cart’ button bigger?

You can add the below code to make the ‘Add to Cart’ button in the Wishlist UI bigger. You can adjust the “12px” value as you see fit!

 .swym-ui-component .swym-wishlist-grid .swym-wishlist-item .swym-add-to-cart-btn {
        padding: 12px;
}

This is how it looks like if you add the above code and change it to 16px:

How do I hide the ‘Add to Cart’ buttons for specific products?

Navigate to your Shopify Admin, and add the following tag to all the products you want the ‘Add to Cart’ button to be hidden.

swym-hide-addtocart

Please note that we can have custom tags as well. So if you’re already using a particular tag for these products, you can let us know and we shall modify the code from our end to adapt to this tag!

Write to support with the tag you have used so we can add it to our backend and hide the ‘Add to Cart’ button for you.

Here’s how the UI looks like if you remove it for a select few products:

How do I hide the prices for specific products?

Go to your Shopify Admin, and add the following tag to all the products you want the product price to be hidden.

swym-hide-productprice

Please note that we can have custom tags as well. So if you’re already using a particular tag for these products, you can let us know and we shall modify the code from our end to adapt to this tag!

Write to support with the tag you have used so we can add it to our backend and hide the price for you.

Here’s how the UI looks like if you remove it for a select few products:

The product title gets cut off. I want the full product title to be displayed.

h2.swym-title.swym-title-1 {
    overflow: unset !important;
    text-wrap: wrap !important;
}

Here’s how the product cards look like once we let the product titles show up fully:

The product title gets cut off. I want the full product title to be displayed.

Please note: There is an intentional height limit (180px) to make sure all the product cards in the Wishlist are consistent and have good proportions.

You can add this code to your store to remove the height limit

.swym-wishlist-image-wrapper {
    height: unset !important;
}

The above code simply removes the height limit - meaning, all products will be at their full height.

If your products have varying heights, then adding the above code will result in all product cards being in different heights.
If you think it is a bad user experience, it is recommended to add a reasonable height limit by adjusting the following code:

.swym-wishlist-image-wrapper {
    height: 250px !important;
}

Other features we support!

We do offer more features, that are although not customizable from your end, our support agents would be happy to help you with. You can reach our Support from the chat bubble on the bottom right corner of this page. Here’s some of them:

An ‘Add all to cart’ button that adds all the products in the Wishlist to the Cart
Redirect the user to the product page when clicking on a product in the Wishlist UI
Customize any text displayed within the UI, or anywhere in our app