How to Move a Shopify Feature Between Themes Without Bringing the Old Theme With It

Move the feature, not the theme

The goal is not file parity. The goal is behavioral parity.

If the old theme has a product recommendation slider, variant switcher, refill finder, custom gallery, or promotional component that the new theme needs, first write down what the feature actually does. Then identify the minimum code and data required to reproduce that behavior in the target theme.

Build a dependency inventory first

Shopify themes have defined architecture areas such as assets, blocks, config, layout, locales, sections, snippets, and templates. A feature can touch several of them at once.

Check for:

• Sections: the main renderable feature.
• Snippets: partial markup rendered by the section or product card.
• Assets: JavaScript, CSS, icons, and images.
• Templates: JSON that instantiates the section or supplies settings.
• Blocks: theme blocks or app blocks the feature expects.
• Locales: translation strings referenced by Liquid.
• Config: theme settings the feature reads.
• Custom data: metafields or metaobjects required for content or behavior.

Find the invisible JavaScript dependency

This is one of the most common migration failures. The markup copies successfully and looks almost right, but the slider no longer slides, variant changes stop updating media, arrows disappear, or a drawer only refreshes after page reload.

That usually means the old feature depended on a JavaScript class, custom element, event, or initialization path that was not copied—or that the new theme already has a different implementation of the same behavior.

Do not immediately copy the old global script. Find the smallest dependency and decide whether the target theme already provides an equivalent.

Preserve the newer theme’s architecture

When the destination theme is newer, assume its native implementation is there for a reason until proven otherwise. It may have newer accessibility behavior, updated event handling, different section rendering, or better support for the current Shopify theme editor.

The safest migration often looks like this: keep the new theme’s component and data flow, then add the missing feature on top of it.

The riskiest migration is replacing an entire product section because one small feature existed in the old version.

Compare templates as configuration, not just code

A feature can be technically present but never appear because the target JSON template does not instantiate the section, references a different section type, or has different block settings.

Likewise, copying an old template wholesale can bring back old announcement bars, stale home sections, outdated product recommendations, or layout decisions the new theme was supposed to replace.

Merge intentionally. Do not use a template file as a shortcut around understanding the feature.

Watch for CSS that fixes one theme by breaking another

Old CSS overrides often encode assumptions about old markup. A selector that forced a recommendation carousel into one row in one theme can destroy a grid in another. Global overflow rules can break sticky positioning. Width rules can affect cards outside the migrated feature.

Scope migration CSS as tightly as possible and test every template that shares the selector.

Variant and media features deserve extra suspicion

Variant pickers, swatches, galleries, and media sliders are tightly coupled in many themes. A swatch may update the selected variant, which updates the URL, price, media, availability, and product form.

If you copy only the visible swatch markup, you can end up with a swatch that looks correct but selects the wrong variant—or product cards that begin auto-selecting a color because display logic was mixed with selection logic.

Keep rendering behavior separate from state changes.

A practical migration sequence

1. Duplicate the target theme.
2. Describe the feature in plain English.
3. Identify every file and data dependency in the source theme.
4. Check whether the target theme already has an equivalent component.
5. Port the smallest possible unit.
6. Wire it into the target theme’s existing events and markup patterns.
7. Add only the CSS the new feature requires.
8. Update the relevant JSON template or section settings.
9. Test product, collection, cart, and any template sharing the migrated code.
10. Compare behavior against the source feature, not file count.

Common regression clues

• A carousel suddenly becomes two rows.
• Arrows move to the wrong side or disappear.
• A product swatch renders but no longer updates the correct media.
• An old promo bar reappears.
• A snippet error appears only on one product template.
• The feature works on initial page load but not after a section refresh.
• A global CSS rule fixes the feature and breaks sticky behavior elsewhere.

Sources and further reading