Guides

Quick Start

Suggest Edits

To get your website up and running with Commerce7, you'll need to follow three steps:

  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

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

❗️

Do not cache commerce7.js javascript!

Ensure that the commerce7.js is not cached and do not manually download and included this on the website. Wordpress has a plugin called Rocket Loader that will automatically cache all Javascript files and this will break Commerce7 functionality whenever we push an update to this file.

2. Add the Basic Commerce7 Widgets

For the basic Commerce7 functionality, add the following tags to your page templates so that customers can access their cart and account. Place each <div> in your file where you'd like the widget to appear. Read here for more information on the widgets.

Side Cart

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

Account Login

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

Page Content
This tag allows the Commerce7 content to output onto the page such as product list pages, Checkout forms, customer account pages, etc. The content output to the page will be different depending on the currenURL.

Read more about the types of pages in the next step. For the Checkout page, you will want a unique layout where only this <div> is displayed on the page, without a header and footer.

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

3. 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)

If you're using WordPress, find more detailed information on creating routes here.
If you're using Squarespace, you'll need to change a couple of URLs within the CMS and route settings within Commerce7. Learn more here (steps 3 + 4).

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

Commerce7 widgets will only work on root domains or subdomains. Subfolder installations will not work with our widgets.

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]

Updated over 2 years ago