Logo
  1. Docs
  2. Online Store 2.0 Section

Weaverse Section Elements

Published on Nov 20, 2023, updated 4 months ago

Text

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!

How To Add and Edit Text

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.

Button

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.

Getting Started: Button

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

  • Step 01: Click the Plus icon to open Element Library.

  • Step 02: Select, Drag and Drop the button element anywhere you like on your page editor.

  • Step 03: Customize the button.

How To Customize Button Element

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

  • Customize its action and behavior.

  • Customize its design and appearance.

To customize its behavior, simply select the button:

  • Select the button, then select “Edit Button”

  • In the pop-up button editor, you can change the Button Text and change On Click Action.

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.

  • State: Every button has 02 states. Normal and Hover. Select the state of the button first, then customize the button appearance for that state.

  • Background: Change the background color of the button, or even add a background image to it.

  • Dimensions: Define the button height and width. You can either set a fixed width and height for it or define Min-Max Height and Min-Max Width to make the button responsive on different devices.

  • Spacing:

  • Padding: The space within the element. Increasing/decreasing padding will also increase/decrease button size.

  • Margin: The spacing surrounding an element. Margins are not a part of the element. Increasing margins will push other elements further away from your button, and vice versa.

  • Border:

  • Border Radius: If you want to make a rectangle button, keep the border-radius at 100. Suppose you want to round the edges of the button, slowly decrease the border radius until it looks right to you.

  • Border Style: Select the style you want - dotted border, dashed border, or solid border.

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

Image

Getting Started: Image

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

  • Step 01: Click the Plus icon to open Element Library.

  • Step 02: Select, Drag and Drop the Image Element anywhere you like on your page editor.

  • Step 03: Go for “Select Image” to add your image. You can replace the placeholder photo, or select photos you’ve already uploaded.

  • Step 04: Using Smart Grid Layout, you can also crop the image without distorting its ratio -simply by moving Image Border in and out.

upload image in Weaverse

Upload Your Own Image

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

  • Upload your photos from your Local Files.

  • Take a photo with your webcam.

  • Import photos from other platforms like Facebook, Google Drive, Dropbox, Instagram, Evernote, and Flickr.

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.

Upload and edit images in Weaverse


Image Configuration

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:

  • Alt Text: Short description of your image. Be specific since Alt Text is needed for SEO.

  • Media Position: Adjust the image position inside its container by selecting the position you want.

  • On Click Action: Enable “Open Link” to add a link to the image.

configure image element in Weaverse

Under styles, you can adjust image appearance, including:

  • Border: Add and customize image borders - add border color, change border-radius, and modify border styles.

  • State: Switch between Normal and Hover to customize the appearance of each state.

Countdown

Getting Started: Countdown

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:

  1. Click on the Plus icon to open Element Library.

  2. Drag and drop the Countdown element you want into the page editor and then start using it.

How To Edit Countdown Timer Content

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?

  • Evergreen: Start to countdown when visitors visit the page. Restart with every refresh. The total time to count down is defined in “End in (Minutes)” box. If you want to create an illusion of urgency - use Evergreen.

  • Fixed Time: Start to countdown from the designated Start Time, and end on the designated Start Time. If you want the Countdown Timer to start and end at a point in the future - use Fixed Time.

add and edit countdown timer in Weaverse

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.

How To Spice Up Your Countdown Timer

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.

  • Countdown: Overall Look and Feel of Countdown Timer.

  • Label Text: The styling of days/hours/minutes/second text under Countdown Number.

  • Time Number: The styling of the numbers.

With each component, you can adjust its:

  • Alignment: Go to the Alignment section and select the right alignment option.

  • Background: Applicable for the Countdown component. You can add a background color or background image to your Timer.

  • Spacing: Adjust the margins and paddings of each component.

  • Margin: Margin is the spacing surrounding an element. It’s not a part of the element/component.

  • Padding: Padding is the spacing within a component. Padding will push the content inside the component further in and create more space in the component.

  • Typography: Font size, font color, and text alignment for the timer content.

Video

Getting Started: Video

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.

Adding Video

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

  • Control: Enabling control allows visitors to stop or rewind the video.

  • Autoplay: Enable autoplay to make the video automatically play whenever a visitor lands on your page.

  • Loop: Enable the “Loop” option to keep the video playing again and again.

  • Mute.


FAQ: Can I add borders to the video?

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

  • Border side: Select which side of the video you want to add the border to.

  • Border style: Dashed, dotted, or solid.

  • Border colors and border radius.

adding border to video

FAQ: Can I show the video to mobile visitors only?

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.

  • Border side: Select which side of the video you want to add the border to.

  • Border style: Dashed, dotted, or solid.

  • Border colors and border radius.

Contact Form

Use Cases: Contact Form

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.

How To Use Contact Form Element in Weaverse

Add Contact Form element

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

contact form element in Weaverse

Customize Contact Form Questions

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.

Customize Contact Form Styling

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

Here, you can adjust:

  • Font styles, colors, line height, and other typographic options

  • Background colors and background images

  • Borders, Margins, and Paddings.

  • And other styling elements to match your brand's aesthetic.

Learn more about our standard styling options here.

Product Details

Use Cases: Product Details

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.

How To Use Product Details Element In Weaverse

Drag and drop the Product Details element to your desired location on Section Editor.

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.

Edit Product Details Content

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;

  • Product Media: Image size, Aspect ratio, and Fallback image.

  • Product Title: Click Action and Heading Type (changing the heading type will also change the font size of your product title - based on your styling presets).

  • Product Price: You can show a Sales Badge or Compare Prices for sales promotion.

  • Product Description: You can adjust the length of the product description, and the click action for the View Details button (either open the full description, or direct shoppers to the product pages).

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

Use Cases: Scrolling Text

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

  • Add a sliding Sales Announcement/Discounts banner.

  • Put up a Welcome scrolling banner to make your shoppers feel at home.

  • Or add a pun, an intelligent joke, or a heartfelt note to show your unique brand personality.

Here's how you can use it in Weaverse

How to Use Scrolling Text Element In Weaverse

Open our Element library and select the Scrolling Text element.

weaverse scrolling text element

Drag and drop it anywhere on the page.

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

weaverse scrolling text element demo

Select the element and select "Edit text" in the toolbox above the Scrolling Text.

weaverse scrolling text config

Add the Text you want to show in the text editor and tweak it your way.

  • Gap: Adjust the width of the space between Text. We recommend keeping it at 44px for the best consumption experience.

  • Speed: How fast you want the scrolling/sliding Text to go.

  • Pause on hover: Let visitors read the complete text in case they want to.

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 :)

Hotspots

Use Cases: Hotspots

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.

Hotspots element in Weaverse

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.

How To Use Hotspots Element

Add the element to the editor

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

Hotspots element in Weaverse element library

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.

Customize Hotspots content

Here you have a few customization options, including:

  • Add hotspot items: The products you want to add as hotspots. You can add several products to the same image.

  • Click the item to add the product you want to showcase and adjust the position of the hotspot on the image - using Offset X: how the hotspot is located horizontally, and Offset Y: how the hotspot is located vertically.

  • You can also add more products to your shoppable images. Click ‘Add more item” and repeat the process.

  • You can also change the Hotspots icon: A dot, a tag, a shopping bag, or a plus sign.

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.

Google Map

Use Cases: Google Map

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.

How To Add Google Map Element

Open Weaverse and Add the Google Map element.

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.

Add the location

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.

Product List

Use Cases: Product List

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.

How To Add Product Lists Element

Open Weaverse and Add the Product List element.

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.

Customizing the Product List Element

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:

  • Source: You can display products from a specific collection or from Recommended Products. Or you can display specific products from several collections simultaneously using Fixed Products.

  • You can choose from various formats, such as a grid or carousel (slide).

  • You can also choose how many products to display in a row.

Customizing Product Card

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:

  • Image aspect ratio: To adjust the width and height of the product images in the Product List.

  • Show the second image on hover: Enabled by default, as it makes the shopping experience more hassle-free. Shoppers don't need to click to view more images.

  • Show sale badge: Enabled by default, and it will be shown if your products are on sale.

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

  • Show quick view: Enabled by default. This option adds the eye icon on Product Card so that when a shopper clicks on it, a Product Detail Pop-up page will be shown for shoppers to add the product to their cart easily.

  • Customizer: Customize swatches. This option will help you add more product swatches - including Color and Size. You can set up these product swatches in Styling Presets.

Customize Styling Options of Product List Element

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:

  • Background: Background color and background image.

  • Spacing: Padding and Margin of Product List content.

  • Typography: Font size, Text style, Text colors, etc., of all text components in the Product List element (Product Title, Product Price, Product Description, etc.).

  • Border: Border styles, colors, and radius.

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

Spice up your layout (optional)

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: Collection List

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

  • Upsell/Cross-sell: You’re building a product page and want people to know you have more collections of similar products.

  • Engage Shoppers: You have a series of high-traffic blog posts and you want to monetize the organic free traffic. You can put a Collection List at the end of each blog post to drive more eyeballs to your products.

Getting Started

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.

How To Edit Collection Lists’ Styles

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.

  • Enable “Visible On All Devices” if you want your Collection List visible to all visitors.

  • Enable “Visible On Mobile” if you just want to show your Collection List to mobile users.

Was this article helpful?