Welcome aboard! Here is how Weaverse will help you build stores that load fast and convert well.
We're thrilled to have you here and look forward to working with you.
This article delineates vital information to help you get started with Weaverse.
If you don't find what you're looking for, please feel free to drop us a message in the chatbox at the bottom right of your screen - we'll take care of you as soon as possible!
Install Weaverse
Install Weaverse like how you install every other Shopify app:
Get Weaverse from Shopify App Listing
Click "Add App"
You will then be directed to your Shopify Admin panel. Click "Install app" to finish.
After successfully installing Weaverse, you can open Weaverse from your Shopify admin → Apps → Weaverse
Sync Weaverse With Your Theme
To seamlessly flow customized sections between Weaverse and your theme editor, you'd need to sync them.
Synchronizing Weaverse with your theme is super easy; simply enable Weaverse App Embed in your theme editor. Here's how you do it:
Go to your Theme Editor, and select the App Embed icon on the left sidebar.
Turn on the toggle to enable Weaverse Extension.
Click Save to finish.
Add Your Storefront Password To Weaverse
If your store is still password-protected, you'd need to add your storefront password to Weaverse. This will allow you to preview how the Weaverse section will look when added to your theme.
Open Weaverse, go to Preferences (on the left sidebar)
In your Preferences Dashboard, add your Storefront password.
Hit Save to finish.
Tip: Your storefront password is automatically generated by Shopify. To get the password from your Shopify admin, go to Online Store → Preferences → scroll down to the Password protection section.
How to Create A New Section
The Section is the fundamental building block in Weaverse. You build, design, and customize a section, then use it on any page you want. As Weaverse is deeply integrated with OS 2.0, you can use sections built in Weaverse when using OS 2.0 Theme Editor, and vice versa.
To create a new section, open Weaverse and select "Create New Section" to open our editor.
You can create a new section tailored to your preferences using one of our pre-built templates in just a few clicks. No design skills are required! You can also import existing sections or build new sections from scratch.
Working With Page Editor
There are 02 key components in Weaverse's page editor: The Toolbar and The Editor.
The Editor
The white area you use to design and build your sections. You can easily adjust its size by scrolling down to the editor's end and changing the layout handle.
The Toolbar
Right above your editor. On the toolbar, from left to right, you have:
Add Element (Plus icon): Where you get access to all elements you need to design and build new sections.
Templates (Template icon): Where you get access to all of Weaverse's pre-designed templates - you can use them as they are or tweak them your way to fast-track your section-building process.
Presets (Open Book icon): Where you define Global Styling and Product Color Swatches. Define once, and use them everywhere.
Custom Code Editor (Code icon): You can add your custom code to bring more creative, unique designs to life.
All Device View/Mobile View (Computer and Phone icons): Switch to All Device mode to edit for all screens, then switch to Mobile View to review and refine your design for mobile.
Undo and Redo: Recover lost works at ease.
Inspector (Control Board icon): You can access every element's configuration options. To customize any element's appearance or behavior, select the element and open Inspector to tweak it.
Settings (Gear icon): Where you name your Section and select which Shopify Theme you want to add your Section.
Working With Smart Grid Layout
Goodbye to crooked layout, misaligned rows, and uneven columns - Weaverse brings back the true drag-and-drop experience. We remove the boundary of interlocking columns and rows - now you can drag anywhere, drop anywhere.
Weaverse's smart grid layout lets you quickly visualize and manage the structure of your sections or pages, making it easier to know where to place an element inside the editor. To use it, drag and drop an element on the page - the grid layout will automatically show up, guiding your movement.
With Smart Grid Layout, you can also overlay elements with ease.
With other page builder apps, you spend hours learning a specific layout system and trying to play by its rules. With Weaverse, you play by your rules - we make drag-n-drop the way it should be.
Use Weaverse Sections In The Shopify Theme Editor
Go to Online Store → Themes → Customize.
In your Shopify Theme Editor UI, go to Section Columns, select "Add Section," and find customized sections you've created with Weaverse. Sections built-in Weaverse can be used in any template.
When you're happy with how things look in the Shopify Theme Editor, click "Save," Your site will be updated to include your new sections!
Example: I want to create a uniquely customized template for my product page.
Imagine this - you choose a theme because you like its overall look and feel, but its product page design turns you off big time. It's not what you imagine.
You want to create a Product Template where you can add more tantalizing images, value props sections, social proof sections, and more. Then you want to apply this template to all product pages.
Here's what you can do:
Select Product → Create a new template.
Go back to Weaverse and create all sections you want for this template.
Go back to Shopify Theme Editor, Add your customized sections, Save them and Apply them to all product pages.
