Adding Wishlist - Compare buttons on Product pages

TABLE OF CONTENTS

• Wishlist
  • 1 - Show Wishlist button
  • 2 - Add Wishlist button
• Compare
  • 1 - Show Compare button
  • 2 - Add Compare button

Wishlist

There are 02 types of buttons that you can add to your store

1 - Show Wishlist button: Used to show customer's Wishlist.

In the Wishlist tab, open the editor for the Show Wishlist button and you will find these options below to display the feature

Display style

• Show the button as a floating button

• System will automatically apply the button, you can use the relevant fields below to adjust the appearance.

• Show the button as a menu item: Follow the instruction below to active the feature

• Open the Navigation settings on Shopify admin
• Select your main menu and click Add menu item to create a new one
• Type down the item's title (e.g. Wishlist) and in the Link field, paste #arn-wishlist
• Remember to Save the changes and check on your storefront

• Show the button as an icon on header

• If you would like to add the Wishlist launch point in the header menu, please contact us to get help since it needs to be added into your theme code. We will get back to you asap and start the process after 03-08 working days of receiving your ticket.

2 - Add Wishlist button: Used to add the current item/variant to your Wishlist.

There are 02 ways to add your button

a. Use the auto function in the button settings

• Enable the Auto insert toggle button and the Add Wishlist button will appear right down below your Buy it now button

b. Manually

• Copy its code from the Wishlist tab

• Back to your Shopify admin > Online store > Themes >Edit code
• Find the Sections/product-template.liquid folder and paste the code to the position where you want it to appear on the product card

Compare

There are 02 types of buttons that you can add to your store

1 - Show Compare button: Used to show customer's Comparison list.

In the Compare tab, open the editor for the Show Compare button and you will find these options below to display the feature

Display style

• Show the button as a floating button

• System will automatically apply the button, you can use the relevant fields below to adjust the appearance.

• Show the button as a menu item: Follow the instruction below to active the feature

• Open the Navigation settings on Shopify admin
• Select your main menu and click Add menu item to create a new one
• Type down the item's title (e.g. Compare) and in the Link field, paste #arn-compare
• Remember to Save the changes and check on your storefront

• Show the button as an icon on header

• If you would like to add the Compare launch point in the header menu, please contact us to get help since it needs to be added into your theme code. We will get back to you asap and start the process after 03-08 working days of receiving your ticket.

2 - Add Compare button: Used to add the current item/variant to your Comparison list.

There are 02 ways to add your button

a. Use the auto function in the button settings

• Enable the Auto insert toggle button and the Add Compare button will appear right down below your Buy it now button

b. Manually

• Copy its code from the Compare tab

• Back to your Shopify admin > Online store > Themes >Edit code
• Find the Sections/product-template.liquid folder and paste the code to the position where you want it to appear on the product card

Note:
These file's name depends on your current theme. If you can't find the right files or don't know how to do it please send a support ticket to us in this link.