How to modify the Wishlist & Compare buttons

TABLE OF CONTENTS

• 1 - The Show Wishlist/Compare button
  • Modify the launch point
  • Button style
• 2 - The Add to Wishlist/Compare button
  • Modify the launch point
  • Button style
• 3 - The Add to Wishlist/Compare button on Product pages
  • Modify the launch point
  • Button style
  • Selector
• 4 - The Remove button
  • Button style

1 - The Show Wishlist/Compare button

This button is used to show the customer's Wishlist/Compare list.

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 the 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 - The Add to Wishlist/Compare button

The Add Wishlist/Compare button is used to add the current item/variant to your Wishlist/Comparison list.

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 - The Add to Wishlist/Compare button on Product pages

This specific field is used to add the Wishlist/Compare button on Product pages easier. For other pages, please check the instruction above.

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.

Selector

• Click on the Selector button will open your product page in a new tab. By hovering on the available elements on the pages, you would see the options to choose the position of the button:

• Above: Add the Wishlist/ Compare button above the current element
• Below: Add the Wishlist/ Compare button below the current element 
• Expand: Expand the current block wrapper on hovering to a next level bigger one

• Class name: For users that familiar with coding, you can insert the class to the position you want to show the button on product pages
• Button's Margin & Padding settings: Insert the values in order of clockwise motion, starting from the top value and separate them with blank spaces.

• For example:

Padding: 10px 30px 10px 30px

➜ Top and bottom padding: 10px; Left and right padding: 30px

4 - The Remove button

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

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.