Creating Item Or Page Specific Content
Video
The following video also covers understanding theme, page and item containers.
Overview
This tutorial will explain how to create item (Item Container) or page (Page Container) specific content via the storefront visual builder.
Navigation
Navigation
Opening Your Storefront Into The Visual Editor
First, From the UltraCart back-end, navigate to your storefront then click the 'Browse Your Store' button:
Next, open the Visual Editor by clicking the edit button at the top left portion of the page:
The view of the page in the visual builder will appear like this:
Creating an Item Container
Now let's see how we can add an item container to our storefront.
To do so we will first navigate to a item specific page (one that is using the template_item.vm template if we inepct the settings tab of the storefronts pages.
Next, 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.
About Containers in Storefront Visual Builder
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.
- Please note that the Item container may only be added to the item pages (pages using the template_item.vm)
- The Page container can be added to all other page templates besides the item template.
So, to create an Item Container we will navigate to a item specific page mouse over the Hierarchy panel until we see the editor outline appear in the proper place within the page we want to place our "Daily Item Special", then we will click the "+"
Creating a Page Container
Now let's see how we can add an Page container to our storefront. We will add a page container to the home page of our storefront to include a testimonial.
To do so we will first navigate to the home page. Next, open click the 'Hierarchy' button in the visual builder editor along the right side of the page:
