For You Builder

Learn how to customize your customer portal by adding promo blocks and configuring collection links. This guide helps you manage account settings and optimize product display options for your Shopify store.

Ezra Miller
33 steps
11 minutes

For You Builder Overview

Once you've logged into the live preview editor, you'll automatically land on the 'For You' builder, which will allow us to make edits to the 'For You' page, to give your customers the best experience possible. By default, we have already setup the '**For You**' builder to show customers their: - **Latest Orders** - **Recently Viewed Products** - **Saved From Cart Products** But you can go much further than this, using the '**For You**' Builder, you can move any of these to your preferred locations, add additional sections and even hide tabs for certain customer groups using customer tags. Below is an example of what you'll see by default when loading the '**For You**' Builder.

As an example of what can be done, we've added a promo block, recommended products and collections links to demonstrate some of the changes you're able to make.

Adding and Editing Promo Blocks

In this guide, we'll show you how to add and edit a promo block on the 'For You' page of your customer account.

Click "Add Promo Block" to begin creating a new promotion.

You'll see a new promo block has been added to the live preview below the 'My Account' header. From the editor on the left, you can start by editing the '**Message**' section of the promo banner: - **Promo Size** - By default set to full width, but can be changed to 1/2, 1/3, 2/3 width - **Title** - For example, 'Black Friday Sale!' to promote a black friday sale - **Description** - For example, 'Up to 50% off!' to give more info around the promo - **Text Color** - Change the text color to match your stores branding - **Text Alignment** - Change the alignement of the text from left, to center to right - **Panel/Mobile Text Alignment** - Do the same as above on the panel/mobile version And lastly under the 'Button' section, you can add a: - **CTA Type** - Which is a 'call to action' type of button If you click on the drop down and select 'button' you'll then be given the option to add: - **Text** - For example, you could add 'Shop Now!' to the be displayed on the button - **Link** - This is where you'll enter a full URL, a relative URL like /pages/contact, or a valid URL like mailto:[help@example.com](mailto:help@example.com) - **Color** - From here you can select the color of the button

Once done with the '**Message**' section of the promo banner. You can add an optional image for the background of the promo banner. Under the '**Image Source**' click on the: - **Upload image button** - Which allows you to select an image to upload - **Image Display** - Choose to have a full 'back ground image' or a 'split/ stacked image' If you're using a full 'background image' you'll also see the section 'Background Image Layout' which allows you to choose your: - **Content width** - Which can be full, 1/2 or 1/3 width - **Content Background** - Which can be transparent, or you can choose a color. This adds a color block over the image. If selected you can then choose your preferred color and Opacity

Recommended image sizes: Full Width: 828px by 240px 1/2 Width: 399px by 240px 1/3 Width: 256px by 240px 2/3 Width: 542px by 240px

Lastly is the '**Visibility**' section of the promo banner. Under this section, you have the following toggles: - **Enabled** - Which allows you to simply toggle on and off the promo banner - **Account Panel & Mobile** - This allows you to toggle it on or off on the mobile and panel version - **Account Page** - This allows you to toggle the promo banner on and off on the desktop version of the customer account Below this you also have the '**Only Show to Customers Tagged**', which allows you to show the promo banner, to only customers with certain tags.

Once you're happy with the new promo banner you've added. Simply hit the save button up the top right, to save your changes.

Order Display Settings

On each of the 'For You' blocks, there's an arrow pointing up and down. You can use these to change the order of each block on the 'For You' builder.

Once you've moved a section, make sure to hit the save button up the top right to save your changes.

Latest Orders

Inside of the 'For You' Builder, are some basic settings to manage the visibility of customers latest orders, on the 'for you' page. If you click on the **edit** button, you'll be given the drop down to the toggles allowing you to set the latest orders as: - **Enabled/ Disabled** - By toggling on or off the '**Enabled**' toggle - **Show on Account Panel and Mobile** - Allows you to toggle on or off the latest orders on the account panel and mobile versions on the customer account - **Show on Account Pag**e - Allows you to toggle on or off the Latest Orders on the desktop version of the customer account page You can also select the number of '**Recent orders shown**' on the 'For You' page. By default this is set to 2, but from the drop down, can be changed to 1, 2 or 3.

Show Draft Orders

By default, the 'Show Draft Orders' feature is turned off on the 'For You' page, which you can see by the 'feature off' text against the feature. To toggle this on, simply click the 'Edit' button

Click "Turn on Draft Orders". This will now display Draft Orders on the 'For You' page under your 'Latest Orders'.

Adding Collections to the 'For You' page

In this section, we'll show you how to add and manage collection tabs, on the 'For You' page

You're likely familiar with Shopify collections, however if not, you're able to manage and create your Shopify collections pages from the Shopify admin panel, under 'Products > Collections'

Through the 'For You' builder, you're able to add collections tabs, directly to the for you page. By default, we've added the 'Collection Tabs' feature to the 'For You' builder, however you'll see that it has '0 collection links' by default.

To add collections, simply scroll down to the 'Collection Links' section, and click on the 'Add Collection Links' button

A new collection will be added and will just need to configured with the 'Collection Name' as well as the 'Collection URL or Handle'

Unsure what the Collection Handle is, it's simply the collection name, which can also be found in the Collection URL, after /collections/

You can also set collections tabs to 'Only show to Customers Tagged with' certain tags.

Unsure how to add tags to your customers? If you go to your Shopify admin panel, and click on the 'Customers' tab on the left side, and then select any customer, you'll see the 'Tags' section on the right side of the customers account. If you added the tag 'VIP' for example.

And also added the same tag to the 'Only show to Customers Tagged with' section. This will only show that collection, to the customer/s tagged with 'VIP'

Lastly, if you click on the 'Edit' button on the 'Collections Tabs', you're also able to toggle on or off: - Enabled - To enable or disable collections tabs on the for you page - Show on Account Panel and mobile - Show on Account Page

Recently Viewed

By default, the 'Recently Viewed' section is aready enabled on the 'For You' page, so any product your customers view on the store, will be saved and viewable from their customer account page.

From the 'For You' builder, you are able to configure the visibility of this section though through the below toggles: - **Enabled** - Toggle on/off the recently viewed section - **Show on Account Panel and mobile** - allows you to toggle the recently viewed section on/off on the account panel and mobile - **Show on Account Page** - allows you to toggle on/off the recently viewed section on the desktop view of the page

You can also adjust the product card size of the 'Recently Viewed' images, from their default size to a 'Large (150px)' size. Simply click "Product card size" and select 'Large'

When a product from the 'Recently Viewed' section is clicked by a customer. They're given an easy purchase process as well that allows them to navigate through their most recent products, as well as adjust the amount they'd like to purchase with simple + and - buttons. As well as a dedicated 'View' button to view the full product page. And dedicated 'Add to Cart' and 'Check Out' buttons.

Saved from Cart

What does the saved from cart feature do?\ \ The saved from cart feature automatically monitors the cart to keep track of any products a customer adds to their cart, and doesn't checkout with. This gives easy access to continue the purchase in future and a reminder to the customer of a product they may still be interested in.\ \ By default, the 'Saved from Cart' section is aready enabled on the 'For You' page.

From the 'For You' builder, you're able to configure the visibility of this section though through the below toggles: - **Enabled** - Toggle on/off the saved from cart section - **Show on Account Panel and mobile** - allows you to toggle the saved from cart section on/off on the account panel and mobile - **Show on Account Page** - allows you to toggle on/off the saved from cart section on the desktop view of the page

You can also adjust the product card size of the 'Saved from Cart' images, from their default size to a 'Large (150px)' size. Simply click "Product card size" and select 'Large'

When a product from the 'Saved from Cart' section is clicked by a customer. They're given an easy purchase process as well that allows them to navigate through their saved from cart products, as well as adjust the amount they'd like to purchase with simple + and - buttons. As well as a dedicated 'View' button to view the full product page. And dedicated 'Add to Cart' and 'Check Out' buttons.

Product Recommendations

Product Recommendations are powered 'Shopify Product Recommendations' to suggest products customers may like.

The Product Recommendations section is a great way to display recommended products to customers making it easier for them to discover new products, and can help to increase online store sales. By default, the 'Product Reccomendations' section is toggled off and hidden, however if you simply click on the 'Edit' button.

And toggle the "Enabled" switch to activate or deactivate product recommendations.

Once toggled on, you'll be see the configurable options for the 'Recommended for You' section. By default, we've configured these in a standard way. However you're able to update the: - Product card size - From Standard to Large(150px) - Section Title - Recommendation basis (What will the list of product recommendations prioratise) - Automatic Priority - Recent Order First - Recently Viewed First - Saved From Cart First - Recommendation type - Related Products (RELATED is generated by Shopify.) - Complimentary Products (COMPLEMENTARY works best when complementary products are configured in Shopify Search & Discovery) - If no recommendations are found - Hide this section (Default)