Product page button
Place the Add to wishlist control where shoppers choose a product, then verify that saving follows the selected variant. Configure it in Display → Wishlist button.
Choose the button style
| Style | What shoppers see | What to edit |
|---|---|---|
| Icon + text | Icon beside the label; the default. | Main icon, Button label and Saved label. |
| Icon only | A compact icon control. | Icon button size and icon/background colours. |
| Text button | The label without an icon. | Button label, Saved label and text styling. |
Text labels accept up to 60 characters. Use short wording such as Add to wishlist and Saved, then inspect the narrow preview. The saved label should make the result of the click clear.
Choose the position
- 1
Start after Add to Cart
Choose Position on product page → After Add to Cart button. Save and refresh a full product page. This gives you a baseline before using a theme-specific selector.
- 2
Try the product-image position if needed
Choose On product image to place an icon on the main media area, or Both to keep the purchase-area control as well. If the icon attaches to the wrong media wrapper, enter a matching Product image selector (optional).
Check products with more than one image and switch the gallery. The selector must identify the intended image area in your theme, not an unrelated recommendation card.
- 3
Use Custom position for another element
Choose Custom position, enter CSS selector, then choose Before the element or After the element. For example,
.product__descriptiononly works if that class exists on your theme's product page; it is an example rather than a universal Shopify selector.Save and refresh. If no button appears, first verify that the selector matches an element. Use the field's Message us help link if you need help identifying a suitable target.
Adjust size and appearance
| Advanced button styling | What it changes |
|---|---|
| Button width | Auto fits content; Full width stretches within its container. |
| Font size | 10–24 px for text-bearing styles. |
| Padding | Vertical 0–40 px; horizontal 0–60 px for text-bearing styles. |
| Border width | 0–6 px; choose a separate border colour if needed. |
| Icon button size | 36–64 px in icon-only mode. |
| Hover effect | None, darken slightly, lift or fill with the saved-state colour. |
A full-width button fills its own container. If it is still narrower than Add to Cart, inspect the position/container before adding more padding. For fill-on-hover, also inspect the filled text colour in Saved state & branding.
Check variant saving
- 1
Save one chosen variant
On the storefront, select a distinctive option such as Blue / Large before saving. Open the wishlist and confirm that exact variant is shown.
- 2
Change the selection
Select another variant and check its save state. Test the actual theme picker or swatch app your shoppers use. A custom picker that does not expose its selected variant can produce a different result from the preview.
- 3
Check both placements and mobile
If you chose Both, verify the controls represent the same current item. Repeat on a narrow screen and confirm the wishlist does not cover the purchase controls.
Need help?
Open the chat bubble in the Shopify app, or contact us with your store address and what you are stuck on.