Commerce7 Design Integration

The Commerce7 Design Integration Developer Hub

Welcome to the Commerce7 Design Integration developer hub. You'll find comprehensive guides and documentation to help you start working with Commerce7 Design Integration as quickly as possible, as well as support if you get stuck. Let's jump right in!

Get Started    


Commerce7 does not provide design support. If you need support outside of this documentation, there are 3rd party designers who offer paid support. Contact either:

To suggest changes to this documentation please email: [email protected]

Quick Start

Include the Commerce7 Javascript and CSS snippets to every page on your site.


Add the following snippet to the tag.

<link href="" rel="stylesheet">


Add the following snippets above the closing tag. Replace the data-tenant="tenantId" with your tenantId.

<script type="text/javascript" src="" id="c7-javascript" data-tenant="tenantId"></script>

You can get the tenantId from the Commerce7 admin panel, it is the first part of the URL.

eg. tenantID = jason-demo-site

Include the Commerce7 <div> tags to you to your page

Main content (such as the product list, drilldown, checkout, cart)

<div id="c7-content"></div>

Login/Logout at the top of the page. (Will output "Hello Andrew | Logout") for a logged in user.

<div id="c7-login"></div>

Side cart where you want a cart to show on a page.

<div id="c7-cart"></div>

Create the following routes inside your CMS

Commerce7 places content in the <div id="c7-content"></div> based on the URL of the page.

  • /collection/* - for all product lists
  • /product/* - for all product details
  • /profile/* - for all pages under the user profile
  • /cart - for the cart page
  • /checkout/* - for the checkout area
  • /club/* - for the club signup.

If you intend to do reservations please also add

  • /reservation/availability - for the reservation availability page
  • /reservation/checkout/* - for the reservation checkout

Ensure you have a few basic pages

Our system sometimes links to your CMS pages. Setup the routes below or edit website messages to link an alternate location.

  • /privacy - Our checkout and club signup link to your privacy page.
  • /terms - Our checkout and club signup link to your terms and conditions page.

Updated 4 months ago


Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.