Guides

Home

Suggest Edits

🚧

This documentation is for Frontend V1 only. If you are working with our newer V2, you should references these docs instead. Find more information on how to tell which version your client is on here.

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]

Quick Start

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

CSS

Add the following snippet to the tag.

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

Javascript

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

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

❗️

Do not cache commerce.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.

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

eg. https://jason-demo-site.admin.platform.commerce7.com/ 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 checkout area
  • /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 over 2 years ago