Creating a Checkout Page

Before you can check out and submit an order, you must have a checkout page. This is also necessary for the mini cart fragment to work correctly.

Creating a New Page

1. Open the Product Menu (), and navigate to Site Builder → Pages.

2. To add a child page, click Add () next to the catalog page and click Add Page.

3. Select the master page template.

4. Enter the name as Checkout and click Add. This opens the new page in edit mode.

Customizing the Checkout Page

1. Drag and drop a container on the page. Change the Container Width to Fixed Width.

2. Go to the Styles tab and in the Spacing settings, choose Spacer 5 for the margin on the top of the element.

3. Drag and drop a Heading fragment inside the fixed width container.

4. Set the header title to Checkout.

5. Go to the Styles tab and in the Spacing settings, choose Spacer 4 for the margin at the bottom of the element.

6. In the Text settings, set the text alignment to center.

7. Drag and drop the Checkout widget inside the fixed width container.

The checkout page is now ready to use.

Adding the Mini Cart and Account Selector Fragments to the Header

Now you can add the mini cart fragment to the page header. The mini cart fragment requires you to have these pages to work correctly. The account selector fragment shows the currently selected account. With these fragments, Clarity’s sales agents, like Tommy Tanner, can process orders for all their accounts.

1. Open the Product Menu () and navigate to Design → Page Templates.

2. Select the master page template.

3. Select the Grid in the header and change the Number of Modules to 5.

4. Resize the grid as shown in the image below.

   

   The module for the logo should take four columns, the menu display another four columns, the user info fragment and the mini cart fragment one column each, and the account selector fragment should take up the last two columns.

5. Drag and drop the Mini Cart fragment inside the fourth module of the grid.

6. Go to the Styles tab and in the Spacing settings, enter 3.5rem for the margin at the bottom of the element.

7. Drag and drop the Account Selector fragment inside the fifth module of the grid.

8. Click Publish Master.

Awesome! You completed building the B2B storefront. In the next and final module, you’ll customize the B2B experience for business customers by adding custom price lists, terms and conditions, order types and more!

Customizing the B2B Experience