🚧

V2 is not yet available for our general users.

Include the Commerce7 Snippets

If you haven't already, include the Commerce7 CSS and Javascript snippets to every page of your site. These are needed in order for the widgets to function.

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>

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>

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>

Personalization Block

  • Place to output a personalization block on any page
  • Make sure you update the data-block-code to your specific Personalization Block "Code"
<div class="c7-personalization" data-block-code="homepage"></div>

Personalization blocks are a great way to target content based on your specific website user. This content can be set up in the form of products, an upcoming club shipment, text content or a subscribe form.

To learn more about personalization blocks, read our documentation site:


Product List

  • Output a list of products on a homepage or other page
  • Make sure you update the data-collection-slug to use the "Slug" from your specific Collection
<div class="c7-product-collection" data-collection-slug="slug"></div>

Club Button

  • Outputs a button for the user to sign up for a club
  • Make sure you update the data-club-slug to use the "Slug" for your specific Club
  • If the user is logged in and is already signed up for that club, the button will instead display "Edit Membership" and link to the club in their account.
<div class="c7-club-join-button" data-club-slug="slug"></div>

This widget should be added when you are not using the standard club list page.


Custom Form

If your building a form in the 'marketing / form' area

<div class="c7-custom-form" data-form-code="code"></div>

Additional Widgets Coming Before Launch:

  • Reservations
  • Subscribe form