Logo
  1. Docs
  2. Online Store 2.0 Section

How To Customize Page Content Based On Devices

Published on Nov 20, 2023, updated 4 months ago

Use Case

If you’re here, it tells me that you’re a meticulous seller who deeply cares about consumption experience. (All meticulous sellers I know are thriving, in one way or another).

You want to create a seamless experience for your store visitors - whether they’re browsing with a laptop or a smartphone. You want to customize landing page content based on users’ devices. If so, you’re in the right place.

Here’s how you do it in Weaverse.

How To Edit Your Section For Mobile

Switch Between Mobile and Desktop View

When you're designing your site, the default settings and content will apply to all screen sizes, such as desktops, tablets, and mobiles. However, you would want to customize many of these elements for specific devices. For example, you may specify unique font sizes or different background images for mobile views.

To do so, simply switch between Desktop and Mobile View and adjust page content for each specific device view.

Adjust Device Visibility For A Specific Element

You can choose to show or hide a section, or an element, or a component of the element according to the device.

  1. Select what you want to adjust visibility preferences.

  2. Go to Styles → Visibility → Choosing from Visibility on all devices or Visibility on mobile.

Edit visibility preferences

When hiding an element and switching to the view it’s hidden on, you will see a “closed eye” icon when opening Layout, indicating that this element is hidden on the live site, but still enables you to edit it when needed.

For example, I want to hide the photo on Mobile - so when I switch to the mobile view, the photo is absent and there’s a “closed eye” icon.

hide element

To show it on mobile view, simply click the “closed eye” icon and it will change to the usual “eye" icon - indicating the element is now visible on mobile.

Was this article helpful?