Fluorescent
Eclipse
Eclipse
  • Get started
    • Migrating to Eclipse
    • Theme license
  • FAQs
  • Changelog
    • Update your theme
  • General
    • Editing themes
      • Dynamic content with metafields
      • Edit default theme content
      • Multiple languages
      • Unique content for markets
      • Customizing your site
      • H1 heading tags
    • Image guide
      • Web ready photography
      • Image sizes
      • File formats
      • Theme image settings
    • SEO for Shopify
    • Online store speed
    • Accessibility
  • Theme settings
    • Theme settings
      • Social media
    • Theme styles
    • Fonts
    • Colors
  • Corner rounding
  • Pages
    • Page templates
      • Using templates
      • Customize page styles
      • Create and assign templates
    • Demo layouts
    • About page
    • Home page
    • Blog page
    • Blog post
    • Contact page
    • Password page
    • Search page
  • Sections
    • Sections
      • Using sections
      • Content blocks
    • Blog posts
    • Collapsible content
    • Collection list
    • Contact form
    • Featured collection
    • Featured links
    • Feature product
    • Grid
    • Icon with text columns
    • Image hero
    • Image with text
    • Multi-column
    • Newsletter
    • Rich text
    • Scrolling content
    • Shop the look
    • Shoppable feed
    • Slideshow
    • Video
    • Video hero
    • Video with text
    • Custom Liquid
  • Header
    • Announcement bar
    • Header
      • Layout and style
      • Logo
      • Transparent header
      • Mega menu
      • Language and Currency
    • Impact logo
    • Search
  • Footer
    • Footer
      • Image Text and Socials
      • Links block
      • Newsletter and Socials
      • Language and Currency
      • Custom Liquid
  • Products
    • Product listings
      • Product card styles
      • Sale and sold out badges
      • Quick shopping
    • Prices and currencies
    • Swatches
      • Use default colors
      • Use custom colors
      • Use custom images
  • Product pages
    • Product page
      • Gift card product
    • Media gallery
      • Media grouping
    • Product overview blocks
      • Description
      • Price
      • Buy buttons
      • Collapsible row
      • Complementary products
      • Custom option
      • Featured icon with text
      • Icon with text
      • Inventory status
      • Image block
      • Popup block
      • Product rating
      • Text block
      • Share icons
      • Custom Liquid
    • Variant selector
      • Info popup
    • Sticky add-to-cart
    • Sibling products
    • Product recommendations
  • Collections
    • Collection page
      • Banner
      • Product grid
      • Promotion tiles
      • Filters and sorting
    • Collection list page
  • Cart
    • Cart
    • Free shipping bar
    • Cross sells
  • Popups
    • Popups
  • Support
    • Support policy
    • Shopify vs Theme issues
    • Store access requests
  • Advanced
    • Custom CSS
    • Custom fonts
Powered by GitBook
On this page
  • What do I need to transfer?
  • Before you start
  • Set up Eclipse
  • Add sections
  • Add text
  • Add images and videos
  • Edit theme styles
  • Edit section styles
  • Set up apps
  • Configure custom code
  • Explore new features

Was this helpful?

  1. Get started

Migrating to Eclipse

Last updated 5 months ago

Was this helpful?

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 Eclipse


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:

1

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

2

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

3

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

4

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


Add and rearrange the section you want to use. You can check out the full list of .

You will also find additional settings for products, the cart, and more. You can find a full overview in the .

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 .

Our support cannot cover custom code or issues arising from customizations. If you need help from a developer, we recommend reaching out to a .

If you're familiar with adding code, you can use . 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 Eclipse. You may want to start with , , , and .

Check out Eclipse's store demos for inspiration: and .

Eclipse's theme sections
Theme sections guide
verified Fluorescent partner
Custom CSS in the theme editor
Sections
Theme settings
Product pages
Collection pages
Journey
Coastal
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

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

Add sections
Edit theme styles
Edit section styles
Set up apps and custom code

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 add .

Custom fonts guide
custom colors

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. .

Learn more ↗