How to zoom out/scale down entire website

Shopify Discussion

Topic summary

Main issue: A store owner using the Sense theme wants to “zoom out” the entire site globally to feel like an 80% browser zoom, applying to all pages.

Proposed approach: A responder suggests adding CSS at the theme level using zoom and transform: scale to reduce overall size to ~0.8. Example provided targets div with zoom: 0.8 (old IE), plus -moz/-webkit/standard transform: scale(0.8).

Caveats noted: Browser support is inconsistent—zoom is non‑standard (mainly old IE), and transform scaling may not behave well across all browsers or layouts. The responder advises developer involvement and testing due to potential issues.

Additional request: Another participant (using the FOCAL theme on reeflexstore.com) asks for help implementing the same 80% scaling site‑wide.

Contextual aids: The original post includes images comparing 100% vs. 80% views that are central to understanding the desired effect.

Status: No confirmed solution or code verified by the thread. The discussion remains open, with outstanding questions on reliable cross‑browser implementation and theme‑wide application.

Summarized with AI on December 14. AI used: gpt-5.
1

I would like to zoom out/scale down my entire website (every page, not just home page). I’m using the sense theme.

My website is too much in my face, I want to zoom it out. So example, I have to go to my browsers zoom and zoom out to 80%. How can I use CSS to zoom out the entire website without having to physically zoom out using the browser?

Here’s 100%:

amirasvanity_1-1691110902498.png
amirasvanity_1-1691110902498.png1910×896 232 KB

Here’s 80%:

amirasvanity_2-1691110978994.png
amirasvanity_2-1691110978994.png1917×897 214 KB

2

In your THEME CSS settings, not the individual sections but overall theme. You can try adding something using the zoom & transform properties. Might not work on all browsers though, but most. Probably will need a developers help on this one, testing it somewhat I am not sure it will work well.

div {
    zoom: 0.8; /* Old IE only */
    -moz-transform: scale(0.8);
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
}
3

Hi guys, @biznazz101 @amirasvanity ,

I’d like to implement this change to our website: https://reeflexstore.com/

We utilize the FOCAL theme. Is there any chance you can help with this?
We want to scale down to 80% of the current version.

Thanks,
Josh