The Save for Later block shows customers the products they have saved for later, in a horizontal carousel inside the Account Sidebar.
The View all link at the top of the block opens the full Saved for later list, where customers can move an item to their cart or remove it. This block is only visible to logged-in customers. When a customer has not saved anything yet, the block shows your empty-state message.
If you want a comprehensive guide on how Save for Later works, see the Saved for Later help collection. This article covers the sidebar block only.
How to Configure the Save for Later Block
From your Shopify admin, open the Mage Loyalty app.
In the left menu, click Account Sidebar.
Click the Blocks tab.
Click Add and select Save for Later (if it is not already in your list of blocks).
Click the Save for Later block to expand its settings, and make sure its toggle is turned on.
Set the Section title and Empty state text (see Field Reference below).
If you like, drag the block to reorder where it appears in the sidebar.
Click Save.
Field Reference
Field | What It Does | Example |
Section title | The heading shown at the top of the block. Defaults to "Saved for later". | "Your saved items", "Saved for later" |
Empty state text | The message shown when the customer has not saved any items yet. Defaults to "No saved items yet". | "Nothing saved yet", "Your saved items will show here" |
CSS Reference
Merchants can restyle the Save for Later block with custom CSS. Add your rules in the Account Sidebar Design tab, under Custom CSS. The block uses the classes below.
The carousel block (shown in the sidebar):
Class | What it targets |
| The outer wrapper around the whole block. |
| The header row (title and View all link). |
| The View all link. |
| The empty-state container, shown when nothing is saved. |
| The empty-state message text. |
| A single product in the carousel. |
| A product's image. Shared with other product blocks. |
| A product's name. Shared with other product blocks. |
| A product's price. Shared with other product blocks. |
| A product's compare-at (was) price. Shared with other product blocks. |
| The loading placeholder shown while products load. Shared with other product blocks. |
The full Saved for later page (opened by the View all link):
Class | What it targets |
| The full Saved for later page wrapper. |
| The page header (back button and title). |
| The back button on the page. |
| A single product row on the page. Put this in front of a shared row class to limit your styling to Save for Later only. |
| The product image on a row. Shared with the Wishlist. |
| The product name on a row. Shared with the Wishlist. |
| The price on a row. Shared with the Wishlist. |
| The Move to cart button. Shared with the Wishlist. |
| The remove button. Shared with the Wishlist. |
| The product list layout on the page. Shared with the Wishlist. |
| The Load more button. Shared with the Wishlist. |
Classes marked Shared also style other blocks, such as the Wishlist or Recently Viewed. To change only Save for Later, put the unique wrapper (.mage-sidebar-saved-for-later-block or .mage-sidebar-saved-for-later-card) in front of the shared class. For example, to set the Move to cart button color on the Save for Later page only:
.mage-sidebar-saved-for-later-card .mage-sidebar-wishlist-card__add-to-cart {
background: #1c1917;
}Troubleshooting
The block isn't showing
It is only visible to logged-in customers. If you are viewing your storefront while logged out, the block will not appear.
Check that the block toggle is turned on and that you clicked Save.
It is not added by default. See "I can't find the Save for Later block" below.
I can't find the Save for Later block in my list
It is not added by default. In the Blocks tab, click Add and select Save for Later.
The block shows my empty message instead of products
The block only shows items a customer has saved for later. If the customer has not saved anything yet, your empty-state message is shown. Test with a customer account that has at least one saved item.
My CSS changes are also affecting the Wishlist or other blocks
Some classes are shared between product blocks. Scope your rule with the unique wrapper (
.mage-sidebar-saved-for-later-blockor.mage-sidebar-saved-for-later-card) so it only applies to Save for Later. See the CSS Reference above.
Still need help or can't find the answers you're looking for? Reach out to the Mage Loyalty team through our live chat support.