Skip to main content
Tutorial

2025 StoreFront Visual Builder Tutorial

Overview​

Build_with_UltraCart.mp4

This tutorial guides merchants through the process of installing a StoreFront, selecting a Visual Builder–enabled theme, and customizing it for their products using the UltraCart Visual Builder.

It combines the foundational concepts of responsive layouts, the 12-column grid system, and the hierarchical structure of Containers, Sections, Rows, Columns, and Elements—ensuring merchants can create professional, mobile-friendly designs without coding.

![Image Placeholder — Visual Builder Home Screen]

What You’ll Learn​

  • How to install and configure your StoreFront

  • How to select and update a Visual Builder–capable theme

  • How to work with Containers, Sections, Rows, Columns, and Elements

  • How to design responsive layouts using the Zurb Foundation grid system

  • How to customize your storefront with scoped CSS, menus, and product displays

Prerequisites​

Prerequisite: You must have an active UltraCart account with StoreFront access.

Before beginning:

  • Confirm you have at least one available StoreFront host (e.g., merchantid.ultracartstore.com).

  • Ensure your selected theme supports the Visual Builder (e.g., Elements, Natural VB, Hero, Jewel, Lifty, or Poppy).

  • Review Zurb Foundation Documentation to understand the responsive grid system.

Step 1: Initialize and Configure Your StoreFront​

  1. Create or Locate Your StoreFront

    • Navigate to StoreFronts → Manage.

    • Each account can host multiple StoreFronts (e.g., production and dev environments).

    • If all default hosts are in use, rename one or assign it to a custom domain to free up a slot.

  2. Select a Visual Builder–Enabled Theme

    • Go to StoreFront → Themes → Theme Gallery.

    • Choose a Visual Builder–capable theme (e.g., Elements).

    • Click Install to apply the theme to your StoreFront.

  3. Keep Your Theme Updated

    • Navigate to StoreFront → Themes → Theme Editor → [Theme Name] → Actions → Update to Latest Version.

    • Regular updates ensure access to new features (e.g., PayPal Fastlane, digital downloads, improved form validation).

  4. Add Your Domain and SSL

    • Under StoreFront → Configuration → StoreFront Location, assign a custom domain.

    • Purchase an SSL certificate using the Whole Website option for end-to-end security.

    • For aliases, secure SSL for each domain before linking.

Tip: Using a branded domain increases shopper trust and SEO value.

Step 2: Understanding Core Architectural Concepts​

UltraCart’s Visual Builder relies on Zurb’s Foundation 12-column grid and a strict hierarchical structure of layout elements.

Foundation Framework​

The Foundation framework powers all current themes, offering a robust, responsive system adaptable to any device.

Screen TypeWidthExample Devices
Small< 640pxMobile phones
Medium≥ 640pxTablets (iPad, Kindle)
Large≥ 1024pxLaptops & desktops

The 12-Column Grid​

IconActionShortcut
🗑️DeleteDEL
📋Duplicatef
⚙️Settingss
🧭Hierarchyh
➕Add Below+
🎨Scoped CSSc
💬Commentm
⬅️/➡️Move Left/Rightl / r
⬆️/⬇️Move Up/Downu / d
🔲Grid Sizeg
✏️Edit Texte

Tip: If elements overlap or are nested, hover over the toolbar icon to open the parent element flyout menu.

Step 5: Editing the Grid Layout​

  1. Hover over an element and press “s” to open its Settings Panel.

  2. Locate the Grids section.

  3. Adjust the column width for Small, Medium, and Large device views by clicking the desired number of columns (selected columns appear in blue).

Example:
A Featured Item block may be set to:

  • Small: 12 columns (full width on mobile)

  • Medium: 6 columns (two per row on tablets)

  • Large: 3 columns (four per row on desktops)

![Image Placeholder — Grid Layout Settings]

Note: If Medium and Large values aren’t defined, they inherit the Small setting automatically.

Step 6: Adding Navigation and Content​

  1. Add a Menu element in the desired section.

  2. In the Settings panel, rename it (default: header).

  3. Configure its links in StoreFront → Menus.

  • Add a Breadcrumb element near the top of your content area.

  • Ensure it’s nested inside a Container → Row → Column.

  • Breadcrumbs auto-generate paths for navigation and SEO.

Product Listings​

Assign products to pages using:

  • Item Editor – select a page in the StoreFront Page field.

  • Page Editor → Items Tab – assign manually or set conditional rules.

Best Practice: Use attributes like sort_order and Velocity helpers (e.g., sortByAttribute) for custom sorting.

Step 7: Styling and Scoped CSS​

To style individual elements without affecting others:

  1. Select the element and press “c” to open Scoped CSS.

  2. Use special selectors:

    • self – targets the element itself

    • parent – targets direct children of the element

  3. Example:

    self:hover {
      background-color: #f8f8f8;
    }
    parent p {
      font-weight: bold;
    }

  4. For layout styling, target internal wrappers (e.g., .widget-panel-content { display: flex; }).

Tip: Add reusable custom classes in the Display Options section.

Step 8: SEO and Storefront Optimization​

Canonical URLs​

Enable under StoreFront → Search Engine Optimization to prevent duplicate-content issues.

Custom URLs​

Use simple, lowercase, hyphenated slugs:

metallic-streamer-sleeve

Warning: Avoid using periods (.) in custom URLs—they are stripped and may break links.

Redirects​

  • Configure under StoreFronts → Advanced → URI Mapping.

  • Use Permanent (301) redirects to preserve SEO.

  • Supports wildcards (*) for pattern-based redirects.

Sitemap​

  • Automatically generated nightly.

  • Register updated sitemaps with Google, Bing, and Yahoo after domain or structure changes.

Step 9: Testing Responsiveness​

Use the Visual Builder’s device view toggles to preview Small, Medium, and Large breakpoints.

  • Small View (<640px): check mobile spacing and stacking.

  • Medium View (≥640px): verify tablet layouts.

  • Large View (≥1024px): confirm desktop alignment.

Tip: Always review major pages (Home, Category, Product, Checkout) in each view before publishing.

Conclusion​

By following this tutorial, you can confidently install, configure, and customize a responsive UltraCart storefront using the Visual Builder. Understanding the grid, hierarchy, and responsive design principles ensures your storefront is optimized across devices and easy to maintain.

Next Steps​

Was this page helpful?