# Beaver Builder

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

{% hint style="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.
{% endhint %}

### General Tab[​](https://docs.wpbeaverbuilder.com/beaver-builder/layouts/modules/north-commerce/#general-tab) <a href="#general-tab" id="general-tab"></a>

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

#### Layout[​](https://docs.wpbeaverbuilder.com/beaver-builder/layouts/modules/north-commerce/#layout) <a href="#layout" id="layout"></a>

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[​](https://docs.wpbeaverbuilder.com/beaver-builder/layouts/modules/north-commerce/#style-tab) <a href="#style-tab" id="style-tab"></a>

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

#### Button[​](https://docs.wpbeaverbuilder.com/beaver-builder/layouts/modules/north-commerce/#button) <a href="#button" id="button"></a>

* **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[​](https://docs.wpbeaverbuilder.com/beaver-builder/layouts/modules/north-commerce/#button-border) <a href="#button-border" id="button-border"></a>

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](https://docs.wpbeaverbuilder.com/beaver-builder/basics/border) article for more information on the border settings.

### Advanced tab[​](https://docs.wpbeaverbuilder.com/beaver-builder/layouts/modules/north-commerce/#advanced-tab) <a href="#advanced-tab" id="advanced-tab"></a>

There are all the usual [**Advanced** tab settings](https://docs.wpbeaverbuilder.com/beaver-builder/layouts/advanced-tab/) for margins, visibility, animations, and advanced HTML settings.