Key takeaways
- Sections are reordered by dragging them in the left sidebar of the Theme Editor.
- This works on any page type - homepage, product pages, collection pages, and custom pages.
- The header and footer are fixed sections - they can’t be moved.
- Changes are live only after you click Save.
- Fudge can restructure page layouts from a plain English description for changes beyond drag-and-drop.
Reordering sections is one of the most satisfying things you can do in the Shopify Theme Editor. It’s a simple drag-and-drop - no code required. Here’s exactly how to do it.
Why you can trust us
We’ve built and customised hundreds of Shopify storefronts. We also built Fudge - an AI storefront editor with a 5.0 rating on the Shopify App Store.
How to reorder sections in the Theme Editor
Step 1. Go to Online Store > Themes > Customize.
Step 2. Navigate to the page you want to edit. Use the page selector at the top of the editor to switch between pages (Home page, Product pages, Collection pages, etc.).
Step 3. Look at the left sidebar. You’ll see a list of all the sections on the current page in their current order.
Step 4. Hover over the section you want to move. A drag handle (six dots arranged in a grid) appears on the left side of the section name.
Step 5. Click and hold the drag handle, then drag the section up or down to its new position.
Step 6. Release to drop it in place. The preview on the right updates immediately.
Step 7. Click Save to publish the new order.
Sections you can’t move
Not every section is draggable. Two sections are always fixed:
Header - Always at the top. It’s a global section - moving it isn’t possible or meaningful.
Footer - Always at the bottom. Same reason.
Some themes also lock specific sections (like a cookie banner or announcement bar) to a fixed position. If you don’t see a drag handle on a section, it’s locked.
Reordering sections on different page types
The process is the same for all page types, but you need to navigate to the right page first.
Homepage - Selected by default when you open the Theme Editor.
Product pages - Click the page type dropdown at the top of the editor and choose “Products.” Then click any product to preview. The section order you set applies to all product pages (or per product page template if your theme supports multiple templates).
Collection pages - Same process - use the page type dropdown and select “Collections.”
Custom pages - Choose “Pages” from the dropdown. If you have multiple page templates, select the right one.
What to do when drag-and-drop isn’t enough
Sometimes the layout change you need isn’t just a reorder - you want to move content from inside one section to a different section, or create a section type that doesn’t exist in your theme.
That’s outside what the Theme Editor’s drag-and-drop handles. Those changes require code.
Fudge is useful here. You can describe the layout you want in plain English, and Fudge generates the code changes as a draft:
“Move the product features section above the product description section.”
“Restructure the homepage so the testimonials section comes before the featured products section.”
Fudge handles the code - you review before it goes live.
Hiding a section instead of deleting it
If you want to remove a section from view without permanently deleting it, you can hide it instead of reordering or deleting it.
Click the section in the sidebar to open its settings. Look for an eye icon or a Visible/Hidden toggle at the top of the section settings panel. Toggle it off to hide the section.
The section stays in your sidebar (greyed out) and can be re-enabled at any time. This is safer than deletion for sections you might want to bring back.
Quick tips
- Preview before saving - the live preview shows the new order in real time before you commit.
- Mobile preview - click the mobile icon at the bottom of the editor to check how the reordered sections look on small screens.
- Undo - if you accidentally drag a section to the wrong place, press Ctrl+Z (Cmd+Z on Mac) to undo. Or just don’t save and refresh the page.
