Quick Start

  1. Include the Commerce7 CSS and Javascript snippets to every page on your site
  2. Add the Commerce7 tags where the account widget, side cart widget, and content should appear.
  3. Create routes inside your CMS for the various Commerce7 pages

Include the Commerce7 Snippets

To use the Commerce7 tools, you must first include the Commerce7 CSS and Javascript snippets to every page of your site.

CSS

Add the following above the closing </head> tag.

<link href="https://cdn.commerce7.com/v2/commerce7.css" rel="stylesheet">

Javascript

Add the following above the closing </body> tag, updating the data-tenant="tenantId" with your tenantId.

Your tenantId will be the first part of the Commerce7 admin panel URL.
eg. For "https://jason-demo-site.admin.platform.commerce7.com/", the tenantID is jason-demo-site

<script type="text/javascript" src="https://cdn.commerce7.com/v2/commerce7.js" id="c7-javascript" data-tenant="tenantId"></script>

Add the Basic Commerce7 Tags

For the basic Commerce7 functionality, add the following tags to your page templates.

Side Cart

  • Place where you want the cart link to appear
  • Clicking the link will open the cart summary on any page
<div id="c7-cart"></div>

Account Login

  • For a logged out user, this will output a "Login" link
  • For a logged in user, this will output "Hello Andrew" with a dropdown containing the profile pages. If there are any notifications on the account, the user will see a dot to the right of their name.
<div id="c7-account"></div>

Page Content

  • Commerce7 content will be output wherever this tag is placed on your page
  • The content will change based on the current URL

Read about creating routes to understand the types of pages used. You may want to change the positioning of the c7-content tag dependant on the type of page.

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

Create Routes Inside Your CMS

For all of the standard Commerce7 pages, specific routes will need to be created. Based on each route, Commerce7 will update the content that is output to the <div id="c7-content"></div> tag.

Set up routes for each type of page.

  • /collection/* - Product list / Collections
  • /club - Club types list (optional)
  • /reservation - Reservations list (optional)
  • /product/* - Product details
  • /profile/* - User profile pages
  • /cart - Cart page
  • /checkout/* - Checkout (product checkout, club signup, and reservation booking)

Notes

The Checkout template is where checkout, club signup, and reservation booking will happen. This page should be blank and not hold other elements such as a header or footer.

For the Club Type List and Reservation List pages, you can choose to design your own page instead of using the standard Commerce7 pages.
If you decide to do this, these pages will not need a <div id="c7-content"></div> tag. Instead, for the Club List Type page, use our signup button widget or link to directly to the club's URL and for the Reservation List page, embed our reservation widget (coming soon).

Create 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, club signup, and reservations link to your privacy page
  • /terms - Our checkout, club signup, and reservations link to your terms and conditions page

Support

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]