How to Display Wishlist on a Separate Page in Shopify Store

Display the wishlist on a dedicated page to give customers a clear and organized view of their saved items. This approach is ideal for stores that want a full-page wishlist experience instead of a modal or drawer layout.

With Wishlist Guru, you can easily enable the wishlist page and customize its layout to match your store’s design and user experience.

Follow the steps below to enable the wishlist page in Shopify using Wishlist Guru: #

• Go to General Settings
• Click on Wishlist Page Display Settings
• Click on the edit settings
• Select the option to show the wishlist as a separate page.

Styling Options for Wishlist Page, Modal & Drawer #

Adjust the visual appearance of your wishlist interface with the following settings:

• Background color: Set the color that appears behind all wishlist content.
• Text color: Choose the color used for general text within the wishlist.
• Text alignment: Aligns text content (left, center, or right) within the page layout.
• Heading font family: Select the font style used for wishlist headings.
• Heading font weight: Define the thickness or boldness of the heading text.
• Width (for modal only): This setting is not applicable in page view.
• Padding (Top & Bottom): Add space above and below the wishlist content.
• Padding (Left & Right): Add space to the left and right of the wishlist content.
• Cross icon color: Not applicable in page view as there’s no close icon.
• Text font family: Choose the font style for regular body text in the wishlist.
• Text font weight: Define how bold or light the body text should appear.
• Continue shopping button link: Specify where users are redirected when clicking “Continue Shopping.”

Wishlist Item Grid Styling (Page View) #

These options allow you to customize the layout and styling of wishlist items on the separate page:

• Grid content alignment: Align the content inside each wishlist item grid (e.g., center).
• Image rendering style: Choose how product images are rendered (e.g., default or smooth).
• Grid border radius: Round the corners of each grid item by setting a border radius.
• Grid background color: Set the background color of each wishlist item block.
• Grid gap: Define the spacing between each wishlist item in the grid.
• Border: Set the border width, style (e.g., solid), and color around each item grid.

Customize Share Page Button Appearance #

Style the “Share Wishlist” button shown on the wishlist page:

Regular & Hover States – Text Styling: #

• Text color: Choose the text color used in the button.
• Font size: Set how large or small the text inside the button should appear.
• Font family: Select a Shopify-supported font like Poppins for styling consistency.

Hide More Actions #

Simplify the wishlist page by hiding unnecessary elements:

• Hide “View As” label: Removes the label that lets users change view modes.
• Hide grid option: Hides the toggle to switch between list and grid view.
• Hide search bar: Removes the search functionality from the wishlist view.
• Hide login text (on page): Hides the text prompting users to log in if not authenticated.