Building With Beaver Builder

Step 1: Install Required Plugins

• Beaver Builder Page Builder: A flexible drag-and-drop page builder for WordPress that allows users to create custom layouts and designs without coding.

• North Commerce Plugin: An all-in-one WordPress e-commerce plugin designed to help users create high-performing online stores with a focus on speed and ease of use.

Step 2: Add the North Commerce Module to Your Page

Navigate to the page where you want to add your e-commerce features and click to open the Beaver Builder editor. Then, click on the “+” icon in the top right corner to access the modules panel.

In the search bar, type “North Commerce” to quickly locate the module. Once you find it, simply drag and drop the North Commerce module to your desired location on the page:

Adding the North Commerce module to your page is the first step in customizing your e-commerce experience. This gives you the flexibility to incorporate product displays, shopping cart elements, or checkout forms directly into your page’s design. This seamless integration ensures that your e-commerce features blend smoothly with the rest of your content, providing a cohesive and user-friendly experience for your visitors.

Step 3: Configure the North Commerce Module

The North Commerce Module offers a range of settings to help you customize the e-commerce elements on your site to match your brand and optimize the user experience.

Under the General tab, you can select from several layout options, each tailored to deliver a specific type of content or user interaction:

Each layout option caters to different aspects of your e-commerce store, helping you create a cohesive and user-friendly experience. Choose the layout that best fits your needs, whether to highlight products, streamline checkout, or enhance your site’s design.

Next, we’ll explore each layout option and provide guidance on configuring them for your store.

Product Page

The Product Page layout allows you to display a single product, just as you see on the default product page. This layout is perfect for highlighting a specific product anywhere on your site, such as on landing pages, blog posts, or custom sales pages.

Select Product Page from the Layout dropdown, then enter the Product Slug to showcase a specific item:

The product slug is a unique identifier for each product and ensures that the correct product information is displayed.

The Product Page layout gives visitors a detailed view of a product, including images, description, price, and options. It’s perfect for promoting featured products, running marketing campaigns, or creating custom showcases that blend with your site’s design.

Furthermore, by placing a product’s full details in strategic locations, you can effectively drive interest and boost conversions.

Product Gallery

To showcase multiple products on a single page, use the Product Gallery option in the North Commerce module. This feature is perfect for creating visually appealing category pages or product overviews.

Select Product Gallery from the Layout field:

The Product Gallery layout displays your products in a clean, organized grid, typically with three columns. Each product is highlighted with its featured image, title, and price, providing visitors with a clear and attractive presentation of your offerings.

The Product Gallery layout engages customers by displaying multiple products at once. This makes it easier for them to find what they’re looking for.

Product Slider

The Product Slider option enables you to showcase a selection of your North Commerce products in a dynamic, interactive slider. This feature is ideal for making your products more visible and engaging to your site visitors.

To create a product slider, select Product Slider from the Layout field dropdown menu:

Using a product slider on key pages, such as your homepage or landing pages, can effectively draw attention to your products and encourage users to explore your offerings, ultimately driving higher engagement and sales.

Checkout

The North Commerce module allows you to embed the checkout process directly within any page or post. This option gives you flexibility in how and where you guide customers through your sales process. By displaying the North Commerce checkout form on custom pages, you can streamline the purchasing process and reduce friction for your customers.

To use this feature, simply select Checkout in the Layout field:

This will automatically display the checkout form, making it easier for customers to complete their purchase without having to navigate away from the current page.

Integrating the checkout form into strategic locations, such as landing pages or sales funnels, can significantly enhance the user experience and improve conversion rates.

Cart

Lastly, the North Commerce module allows you to display the contents of the user’s cart. This feature is particularly useful when building sales pages and funnels, as it enables customers to easily review their selections before checking out.

To use this feature, select Cart in the Layout field. You’ll see a display similar to the example screenshot below:

Step 4: Customize Your Layout

After selecting your layout, you can further personalize the appearance of your e-commerce elements.

In the settings popup, click on the Style tab:

These options allow you to create buttons that match your brand and enhance the overall design of your e-commerce site:

Button Style

• Default Style: Set the appearance of the button in its normal state.

• Hover Style: Customize the button’s appearance when hovered over.

Color Options

• Text Color: Choose the color for the button text.

• Icon Color: Set the color for the button icon.

• Background Color: Select the background color of the button.

Button Border

• Border Styling: Customize the button’s border.

• Hover Border: Style the button border for the hover state.

Next, navigate to the Advanced tab:

Adjust margins for spacing, set visibility rules by device type, and apply animations for dynamic user experiences. You can also add custom code with advanced CSS and Javascript settings. These options give you full control over your content’s display and allow precise tailoring to your design needs.

The North Commerce Module for Beaver Builder allows you to create an engaging and functional online store. Combining North Commerce with Beaver Builder helps you build a visually appealing site that enhances the user experience.