Migrate your theme
Last updated
Last updated
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.
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.
What you need to set up
Theme settings
Templates
Sections
Custom code
Apps
Dynamic sources
What you DON'T need to transfer
Products
Collections
Pages
Blog posts
Files
Metafields
To get started, open the editor for both the old and new theme.
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 and rearrange the section you want to use. You can check out the full list of Stiletto's theme 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.
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.
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.
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.
You will also find additional settings for products, the cart, and more. You can find a full overview in the theme settings guide.
Colors
To speed things along, click on the color swatches and copy the hexcode to paste into the new theme's settings.
Fonts
Swatches
After customizing the theme settings, go back to your updated page templates to customize your sections. You can find a full list and set up instructions in the Theme sections guide.
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.
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.
Our support cannot cover custom code or issues arising from customizations. If you need help from a developer, we recommend reaching out to a verified Fluorescent partner.
If you're familiar with adding code, you can use Custom CSS in the theme editor. It's more stable and you don't need to manually transfer it for theme updates.
Check out the sidebar or use the search to find features that are unique to Stiletto. You may want to start with Sections, Theme settings, Product pages, and Collection pages.
You can also check out Stiletto's store demos for inspiration: Chic | Vogue | Organic | Craft
Tip
If you like the layout of one of Stiletto's demos, you can use free template code by following our demo layouts guide.
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.
Preset styles
If you've purchased Stiletto, you can add the following code to apply theme styles similar to Ira's Active preset.
Rounded buttons
Missing Ira's rounded buttons? Follow the steps to add some custom CSS to your theme settings.
Section comparison
Find similar sections between Ira and Stiletto. Stiletto has tons of unique features as well, so be sure to search our help center and view all available theme sections.
Blog posts
Collection list
Featured collection
Featured product
Featured products
Gallery
Image with text
Mosaic grid
Newsletter
Rich text
Slideshow
Testimonials
Text columns with images
Video
All themes support Shopify's native font library. If you have custom fonts, see our .
Aadd the option names you were using for swatches and chips. Any custom swatch images will still be in your Shopify files. You can also .
Open both theme editors
Open your old and new theme in two separate windows side-by-side.
Use preview inspector
Enable the inspector to easily select, edit, and add sections. You can also move, duplicate, and hide sections. .
