Displaying the wishlist as a dedicated page can improve user experience by offering more space, better layout, and easier navigation—especially for stores with a larger product catalog or customers who frequently save items. It also helps maintain consistency with your store’s design and gives you more control over customization.
To enable Wishlist Guru as a separate page, follow these steps:
Go to General Settings > click on Wishlist Page Display Settings, and from there, 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.
Want to know how to do customization for Move to Cart Button ?click here
