/
Replacing legacy screen branding with StoreFronts Checkout

Replacing legacy screen branding with StoreFronts Checkout

Introduction

UltraCart's StoreFront Checkout is the modern replacement for the legacy Screen Branding system. Migrating to StoreFront Checkout provides a highly customizable, mobile-responsive, and modernized checkout experience for your customers. This guide provides step-by-step instructions to transition from legacy Screen Branding to StoreFront Checkout.

Tip: Migrating to StoreFront Checkout positions your store for future platform improvements and ensures long-term support.

 

Advantages of StoreFront Checkout

  • Responsive, Mobile-Friendly Framework: Fully responsive design ensures optimal checkout experience across all devices.

  • Visual Builder Customization: Easily customize the checkout appearance using UltraCart's Visual Builder.

  • Theme-Based Architecture: Simplify design changes and updates using themes and site-wide attributes.

  • Modern UI/UX: Improved customer experience with faster load times and intuitive navigation.

  • Ongoing Enhancements: StoreFront Checkout receives regular updates with new features and improvements.

Prerequisites

  • Access to your UltraCart administrative account.

  • StoreFronts feature enabled on your account.

Step-by-Step Instructions

Installing Storefronts

  1. From the Main Menu select the StoreFronts option

image-20250626-163450.png
Main Menu → Storefronts

 

2. A lightbox will display a short video, simply click on the "Install StoreFronts into my UltraCart account" button to begin the install process.

Configure StoreFront to checkout only

Overview

UltraCart's Checkout Only Mode lets you seamlessly integrate UltraCart’s secure and customizable checkout process into your existing website, blog, or landing pages—without migrating your entire storefront. Keep your current site as-is, and just drop in a high-converting UltraCart checkout experience.

Configuring Checkout Only Mode

If you're using a modern storefront theme, setting up Checkout Only Mode is quick and code-free, thanks to the Visual Builder.


1. Launch the Storefront Visual Builder

  • Log in at secure.ultracart.com.

  • Navigate to StoreFronts → select your StoreFront →

  • Within the General Settings click Browse your Store.

image-20250324-140645.png

2. Access Theme Settings

  • Once on your storefront, click the Edit (1) button located at the top left of the page next to the UltraCart logo.

  • Open the right-hand menu and select Theme Settings (2).

3. Enable Checkout Only Mode

  • In Theme Settings, scroll down to the Checkout Only section.

  • Click Edit (3) next to the "Disabled" status.

image-20250324-141507.png

4. Configure Checkout Only Options

  • Set Checkout Only Mode to Enabled.

  • Provide a URL for the Link Logo to URL setting. This should be the homepage or primary landing page of your external site.

image-20250324-142230.png

Note: Any storefront page other than the checkout page will automatically redirect visitors to the URL you specify here. For example, if someone tries to access my-uc-storefront.com/any-page.html, they'll be redirected to your provided link.

Warning: the Link Logo to URL value is required to redirect users to your external site. If this value is not set users will be able to access pages other than your storefront on your site.

5. Save Your Settings

  • Click Save to apply your changes. Your storefront is now operating in Checkout Only Mode!

 

 

For Legacy StoreFront Themes

Still on a legacy StoreFront? No worries—you can still activate Checkout Only Mode, just through a slightly different path.


1. Select Your StoreFront

  • In the left-hand menu, hover over StoreFronts and select your desired StoreFront.

2. Open Theme Settings

  • Click Themes within the StoreFront menu.

3. Enable Checkout Only Theme

  • Locate the Checkout Only Theme option.

  • Check the box to enable it.

  • Enter your external site’s homepage URL into the Checkout Only Theme Logo URL field.

4. Save Your Settings

  • Click Save to activate Checkout Only Mode on your legacy storefront.

image-20250324-144000.png

 

 

Legacy Checkout Migration with SSL certificates

If you have an existing legacy UltraCart checkout you can continue reading Using existing SSL certificate for a checkout only theme.



Adding a logo

Upload your logo using the Visual Builder editor. From the storefront menu, click the "Browse your Store" button:

Next, click the "Edit" button that appears at the top left corner of the web page:
(This menu only appear when you are actively logged into the UltraCart back-end, it doers not appear to your customers)

Next, mouse over the sample logo so that the logo is outlined in blue then click the gear icon (or use the keyboard shortcut "s" key to open the settings panel in the Visual Builder editor:

multimedia

Fine tuning your checkout colors

This document will help you to fine tune the theme so that it's personalized for your business.  First there are three topics that you want to make sure that you've covered.

  1. Changing store logo

  2. Changing store title

  3. Customizing the footer contact information

Assuming those changes are complete, the next thing you will want to do is customize colors on the theme.  To do this navigate to Themes as shown below.

image-20250626-183312.png
Storefront Themes.

The first theme is always your active theme, so just scroll down a bit on the page and you'll see all of the theme attributes.  Typically theme attributes control everything related to the look and feel of the theme as shown below.

image-20250626-183851.png
Theme Colors Palette Editor.

 

To customize a color click in the field.  You can either input an HTML color in the format #RRGGBB or use the color picker as shown below.

When you are done, make sure to click the Save Theme Settings button to apply your changes.  If there are other aspects of the theme color scheme that you want to change that are not present in the theme attributes, see overriding theme CSS for details on how to properly override the CSS of a theme.

 

Related Document:

Storefront Themes Tutorial - Activating or Suppressing Google Auto Complete

Updating Contact Us information

The Storefront contains two "Contact Us" sections:

  1. Contact us details in the footer section of all of the storefront pages.

  2. A "Contact Us" page with an email form to submit a message.

The Contact Us information is found in the footer section of the StoreFronts pages and checkout. It is important to keep this information up to date as there is information here (by default) that might be confusing to your customer(s).

  1. Navigate into StoreFronts General tab.

    image-20250626-172410.png
    Navigate to Storefronts → Storefront Host → General tab.

     

  2. Scroll down to the "Contact Us Information" section.

    image-20250626-172602.png
    Storefront Contact Us Configuration section.



  3. Make sure all information is current. Click on "Save" at the bottom when finished.

Contact Us page form

By default, there is a Contact Us form page in the storefront catalog. This is in addition to the Footer details mentioned above.

This "Contact Us" form page requires two configuration steps:

  1.  Configuring the customer service section for the storefront Footer.


    image-20250626-182623.png


    (See our help document for the Customer Service Configuration page)


  2. Configure an UltraCart User that contains the contact us/ customer service email address configured above AND has the "Customer Feedback" email notification enabled.
     

User Permissions

If you configure this as a separate user specifically for receiving the contact us emails, the user does not need to have any permissions configured.


To configure a new user, see: Users.

Q: Can we configure multiple email addresses to receive the "contact us" form submissions?

A: Not within UltraCart. However, you can accomplish the same by configuring email forwarding or CC to additional addresses from your email server.



Copy Conversion Tracking

If you are using the Legacy Screen Branding you may have some Conversion and Tracking configured, It is important to move this content over to your new StoreFronts checkout so that you maintain these settings.

  2. Next we want to copy any information we have entered here for the different providers. Now that we have the information we need to take that over to our new StoreFronts checkout.




  3. From here you will have options to configure Google, Other, Custom and more.




  4. Once you have copied over all of the details simply click "Save".

New Buy links

  1. To find your Buy Links navigate to:

  2. Next to each Item that is created you will see a set of action icons, by clicking on the Links icon you will be taken to the Buy Links page for that product.




  3. Clicking on the icon for a given product will then take you to the Item Links or Buy Links page show below.






  4.  Because you can have multiple StoreFronts we do provide a drop down list just above the buy link that allows you to select which storefront the link should be assigned to, this allows you to have the same item pointed to different storefronts based on the link the customer user. 

    From here you would simply need to take the link and add it into your website, that code may look something like this: