Theme
💎 Built for Sidekick
✍️ Sidekick drafts it — you apply it
shopify
sidekick
theme
wishlist
Wishlist Button and Page
Build a localStorage-based wishlist system: heart toggle button for product cards/PDP plus a wishlist page listing saved products.
Sidekick writes it — you put it live
Sidekick produces the content or code for this, but doesn't apply it to your store itself. You'll paste or publish the result yourself — the prompt tells Sidekick to explain exactly where it goes.
📋 Prompt
Generate the Liquid, CSS, and JavaScript for a wishlist system for my Shopify theme that I can paste in myself, consisting of two parts: a wishlist toggle button snippet and a wishlist page section. The wishlist button should be a heart icon that can be placed on product cards and the product detail page. When clicked, it toggles the product in or out of the wishlist stored in the browser localStorage under the key [STORAGE_KEY]. The heart should be outlined when not wishlisted and filled with color [ACTIVE_COLOR] when wishlisted. Include a subtle scale animation on toggle. The wishlist page section should be assigned to a page template and display all wishlisted products in a grid of [GRID_COLUMNS] columns on desktop and [MOBILE_COLUMNS] columns on mobile. Each product card should show the product image, title, price, an Add to Cart button, and a Remove from Wishlist button. The section should fetch product data using the Shopify storefront /products/[handle].json endpoint for each saved handle. Include a wishlist count badge that can be rendered in the header next to a heart icon, updating dynamically when items are added or removed. Add settings for empty wishlist message [EMPTY_MESSAGE], button background color [BUTTON_BG_COLOR], card border color [CARD_BORDER_COLOR], and grid gap [GRID_GAP] pixels. If the wishlist is empty, display the [EMPTY_MESSAGE] and optionally a Continue Shopping link to [CONTINUE_URL]. Provide complete Liquid for both the button snippet and page section, plus CSS and JavaScript.
Where to paste this: In Shopify admin, go to Online Store > Themes > Edit code. Save the button snippet as snippets/wishlist-button.liquid and reference it with {% render 'wishlist-button' %} inside your product card and product detail page templates. Save the page section as sections/wishlist-page.liquid, then create a new page (Online Store > Pages) using a template that includes this section (or assign it via the theme customizer if your theme supports section-based page templates).
How to Use
- Copy the prompt above
- Open Shopify Sidekick in your Shopify admin
- Paste the prompt and replace the bracketed placeholders with your details
- Review Sidekick's response and apply the suggestions