Duplicating an Existing Theme
Overview
Duplicating an existing theme allows you to safely modify your storefront's design without impacting your live site. UltraCart supports StoreFront-to-StoreFront duplication, meaning you can develop and test a theme within a development sandbox environment, copy it over to your production StoreFront, preview the changes, and activate it when you are ready.
What You'll Need
Before you begin, ensure you have:
An active UltraCart account.
An existing theme associated with a StoreFront.
Steps to Duplicate a Full Theme
Navigate to Themes Log into your UltraCart portal, navigate to the StoreFronts menu, and select the Themes tab.
Select the Duplicate Option Locate the theme you want to copy, hover your mouse over the theme's thumbnail image, and click the Duplicate icon.
Theme duplication also supports StoreFront-to-StoreFront duplication of the theme.
This allows you to work on a theme in a development sandbox, then duplicate it to your production StoreFront, preview it, and then activate it.
Name Your New Theme Folder A dialog box will appear prompting you for a destination folder name. Enter a descriptive, alphanumeric name for your new theme folder (for example,
Elements_Dev) and click Duplicate.Wait for Completion A processing overlay will display while UltraCart copies the files. Avoid closing your browser tab or navigating away while duplication is in progress.
Once the process completes, your newly duplicated theme will appear in your theme list under the folder name you specified.
Moving Individual Elements (Selective Migration)
If you do not want to copy an entire theme but instead need to migrate specific components (such as a styled slider, banner, or product grid) from your live site into your new development theme, you can use the Hierarchy tool to selectively export them.
Step-by-Step Selective Migration:
Open the StoreFront Editor
Launch the visual editor for the theme containing the element you wish to copy.
Expand the Hierarchy View
Click on the Hierarchy tab on the right-hand side of the editor to view the structural tree of your page layout.
Access the Element Menu
Locate the specific section or element you want to migrate (e.g.,
MAIN-SLIDER). Click the three dots menu (...) next to the element name to expand its action panel.Choose Your Export Method:
Download as JSON: Click the DOWNLOAD option. This instantly generates a
.jsonconfiguration file for that specific element and saves it to your computer. You can then open your new development theme and upload this JSON file directly to insert the element.Add to Library: Click the ADD TO LIBRARY option. This saves the element directly to your global account library layout cloud. This allows you to easily pull the element into your new development version of the theme without managing local files.
Tip: If you are migrating custom layouts from a sandbox to a production environment, remember to thoroughly preview your changes to ensure all nested styling transfers seamlessly before going live.