Skip to main content
Version: Beaver Builder 2.11

North Commerce

Use North Commerce to display products, galleries, sliders, cart, and checkout from your North Commerce store.

Usage​

Use North Commerce to render store content from the North Commerce plugin inside a Beaver Builder layout. The module outputs the North Commerce shortcode that matches the selected layout, which can render a single product page, a product gallery, a product slider, the cart, or the checkout. The module is available only when the North Commerce plugin is active.

Use this module on storefront pages, landing pages, and templates that need to surface North Commerce content without writing the shortcode by hand. It fits store layouts that mix Beaver Builder rows and modules with native North Commerce flows for browsing products and completing a purchase.

Module Settings​

The North Commerce module settings choose which store layout the module renders and style the action button used in the cart and checkout flows.

General Tab​

The General tab selects the North Commerce layout to render and the product targeted by a single product page.

Layout Default: None

Selects which North Commerce layout the module renders. The selected layout determines which shortcode the module outputs.

  • None: Renders nothing. Use this state while configuring the module.
  • Product Page: Renders a single product page. Reveals the Product Slug field for choosing which product to display.
  • Product Gallery: Renders a grid of products from the North Commerce store.
  • Product Slider: Renders products in a horizontal slider.
  • Cart: Renders the North Commerce cart.
  • Checkout: Renders the North Commerce checkout.
Product Page Settings
Product Slug

The slug of the product to display when Layout is set to Product Page. When left empty, the shortcode runs without a target product.

Style Tab​

The Style tab controls the appearance of the Add to Cart and checkout action buttons rendered by North Commerce.

Button

The Button section controls the colors used for the Add to Cart and checkout action buttons in the default and hover states.

Button settings
Style Default: Default Style

Switches the color controls between the button's default and hover states.

  • Default Style: Reveals the Text Color, Icon Color, Background Color, and Border controls used in the resting state.
  • Hover Style: Reveals the Text Hover Color, Icon Hover Color, and Background Hover Color controls used on hover and focus.
Text Color Supports: Field Connections

The text color of the action button in its default state. This field appears when Style is set to Default Style.

Icon Color Supports: Field Connections

The fill color applied to icons inside the action button in its default state. This field appears when Style is set to Default Style.

Background Color Supports: Field Connections

The background color of the action button in its default state. This field appears when Style is set to Default Style.

Text Hover Color Supports: Field Connections

The text color of the action button on hover and focus. This field appears when Style is set to Hover Style.

Icon Hover Color Supports: Field Connections

The fill color applied to icons inside the action button on hover and focus. This field appears when Style is set to Hover Style.

Background Hover Color Supports: Field Connections

The background color of the action button on hover and focus. This field appears when Style is set to Hover Style.

Button Border

The Button Border section controls the border of the action button in the default and hover states.

Button Border settings
Border Supports: Responsive

The border style, width, radius, and color of the action button. This field appears when Style is set to Default Style.

Border Hover Color Supports: Field Connections

The border color of the action button on hover and focus.

Advanced tab​

The Advanced tab includes all the standard settings for margins, visibility, animations, and advanced HTML configurations.

See the Advanced tab section for more information.