TABLE OF CONTENTS


1 - Show Wishlist/Compare button

This is the button link directly to users' Wishlist/Compare page.

Modify the launch point

  • The toggle buttons allow users to enable/disable the title and background of the button.
  • Choosing the displaying style for it with 03 options:
  • As a floating button

Users are able to change its position using the drop-down box below as well as the button's label, border radius, width, height and colors.


Tick to have Wishlist Label and Show Background


  • As a menu item
  1. Open the main navigation on your Shopify site - Open
  2. Select your main menu and click on "Add menu item" to add a new menu item.
  3. Choose a name for the Wishlist/Compare
  4. In the text box for Link, paste the following text: #arn-wishlist (Wishlist) or #arn-compare (Compare)
  5. Click on "Save Menu"

Follow the instruction in the Gif to set up this display button style

Then reload your store to see the result like the picture below, the Wishlist button will be shown as main menu item in Navigation


  • As an icon on header

If you are looking to add the Wishlist/Compare launch point in your header, Please click the Help button for other customizations and our support team will contact you to provide customization assistance for your Wishlist


Button style

  • Button's class name is customizable.
  • Default icon
  • Choosing from the available options and freely adjust its width, height and color.
  • Custom icon
  • Uploading a SVG file to use it as the button's icon and freely adjust its width, height and color.


2 - Add to Wishlist/Compare button

The favorite button is used to add the current item/variant to a Wishlist/Comparison.

Modify the launch point

  • The toggle buttons allow users to enable/disable the title and background of the button.
  • Button label is also changeable along with border radius, width, height and colors.


Button style

  • Button's class name is customizable. Drag the settings bar to adjust the max number of items that can be added to Wishlist.
  • Default icon
  • Choosing from the available options and freely adjust its width, height and color.
  • Custom icon
  • Uploading a SVG file to use it as the button's icon and freely adjust its width, height and color.


3 - Remove button

The remove button is used to delete an item from your Wishlist/Comparison.

Button style

  • Button's class name is customizable.
  • Default icon
  • Choosing from the available options and freely adjust its width, height and color.
  • Custom icon
  • Uploading a SVG file to use it as the button's icon and freely adjust its width, height and color.