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

  • Outputs forms built under Marketing > Form
  • Make sure you update the data-form-code with the "Code" for your specific form
<div class="c7-custom-form" data-form-code="code"></div>

Reservation booking widget

Use the Reservation widget to display booking for a single type of reservation.

  • Outputs the reservation booking form for a specific Reservation Type with fields for date, time, and number of guests
  • Make sure you update the data-reservation-slug with the end of the Commerce7 "Slug" for your specific Reservation Type
<div class="c7-reservation-availability" data-reservation-type-slug="slug"></div>

Subscribe form

  • Outputs a simple Subscription form with an email field and Submit button
<div class="c7-subscribe"></div>

Add data-has-name-field="true" to include the customer's full name.

<div class="c7-subscribe" data-has-name-field="true"></div>

Product Buy Button

  • Use the "Buy Button" to create custom pages that display products such as related wines for recipes, blogs, or highlighting a product on a landing page

❗️

The "buy" button is not intended for use on standard product list and product detail pages.

We strongly encourage you use Commerce7's product templates for standard product pages as this will not only reduce work for your winery client (instead of having to manage and upkeep the product in 2 places), but will also allow them to make use of built-in tools such as Personalized Collections which will increase their conversion rates.

By opting to build out completely custom product pages (instead of integrating with Commerce7), you introduce a bad practice that makes it harder for your clients to take full advantage of the Commerce7 tools.

  • Outputs the product's add to cart form including multiple SKUs, discounted pricing and action messages (if applicable)
  • Make sure you update the data-product-slug with the end of the Commerce7 "Slug" for your specific product
<div class="c7-buy-product" data-product-slug="slug"></div>