Beaver Builder

The North Commerce module is a Beaver Builder module that allows you to display North Commerce products on your website.

The module becomes available in the Beaver Builder UI when you have the North Commerce plugin installed.

The North Commerce module utilizes North Commerce shortcodes to showcase various layouts, offering a convenient and straightforward method to present your North Commerce products on your website. This eliminates the need to manually write any shortcodes.

General Tab​

The General tab allows you to select the layout of your North Commerce module.

Layout​

You can choose from the following display layout options:

• None No layout is selected. This is the default option.

• Product Page The Product Page layout displays a single product.

  • Product Slug Enter the product slug to display a specific product.

• Product Gallery The Product Gallery layout displays a gallery of products.

• Product Slider The Product Slider layout displays a slider of products.

• Checkout The Checkout layout displays the North Commerce checkout form.

• Cart The Cart layout displays the contents of the user's cart.

Style Tab​

The Style tab allows you to style the North Commerce module.

Button​

• Style Choose the style for the state of the button. This toggle allows you to select the button style for the default and hover states.

  • Default Style The default button style.

  • Hover Style The button style when hovered over.

• Text Color Choose the color of the button text.

• Icon Color Choose the color of the button icon.

• Background Color Choose the background color of the button.

Button Border​

The Button Border settings allow you to style the border of the button. When the Hover option is enabled, you can style the button border when hovered over.

See the Border article for more information on the border settings.

Advanced tab​

There are all the usual Advanced tab settings for margins, visibility, animations, and advanced HTML settings.