V1 vs V2 Frontend - Full Overview

We introduced V2 of our frontend / online ecommerce experience at Innovate in 2021. If you want to view the full recording, you can do so here.

Summary of V2 Features

• Checkout
• Clubs
• Customer Profile
• Payments
• Reservations
• Accessibility
• Apps
  
  

V1 vs V2: What to Know

• What Should Developers Know?
• How to Determine if a Client is V1 or V2
• What Does Migrating from V1 to V2 Look Like?

---

Checkout

Checkout has been dramatically improved to make it easier and reduce the amount of time it takes for customers to complete a purchase.

• ApplePay and GooglePay have been integrated allowing even guest customers to complete a purchase in a couple of clicks
• Login is now integrated into the Checkout process
• New "Shipping" and "Pickup" tabs on the Delivery screen (instead of the previous text link)
• New "Review" step where customers can double check all information before completing the purchase
• Improved display for customer saved addresses, credit cards, pickup locations that makes them easier to read and select
• Field improvements for quicker entry
  • Product quantity now uses a dropdown and automatically saves on selection
  • First Name & Last Name have been combined into a single Full Name field
  • Zip Code/Postal Code automatically detects and auto-fills the City and State fields
  • Birth Date fields have been replaced with a simple age confirmation checkbox when they're not required by the customer's state
  • Removal of the Billing Address (fraud detection is completed in different ways to prevent unnecessary/extra fields for your customers)
  • Optional fields such as Company and Address 2 are collapsed by default to not distract from required fields
  • Credit card expiry month and year fields have been updated from dropdowns to text fields for easier entry
  • Field types are optimized for completion on mobile devices

To learn more in depth about the changes made to checkout, you can read about them on the blog:

• Behind the Making of an Even Better Checkout Experience
• Placing an Order on Your Mobile Device Just Got Easier
  
  

---

Clubs & Subscriptions

• If there's an active package or it's a Subscription club, customers will be able to select which products they want as the first step in the signup process. This allows them to see the benefit of your club right away without first having to make the commitment to join. 
• Completely revamped product selection page that makes it easier for customers to understand what's currently in their box and the minimum selection requirements
• More visual shipment preview
• Smart messaging letting the customer know when they can start editing their next shipment
• Club cancellation offers. If a customer wants to cancel their club, based on the reason they provide, the system will dynamically suggest an alternative to cancelling. For example, if a customer wants to cancel because they have "Too much wine", it'll suggest that they skip their next package instead. 

---

Customer Profile

• The new customer dashboard surfaces and personalizes the display based on your customers activity.
  • If they're a brand new customer with no orders, it'll suggest they make a purchase, join a club, or book a reservation.
  • If they're a recently made a pickup order, it'll display it on the dashboard with a map of your location, letting them know that it can be picked up.
  • If they have an upcoming club shipment, it'll give them a preview of the products and remind them to make any changes before the process date.
  • If they have an event or reservation coming up, it'll remind them, letting them know when and where.
• The account widget has been improved. Customers can now access any page in the profile directly through a new dropdown instead of having to go to the Dashboard first. There is also a new notification marker that will display when they have an alert on their account such as failed payment for their last club package or an order waiting to be picked up.
• Enhanced order view that surfaces different information based on the status of the order. If the order is being shipped, there's a new ability to track the order in FedEx, UPS and other carriers.
• Anywhere there is a location attached to an order, whether that's a pickup location, an event location, or a reservation location, a Google Map will display so that customers can easily see where they need to go.
• Pages have been simplified so it's easier for customers to find what they're looking for and update their information.
• Customers now have full control of their account with the ability to delete it. If a customer decides to delete their account, their contact record be removed, but don't worry, your orders will all stay intact.
  
  

---

Payments

We've introduced a new in-house payments solution, Fullsteam Payments, that will be a requirement for upgrading to Version 2. Our current payment solutions didn't support many of the enhancements that we wanted to bring such as GooglePay, ApplePay, and enhanced fraud protection. Fullsteam Payments is a multi-gateway solution that allows us to keep you ahead with a combination of the best technologies. (If you are outside of the US, Stripe will be the preferred solution.)

Commerce7 is dedicated to working with you as you switch gateways. We'll be posting more about this process soon, but in the meantime you can reach out to support@commerce7.com for any questions that you have or to start the transition process.

Are you located in South Africa? If so, click here to learn about your Payment Gateway considerations.

---

Reservations

Tock has partnered with Commerce7. With the new integration, you can now view Commerce7 lifetime value, club memberships and tags all inside Tock. All Tock reservations are also viewable in Commerce7. Sign up and learn more here.

 

---

Accessibility

The entire online experience has been audited for accessibility improvements. There have been many updates made to ensure that customers can fully navigate by keyboard, elements from form fields to navigation are properly marked up, and that screen readers are able to correctly describe elements to your customers. 

** This includes the Commerce7 functionality and tools, but you'll want to make sure that the rest of your website is also built with accessibility in mind to ensure that you are fully compliant. 

 

---

Product Merchandising

Developers can now output raw data with a handlebar-like syntax. For example create a meta data element called Tasting Sheet - then include it like this <a href=”{{tasting-sheet-url}}”>  rather than having a tag. Learn more here. 

 

---

Apps

Developers can now integrate apps into the online experience on the order receipt page and customer profile dashboard + tabs. This allows you to provide a more seamless experience to your customers from start to finish.

Developers can learn more here.

---

 

Features: What Should Developers Know?

• Apps can now be embedded directly into the order receipt or customer profile area. Learn more here.
• Since everything is completely rebuilt, the HTML structure, classes and CSS is completely new. We've added quite a few more classes giving you the ability to target your styles more precisely and make more customizations to the overall look and feel. We've also added CSS variables for styles that we think will be changed most frequently. This will allow you to easily update the general styles without having to dig around and search for specific classes to overwrite.
• When creating product templates, you can now output raw data with a handlebar-like syntax instead of using a Commerce7 tag. Learn more here. 
• We've made some big improvements for accessibility. You'll see more markup specifically for screen readers including hidden text.

 

---

How to Tell if a Client is on V1 vs V2

Signup Date

All signups after Sept 1, 2021 will be automatically be on Frontend V2. If you signed up before then, then you'll likely be on V1.

Commerce7 Includes

Another way to determine which version is currently in use, is by looking at the Commerce7 CSS being included.

V1

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

V2

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

Overall Look and Structure

You can also compare the format and structure of the standard Commerce7 pages. While the styling will change from website to website, you'll notice that all V1 websites have the same look and feel. 

V1 Customer Portal

V2 Customer Portal

 

---

 

Migrating from V1 to V2

Step 1: Engage with your Designer

Updating your website from V1 to V2 will require your Designer's help.  Feel free to pass along this link to your Designer, which documents the steps required to migrate.

Step 2: Transition to a New Payment Gateway

V2 necessitates you to switch from your current Payment Gateway to a different one, and this is based on where you are located.

---

Payment Gateways are based on Region

United States: Commerce7 Payments + (optional) Stripe (Learn more about the migration here).

South Africa: PayStack (Sign up for PayStack here).

Canada, Australia & New Zealand: Stripe (Learn more about the migration here).

 

---

Feel free to contact support@commerce7.com for any questions that you have or to start the transition process.