Announcements

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

V1 vs V2: What to Know

In order to upgrade to Version 2, you'll need to work with a designer to make changes to your website. You'll also need to switch to our new in-house payment solution, Fullsteam Payments. For more information, you can contact us at support@commerce7.com


Checkout

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

press-frontendv2-checkout-2

  • 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

Important Fact: There is an 18% higher conversion rate on V2 vs V1. 

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


            Clubs & Subscriptions

            press-frontendv2-club

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

            Important Fact: There is a 77% higher Club signup conversion rate on V2 vs V1.



            Customer Profile

            press-frontendv2-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

            V1 Customer Portal

            V2 Customer Portal

            Screen Shot 2021-09-08 at 9.08.49 AM

             


             

            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.

            Why do you need to change your Payment Gateway?

            Your current Payment Gateway does not support many of the enhancements that we've built (for instance: ApplePay, GooglePay and more robust fraud protection).


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

            WindCave Users: Note that if you are currently using WindCave, you will not be able to migrate your credit cards, as WindCave does not allow for that. Click here for steps about setting up your Stripe account.

             


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