Adapting a Paid Shopify Theme to a Reference Design — Without a Full Rebuild

LavaDesign already owned a paid Shopify theme, but it didn't look like the site he was aiming for — zorrata.com. The fonts were wrong, the colors were off, the sections were arranged differently, and the mobile layout felt loose. He didn't want to pay for a full custom build; he wanted smart, surgical adjustments. Customizing a purchased theme to hit a reference design is a real skill — do it wrong and the next theme update wipes your work. Here's how we did it update-safe.

Start with a diff, not a rebuild

Rebuilding from scratch would have thrown away everything the paid theme already did well. Instead we put the client's theme and the reference site side by side and produced a concrete change list: typography, color, section layout, and mobile spacing. That inventory is the whole job — it turns "make it look like that site" into a finite set of specific edits, and it keeps scope (and cost) contained.

Match the design tokens first

Most of the "it doesn't feel the same" gap is tokens — type and color. Modern Shopify themes expose these in settings_schema.json / theme settings, so the correct move is to change them there (merchant-editable, update-safe), and only drop to CSS for what the settings can't reach:

/* Reference-matched overrides scoped so a theme update can't silently revert them.
   Prefer theme settings for type/color; use CSS only for the gaps. */
:root {
  --font-heading: "<reference heading font>", sans-serif;
  --color-accent: #<reference accent>;
}
.product-card__title { letter-spacing: -0.01em; }   /* match reference weight/spacing */
@media (max-width: 749px) {
  .section { padding-block: 24px; }                  /* tighten mobile rhythm */
}

Matching the reference's font pairing and accent color alone closes most of the perceived gap — shoppers read "same vibe" from type and color long before they notice layout details.

Rework layout in Liquid, carefully

For the sections that were arranged wrong, we edited the theme's Liquid — banners and collection layouts — to match the reference's structure. The discipline here: change section markup and settings, not vendor core files you can't track, so the theme stays updatable. Where the reference had a layout the paid theme lacked, we extended the relevant section rather than bolting on a detached one-off.

Mobile is a first-class pass, not an afterthought

The client specifically wanted a tight, clean mobile version — where most shopping actually happens. We treated mobile as its own review: spacing, tap targets, image sizing, and section rhythm at small widths, tuned against the reference on a real device, not just a resized desktop window.

You rarely need to rebuild a paid theme — you need to diff it against the target, change the design tokens the right (update-safe) way, and reshape only the sections that are actually wrong. That's a fraction of the cost of a custom build and it survives updates.WS24 — how we scope theme adaptations

The outcome: LavaDesign's store reads like the reference he wanted — right type, right color, right layout, clean on mobile — built on the theme he'd already paid for, with changes structured so a future theme update won't undo them. Smart adjustments beat a rebuild when the bones are already good.