Wishlist and compare

Shoppers like to save products for later and to put similar products side by side. Lumina includes both features, and neither needs an app, an account or a monthly fee.

• Wishlist: shoppers tap a heart on a product to save it. The wishlist lists everything they saved.
• Compare: shoppers tap a compare icon on up to four products and open a table that lines them up row by row.

How they work

Both lists are stored in the shopper's own browser, on their own device. This is why they need no sign in and cost nothing. It also means:

• A shopper sees their list again when they return on the same device and browser.
• The list does not follow them to another phone or computer.
• Clearing browser data, or using a private window, empties the list.
• You do not see what shoppers saved. Nothing is sent to your store.

Step 1: turn the features on

1. Open the theme editor (Online Store > Themes > Customize) and click the paintbrush for Theme settings.
2. Select Theme settings > Product cards.
3. Turn on Enable wishlist and Enable compare, as you wish.
4. Save.

A heart (and, if enabled, a compare icon) now appears on every product card. The header can also show a heart icon that opens the wishlist: select the Header section and keep Show wishlist icon on.

Step 2 (optional): use your own pages

Nothing else is needed: the wishlist and the comparison work as soon as the features are on. The heart icon in the header, the Wishlist tab in the mobile tab bar and the compare bar open built-in views at /search?view=wishlist and /search?view=compare.

If you prefer an address under /pages, or want the page in your menus, create your own pages. As soon as they exist, every link uses them instead.

Wishlist page

1. In Shopify admin, go to Online Store > Pages and choose Add page.
2. Set the title to Wishlist. Leave the content empty.
3. In the Theme template box, choose wishlist.
4. Check the page address (under Search engine listing). It must be wishlist, so the page address is /pages/wishlist. Change the URL handle if it is different.
5. Save.
6. Add the page to your menus if you want a text link as well, in Content > Menus.

Compare page

1. In Shopify admin, go to Online Store > Pages and choose Add page.
2. Set the title to Compare. Leave the content empty.
3. In the Theme template box, choose compare.
4. Make sure the URL handle is compare, so the address is /pages/compare.
5. Save.

Editing the wishlist and compare views

Open the editor and choose the view in the page picker: Pages > Wishlist (or Compare) for your own pages, or Search > search.wishlist (or search.compare) for the built-in views. Select the Wishlist section for: Color scheme, Text (a short intro above the products), Columns on desktop, Columns on mobile, and Top padding and Bottom padding. The Compare products section has Color scheme, Text and padding.

The comparison table shows, for each product: the photo and name, the price, the brand, the type, the availability, the rating and the description. Where a product has no value for a row, the table says Not specified. Shoppers can remove a product from the table or clear everything.

Good to know

• Your own Wishlist and Compare pages must have the exact handles wishlist and compare and use the wishlist and compare templates; otherwise the links keep using the built-in views.
• Shoppers can compare up to four products. A message tells them when they reach the limit.
• Compare works best with products of the same type, such as several jackets. The brand, type and rating rows help shoppers see the differences.
• If you do not want one of the features, switch it off in Theme settings > Product cards.
• If both the Wishlist icon and a Wishlist tab on the Mobile tab bar are on, that is fine. They show the same list.
• The pages show a short message asking for JavaScript if the shopper's browser blocks it.