Text Element is one of the fundamental building blocks you need - it’s the most used element within any page builder.

To get started, open Element Library → drag the Text element onto your page!

To edit or add more text in the text box, simply select “Edit Text”.

You’ll also see a pop-up text editor giving you a lot of options to style your text - you choose from bold, italic, underlined, and striking out. You can also adjust the font size, text alignment, or text colors.

To have more editing options, go to Inspector (on the top right of the page editor).

To add a background color or background image to your text box - go to the Background section.

To add shadows to your text or the text box, scroll down to the Shadows and Effects section. Here you can add shadow, the color of the shadow, and the direction of the shadow to either your text or the text box, or both.

The Button Element is one of the fundamental building blocks of any section. You can use it for a Call To Action - Learn More, Book A Call, or Direct visitors to your landing pages.

To use this element, simply drag and drop the button element onto the page.

There 02 types of customization you can do with Button Element:

To customize its behavior, simply select the button:

To customize its appearance and design, select the button and open the Inspector panel. (On the top right of the page editor).

The options you see in the Inspector are specific to this element.

To learn more about our General Styling options, check out Styling Parameters.

To use Image element, simply drag and drop Image Element onto the page.

In the Image Library, you have a wide variety of image-adding options:

With Weaverse, you can want to have a Canva-like photo editing experience right in your page builder without having to switch tools.

Simply double-click on the image you just upload to open Image Editor - you can crop it, flip it, enhance its quality, or grayscale it.

After uploading and adding your images, you have a wide variety of options to fit them into the look and feel of your store. To adjust Image Configuration, select it and open Inspector.

Under Settings, you can add more details to your image, including:

Under styles, you can adjust image appearance, including:

Countdown Timer is the flavor of the month in every sales season - from Back To School to Black Friday, Halloween, and Christmas. Merchants need it to create a sense of urgency for the products - get it now or lose the deal forever.

Alternatively, Countdown Timer can be used to give visitors an estimated time of arrival for a special occasion - a new collection drop, store opening, or new deal - of your business.

To use the Countdown Timer:

To configure the countdown timer, select the element and open Inspector → General.

There are 02 ways to run your Countdown Timer: Evergreen and Fixed Time.

What do they mean?

Besides these options, you can also redirect users to another page when the countdown ended. Simply add the link under “Redirect when the timer stops” and enable “Open Link In A New Tab” if needed.

To tweak the styling and design of your countdown timer, select the element and open Inspector → Styles.

Under Selector → Element, you’d need to select which component of the Timer you want to customize first.

With each component, you can adjust its:

Step 1: Click on the Plus icon to open Element Library

Step 2: Select, drag, and drop the element into the page editor to start using it.

To add the video you want, simply select the element → Select Video → Add Video URL. You can also enable/disable:

Yes. Select the video → Go to Inspector → Styles → Scroll down and you’ll see a few options to customize borders:

Yes. Select the video → Go to Inspector → Styles → Scroll down to the Visibility section. Disable “Visible on all devices” and keep “Visible on Mobile” enabled.

The contact form element is an essential component for any storefront. It allows you to collect shopper information and use it to convert potential visitors into buyers through targeted marketing campaigns.

You can also use it for a wide variety of purposes: collecting customer feedback, building a subscriber list - if you’re an aspiring creator like me :), or generating early interest in your product - if you’re running a pre-launch campaign.

Form submissions will go directly to your Sender Email - usually the email you used to open your Shopify account. You can change it in Settings > Store Details > Profiles.

Open the Weaverse element library, select the Contact Form element, and move it to your desired location on the editor.

Select the Contact Form element and you’ll see a small toolbar above the element. Select “Edit form” to open the settings panel.

In the settings panel, you can modify various options, such as the form title, fields, and button text. Update these fields as needed to suit your preferences.

You can also enrich your form with more questions by selecting “Add New Item” and then adjusting the Question types and Label text.

Select the Contact Form element and open the Styling tab at the right corner of your editor.

Here, you can adjust:

Learn more about our standard styling options here.

The Product Details element is a powerful tool that enables you to showcase your products in detail. With this feature, you can present your products in a way that captures your customers' attention and highlights their unique features.

By adding it to sections created with Weaverse, you can proudly showcase your products on essential landing pages like Homepage, Collection pages, Product pages, or even About Us page.

Like all elements in Weaverse, you can find the Product Details element in our element library.

Using Weaverse’s Powerpoint-like editor, you can also resize and make the Product Details element fit nicely with other elements on the page, to create an eye-pleasing look.

The Product Details element contains all essential product information and media assets you have. You can use our Layout to select which specific component of the Product Details element you want to edit.

With Weaverse’s Product Details element, you can adjust;

Check out this short demo:

Each component in the Product Details element can be styled using our default Styling options. Learn more about it here.

Scrolling Text is designed to be versatile. With scrolling Text, you can:

Here's how you can use it in Weaverse

You don't need to worry about the layout; our Smart Grid Editor will help you. Drag, move, resize, and crop it like Canva.

Suggest (At the right corner of the editor): Weaverse AI to help you automate text generation in case of writer's block :)

Note: You can also have different styles for your Scrolling Text when hovering by going to Inspector → set the state to Hover → and customize the styling (things like Text color, font size, etc. - you know the drill).

That's it. Super easy and barely an inconvenience :)

Shoppable Images, or Hotspots - as we named them in Weaverse, are clickable icons that will show the different products in your shoppable images upon clicks.

Weaverse is currently the only Shopify page builder with Hotspots available natively within the app - you either bought a premium Theme at $320+ (looking at you, Prestige Theme) or purchased a 3rd-party Shopify app to have Shoppable Gallery.

(That’s too much hassle for our users - and because you should spend more time on building a brand, instead of finding an app for Shoppable Images - here it arrives! )

Combine Hotspots with Weaverse’s Powerpoint-like editor and you have an eye-pleasing shoppable image gallery - like this.

Open our element library, then drag and drop the Hotspots element to your desired location on the editor.

Customize Hotspots content

Once you've added the element to your page, click on it to select it. You should see a toolbar appear at the top of the screen with a button labeled "Edit Hotspots". Click on this button to open the Hotspots editor.

Here you have a few customization options, including:

In the screenshot, you might see that the hotspot icon looks like a googly eye.

Like the googly eye in Everything Everywhere All At Once, it’s a reminder that life is inherently meaningless. It’s scary, yet liberating because it means that it’s up to us to create our own meaning. A reminder to believe in a universe that doesn’t care, and in people who do.

With the Google Map element, you can easily add a customized map to your storefront that displays your business location, store hours, and other important information.

Once you are in Weaverse, go to the element library on the left-hand side of the screen.

To add the Google Map Element, simply click on it and drag it to the desired location on the section editor.

Select the Google Map element, then select “Set Location”, then enter the address.

That’s it.

You can also resize it, crop it, move it around, bring it forward, or move it backward - just like how you use PowerPoint.

The Product List element is the fundamental building block of any storefront - designed to help you showcase your products and help your customers find what they are looking for.

Once you are in Weaverse, go to the element library on the left-hand side of the screen.

To add the Product List Element, simply click on it and drag it to the desired location on your storefront.

After adding the Product List Element to your storefront, you can customize it to display your products in the way you want.

To do this, click on the Product List Element to bring up its settings → click Edit Product List:

With Weaverse, you can also customize Product Card content.

A product card is a design block inside your Product List, typically consisting of an image of the product, its name, price, and some brief details or specifications.

To edit the Content Card's content, select Product List → Edit Product Card.

Here you have a few options:

View details button text: Enabled by default. This button is shown inside the Product Cards when hovering.

In addition to choosing product selection, you can also customize the styling options of the Product List Element.

To do this, click on the "Style" tab on the left of the screen; here, you can customize various styling aspects of the Product List block:

To learn more about these available styling options, check out this article.

What makes Weaverse different is our Powerpoint-like editor, where you can drag and move an element anywhere, crop it, and resize it with unprecedented ease. This works for all elements.

Let's say you want to build a layout with a Product List and an Advertising video.

With other page builders: You'd need to define how many columns and rows you need. Then choose a layout element with the right number of columns. Then drag and drop each element into a column. Then adjust the padding and the margin to make them fit together.

(If you're familiar with Shopify page builders, you know what I mean :). If not, try some, and you'll see.

With Weaverse: You drag and drop and move things around. That's it.

Collection List is designed to present your list of Shopify collections in sections created with Weaverse. Some of its use cases include:

To use Collection List, simply click the Plus icon to open Element Library → Scroll down to the Shopify section → Drag and drop the element into the page editor.

To add Collections to your Collection List, select the element → Click “Select Collection” → Then select all collections you want to show.

You also have the option to adjust The Number of Collections, Collections Per Slide, and The Spacing Between Collections.

Similar to other elements, you can use our universal styling options under the Styles Tab. You can learn more about Styling Parameters here.

Besides the general styling options like Background, Typography, Borders, Margin and Padding, you can also configure its visibility.