Full-page layout and actions
After the full wishlist page works, adjust its grid and item actions. Use the Full page preview for layout decisions, then check a real list with long titles, variants and unavailable items.
Before styling the grid
In Display → Shopper wishlist, choose Full page. If using a custom Shopify page, finish the page and app-block setup first. A layout change cannot fix a missing block or disabled embed.
Set columns, width and order
| Control | Available choices | How to choose |
|---|---|---|
| Desktop columns | Automatic, 2, 3 or 4 | Start with Automatic; use fewer columns for long titles or larger product photos. |
| Mobile columns | Automatic, 1 or 2 | Check whether labels and actions fit at your store's narrowest supported width. |
| Page content width | Narrow 900 px, Standard 1100 px, Wide 1400 px | This caps storefront content width. The admin preview is narrower. |
| Default product order | Recently saved, Oldest saved, Product name, Saved price low to high/high to low | Use the order that helps shoppers return to saved items. |
Saved-price sorting
The price sort uses the amount recorded when each item was saved. It does not re-sort by every later price change. A discounted item's current display price and its sort position can therefore appear different.
Style the product cards
- 1
Set image shape and corners
Choose Square, Portrait or Landscape under Product image shape. Set Card corners to Sharp, Rounded or Soft. Check several product photos; a shape that suits a jacket may crop a landscape photo differently.
- 2
Set card colours
Use Card background, Card text and Card border for explicit colours, or clear optional values to follow the automatic theme-based choices. Inspect the card title and variant text against the background.
- 3
Review information visibility
Use Show product variants and Show prices to control those labels. Keeping the variant visible is useful when shoppers save several sizes or colours of the same product.
Style the actions
Primary and secondary action groups have separate background, text, border and hover settings. Shared button controls set font size, padding, border width and corners. Use Match store under Corners to inherit the shared style, or select a page-specific corner choice.
The item determines which action is available. Test a saved variant that is in stock and a product-level item that still needs option selection. A direct Add to cart needs a usable variant; use View product when the shopper must choose options first.
Set an empty-state destination
Enable Show a shopping button when the wishlist is empty. Enter a short label, such as Browse products, and a store path such as /collections/all in Button destination. In Live preview, select Empty wishlist, then test the link on the storefront after saving.
Verify the finished page
- Long product and variant titles remain readable.
- A saved available variant goes to the correct cart item.
- Remove updates the list; an empty list shows the chosen message.
- The mobile layout does not force action labels outside their cards.
- The header or floating icon still opens the intended URL.
Need help?
Open the chat bubble in the Shopify app, or contact us with your store address and what you are stuck on.