Getting started with Wishlist Power

Wishlist Power is an application that allows you to add a wishlist to any store theme. This wishlist application enables your customers to save products for purchase later.

In this guide we are going to go through:

• the process of installing the wishlist in your theme
• the different menus that will allow you to visualize the usage of your customers’ wishlist.

Setup your theme

In this section, you will learn how to install the wishlist in one of your themes. First, click the “Setup your store” button to get to the theme setup page.

Once you are on the theme setup page, you can choose the theme you want to install the wishlist button in.

Theme OS 1.0

The wishlist cannot be installed in OS 1.0 themes. If your theme is OS 1.0, we recommend you contact a developer to install the wishlist.

Wishlist button on the product page

The wishlist button on the product page allows your customer to add or remove a product from the wishlist on the product page. If you have multiple product templates installed in your theme, you must add the wishlist button in each template.

Install from the theme editor

To install the button, you can go to the Online store sales channel and click on the "Customize" button of the theme you would like to add the wishlist button.

Once you are in the theme editor, select the product template you would like to add the wishlist button to.

Then, to add the wishlist button:

1. click on the "Add block" button on the left panel
2. click on the "Apps" tab
3. choose the "Wishlist button" app block

Install from the theme setup page

To install the button, simply click on “Install”. The application will open the theme editor in the default product template with the wishlist button app block added.

If you have multiple product templates, remember to add the wishlist button in those too by changing the product template on the top of the theme editor page.

Then, click on “Add block” on the left menu, select the “Apps” section, and choose the “Product page” block.

Customize Theme settings

Theme name

The style of the wishlist button can automatically adapt to the style of your theme. To do that, select the name of your theme in the dedicated theme setting :

To this day, the style of the button will adapt to the supported themes (see supported themes list)

Button label 1

You can change the “Add to wishlist” label to anything that fits your shop.

Button label 2

You can change the “Remove from wishlist” label to anything that fits your shop.

Button style

Style

Choose if you want the wishlist button to be filled, outline, or text link.

Stretch

Select if you want the wishlist button to fit all the container’s width.

Spacing around section

Allows you to change the spacing between the wishlist button and the upper element.

Height

Allows you to change the button’s height

Border radius

Allows you to change the button’s border-radius.

Icons

Icon

You can add an icon in front of the label. You have the option to add no icon, or you can choose to add either a heart or a star icon.

Size

Allows you to change the icon’s size.

Thickness

Allows you to change the icon’s thickness.

Colors

Allows you to change the button’s background color, the button’s test color, and the icon’s color.

Wishlist button in product cards

Install

The Wishlist Power application allows you to add a wishlist button on every product card of your theme. Your customers will be able to add the product to their wishlist directly from the home page or the collection page. To add the button to the product card, click on the “Add button” button to open the theme editor with the Wishlist button <app embed activated. Then save and the wishlist button will appear in the product cards.

To this day, this app embed works only on the supported themes (see supported theme list)

If your theme is not on the list, you won’t be able to see the wishlist button.

Customize

You can customize how the wishlist icon will be displayed to your customers. To see the results of editing the app-embedded settings, go to a page with product cards like the collection page.

Position

You can choose if you want to have the icon on the top right, top left, bottom left, or bottom right position of the image.

Border radius

Select the border radius of the wishlist button. By selecting 100 px, the button will be circled.

Icon

You can choose if you want a heart or a star icon.

Size / Thickness

You can choose the size and the thickness of the button in pixels.

Colors

You can choose the button’s background and the icon’s color.

Wishlist page

Install

The wishlist page allows your customers to see all the products they added to their wishlist. To install the wishlist page on your store, you will have to go to the theme setup page and follow the steps below:

1. Create a template

   Click on the “Open theme editor” of the “Create a page template” section. Then, from the theme editor, click on the “Page” section then click on “Create a template”.

   

   Name your template “wishlist” and choose the template it has to be based on.

2. Create a page

   Click on “Create a new page” of the “Create a page and assign the template” section. Then, from the new page Shopify page, choose a title and select the “wishlist” template.

   

   
   

3. Add the section to your page

   Click on the “Add the section” button of the “Add wishlist section to the page” section. The theme editor will open with the “wishlist” page template selected. From here, add the “Wishlist page” app block to the page and save.

   

Theme editor customization

Once you installed the wishlist section on your page, you can start to customize it.

Theme name

You first have to choose your theme name. This will adapt the product card style to your theme’s style.

Spacing around section

This setting allows you to add more spacing between the wishlist and the upper component (another section or the header).

Products per page

Choose how many products per page you want to display to your customers.

Products per row

Choose how many products per row you want to display.

Row gap and column gap (desktop or mobile)

Those settings allow you to choose the gap between rows and columns for desktop and mobile devices.

Product card

Show vendor

Allows you to display the product’s vendor in the product card.

Text alignment

Choose if you want your text to be aligned on the left (right in case of a right-to-left languages), or center.

Image size

You can choose the type of image sizing you want. You can choose between:

• Natural
• Short (4:3)
• Square (1:1)
• Tall (2:3)
• Short (4:3) - fill card
• Square (1:1) - fill card
• Tall (2:3) - fill card

Product card border-radius

You can apply a border radius to the product card. The border-radius can go from 0 up to 24 px.

Color

You can change the product grid separator and the product card background color.

Custom CSS customization

Wishlist Power is equipped with CSS classes that can be easily used to customize the appearance of the wishlist page. These CSS classes enable fine-tuned customization of wishlist page elements:

• Product vendor: .ooo-wl-product-card__vendor-custom-css
• Product titre: .ooo-wl-product-card__title-custom-css
• Product price: .ooo-wl-product-card__price-custom-css
• Compare at price: .ooo-wl-product-card__compare-at-price-custom-css

.ooo-wl-product-card__vendor-custom-css {
  font-size: 10px;
  font-weight: 700;
  gap: 0.5rem;
  padding: 5px;
  justify-items: start;
}
.ooo-wl-product-card__title-custom-css {

}
.ooo-wl-product-card__price-custom-css {

}
.ooo-wl-product-card__compare-at-price-custom-css {

}

Header icon

To this day, Shopify does not allow apps to add a header icon as an app block. Then, you must add a custom code to your theme to display an icon in your header. You will find it on this page.

If you are not comfortable editing your theme’s code, please get in touch with our support team by sending an email to app-wishlist-power@maestrooo.com. They will add the wishlist icon in the header for you.

Customer list

This view shows every customer who has ever added a product to his wishlist. They are sorted by the last wishlist edited first. You will find guest customers as well as identified customers. Guest customers are those who added products to their wishlist without being logged in to their account.

Customer details

Once you choose a customer, you can look at the products on his wishlist. You can also view the history of the products he added and removed from his wishlist.

Product list

You can access all products added to a wishlist at least once. You will see how many times each product has been added to a wishlist.

Supported theme list

• Dawn
• Prestige
• Impact
• Focal
• Warehouse
• Impulse