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.
Select what you want to adjust visibility preferences.
Go to Styles → Visibility → Choosing from Visibility on all devices or Visibility on mobile.
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.
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.
