Introduction

What core architectural concepts govern layout
and responsiveness within the UltraCart Visual Builder?

---

These sources provide comprehensive documentation for UltraCart's StoreFront Visual Builder, explaining how merchants can customize their e-commerce sites without extensive coding. The tutorials cover foundational concepts, such as selecting a Visual Builder-capable theme and understanding the hierarchical structure of page elements (Containers, Sections, Rows, and Columns). Significant emphasis is placed on the responsive design grid—based on the Zurb Foundation framework—which utilizes a 12-column layout that adapts across small, medium, and large screen sizes. Specific instructions are provided for implementing key features like adding breadcrumb trails for improved navigation, creating new menus, managing sliders, and using scoped CSS styles with special keywords to precisely target elements. Finally, one source addresses developer topics by showing how to create custom sorting for catalog items using Velocity code and item attributes.

The core architectural concepts that govern layout and responsiveness within the UltraCart Visual Builder are rooted in a specific front-end framework and a structured, hierarchical grid system designed for mobile-first presentation.

---

The core architectural concepts that govern layout and responsiveness within the UltraCart Visual Builder are rooted in a specific front-end framework and a structured, hierarchical grid system designed for mobile-first presentation.

The fundamental concepts are:

1. The Foundation Framework

The underlying framework for UltraCart's responsive design is Zurb's Foundation framework. All current themes utilize this popular framework, which provides the technological basis for creating rich, responsive content.

2. The Grid System

The layout within the Visual Builder is fundamentally governed by a grid layout concept.

• 12-Column Layout: The grid is comprised of a set of 12 columns. This 12-column structure is used by most modern themes (like Craft and Natural) because it easily accommodates 1/4, 1/3, and 1/2 width layouts.

  • For example, an element taking up 100% of the page width uses 12 columns; a 50% width uses 6 columns; and a 25% width uses 3 columns.

• Grid Modification: Merchants can visually control the layout by accessing the Grids section within the element's settings panel, allowing them to change the column width by device view.

3. Layout Hierarchy (Structural Building Blocks)

Pages are constructed using a strict nested hierarchy of fundamental building block elements:

1. Containers: These are the outermost elements on a page, typically representing major structural areas like the header, footer, or body. Creating new containers is suggested for sections intended for reuse in other parts of the theme.

2. Sections: Logical groupings of child elements that reside within a Container.

3. Rows: Rows establish the grid layout within a Section. A Row always takes up the full width of its parent element.

4. Columns: Columns define the width allocation within a Row. A Row can contain one or more Columns, which use the 12-column grid system to define their set width. For instance, certain elements like the Breadcrumb element must be nested within a Container, a Row, and a Column to ensure proper alignment and automatic generation of the breadcrumb trail.

5. Elements: These are the specific content modules, such as menus, sliders, images, text, etc., which are nested within Columns.

4. Responsiveness and Device Views

The Visual Builder's responsive framework enables dynamic presentation by adjusting the layout based on the device screen size, following a "mobile view" first perspective.

The framework defines three primary device views:

Screen View	Width Specification	Target Devices
Small Screen	Smaller than 640px wide	Mobile devices (e.g., phones)
Medium Screen	640px or wider	Tablets
Large Screen	1024px or wider	Large HD tablets, laptops, and desktop computers

Inheritance of Settings: When configuring layout, if the column width is set for the Small (mobile) view, this width is inherited by the Medium (tablet) and Large (desktop) views unless a specific width is defined for those larger views. If only Small and Medium views are defined, the Medium configuration is automatically applied to the Large devices.

In essence, the layout and responsiveness are controlled by applying column configurations to the Columns element, defining how that column should resize (from 1 to 12 columns wide) across the Small, Medium, and Large breakpoints.

---

Building a robust and professional storefront using the UltraCart Visual Builder involves adhering to specific architectural best practices concerning theme selection, responsive design hierarchy, content configuration, and essential Search Engine Optimization (SEO) setup.

Here is a comprehensive tutorial using best practices for developing your UltraCart StoreFront.

--------------------------------------------------------------------------------

UltraCart Visual Builder Storefront Tutorial: Best Practices

Phase 1: StoreFront Initialization and Theme Selection

The foundation of your storefront relies on selecting the correct platform and theme.

1. Create or Locate Your StoreFront:

   ◦ An UltraCart account can host multiple distinct StoreFronts.

   ◦ Your account typically starts with two default hosts (e.g., MERCHANTID.ultracartstore.com and MERCHANTID.ultracartdev.com).

   ◦ If you need a new StoreFront and both defaults are in use, you must rename one of the existing ones or assign it to a custom domain to free up the slot for a new one.

2. Select a Visual Builder Capable Theme:

   ◦ To use the Visual Builder, your StoreFront must utilize a compatible theme.

   ◦ The Elements theme is the stock theme installed on new UltraCart StoreFronts and is Visual Builder capable. Other capable themes include Natural VB, Hero, Jewel, Poppy, and Lifty.

   ◦ To install a new theme, navigate to StoreFronts → Themes and use the Theme Gallery.

3. Maintain and Update Your Theme (Best Practice):

   ◦ New features and security updates (like PayPal Fastlane, digital download links, and enhanced duplicate form submission prevention) are released in theme updates.

   ◦ To update, navigate to StoreFront → Themes → Theme Editor → [Theme Name] → Actions → Update to Latest Version.

4. Configure Your Domain (Recommended Best Practice):

   ◦ Using a custom domain enhances branding and customer trust.

   ◦ Use the Change Storefront Location feature.

   ◦ When purchasing custom SSL, the "Whole Website" option (Your Site, Store & Checkout) is recommended, as every page resides within the StoreFronts CMS.

   ◦ If you add an alias (like www.domain2.com to www.domain1.com), ensure you obtain a new SSL certificate for the additional domain first.

Phase 2: Building Layouts with the Visual Builder Hierarchy

The Visual Builder utilizes a strict nested hierarchy based on the Zurb Foundation framework. Understanding this structure is critical for proper layout.

1. Access the Visual Builder:

   ◦ Navigate to your StoreFront URL while logged into UltraCart. Click the "Edit" button in the top left corner of the page.

2. Follow the Layout Hierarchy (The Building Blocks):

   ◦ Pages must be constructed using the following nested order:

   ▪ **Container:** The outermost structural element (e.g., header, footer, body). Create new containers for sections you plan to reuse elsewhere in your theme.
   
   ▪ **Section:** A logical grouping of child elements within a Container.
   
   ▪ **Row:** Establishes the grid layout and always consumes the full width of its parent element.
   
   ▪ **Column:** Defines the width of elements inside a Row using the 12-column grid system.
   
   ▪ **Element:** The actual content item (menu, slider, image, etc.).

3. Implement Responsive Design (Mobile-First):

   ◦ The responsive framework automatically adjusts based on device screen size: Small (mobile, < 640px), Medium (tablets, ≥ 640px), and Large (desktops, ≥ 1024px).

   ◦ Best Practice: Design is mobile-first. Set the column width for the Small Screen view first, as this configuration is inherited by Medium and Large devices unless those larger views are explicitly defined.

   ◦ Adjust column size by selecting the element's Settings icon (or hotkey s) and using the Grids section panel. The system uses a 12-column structure, where 12 columns equal 100% width, 6 columns equal 50%, and 3 columns equal 25%.

4. Add Key Navigational Elements:

   ◦ Menus: Add a "menu" element to the desired location. After inserting, use the settings panel to rename the menu (it defaults to "header"). Then, add the specific menu selections in the UltraCart backend StoreFront menu.

   ◦ Breadcrumb Trails (UX/SEO Best Practice): Breadcrumbs aid shoppers by showing their location and improve internal linking for search engines. The Breadcrumb element must be nested within a Container, Row, and Column for correct alignment. Place it near the top of the content area. The breadcrumb path automatically generates based on the storefront page structure.

5. Apply Custom Styling:

   ◦ For specific styling without affecting other elements, use Scoped Styles (accessible via the "c" hotkey).

   ◦ Scoped styles are prefixed to target only the selected element and its descendants.

   ◦ Use special keywords to target components: self targets the element itself (e.g., self:hover), and parent targets direct children (e.g., parent p).

   ◦ If using layout elements like Panel or Flex, target the inner content wrapper (e.g., .widget-panel-content) to apply layout styles like display: flex.

   ◦ You can also add reusable Custom CSS Classes in the Display Options section of the element settings.

Phase 3: Content and Product Configuration

1. Assign Items to the StoreFront:

   ◦ Items must be assigned to the StoreFront to appear in the catalog. There are three assignment methods:

   ▪ **Item Editor:** Select the page from the drop-down on the first tab of the item editor.
   
   ▪ **Page Editor - Manual:** Use the Items tab of the page editor for manual assignment.
   
   ▪ **Page Editor - Conditions:** Use conditions to automatically assign products that meet specific criteria.

2. Customize Item Sorting:

   ◦ If you need to override the default sorting (by description) on a catalog group page, you can implement custom sorting by item attribute.

   ◦ Create a custom item attribute (e.g., sort_order) on the Catalog tab of the Item Editor.

   ◦ Use the sortByAttribute Velocity helper function in the catalog code.

   ◦ Best Practice for Large Catalogs: Manage item attributes in bulk by exporting, updating, and importing a spreadsheet via Item Management → Batch Item Export/Import.

Phase 4: SEO and Post-Migration Best Practices

If you are migrating from another platform, proper URL management is crucial for preserving SEO ranking.

1. Configure Canonical URLs:

   ◦ Enable Canonical Links under the StoreFront → Search Engine Optimization Tab.

   ◦ This is critical to prevent presenting completely duplicate content to search engines if you use domain aliases or multiple category assignments.

2. Use SEO-Friendly Custom URLs:

   ◦ Override the default Item ID-based URLs with SEO-friendly slugs by configuring the Custom URL field in the Pages → Items Tab.

   ◦ Best Practice: Use simple slugs, lowercase letters, and separate words with hyphens (e.g., metallic-streamer-sleeve).

   ◦ Caution: Avoid using periods (.) in the Custom URL field, as they are stripped upon saving and can break the slug.

3. Manage Redirects (Critical for Migration):

   ◦ Use the URI Mapping tool (StoreFronts → Advanced Tab) to configure redirects for legacy URLs.

   ◦ Always configure redirects as Permanent Redirect (301) to signal to search engines that the content has moved permanently, preserving link equity.

   ◦ Only enter the path portion of the URL (URI) in the mapping tool, not the full domain.

   ◦ Wildcard (*) matching is supported for pattern-based redirects.

   ◦ Test: After configuration, use browser developer tools to verify that old URLs return a 301 status code and correctly redirect to the new Custom URL path.

4. Sitemap Management:

   ◦ The UltraCart system automatically creates and updates your sitemaps nightly.

   ◦ Register your sitemap URLs with popular search engines (Google, Yahoo, Bing) after changing your StoreFront location.

5. Advanced Tool Configuration:

   ◦ If your theme supports the Visual Builder, you can enable address autocomplete in the checkout process using the Google Places API key (not the Google Maps API key) under StoreFront → Advanced → Google Autocomplete.

---