Wishlist

Increase engagement and sales on your stores by allowing customers to save their desired products for later purchase.

Sledge provides several widgets you can use to integrate it with your store.

Available widgets :

If you're using Hydrogen or Next.js,
make sure to install the @sledge-app/react-wishlist package first.

npm i @sledge-app/react-wishlist

Badge

Badge is a Wishlist's widget you can use to display your wishlist's total in a small text box or an icon.

Badge Header Menu

Here is a step-by-step guide to adding this widget with block.

  • in the Sledge Dashboard, Scroll to the Wishlist App section, click Add Block to Theme.
sledge-image-docs
  • You will be directed to the Editor, and the Badge will have been added automatically.
sledge-image-docs
  • You can customize the Wishlist Badge by click the Wishlist badge Block.
sledge-image-docs
  • When ready, Save your changes.
If the position is not suitable, you can add it manually by selecting the
block

Trigger

Trigger is a Wishlist's widget you can use to trigger add or remove a wishlist item in an icon.

Trigger

Here is a step-by-step guide to adding this widget with block.

  • From your Shopify admin, navigate to Online Store > Themes > click the Customize button.

  • Navigate to the drop-down menu at the top, select Products > select a default product.

sledge-image-docs
  • Click + Add Block > Search wishlist trigger > select the Wishlist Trigger section.
sledge-image-docs
  • You can rearrange Wishlist Trigger by Click and drag the ⋮⋮ icon

  • When ready, Save your changes.

Button Detail

Button Detail is a Wishlist's widget you can use to trigger add or remove a wishlist item in a button form. Typically used on product detail page.

Button Detail

Here is a step-by-step guide to adding this widget with block.

  • in the Sledge Dashboard, Scroll to the Add Wishlist button detail section, click Add Block to Theme.
sledge-image-docs
  • You will be directed to the Editor, and the Button Detail will have been added automatically.
sledge-image-docs
  • When ready, Save your changes.
If the position is not suitable, you can add it manually by selecting the
block

Widget

Widget is a Wishlist's widget you can use to display list data of user's wishlist.

Widget

By default, Sledge provides you a proxy page that links to
https://YOUR-SHOPIFY-STORE.myshopify.com/apps/sledge/wishlist

If you want to create a custom URL for the Wishlist widget as you desire,
you can put a wishlist widget on the new page.

Here is a step-by-step guide to adding this widget to new page.

  • From your Shopify admin, navigate to Online Store > Themes > click the Customize button.

  • Navigate to the drop-down menu at the top, select Pages > + Create template.

sledge-image-docssledge-image-docs
  • For example, you can create a template named wishlist and select Based on Default page. When ready, you can save the template by click Create template button.
sledge-image-docs
  • Once you've Created wishlist template, You will be directed to the Wishlist page editor.

  • Click + Add Section > Search wishlist widget > Slides to Apps > select the Wishlist Widget.

sledge-image-docs
  • You can customize the Wishlist widget by click the Wishlist Widget Block.
sledge-image-docs
  • Click Save located in the upper-right corner.

  • Once you've adding Wishlist Widget, now it's time to Create a Page.

  • From your Shopify admin, navigate to Online Store > Pages > click the Add page button.

sledge-image-docs
  • Add a title, and select Theme template you created earlier, for example: Wishlist,
    When ready, click Save.
sledge-image-docs
  • Once you've creating a Wishlist Page, Let's change URL on Wishlist Badge.

If you haven't added a Wishlist badge yet, look here to see how to add the badge.

  • From your Shopify admin, navigate to Online Store > Themes > click the Customize button.
  • Click on your Wishlist Badge > Click URL Wishlist Widget > Select Pages > Select Wishlist
sledge-image-docssledge-image-docs
  • After you've ready, you can simply click Save located in the upper-right corner.
  • You can see the Wishlist page at https://YOUR-SHOPIFY-STORE.myshopify.com/pages/wishlist

Learn more

Congratulations! Now that you've learned usage of Wishlist widgets, you can start implementing Wishlist into your store.

If your store requires custom layout and custom callback for the widget, you can learn more on how to modify them based on your needs :