Devices and breakpoints

Learn how to customise breakpoints in Shopstory

Shopstory uses 6 resolution ranges:

• xs - phones in a vertical mode

• sm - horizontal phones, small vertical tablets

• md - vertical tablets, sometimes horizontal phones

• lg - small desktops, tablets in horizontal mode

• xl - desktops (mostly laptop)

• 2xl - large desktops

Each of them is represented by 4 properties:

• startsFrom - minimum resolution

• w - width of device representing the range in Shopstory Editor

• h - height of device representing the range in Shopstory Editor

• hidden - info whether we should show this resolution in Shopstory Editor

Defaults:

Range	Starts from	Width	Height	Hidden?
xs	0	375	667
sm	568	667	375	yes
md	768	768	1024
lg	992	1024	768	yes
xl	1280	1366	768
2xl	1600	1920	920

We hide sm and lg because too many breakpoints cause cognitive overload for editors. Usually mobile, vertical tablet and small desktop are enough to cover all resolutions in a correct way.

If you want to override specific breakpoints values, just use devices property in shopstory/config.ts

const shopstoryConfig : Config = {
    devices: {
        xs: {
            w: 428, // Let's modify xs width and height to iPhone 13 Pro Max
            h: 926
        },
        lg: {
            hidden: false // Let's not hide horizontal tablets
        },
        xl: {
            startsFrom: 1200 // Let's move breakpoint of xl range to 1200
        }
    },
    // ...
}