Duplicate store has spacing differenes

Hello,

Every time I create a duplicate of my store, there is a small change in the spacing of an image. This is the live store with the correct spacing, notice the space between the image and the edge of the screen is equal on both sides(the screenshot goes from edge to edge).

This is the spacing whenever I duplicate the store. The distance on the left is equal but the distance on the right is greater, the image gets slightly smaller I think. This is what it looks like immediately after duplication. I want to use a duplicate to make changes via claude without it effecting the live site, but this issue happens whenever I make a duplicate, and claude doesn’t seem to be able to fix it either. Any assistance would be appreciated.

It’s a bit hard to say just from the screenshots…

Is there anything else different about the screen, for example is there a bar saying that it’s a preview? That could be also changing the display size and changing the dimensions.

I notice that in the top pic with the phone, all 4 of the round corners are fully visible, but in the bottom one only the top two are present. Could be because the shot was cropped differently.

If you can provide the link to your store and maybe the preview page, some of the clever people here could help you for sure.

Nathan

I agree with the suggestion above. I’d also check whether an app embed or custom Liquid snippet is injecting the banner in addition to the section added through the Theme Editor.

A quick test is to temporarily disable the related app block/embed and refresh the page. If one banner disappears, you’ve found the source of the duplicate.

Hello, thank you for the response. The live store link is zeroblue.com.au password ‘zero123’, duplicate store preview link is https://scsyjg1d2iqi0qf6-96221692218.shopifypreview.com . The duplicate was created a few minutes ago with no changes made. Yeah the screenshots were cropped differently, hopefully the live links can show more.

Hi @zidane11

This is most likely caused by a theme setting, CSS difference, or a breakpoint/container calculation between the live theme and the duplicated theme. A Shopify duplicate should normally preserve the theme code and settings, so if the spacing changes immediately after duplication, I’d compare the live and duplicate theme rather than trying to fix it with random CSS.

I’d check the section/container width, padding, max-width, grid/flex settings, and any responsive CSS affecting that image. I’d also compare the relevant theme settings between the live and duplicate versions.

If you can share the store URL and the duplicate theme preview URL, I can compare both versions and identify what is causing the right-side spacing difference.

Best regards,
Devcoder :laptop:

Hello, I think I’ve done something similar in regards to checking to checking the dimensions, in each case the dimensions showed to be the same in inspector. The live version is zeroblue.com.au password zero123 and duplicate is https://scsyjg1d2iqi0qf6-96221692218.shopifypreview.com

Hello, not too sure how to do this, also do you mean for a duplicated image or the spacing issue in the duplicated store?

Hi @zidane11

I found the issue. The problem is with the section/block-specific ID used in the CSS.

When the section is duplicated in Shopify, the section ID changes, so this CSS selector:

#shopify-section-template--27436773998906__custom_content_fm4LAK .m-custom-content__block:last-child {
    padding-right: 0;
}

no longer matches the duplicated section. Because of that, the default padding-right is applied again, which creates the extra spacing on the right side.

In the duplicate theme, I can see the image block currently has:

style="padding-right: 0;"

but the existing CSS is tied to a specific Shopify section ID. We should change the CSS to target the section/class instead of the dynamic Shopify ID. That way, it will continue working even when the section is duplicated.

In your Shopify Admin go to online store > themes > actions > edit code
Find Asset > main.css and paste this at the bottow of the file:

For example:

@media (min-width: 768px) {
  .m-custom-content__block:last-child {
    padding-right: 0;
  }
}

Best regards,
Devcoder :laptop:

Hey, this is a really common gotcha with store duplication and it’s almost never actually a “bug” — it’s usually one of these three things, in order of likelihood:

1. The image file itself is slightly different between stores

When a store gets duplicated, images sometimes get re-uploaded/re-processed through Shopify’s CDN rather than copied byte-for-byte, and if the duplication tool re-compresses or re-exports the image, its native pixel dimensions (and therefore aspect ratio) can shift by a tiny amount. If your section is using object-fit: cover or contain with a fixed-height container, even a 1-2% aspect ratio difference will change how much empty space shows up on the sides. Worth checking: right-click the image on both stores and compare the actual file dimensions (or check Settings > Files in admin) — if they’re not pixel-identical, that’s your answer.

2. A section setting didn’t carry over exactly

A lot of “duplicate store” methods (whether it’s Shopify’s own duplicate feature, a duplication app, or a manual theme export/import) copy theme code faithfully but don’t always copy section settings with 100% fidelity — especially anything stored as a slider value (like “image width” or “column ratio”) rather than a fixed preset. If your section has a setting like “Desktop image width %” or similar, check that value on both stores side by side in the theme editor. It’s an easy thing to miss because visually the section looks “close enough” until you check pixel-for-pixel.

3. Responsive image srcset serving a different breakpoint

Shopify auto-generates multiple image sizes via image_url/srcset, and the browser picks whichever fits the container best. If the container width calculation differs even slightly between the two stores (because of #1 or #2 above), the browser may pull a different srcset breakpoint, which can also shift the rendered box size — this compounds the visual difference rather than causing it on its own.

How I’d debug it

Open both stores side by side in browser DevTools, inspect the image element on each, and compare the actual computed width/margin/padding values (not just what the theme editor shows). That’ll tell you immediately whether it’s a CSS/layout issue or an image-file issue. If the computed CSS values are identical but it still looks different, it’s the image file. If the CSS values differ, it’s the section setting.

Since you mentioned Claude wasn’t able to fix it either — that tracks, because without being able to actually inspect the live DOM/computed styles side-by-side (or compare the two image files’ raw dimensions), it’s guessing at a layout fix for something that’s likely a data difference, not a code difference. Pulling the computed styles from both sites and comparing them directly is what’ll actually surface the cause here.

Hi @zidane11

Think difference is that you have

@media (min-width: 768px) {
    .m-custom-content__block:last-child {
            padding-right: 0;
        }
}

In your section Custom CSS, on the original store, but that should have been copied over with a theme.

So try to check new store Custom CSS setting for that block.

This worked! Thank you

Hi @zidane11

Thank you for your response. It’s good to know that it’s worked for you. Kindly feel free to get back to me if you need any further assistance. If helpful, please like all posts. :white_check_mark:

Best regards,
Devcoder :laptop: