# 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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.northcommerce.com/north-commerce/builders/beaver-builder.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.