Fixing Broken Layout When Switching Between Free Shopify Themes

Fixing Broken Layout When Switching Between Free Shopify Themes

Switching from one free Shopify theme to another (Dawn, Refresh, Taste, Craft, Origin, etc.) can sometimes break your layout. This happens because each theme uses different:

  • CSS class names
  • Section structures
  • Grid systems
  • Spacing & typography rules
  • App embed positions

This tutorial helps you diagnose and fix layout issues step-by-step — even if you're not a developer.

🔍 Why Layouts Break After Theme Switching

Common causes include:

  • Copying old custom code into the new theme
  • Missing CSS classes used in the older theme
  • Incompatible sections with different markup
  • App scripts placed in wrong locations
  • Global styles (like padding, margin, fonts) not matching

Let’s fix them step-by-step.

🧩 Step 1 — Check for Missing CSS Classes

If your page looks “broken,” it’s often because custom CSS is targeting classes that no longer exist.

Example: Dawn uses .grid--2-col, but Refresh uses .grid--2-col-tablet

How to check:

  1. Open Online Store → Themes → Edit Code
  2. Search your CSS file for custom css or theme.css
  3. Compare class names with the new theme’s code

If a class doesn’t exist in the new theme, update it.

🧩 Step 2 — Remove Old Custom Code That No Longer Works

If you copied code from your previous theme into the new one, remove or update it.

Example of outdated code to remove:


.grid-product {
  padding: 20px;
  border: 1px solid #eee;
}

The new theme may use:


.card,
.card__media {
  /* new class names */
}

Match your styling to the new theme’s classes.

🧩 Step 3 — Reinstall App Embeds & Snippets

After switching themes, apps (wishlist, reviews, popups, etc.) stop injecting code automatically.

Fix:

  1. Go to Online Store → Themes → Customize
  2. Click App embeds (left side menu)
  3. Turn ON all your existing apps

Many layout bugs disappear after this.

🧩 Step 4 — Rebuild Custom Sections Using the New Theme Structure

Each Shopify theme has different section HTML markup. A custom section from Dawn may not work in Refresh.

Solution:

  1. Open the custom section file
  2. Compare its structure with the new theme’s built-in sections
  3. Update wrappers, classes, and grid containers

Example: Change old Dawn wrapper

To new Refresh wrapper

This instantly fixes spacing and alignment.

🧩 Step 5 — Reset Sections in the Theme Editor

If the layout still looks strange, do this simple fix:

  1. Go to Customize
  2. Remove the broken section
  3. Add a fresh copy of the same section

This resets all corrupt settings.

🧩 Step 6 — Reapply Global Theme Settings

New themes have different defaults for:

  • Typography
  • Spacing (section padding, blocks)
  • Color system
  • Button styles
  • Border radius

Make sure to reconfigure them:

  1. Go to Theme Settings
  2. Open Colors, Typography, Layout
  3. Reapply your preferred styles

This corrects most inconsistent layouts.

🎯 Final Checklist

Before publishing your theme, confirm these:

  • [ ] All custom CSS updated to new theme classes
  • [ ] Apps reactivated
  • [ ] Broken sections rebuilt using new markup
  • [ ] Theme settings reconfigured
  • [ ] No duplicated custom code from previous themes

🎉 You're Done!

Your Shopify layout should now be fully fixed after switching themes.

If you want, I can also write tutorials for:

  • How to migrate custom code safely between themes
  • How to compare theme structures side-by-side
  • How to build theme-agnostic sections that work everywhere

Just tell me!

Back to blog

Leave a comment