Help Center

Get up and running with DRINKS on Shopify

Brandon A.
Brandon A.
  • Updated

Congratulations on partnering with DRINKS! Your business is now one (big) step closer to creating seamless commerce experiences for your customers.

 

There are three steps to get started with DRINKS real-time tax and compliance on Shopify:

  • Step 1: Configure DRINKS

  • Step 2: Activate App Embeds

  • Step 3: Enable DRINKS Tax Service

 

Introduction

This guide provides step-by-step instructions for configuring DRINKS on your Shopify Plus store. Please note that there are two roles/skillsets needed to get up and running:

  • Alcohol compliance
  • Shopify front-end developer

Setting up compliance information requires your business's license and product information. DRINKS provides compliance defaults for each state that will facilitate tight compliance, but plan to review all settings carefully to make sure they match how you are doing business today. If you have questions on what values to choose or how to configure the app to meet your needs, please contact us. We're happy to help you set up DRINKS to ensure it meets your needs.

 

Configuring DRINKS on your Shopify Plus store requires modifying front-end Liquid code. This is what allows the app to seamlessly prompt shoppers for their age and shipping location, restrict non-compliant products from being added to the cart, display state-specific warnings in checkout, and more. If you need help with installation, please contact us and we can walk you through the setup or provide a reference to a Shopify agency that can integrate DRINKS into your store.

 

  Before you begin,
  Install DRINKS on your Shopify Store

  1. Navigate to DRINKS in the Shopify App Store
  2. Click the Add app button and follow the prompts

 

 

Step 1: Configure DRINKS

Configure Online Store

Overview:

These settings impact how your customers will interact and experience your site from a compliance perspective.

Settings:

Navigate to the Online Store tab.

 

Nav_Bar-_Online_Store.png

 

Site Interaction

General_Messaging.png

  • Display the age modal – upon site entry, do you want customers to be asked if they are 21?
  • Display the 'shipping to state' dropdown selector – Upon site entry, do you want customers to be asked which state they are shipping to? This also allows a customer to change their shipping state anywhere on the site (in the header as a drop-down)
  • Collect Date of Birth (DOB) during account setup – decide if you want to ask customers to enter their DOB at account setup
  • Collect Date of Birth (DOB) during checkout – decide if you want to ask customers to enter their DOB during checkout

Site Messaging

Site_Messaging.png

  • Age Prompt Site Entry - This allows you to customize the age modal messaging that users see when entering your store. The listed defaults will display, if no changes are made.

  • Checkout Errors - You can customize the messaging for each potential compliance error message a user could see at checkout. If no changes are made, the defaults created by DRINKS Compliance team will be displayed.

Configure License Information

Overview:

This will allow you to enter all your license entities for state reporting purposes.

Settings:

Navigate to the License Information tab.

 

Nav_Bar-_License.png

 

Configuring License Entities

Add all TTB licenses for your business

 

License_Entity_Main_page.png

License_Entity_-_Create_License.png

 

The following information is required to add a new license entity. After initial setup, License Entities can be edited but cannot be deleted.

  • Name
  • Street Address
  • City
  • State
  • Zip Code
  • Phone Number
  • License Number (Note: this field cannot be edited later)
  • FEIN number

 

Configure States

Overview:

These settings allow you to configure sales, alcohol tax options, and product eligibility by state.

Settings:

Navigate to the States tab.

 

Nav_Bar-_States.png

 

State Eligibility & Compliance

Activate and configure states that your store should ship to

 

States_main_Page.png

CA_State_Setup.png

(Note: the example above is for illustrative use only, with values toggled on for visibility.
Your compliance settings may vary.)

 

  • State – click on a State's name to edit the details for that State
  • Active – set to Active to allow shipments to addresses in this state
  • Sales Tax Type:
    • Origin – sales tax rate based on the location the wine is being sold/shipped from
    • Destination – sales tax rate based on the location where the wine is being shipped/sold to
    • Override – set a custom tax rate and bypass the default tax table
  • Tax on Shipping – apply tax to the shipping cost
  • Apply Alcohol Tax – apply tax to alcohol

Note: packs (i.e. cases, bundles, multi-SKU products) will have their state-based compliance determined automatically based on the state eligibility of each bottle in the pack.

 

State Lists

State Lists are groups of states that you predefine to make product setup quicker and less error-prone than adding states one by one. State Lists determine where alcohol products can be sold and are key to enabling DRINKS to determine real-time compliance for each product and customer.

 

State_Lists_Main_Page.png

All_States.png

  • Add State List – create a new State List
  • Name – name your State List using a descriptive name. This is an internal value that customers will not see.
  • Notes – we recommend adding notes to the State List to help recall the purpose of the State List in the future and for other employees. State Lists can be created for compliance, marketing, inventory, or any other purpose.

 

Configure Products

Overview:

These settings impact state product eligibility, compliance functionality, and reporting. 

Settings:

Navigate to the Products Tab.

 

Nav_Bar-_Products.png

 

Important Concepts

  • After installing DRINKS, your store now has two product tabs. Shopify's native product tab acts as your primary product catalog. DRINKS' Products tab supplements Shopify information with alcohol-specific data that enables accurate tax calculation and compliance checks
  • Products are automatically synchronized from Shopify to DRINKS. Shopify remains your primary database for setting up new products.
  • Each synchronized Shopify product must be identified as either a Wine, General Merchandise, Subscription or Pack (Wine) within DRINKS – this distinction is important for accurate compliance. When you first set up DRINKS, you'll need to fill out supplemental information for every alcohol product in your store (i.e. ABV, volume). Going forward, you will only need to add alcohol-specific data when you add new products.
  • Packs (i.e. cases, bundles, multi-SKU products) are created in the DRINKS Products tab. Once you create Packs in DRINKS, tax, compliance, and state reports will be accurately processed based on which Wines are in the Pack.
  • Product Types
    • Wine - wine bottles
    • Pack - wine packs
    • Gen Mdse - general merchandise products (i.e. apparel, coffee, etc..)
    • Subscription - wine subscriptions
    • Unassigned - all products not currently configured in the app. If these products are to be sold they need to be configured to ensure proper compliance checks and tax calculation.
    • Ignored - any product that won't be sold in the store, can be set to "ignore" (i.e. archived products).

Products_Main_Page.png

 

When a product is first synchronized, the Type column is blank.  By clicking on the product's name, you will be prompted to select if it is a Wine, Pack, General Merchandise or Wine Subscription.

 

Wine

For each Wine in your store, enter the following fields:

    • Vintage – the year when the wine's grapes were harvested 
    • Color * – select the most accurate color from red, white, or rosé
    • ML * – volume of wine within the product in milliliters
    • ABV% * – Alcohol by Volume %
    • Wholesale Price- the wholesale price for the bottle, if applicable.
    • Brand * – name brand of the bottle. Type a new Brand or select one from the dropdown list 
    • Class * – select the most accurate classification from fortified, sparkling, or still
    • License *select which licensed entity is associated with this Wine
    • State Lists – select State Lists that represent where this Wine can be shipped. Choosing more than one State List enables the sum of all states (for example, if State List 1 includes CA and CO and State List 2 includes NJ and NY, the Wine would be available in CA, CO, NJ, and NY)

* Required field

 

States_Edit_Page.png

 

Packs

 Configuring Packs

For each Pack in your store, configure which Wines are in the pack.

  • Product – a Wine within the pack
  • Quantity – number of instances of the Wine within the pack

mceclip6.png

 

Viewing Packs

To view Wine within a Pack on the Products tab, click the mceclip2.png arrow, and the Wine will be displayed below the Pack row in an "accordion style” listing:

mceclip3.png

mceclip4.png

  

Helpful Notes & Troubleshooting:

  1. Shopify also has a Products tab located at the far left of your screen. If you don't see the options above, double-check that you have the DRINKS Products tab open, not the Shopify product tab.
  2. The Products table is very wide. You may need to make your browser full-screen or use the scrollbar at the bottom right of your screen to see all the columns.

 

Configure Compliance Rules

Overview:

These options allow you to set the specific compliance rules that your customers will be subject to on your site.

Settings:

Navigate to the Compliance Rules tab.

 

Nav_Bar-_Compliance.png

 

Configure State-Based Compliance:

The Compliance Rules tab initially shows a list of configurable Compliance Rules along with their status and the number of states where each rule is active.

There are three possible statuses:

  • Active – all states/zip codes are active (default status)
  • Partially Active – some states have been deactivated
  • Off – all states have been deactivated

Compliance_Main_Page.png

  • Click on a Compliance Rule's name to edit the States to enforce that Compliance Rule
  • By default, all states are active for each Compliance Rule, but states can be deactivated to reflect your winery's specific compliance model

 

Available Compliance Rules:

  • State Specific Notifications – display State Specific Notifications (i.e. California Prop 65). If there are multiple notifications for a given state, all notifications will display when the state is active. Notifications can be added and re-ordered.

State_Notifications.png

  • Dry Zip Code Enforcement – you have the option to prevent checkout or hold the order, for orders containing zip codes where alcohol cannot be sold or shipped.  

Dry_Zipcode_Enforcements.png

  • Volume Limits Per Customer – the amount of wine that a winery can sell or ship to a customer during a specified period (monthly, yearly, or fiscal year) as determined by each state. You have the option to prevent checkout or hold the order, when this limit is exceeded.

Volume_Limits_per_Customer.png

  • Volume Limits Per Shipmentthe amount of wine that a winery can sell or ship to a customer in a single shipment as determined by each state. You have the option to prevent checkout or hold the order, when this limit is exceeded.

Volume_Limits_per_Shipment.png

  • State Product Enforcements - the ability to override the list of states set up for a particular product. For example: you can deactivate Florida and customers will be able to purchase all products in Florida. You can decide if the user is unable to add a product to their cart, which is not configured to ship to their state. You also have the option to prevent checkout or hold the order, when a product isn't configured to be shipped to a state.

State_product_Enforcements.png

  • Enforce Age Verification - Configurable 3rd party, state-approved, age verification solution at checkout. Age verification is configurable by state (turn it on or off) and is performed in real-time while the customer is traversing the checkout process. While this age verification tool is not required by all states, the tool can be utilized for all sales. You also have the option to prevent checkout or hold the order, when a user fails age verification.

Age_verification.png

 

Hold Orders

Overview:

This allows you to decide how to proceed with a held order - keep as held or release the order for fulfillment.

Settings:

Navigate to the Hold Orders tab.

 

Nav_Bar-_Hold_Orders.png

 Hold Orders

If you utilized the "hold order" option in one of the compliance rules, and an order failed a compliance rule, you will find that order in the Hold Orders page of the DRINKS App. The Shopify Orders page will also indicate if an order is in "Hold" status in the Fulfillment column.

This page allows you to decide to either keep an order in hold (fulfillment) status or release it for fulfillment.

Hold_Orders_Page.pngHold_Orders_Edit_Page.png  

 

Step 2: Activate App Embeds

 

Overview

Setting up the various product, state, and compliance settings will help ensure compliance with your orders at the time of checkout. To add compliance functionality during your customer’s entire shopping experience, you’ll need to activate DRINKS Compliance App Extensions.

There are two steps to accomplish this:

  1. Enable the App Embeds in your theme editor
  2. Add the appropriate changes to your theme files

 

Enable DRINKS for Your Store

To include DRINKS in your storefront, you must enable its App Embed within your theme:

  • From your Admin page (YourSite.myshopify.com/admin), click on the Online Store tab, then navigate to the Customize button of your Current Theme
  • From the Editor, click Theme Settings in the bottom left of your screen
  • Select the App embeds tab, Locate DRINKS App, and toggle it ON
  • Important: Click Save at the top right of your screen

 

Add DRINKS Compliance Features into Templates

 

Select Ship to State

DRINKS can add a Ship To state dropdown to your navigation should you choose to with the Display the 'shipping to state' selection in the site header Site Interaction option selected.

To determine where it will be placed, identify the proper location within sections/header.liquid (we recommend placing it adjacent to the mini cart) and add:

<div data-drinks-header-state-select></div>

Note: for the Dawn theme, here is where we recommend its placement.


       </details>
     </details-modal>
     <div data-drinks-header-state-select></div>
     {%- if shop.customer_accounts_enabled -%}
     <a href="{%- if customer -%}{{ routes.account_url }}{%- else -%}{{ routes.account_login_url }}{%- endif -%}" class="header__icon header__icon--account link focus-inset{% if section.settings.menu != blank %} small-hide{% endif %}">

This will cause a “Ship to” state dropdown to appear in the header.

If you would like to add CSS styling that better matches your store, use this CSS selector in your CSS file

div[data-drinks-header-state-select] {
       /* YOUR STYLES HERE */
}

 

Styling 

Classes are taken from the Dawn theme that Shopify recommends as a base for all Online Store 2.0 themes. Style adjustments may be accomplished by targeting those classes from your theme's css.

Product Filtering

DRINKS can disable any element that pertains to a product that is not compliant for a shopper. Products will be filtered only if all variants are non-compliant.

 

Filtering Product Listings

To filter all products represented with Dawn's default product card, you would edit snippets/card-product.liquid and change

<div class="card-wrapper underline-links-hover">

 

By adding these tags to it

data-product-id="{{card_product.id}}" data-drinks-filter

 

which will yield

<div class="card-wrapper underline-links-hover" data-product-id="{{card_product.id}}" data-drinks-filter>

 

Within that DOM element, place a new div:

<div data-drinks-filter-message></div>

 

If you would like to style the messaging to something more appropriate for your storefront, add this snippet to your CSS file and edit accordingly.

div.drinks-filter-message {
       /* YOUR STYLES HERE */
}

 

This will provide a non-blocking filter to the element – text showing that the product is unavailable, dimming the product image, and disabling the Add to Cart button.

 

Filtering Product Add to Cart Buttons:

To block interaction with the Add to Cart buttons on Dawn's default Product Display Page, you would edit sections/main-product.liquid and change

<div class="product__info-wrapper grid__item{% if settings.page_width > 1400 and section.settings.media_size == "small" %} product__info-wrapper--extra-padding{% endif %}">

 

By adding these tags to it

data-variant-id="{{ product.selected_or_first_available_variant.id}}" data-drinks-filter="blocking"

 

Which will yield

<div class="product__info-wrapper grid__item{% if settings.page_width > 1400 and section.settings.media_size == "small" %} product__info-wrapper--extra-padding{% endif %}" data-variant-id="{{ product.selected_or_first_available_variant.id}}" data-drinks-filter="blocking">

 

Within that DOM element, place a new div where you would like the product unavailability message to show:

<div data-drinks-filter-message></div>

 

If you would like to style the messaging to something more appropriate for your storefront, add this snippet to your CSS file and edit accordingly.

div.drinks-filter-message {
       /* YOUR STYLES HERE */
}

When a product is not available for that state, the following will occur: text showing that the product is unavailable, dimmed product image, and disabled Add to Cart button.

 

Checkout

You must be on a Shopify Plus plan to utilize DRINKS' checkout features. You must also have the checkout.liquid file present in the layout directory of your production theme. If you don't see it there, contact Shopify support and ask that they "enable the checkout layout." To enable DRINKS features in checkout, simply copy the below code and paste it before the closing </head> tag in your theme's layout/checkout.liquid file:

<script>
      window.drinks = window.drinks || {};

      drinks.config = {
        showDobInputInCheckout: "{{ shop.metafields.drinks.age_checkout }}",
      };
      drinks.messages = {
       "checkout-user-dob-input.label": "Date of Birth",
      };
      drinks.state = {
        checkout: {
          id: "{{ checkout.id }}",
          token: location.pathname.split("/").pop(),
          line_items: [
            {%  for line_item in checkout.line_items %}
            {
              id: {{ line_item.product.id }},
              is_subscription: {{ line_item.product.requires_selling_plan == "true" }}
            } ,

            {%  endfor %}
          ],
          attributes: [
            {% assign drinks_attribute_keys = 'gift,gift_email,gift_message,shipping_type,shipping_additional_data,customer_birthday,license,compliance-check-performed-on' | split: ',' %}
            {% for attribute in checkout.attributes %}
              {%  if drinks_attribute_keys contains attribute.first %}
                {
                  name: "{{ attribute.first  }}",
                  value: "{{ attribute.last || "" }}"
                },
              {% else %}
                {% continue %}
              {% endif %}
            {% endfor %}
          ],
          shippingAddress: {
            provinceCode: "{{ checkout.shipping_address.province_code }}"
          },
        }
      };
      drinks.html_loaded = true;
      window.dispatchEvent(new Event('drinks.html_loaded'));

      window.onload = function() {
        const drinks_cb = Math.round(new Date().getTime() / 1000);
        const drinks_script = document.createElement('script')
        drinks_script.src = `https://shop.drinks.com/extensions/{{ shop.metafields.drinks.extension_version }}/extension.js?cb=${drinks_cb}`
        drinks_script.defer = true
        drinks_script.type = 'text/javascript'
        document.body.appendChild(drinks_script);
      }
    </script>

 

Step 3: Enable DRINKS Tax Service

 

Overview

Developed in partnership with Shopify, DRINKS is integrated directly into Shopify checkout to provide real-time tax and compliance. To enable this functionality, your store must be configured to use the DRINKS tax service instead of Shopify's default tax service. Today, this is a manual process that requires a Shopify engineer to change your store's tax service and generally takes no longer than one business day.

NOTE: If you have not yet received confirmation of this change to your store's tax service, please contact us before activating the app to ensure real-time tax and compliance are enabled for your store.

 

Was this article helpful?

0 out of 0 found this helpful

Have more questions? Submit a request

Comments

0 comments

Please sign in to leave a comment.