Using a drawer layout allows customers to quickly view their wishlist without navigating away from the product or collection page. It offers a smooth, side-panel experience that keeps shoppers engaged while improving store usability.
To display the Wishlist user interface as a drawer on your store, follow these instructions. But, before proceeding, ensure your plan is upgraded to Basic or higher.
Go to the Dashboard page and in the Installation guide section find the settings that say “Wishlist Page Display Setting“ and then click on the Configure button after that you will be taken to the page where all the settings related to the Wishlist UI are located.
OR
Go to General Settings>Wishlist Page Display Settings>Edit settings

Within this section, check the radio button listed as “As drawer. This ensures that the Wishlist UI will be displayed as a drawer when you click on the Wishlist icon.

Save settings after configuring the Wishlist display options by clicking on the “Save” button (located in the top right corner) to apply the changes. Your Wishlist UI type will now be accessible as a drawer.
Styling Options for Wishlist Modal, Page & 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 modal.
- 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): Control how wide the modal appears on the screen.
- 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: Set the color for the close (X) icon on the modal.
- 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.”
Customize Share Modal Button Appearance #

You can style the “Share Wishlist” button that appears on the modal, drawer, or 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 #

You can simplify the wishlist interface by hiding any of the following 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 (in modal and drawer): Hides the text prompting users to log in.
Note : Styles for Wishlist Item Grids are only for Modal and Page option
Want to know how to do customization for Move to Cart Button ?click here