Customize the D2C Store Template

Learning Objectives

After completing this unit, you’ll be able to:

List what comes with the D2C Commerce store template.
Explain how to customize the D2C Commerce store template’s theme.
Explain how to customize a header or footer.
Describe how you can use pages and components.
Explain the difference between activating and publishing a store.
Explain how to customize a store.

Customize a D2C Commerce Store

Taylor Givens, Ursa Major Solar’s senior merchandiser, is all about creating an amazing experience for visitors to their Salesforce D2C Commerce store. They are eager to customize the D2C Experience Builder template with the Ursa Major Solar store logo, just as a beginning.

Ursa Major Solar logo

The D2C Commerce template includes commerce-specific pages already, such as the home page and a search results page. These pages use components developed specifically for D2C Commerce stores. With Experience Builder’s easy-to-use interface, Taylor can drag and drop components onto their pages and customize component properties. They can add images and styles to the store to create a unique shopper experience.

Taylor Givens, Ursa Major Solar senior merchandiser

Taylor creates this handy checklist of what they need to do.

	Task
1	Configure the store’s theme.
2	Configure a custom header or footer.
3	Explore pages and components.
4	Preview and publish the store.
5	Configure a custom URL for the store.

Taylor begins customizing their D2C Commerce store’s pages and components by clicking the Experience Builder tile from their store’s home page.

Use Experience Builder from your store to build, brand, and customize your store.

See Customize Sites with Experience Builder for details on using Experience Builder.

Configure the Store’s Theme

Taylor is glad to know that the D2C Commerce store template uses a prebuilt D2C theme. They can specify colors, images, text sizes, and spacing to customize the theme to suit their requirements. Some components have properties that allow them to override the component’s theme settings.

Access the store’s theme settings by expanding the Theme icon on the left side of the Experience Builder page.

In Experience Builder, select a theme.

Taylor specifies colors for the background, text, brand, and the foreground. They generate a palette from an uploaded image.

On the Images page, they select their company logo.

In Experience Builder, change the color and add an image.

They can also configure the text size and site spacing for PC/desktop and mobile devices.

Configure a Custom Header or Footer

The D2C Commerce store template includes a header and footer component on each page. Taylor wants to use a custom header for a page, so they first adjust the page’s theme layout. Here’s how they do it.

Select the page where you want to use a custom header or footer: Home
Click the Settings icon.
Click Theme.
Click Configure.
Click New Theme Layout.
Enter the new Layout: Ursa Major Solar - home
From the Commerce Layout dropdown menu, select Commerce Layout.
Click Save.

The page now has a blank top and bottom section where Taylor can use their custom header or footer.
See the D2C Commerce Developer Guide for details on developing custom components.

Explore Pages and Components

The D2C Commerce Store template includes pages and components that let Taylor create an engaging and easy-to-use storefront. Here are the available components by page.

Page	Goal	Components
Cart	Show shoppers the products they’ve selected to purchase.	Cart Cart Totals Checkout Button Hero Banner Link List Rich Content Editor Store Logo Tile Menu
Category	Show shoppers the products in the selected category.	Category Banner Category Breadcrumbs Hero Banner Link List Rich Content Editor Search Results Shop By Category Store Logo Tile Menu Top Sellers
Checkout	Allow shoppers to complete their purchase.	Cart Totals Checkout Checkout Header Hero Banner Link List Rich Content Editor Store Logo Tile Menu
Error	Tell shoppers that the system encountered an error.	Hero Banner Link List Page Error Message Rich Content Editor Store Logo Tile Menu
Login/Check Password	Tell registered shoppers to check email to reset password.	Check Email Hero Banner Link List My Account Header Rich Content Editor Store Logo Tile Menu
Login/Forgot Password	Allow registered shoppers to retrieve a forgotten password.	Forgot Password Hero Banner Link List My Account Header Rich Content Editor Store Logo Tile Menu
Login/Login	Allow shoppers to log in to the store.	Hero Banner Link List Login Form My Account Header Rich Content Editor Store Logo Tile Menu
Login/Register	Allow shoppers to register for the store.	Hero Banner Link List Rich Content Editor Self Registration Store Logo Tile Menu
Home	Create an engaging landing page for shoppers to enter your storefront.	Hero Banner Link List Rich Content Editor Shop By Category Store Logo Tile Menu Top Sellers
My Profile	Allow shoppers to view their profile image and reset their password.	Hero Banner Link List My Account Header My Account Password My Profile Rich Content Editor Store Logo Tile Menu
Order	Tell shoppers that their items have been successfully ordered.	Hero Banner Link List Order Confirmation Message Rich Content Editor Store Logo Tile Menu
Product	Show information about a product, including price, description, and image.	Einstein Recommendations Hero Banner Link List Order Confirmation Message Product Description Product Gallery Product Information Rich Content Editor Store Logo Tile Menu
Search	Allow shoppers to search the storefront.	Hero Banner Link List Rich Content Editor Search Results Shop By Category Store Logo Tile Menu
Service Not Available	Specify what shoppers see if your storefront isn’t available.	HTML Editor Rich Content Editor

Taylor takes a closer look at the components to figure out which ones to use as is and which they’d like to modify.

Category	Component
Cart	Cart: Display the contents of the shopping cart. Cart Totals: Display the cost of items in the cart.
Category	Category Banner: Specify the color of the category name displayed on the banner. Category Breadcrumbs: Display the path to the current category.
Checkout	Checkout: Display checkout process steps. Checkout Button: Click to begin checkout. Checkout Header: Display the store logo and cart badge at the top of the Checkout page.
Commerce Einstein	Einstein Recommendations: Personalize the shopping experience.
Content	Hero Banner: Display an image and text prominently on the page. HTML Editor: Create and edit custom content in HTML, including text and images. Page Error Message: Display an Invalid Page message. Rich Content Editor: Add formatted custom text and images to a page, including text and images. Store Logo: Override the logo image on a particular page.
Navigation	Link List: Display a list of links in the footer that allow the shopper to navigate the storefront. Shop by Category: Display products grouped by category. Tile Menu: Navigate the storefront by clicking tiles. Top Sellers: Display products in a category.
Orders	Order Confirmation Message: Display when a shopper’s order is complete.
Product Details	Product Description: Display product information. Product Gallery: Display the product on the Product page. Product Information: Display a product’s SKU, price, and description.
Search	Search Results: Display products retrieved as a result of a shopper search.
User Accounts	Check Email: Tell the shopper to check their email for the password reset link. Forgot Password: Allow a shopper to reset their password. Login Form: Uses this to log in to the storefront, trigger the forgot password process, or start self-registration. My Account Header: Add the title `My Profile & Password` to the top of the My Account Menu component. My Account Password: Display a link that lets a shopper reset their password. My Profile: Display a shopper name and email address. Self-Registration: Allow a shopper to register for the store.

Preview and Publish the Store

As Taylor customizes the store, they can preview what it looks like to shoppers, and publish the changes. Here’s how they do it.

Open Experience Builder.
Open the page you want to view.
Click Preview in the upper right corner of the page.
See Preview Your Experience Builder Site.
When you’re happy with the way your store looks, click Publish in the upper right corner of the page. Taylor gets an email notification when their store is published.

You can publish a store whether or not it’s activated. You can activate a store even if it’s not published. In this case, Maria Jimenez, the admin, already activated it. See the Salesforce D2C Commerce Basics module to learn how she did it.

Let’s Wrap It Up

In this unit, you learned how to customize the D2C Commerce store template. You also learned how to publish and preview the store. In previous units, you learned about search and Commerce Einstein. Now take the final quiz and earn an awesome badge.