Overview

This tutorial will explain how to create item (Item Container) or page (Page Container) specific content via the storefront visual builder.

Navigation

Main Menu > Storefronts (Choose host) > (Storefront Menu) General > Browse Your Store > Click the 'Edit' button

Opening Your Storefront Into The Visual Editor

First, From the UltraCart back-end, navigate to your storefront then click the 'Browse Your Store' button:

UltraCart Documentation > Creating Item Or Page Specific Content > BrowseYS-VisualBuilder.PNG

Next, open the Visual Editor by clicking the edit button at the top left portion of the page:

UltraCart Documentation > Creating Item Or Page Specific Content > SF-VP-EDIT_BUTTON-crop.png

The view of the page in the visual builder will appear like this:

UltraCart Documentation > Creating Item Or Page Specific Content > SF-VB-active-element-outline-box.PNG

Creating an Item Container

Now let's see how we can add an item container to the page. To do so we will open click the 'Hierarchy' button in the visual builder editor along the right side of the page:

The Hierarchy tab will open providing a overview of the layout of the page including: Containers; Sections; Modals; Rows; and Elements.

This tutorial will focus on Containers. Containers are sections of a page that are compiled by the visual builder. Compiling the page source allows for the creation and management of manageable source code that eliminates coding related idiosyncrasies from one developer to the next.

To create an Item Container we will mouse over the Hierarchy panel until we see the editor outline appear in the proper place in the page we want to place our "Daily Special", then we will click the