Skip to main content

North Commerce

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.

info

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.

See the North Commerce documentation for more information on shortcodes and how to use them.

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.