Skip to main content
Build the future with Agentforce at TDX in San Francisco or on Salesforce+ on March 5–6. Register now.

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. 

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.

  1. Select the page where you want to use a custom header or footer: Home
  2. Click the Settings icon.
  3. Click Theme.
  4. Click Configure.
  5. Click New Theme Layout.
  6. Enter the new Layout: Ursa Major Solar - home
  7. From the Commerce Layout dropdown menu, select Commerce Layout.
    In Experience Builder, customize your page layout.
  8. 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.

  1. Open Experience Builder.
  2. Open the page you want to view.
  3. Click Preview in the upper right corner of the page.
    See Preview Your Experience Builder Site.
  4. 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.

Resources

Condividi il tuo feedback su Trailhead dalla Guida di Salesforce.

Conoscere la tua esperienza su Trailhead è importante per noi. Ora puoi accedere al modulo per l'invio di feedback in qualsiasi momento dal sito della Guida di Salesforce.

Scopri di più Continua a condividere il tuo feedback