Table of Contents

Before You Begin

HSF allows customization of the Storefront style.  While the default style is an out-of-the-box, plug and play solution, HSF also allows for overriding the default cascading stylesheet to produce a look that more closely matches the client’s website.

Viewing the Default Stylesheet

As a designer, it's helpful to see the structure of the Default Stylesheet.

  • From the Purchase page on the customer’s web site, use the browser’s menu bar to go to the View menu choice and select Source.  

  • The Default Stylesheet is the first one listed, generally within the first 20 lines of HTML code.  Use a Ctrl-Click over the URL and it will take you to the default stylesheet code.  

(Note:  Unsure of the Purchase page URL?  It will look similar to this:
Log into VineSpring and navigate to Site > General Settings.  You'll see the domain name at the top of the page.  Append that with /purchase and you'll be all set).

Cascading Stylesheets

VineSpring uses cascading stylesheets so that the Default Stylesheet can be overwritten.


Adding a Club Signup Page

There are two pieces to this:

  1.  A Wine Club page will need to be created on the winery's main website (if there is not one already).  This is a page describing the Club(s) and its features.  At the end of the Club description, there is often and link or button that says, 'Join this Club'.  Once a customer clicks on that, they are taken to the VineSpring Club Signup Form.

  2.  The link to the VineSpring Club Signup Form is easy to create and looks something like this:

Let's break that down.  The 5715045a123e3b09681eb614 bit is simply the internal Club ID that VineSpring assigns to a particular club.  This can be viewed by logging into VineSpring, navigating to Clubs and clicking on the Club in question.  You will see the alpha-numeric string at the end of the URL.

If you wish to include the club name in the URL (important if the customer has more than one wine club) you append the string “&clubName=” in the URL with the club name as a parameter.  If the club name is “Prestige Membership” then the full URL would be

(Note: that %20 is the ASCII space character, and that clubName requires a capital “N.”)


The Hosted Storefront includes the following pages that can be called from a URL on the customer’s web site:

/purchase – The shopping cart.

/purchase/detail?item=(slug name) – Goes to an individual page of wine product based on value for slug name.

/register – Where a customer enters an e-mail address to create a new account.  Note that VineSpring allows you to add Billing Address and Shipping Address to this page by going to (Site > Storefront > Registration Page) and clicking on the appropriate check boxes.

/club-signup – Requires the complete URL shown above with the question mark and “club=” parameter to resolve properly.

/cart – Shows the items in the customer’s current shopping cart.

/account – The default page for the hashtag:

  • /account#login – Login page for VineSpring customers

  • /account#logout – Logout page. Logs you out and sends you to the Purchase page.

  • /account#password – Reset the current password

  • /account#profile – Customer account information page

  • /account#clubs – Customer club memberships

  • /account#allocations – Customer’s current available allocations

  • /account#orders – The customer’s order history

Hosted Storefront Configuration

In VineSpring, Go to Site > Storefront
Click into any page that you'd like to edit.

Here's a list of Default Pages available in HSF and their definitions:

--Account Area - Main customer account page.  This is basically a 'home page' for customers where they can access allocations, edit profile information, edit password, etc.

--Allocations -  If a winery offers allocations, this is where a customer can see what is available to them.  (This link can be toggled to show/not show by navigating to the Site > Storefront > Account).

--Cart - Several options available here, including 'Shipping Instructions' and 'Thank You Message'.

--General Settings - This is where you may enter any additional Nav Links. Purchase and Cart are default, but links back to the web site such as About, Blog, People, and Vineyard  may be added here.
Example: <a href="">Home</a>

--Logo - Add the Winery logo.

--Registration Page - This is the account sign up page (/register).  While email address is the default, you have the option of toggling on/off many other pieces of information (first, last, address, etc).

--Style - This is where a web designer can override the default fonts, colors, etc.

Require Date of Birth and Age Verification

To require DOB and age verification to the checkout process, here what you do:

  • In VineSpring go to the Site tab > Storefront

  • Click on the Cart link

  • Enter the following code into the Bottom HTML field:

    function ageCheck(model, event) {
        var dob = new Date(model.ShipTo.DateOfBirth()),
            today = new Date(),
            years = Math.abs(today - dob)/31557600000
        if (years < 21) {
            alert('You must be 21 years of age to continue.')
  • Next, enter the following code into the Shipping Additional
    Fields (Advanced) field:

 <div class="vs2x-row">
      <label><span>Date of Birth</span>
        <input type="date" required data-bind="value: ShipTo.DateOfBirth, event: {blur: ageCheck}"><br>

Using Google Analytics

Place the Google Analytics code in the "Bottom HTML (Advanced)" field of the General Settings within the Storefront. You must put script tags around the code and replace the GA Property ID with your ID:


.  Below is an example of the code needed.

  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),

ga('create', 'UA-XXXX-Y', 'auto');
ga('send', 'pageview');

window.vinespringReady = function (config) {
    config.onAfterPlaceOrder = function (order) {
    ga('ecommerce:addTransaction', {
    'id': order.OrderNumber,      
    'affiliation': 'Acme Clothing',
    'revenue': order.Total,        
    'shipping': order.Shipping,    
    'tax': order.Tax

     for(i = 0; i < order.Items.length; i++) {
        ga('ecommerce:addItem', {
        'id': order.OrderNumber,            
        'name': order.Items[i].Name,        
        'sku': order.Items[i].SKU,          
        'category': null,                  
        'price': order.Items[i].Price,      
        'quantity': order.Items[i].Quantity
     return true;    

Sample Sites Using HSF:

Did this answer your question?