Standard Operating Procedure: UltraCart StoreFront Theme and Visual Management

1.0 Purpose and Scope

1.1 Document Overview

This Standard Operating Procedure (SOP) provides a comprehensive framework for web developers and e-commerce managers to effectively manage the visual and structural aspects of their UltraCart StoreFront. It is designed to standardize the processes involved in creating and maintaining a professional, brand-consistent, and highly functional online retail presence.

The scope of this document covers the entire lifecycle of theme management. This includes initial theme selection and installation, layout and content modification using the StoreFront Visual Builder, advanced styling with custom scoped CSS, and the crucial processes for managing theme updates and tracking template changes through version control.

The target audience for this SOP includes web developers responsible for technical implementation and e-commerce managers overseeing the site's design and user experience. The procedures outlined are designed to promote best practices for maintaining a consistent, professional, and responsive online presence that performs optimally across all user devices. Adherence to this SOP mitigates technical debt, enhances site maintainability, and ensures a scalable foundation for future e-commerce growth.

The key objectives of this SOP are:

• To standardize the process for selecting and installing StoreFront themes.

• To detail the core functionalities of the StoreFront Visual Builder for layout modification.

• To provide clear instructions for applying custom styling using scoped CSS.

• To establish a protocol for managing theme versions and reviewing changes.

2.0 Foundational Concepts: The Responsive Design Framework

2.1 Understanding the Core Principles

A responsive design is strategically essential in modern e-commerce, ensuring a seamless user experience regardless of the device a customer uses. All UltraCart themes are built on a robust framework engineered to provide an optimal viewing and interaction experience across a wide range of devices, from mobile phones to high-resolution desktop monitors.

The underlying technology for all UltraCart themes is Zurb's Foundation framework. This is a popular, battle-tested framework used by hundreds of thousands of developers worldwide to create professional, responsive websites. Understanding its core principles is fundamental to effective theme customization.

The central concept of the Foundation framework is its grid system. Most modern UltraCart themes, such as Craft and Natural, utilize a 12-column layout. This structure is highly flexible, allowing for clean and proportional layouts of 1/4 width (3 columns), 1/3 width (4 columns), and 1/2 width (6 columns). An older theme, Mr Teas, was based on a 16-column layout, which did not easily accommodate 1/3 width designs. The Visual Builder provides direct control over this grid, enabling precise layout adjustments for different screen sizes.

The Visual Builder uses three standard breakpoints to define responsive behavior:

A solid grasp of this grid system is the first step toward effectively managing and customizing your StoreFront's layout and appearance.

3.0 Procedure: Theme Selection and Management

3.1 Initial Theme Selection

A StoreFront's theme is the architectural foundation of its visual identity and user experience. It dictates the overall look, feel, and layout of every page. Making the correct theme choice is a critical first step that directly impacts development velocity, future customization capabilities, and long-term maintenance overhead. Selecting a theme that is compatible with the Visual Builder is a mandatory first step to unlock UltraCart’s most powerful and intuitive editing tools.

The primary Visual Builder-capable theme is Elements. This is the stock theme installed on all new UltraCart accounts and is fully compatible with the platform's visual editing tools. If you are working with an existing StoreFront that does not have a Visual Builder-capable theme, you must first install one.

Follow this procedure to install a new theme into an existing StoreFront:

1. Navigate to the Themes tab within your StoreFront's management interface.

2. Click on the Theme Gallery tab to view available themes.

3. Locate the 'Elements' theme (or another desired Visual Builder theme).

4. Click the "Add Theme" button to install it into your current StoreFront. Note that clicking "New StoreFront" will create an entirely separate store instance with that theme.

Once a theme is selected and installed, the next step is to ensure it remains current through proper version management.

3.2 Managing Theme Versions and Updates

Keeping your StoreFront theme updated is critical for security, performance, and functionality. Theme updates regularly include new features, bug fixes, and performance improvements, which are documented in theme-specific revision logs (e.g., Elements, Hero, Natural VB).

Critical Warning: Upgrading a theme version can overwrite or conflict with existing customizations. It is imperative to perform and validate all updates in a dedicated staging environment before applying them to a live StoreFront. All changes must be reviewed and tested thoroughly to prevent service disruption.

To update an active theme to its latest version, follow this procedure:

Navigate to: StoreFront → Themes → Theme Editor → [Your Theme Name] → Actions → Update to Latest Version

Theme updates often introduce significant enhancements. Based on recent revision logs, these enhancements typically fall into the following categories:

• New Features: Support for new payment gateways (e.g., PayPal Fastlane, Affirm, Sezzle), integration of webchat elements, display of digital download links in customer account pages, and functionality for in-store pickup.

• Visual Builder Enhancements: Conversion of core system pages, such as the Account Login, Checkout process, and "My Account" sections, to become fully editable within the Visual Builder interface.

• Developer Updates: Upgrades to core platform scripts (e.g., catalog_5.5.js), updates to the jQuery library version, and performance optimizations like the addition of preconnect tags to the site header.

• Fixes: Resolution of CSS rendering issues, layout alignment problems (e.g., replacing outdated float properties with modern Flexbox solutions), and corrections to logic errors in templates.

With your theme installed and updated, you are now ready to begin customizing its appearance using the StoreFront Visual Builder.

4.0 Procedure: Using the StoreFront Visual Builder

4.1 Accessing and Navigating the Editor

The StoreFront Visual Builder is the primary interface for making real-time visual and structural modifications to your StoreFront pages. It provides a "what you see is what you get" (WYSIWYG) experience, allowing for rapid iteration and design adjustments without direct code manipulation.

To engage the Visual Builder, follow these steps:

1. Log into your UltraCart merchant account.

2. Navigate to your live StoreFront host URL (e.g., [your Merchant ID].ultracartstore.com).

3. An "Edit" button will appear in the top-left corner of the page. Click it to activate the Visual Builder.

Once the editor is active, moving the mouse over the page will highlight editable elements with a blue outline and display a contextual toolbar in the upper-right corner of the element. If elements are nested, hovering over a toolbar icon will reveal a flyout menu of all parent elements, allowing for easy selection of any component in that stack.

The primary toolbar provides access to core functions, many of which have keyboard shortcuts for efficiency:

Understanding how to navigate the editor is the first step; the next is understanding the logical structure of the page itself.

4.2 Understanding the Page Hierarchy

The Hierarchy view is an essential tool for understanding and manipulating the structural composition of a page. Accessed from the element toolbar, it presents a sequential, nested list of every element on the page. A clear understanding of this structure is crucial for making precise layout changes.

The fundamental building blocks of a page are organized in a specific, nested order:

• Container: The outermost element on a page. A typical page is composed of multiple containers, such as a header, body, and footer. New containers should be created for sections you intend to reuse across multiple pages or templates, functioning similarly to reusable snippets in legacy theme development.

  • Section: A logical grouping of child elements within a Container. For example, a header container might have separate sections for mobile and desktop navigation bars.

    • Row: This element spans the full width of its parent to establish the horizontal grid. All columns must reside within a Row.

      • Column: One or more Column elements exist within each Row. The total width of the columns is based on the theme's 12-column grid. For example, two columns that are each 6-wide will each occupy 50% of the available space.

        • Element: This refers to any other component placed within a column, such as a menu, slider, image gallery, or text block.

This hierarchical structure is the blueprint for how your page is rendered. The next step is to use this structure to control the responsive layout.

4.3 Modifying Layouts with the Responsive Grid

The Visual Builder gives you direct control over how elements are displayed on different screen sizes by allowing you to adjust their column width within the responsive grid. This ensures your content is presented optimally on any device.

The design framework follows a "mobile view first" principle. This means that responsive settings applied to the "Small" screen view are automatically inherited by the "Medium" and "Large" views. You only need to define settings for larger screens if you wish to override the mobile layout. For instance, a setting for "Medium" will be inherited by "Large" unless a specific "Large" setting is also defined.

To change an element's column width for different device views:

1. Hover over the desired element and click the Settings icon (gear symbol) or press the s hotkey.

2. In the side panel that appears, locate the Grids section.

3. Click the interactive grids for Small, Medium, and Large views to highlight the number of columns (out of 12) the element should occupy for that view. The selected columns will appear in blue.

The relationship between the 12-column grid and percentage-based width is as follows:

Mastering the grid provides powerful layout control. For even finer-grained visual adjustments, you can apply custom CSS.

5.0 Procedure: Advanced Visual Customization with CSS

5.1 Applying Scoped CSS

Scoped Styles is a powerful feature within the Visual Builder that allows developers to apply custom CSS to a specific element and its children. This method prevents unintended style conflicts across the site by ensuring that the CSS rules only affect their intended target.

When you add custom CSS via the Scoped Style editor, the system automatically applies a unique prefix to each selector, scoping it to the selected element. The editor preserves all comments and whitespace, allowing for well-organized and readable code.

The Scoped Style editor includes special keywords and a function to facilitate advanced styling:

Best Practice: The Visual Builder injects its own classes and structure into the page while in edit mode. To inspect the clean, live HTML of an element, open your StoreFront in a private or incognito browser window and use the browser's developer tools.

While scoped styles are excellent for one-off adjustments, custom classes are the preferred method for creating reusable styles.

5.2 Using Custom Classes

While Scoped Styles are effective for targeted, single-use cases, Custom CSS classes are the preferred architectural pattern for creating scalable and reusable styling. They decouple styles from the element structure, allowing for easier site-wide updates and cleaner integration with external or global stylesheets.

To add one or more custom classes to an element:

1. Open the element's Settings panel by clicking the gear icon.

2. Locate the CSS area, which is under the Display Options section.

3. Enter your desired class names in the input field, separating multiple classes with a space (e.g., class_one class_two).

Once applied, these custom classes can be targeted from several locations:

• The Inline CSS Editor (Scoped Styles), using the self keyword (e.g., self.my-custom-class { ... }).

• The Override CSS file in the StoreFronts Backend UI.

• Custom stylesheets uploaded via the File Manager.

• Any external stylesheet linked from the StoreFront page.

Properly applying custom styles is a key part of theme management, which must be complemented by a rigorous process for version control.

6.0 Procedure: Version Control and Change Management

6.1 Reviewing Template Changes

Tracking changes to theme templates is essential for maintaining site stability, debugging issues, and collaborating effectively, especially when multiple developers are involved or when preparing for a theme update. The primary tool for this process is the Storefront File Manager, which maintains a version history of every file.

To access the File Manager, use the following navigation path:

Navigate to: Main Menu > Storefronts > [Select Your Storefront Host] > File Manager

To review a specific file's version history, follow these steps:

1. Within the File Manager, navigate to the directory containing the template file you wish to inspect (e.g., themes/<active theme folder>/templates/system/checkout).

2. Locate the desired file (e.g., options.vm) and click on its version number, displayed in a dedicated column. This action will open the file's complete history, with the current version listed at the top.

3. To compare the current version with any previous version, click the corresponding "diff" button in the history list.

The "diff" view provides a side-by-side comparison, with the current version on the left and the selected previous version on the right. All differences between the two files are highlighted in yellow for quick identification. You can make direct edits to the current version from this view and save your changes.

Consistent application of these procedures for theme management, visual customization, and version control is fundamental to maintaining the integrity, stability, and long-term performance of a professional UltraCart StoreFront.