Migrate your theme

Last updated 4 months ago

Was this helpful?

Migrate your theme

Moving from one theme to another might feel like starting from scratch, but it doesn't have to! We'll cover what you need to know about changing themes, and how you can approach setting up your theme to make it more efficient.

What do I need to transfer?

Content and settings that were set up in the theme editor cannot be transferred automatically. You will need to set up sections for each template and apply new theme settings.

Before you start

To get started, open the editor for both the old and new theme.

Set up Stiletto

To make setting up your theme easier, start by just adding sections and content before focusing on specific settings and styles.

We recommend following the order below to set up your theme:

Set up each section and copy over any text, images, and videos. Start with the home page, then set up other templates.

Apply global styles and options to your theme, including fonts and colors.

Return to your new sections and customize their settings and styles.

You may need to re-add apps and app blocks and manually transfer any custom code. It's good to keep this as the last step to properly test any customizations.

Add sections

We recommend hiding sections instead of deleting them. Not only will this be faster but you can avoid making mistakes that you can't undo.

Add text

With your two windows side-by-side, select and copy text from your previous theme and paste theme into the corresponding fields.

Can't find where to add content?

There might be a similar field with a different name. For example, there may be a "subheading" instead of "text".
Click (+) Add block to find additional content blocks. For example, some sections have "heading" and "text" blocks.

Add images and videos

Any images that you've uploaded to your old theme will still be in your Shopify files. Click (+) Add image, you can find them all in the media library.

Tip — Search file names You can copy the name of the image or video file from your old theme and paste it into the search bar. This will save you time from scrolling through your entire media library.

Edit theme styles

After adding your content, you can apply global styles, such as colors and fonts, then follow up by fine-tuning styles for individual sections.

Go to Theme settings in your theme editors. You can select a preset theme style, or set up your own custom branding, including colors and fonts.

Quick tips

Edit section styles

Set up apps

You may need to re-add apps and app blocks in the theme editor. Be sure to explore all theme features to see if what you want is already included in Eclipse.

Our support cannot cover app integration or fixing issues arising from apps. Please contact the app developer for help.

Configure custom code

When setting up your theme, make a duplicate copy as a backup to test any custom code changes.

If your previous theme has code customizations, they need to be manually transferred to the new theme. Custom code is often theme-specific and may not work by pasting code as-is.

Explore new features

Tip

Upgrading from Ira or Context?

We know you've put a lot of care and attention into customizing your theme, and we want to offer you some resources to make upgrading to Stiletto as smooth as possible.

Select your current theme below to find free layouts, preset styles, and similar sections to help match your branding.

Home page layout

If you want to replicate the layout of Ira's default home page, you can add this template code that uses similar Stiletto sections. If you've purchased Stiletto, follow the steps below.

STEPS

Note Adding this template code will overwrite any changes made to the home page.

In your Shopify Admin:

Click Actions > Duplicate on your current theme to create a backup version.
Click Actions > Edit code on the duplicated, unpublished theme.
In the Layouts folder, find and click on the index.json (home page) file.
Click to open the raw code above named ira-stiletto-index.json
Select all the template code (ctrl-a or cmd-a) and copy it (ctrl-c or cmd-c).
Select all of the current code in the index.json file and paste the new code to replace it.
You can use the keyboard shortcuts for Select all (ctrl-a or cmd-a) and Paste (ctrl-v or cmd-v).
Click Save.
That's it! You can now open your theme editor to edit the new home page layout.

Preset styles

If you've purchased Stiletto, you can add the following code to apply theme styles similar to Ira's Active preset.

STEPS

Note Adding this code will overwrite any changes made to your theme settings.

In your Shopify Admin:

Click Actions > Duplicate on your current theme to create a backup version.
Click Actions > Edit code on the duplicated, unpublished theme.
In the Config folder, find and click on the settings_data.json file.
Click to open the raw code above named ira-stiletto-settings-data.json. This file contains the theme's global settings.
Select all the template code (ctrl-a or cmd-a) and copy it (ctrl-c or cmd-c).
Select all of the current code in the index.json file and paste the new code to replace it.
You can use the keyboard shortcuts for Select all (ctrl-a or cmd-a) and Paste (ctrl-v or cmd-v).
Click Save.
That's it! You can now open your theme editor to start customizing.

Rounded buttons

Missing Ira's rounded buttons? Follow the steps to add some custom CSS to your theme settings.

STEPS

Note Before making code changes, always duplicate your theme to save a backup. In the theme editor (Customize):

Go to Theme settings.
Scroll down and click to open the Custom CSS tab.
Copy and paste the following code into the custom css field.

.btn,
.shopify-payment-button__button {
  border-radius: 26px !important;
}

Click Save.

Section comparison

Ira

Stiletto

Blog posts

Collection list

Featured collection