Device-Specific Settings (Desktop / Tablet / Mobile)

You can vary a component's settings by device. For example a heading can be 48pt on a computer and 28pt on a phone — without creating two separate…

Where to find: Theme Editor → select a component → the device badge in the top right of Properties in the right panel Who it's for: Anyone who wants the same component to look different on a phone than on a computer In short: You can vary a component's settings by device. For example a heading can be 48pt on a computer and 28pt on a phone — without creating two separate components.

What is it for?

A design that looks good on a computer often does not look the same on a phone: the heading stays too big, the spacing is more than needed, a four-column area gets cramped.

Normally you would have to either hide the component completely on phones or pick one average value for everyone. Device-specific settings remove both of those bad options: the component stays as it is, and only certain settings take a different value on the phone (or tablet).

Do not confuse this with hiding and showing a component. The Visibility setting removes the component entirely on that device; the feature described here keeps the component in place and changes its settings. (For visibility see Properties Panel (Right Panel))

The core logic: desktop is the base

There is only one rule you need to understand:

Desktop is the base for every screen. Tablet and mobile use the desktop value unless you specifically give them a different one.

So:

Situation	What shows on the phone?
You did not set a separate value for mobile	The desktop value
You did set a separate value for mobile	The value you set for mobile

Mobile does not inherit from tablet. If you set a value for tablet but not for mobile, the phone uses the desktop value, not the tablet one. Every device looks directly at the desktop base.

That is why the right order is: finish desktop first, then fix what breaks on tablet and mobile one by one. Fiddling with all three devices at once creates needless work.

Where is the device badge?

Click a component on the canvas. The right panel switches to Properties mode. At the very top of the panel, to the right of the component name, you will see a small badge:

Desktop
Tablet
Mobile

This badge follows the device preview buttons in the top toolbar. So when you switch the canvas to mobile view, the badge becomes Mobile too. (For the device preview buttons see Canvas and Preview)

Clicking the badge opens a small window; the actual switch is in there.

Step by step: setting a phone-only value

Example: the promotional heading on the home page looks great on a computer but overflows on a phone. Let us shrink it on phones only.

Click the mobile device button in the top toolbar. The canvas narrows to phone width.
Click the heading component on the canvas. Its settings open in the right panel.
Click the Mobile badge in the top right of the panel.
In the window that opens, turn For this breakpoint only on.
Close the window and reduce the font size (for example 48 → 28).

Done. That heading is now 48pt on a computer and 28pt on a phone.

If you skip step 4, your change affects every device, desktop included. The window that opens when you click the badge already says this: "Choose where the changes will be saved."

The "For this breakpoint only" switch

This switch decides where the changes you make from that moment on are written.

Switch	Where does your change go?
Off	To the base value — that is, all devices.
On	Only to the currently selected device (tablet or mobile).

While you are in desktop view this switch is unavailable, and this note appears: "This option does not exist on desktop — desktop is already the base value." This is not an error; because desktop is the base everyone uses, there is no such thing as "desktop only".

The switch belongs to how you are working, not to the component: once you turn it on, every edit you make on that device is saved as device-specific until you turn it off.

How do I know a setting is device-specific?

The system shows this in two places.

1) Above the setting itself. A small label appears above every setting that has a device-specific value:

Mobile-specific

Clicking the undo icon next to it removes the device-specific value of that setting only, and the setting goes back to the desktop value.

2) On the device badge. The badge shows how many settings differ for that device as a number. For example Mobile ③ means 3 separate settings are defined for mobile on this component.

Undoing device-specific settings

You have two options:

What do you want to do?	How?
Undo a single setting	Click the undo icon next to the Mobile-specific label above the setting.
Clear every difference on that device	Click the device badge → press the Reset button in the window that opens.

The badge window also shows a summary: "3 fields differ for mobile" and below it "Remove this component's mobile-specific values."

Reset deletes all of that component's device-specific values for that device; you cannot pick individual ones. If you only want to undo one setting, use the first option above.

Undoing does not delete the setting — it goes back to using the desktop value.

Which settings can be varied by device?

You can set a device-specific value for almost every setting you see in the component's Properties panel: font size, colours, margins, alignment, images, texts and the rest.

In practice the most useful ones are: font size, spacing/padding, column gap and alignment. These four are usually what causes trouble on phones.

Exception — structure fields are shared across devices. The Grid's Column Count and Column Contents, the Tabs' Tab Contents and the Carousel's Slide Contents are the same on every device. Even if you edit them in tablet/mobile mode the value is written to the desktop base; the panel shows a note saying so. Use the grid's own Tablet Columns and Mobile Columns fields for tablet and mobile column counts. The reason: if which column a block sits in diverged between devices, some blocks could appear on one device and vanish on another. To hide a block on a specific device only, use Hide on mobile / Hide on tablet / Hide on desktop in that block's Visibility settings.

The same exception applies to the grid's Column Layout & Style field. That field is managed in one place; you give the desktop, tablet and mobile values from the matching rows inside the field. So you do not need to switch to device mode to change a column width on mobile — you fill in the Mobile row inside the field.

If you reduce the grid's column count (e.g. 3 → 2), blocks left in the removed columns are not deleted: they move to the end of the last remaining column and appear there on the storefront too. So you cannot hide a block by reducing the column count — use that block's own Visibility settings or its active/inactive toggle instead.

If you want a column to come first on phones, do not move the blocks: use the Order value in the grid's Column Layout & Style field. Column contents stay where they are, only the display order changes. (For details see Properties Panel (Right Panel) → Grid)

Frequently asked

My change does not show on the phone. You most likely edited while For this breakpoint only was off, so the value was written to the base — in that case it looks the same on every device. Turn the switch on and enter the value again.

I changed desktop and the phone changed too. That is the correct behaviour. If you have not defined a separate value for the phone, it follows desktop. If you want the phone to be independent, give it its own value.

I set a value for the phone, then changed desktop. Was the phone affected? No. Once you make a setting device-specific, that setting is independent of desktop. To restore the link, undo that setting.

I set it up for tablet — did the phone get fixed too? No. Mobile does not inherit from tablet; it looks directly at desktop. You have to set it up for the phone separately.

What do I have to do to see these settings in my store? Like every other change in the theme editor, you have to press Publish. Seeing it on the canvas is not enough.

I do not want to show the component on phones at all. Then use the Hide on Mobile option in the Visibility setting instead of a device-specific setting (see Properties Panel (Right Panel)).

How many devices are there? Three: Desktop (base), Tablet and Mobile. You cannot define intermediate values.

Properties Panel (Right Panel) — All setting types in the Properties panel and the Visibility control.
Canvas and Preview — Device preview buttons and the canvas.
Top Toolbar — The top toolbar and Publish.
Theme Editor — Overview — Theme Editor overview.

Device-Specific Settings (Desktop / Tablet / Mobile)

On this page