Ecommerce website redesign: what to keep and what to change

Change the layout and the look. Keep your product addresses, your product text and your checkout as they are until the new design has settled. A redesign loses sales when it takes away something a shopper or a search engine was using: a product page that ranked for its own name, a size guide that answered the last question before the buy button, a checkout that worked on a phone.

Start with the numbers. Export what each page earns, keep the addresses that earn it, and send any address that has to move to its closest new page. Then launch one change at a time and compare each group of pages with your starting figures.

Everything below assumes you stay on your current store platform. A platform change is a bigger job, because products, customers and orders have to move too.

Once the new design is live, you cannot measure the old one. Without a baseline you cannot tell whether a drop in orders in week two came from the redesign, a slow season or an ad campaign that ended.

Before you open a design tool, write a decision beside every part of the store. Keep the addresses, product details and navigation that shoppers and search engines already use. Change how the store looks.

Keep an address unless the redesign forces it to move. A new layout does not need a new URL. Shopify's guide says to make layout and content changes before you alter the URL structure, so you can judge each change by itself.

When an address has to move, write a redirect map. Put the old address in one column and the closest new page beside it. Then set a server-side permanent redirect, a 301 or a 308, for every row. Google treats a 301 as a strong signal to process the new address, treats a 308 the same way and treats a 302 as a weak signal. Google calls client-side redirects, such as a JavaScript snippet, a last resort.

Put your bestselling product page from the new template next to the old one and compare them line by line.

The words come across whole: title, description, specifications, size guide and review text. Shopify's guide warns against swapping specific content for broad marketing language. If the new design has less room, put the text in an expandable section on the page instead of cutting it.

Product structured data has to survive the move. If the old pages carried it, the new template must output it. Google separates product snippets, for pages where shoppers cannot buy directly, from merchant listings, for pages where they can, and a store that sells from the page wants merchant listings. Run one product page through the Rich Results Test, which Google describes as a tool for validating structured data.

Variants keep the address pattern your store already uses. Google's ecommerce guide gives each variant its own address, in the path (/t-shirt/green) or as a parameter (/t-shirt?color=green), and lets variant pages point their canonical tag at the main product. A new theme that changes the pattern creates addresses to redirect and duplicates to clean up.

Every product needs a plain link from its collection page. Google's ecommerce guide says to use plain <a href> links, and Shopify's guide warns against reaching products through filters that need JavaScript to load.

Do not change the checkout in the same release as the visual redesign. A shopper who reaches checkout has already chosen a product, so a fault there loses a sale that was decided. If you change both at once and orders drop, you will not know which change did it. Payments, tax, shipping rules and stock counts stay in your store platform, and a page design replaces none of them.

Place a test order on a phone before launch. Pick a variant, add it to the cart, apply a discount code, pay in your payment provider's test mode and read the confirmation email. Then pick a variant that is out of stock and read what the shopper is told. Do the same on the old store beforehand, so you know what normal looks like.

A redesign brings new hero images, video and apps, and each one adds load time on a phone. Google's Core Web Vitals set the targets. Largest Contentful Paint, the time the main content takes to appear, should come within 2.5 seconds. Interaction to Next Paint, how quickly the page answers a tap, should be 200 milliseconds or less. Cumulative Layout Shift, how much the page jumps while it loads, should be 0.1 or less. Google measures all three at the 75th percentile of page loads, split by phone and desktop.

Time one page from each template on a phone before you design and again on the staging copy. Redirect chains slow a page down too, so send each old address straight to its final page.

Publish the new theme on the same addresses in one release. Change the address structure in a later release, weeks later if you can. Shopify's guide warns that changing layout, content and URLs all at once raises the risk of ranking swings, and Google's site-move guide asks you to test the new site before it goes live.

Build the new version on a staging copy, crawl it and compare its addresses, titles and canonical tags with your baseline crawl. Launch in a quiet trading week, not the week before a sale, and keep the old theme and a backup of your store data so you can roll back.

Rankings move after a launch, and a small move is normal. Google says rankings fluctuate during a site move and settle over time, and that a medium-sized site takes a few weeks or more to show its new addresses. Shopify's guide calls a traffic change of roughly 0% to 20% in the month after launch common, and says that a 60% drop by day six means something is wrong and you should not wait. It puts the full assessment window at up to six months.

Judge each group of pages against its own baseline. A healthy site total can hide a collection that lost its rankings. Crawl your list of old addresses against the live store and fix the unexpected 404s and every redirect chain. A product you deleted on purpose should still return 404 or 410. Shopify's guide says redirect issues on more than 1% of your URLs point to a wider mapping problem. If one group of pages loses orders while the rest hold, start with that group's redirects and product text.

Thornwick & Hale is a made-up store that sells leather bags and wallets, so every address and figure below is made up too. It has 140 products in 12 collections, a care blog and a theme that is five years old. The owner wants a new homepage, new collection pages and a faster store on phones.

Before she changes anything, she exports her Search Console and analytics data, crawls the store and times a page from each template on a phone. The crawl finds 214 indexable addresses. Thirty landing pages bring 82% of her organic revenue: 22 products, 6 collections and 2 blog posts. Phone conversion is 1.4% and desktop conversion is 3.0%. On a phone the largest content takes 4.1 seconds to appear on the homepage, 3.6 on a collection page, 3.3 on a product page and 3.0 on the cart. All four miss the 2.5 second target.

She keeps every address she can. The new theme moves a few, and the map records what happens to each.

Before launch she placed a test order on her phone, with a discount code and an out-of-stock colour, and she launched in a quiet week. Two weeks later she compares each group of pages with its baseline.

The whole-store figure is down 8%, inside the range Shopify calls common after a launch. The wallets collection sits far outside that range: it lost 55% of its sessions while everything else held.

A crawl of the old addresses shows why. The old wallets address redirects to a temporary holding page, and that page redirects to the new collection. That is two hops, and the hop out of the old address is a 302. She replaces the pair with one 301 from the old address straight to /collections/wallets, then resubmits the sitemap.

She finds the fault in week two because she recorded sessions by group. The site total alone looked normal.

Work down the list in order. Items one to five come before you open a design tool.

iter0 redesigns a page from the address of your existing site. In the builder, open the + menu and choose Extract + Design. Paste a site whose design you have the right to use into Copy the design from, and your own store's address into Use the content from. The two must be different sites. iter0 reads the text, images, logo, links and buttons on your page, shows the price of 1 credit and asks you to confirm before it builds.

The result is one editable page. Check it against your live page: product names, prices, links and buy buttons. Fix text by hand for free, or ask for an AI edit at half a credit. Free includes 3 credits a month, Hobby ($5) 15 and Pro ($25) 100.

Use it for the pages around the store: a new homepage design, a campaign page, a brand story page or a collection landing page that links to products you already sell. iter0 designs the page. Your store platform keeps the product pages, cart, checkout, payments, tax, shipping and stock. iter0 can publish one site at its own <name>.iter0.app address. You can also export the HTML and CSS files and host them anywhere.

Before you redesign anything, paste your store's address into the free website second opinion. It needs no account. It tells you what is working and gives you three changes to start with.

To restyle the whole store at once, change the theme in your store platform. A theme covers product pages and the cart together.