The add to cart button is a tool that lets you use our full-featured shopping cart while giving you full control of how you share your products with your customers. It includes quantity selection and an add to cart button for each product along with a slide-out shopping cart.

Add the Injector Code

1. Sign into your Vinoshipper account.
2. Go to "Account" > "Integrations".
3. Under "Vinoshipper Tools", click "Vinoshipper Injector".
   
   • Here you will see three different sections: Injector Code, Product Sales, and Sign Up Form.
4. Select the Theme you would like to have from the drop-down selector tool. If you have a website with a darker background enable dark mode using the toggle.
   
   
5. 
6. Click on the box in the bottom right corner in the blue circle. This will copy that section of code to your clipboard.
7. Paste this code onto your website in the appropriate section in the HTML. See Integration Overview for instructions per platform.

Adding the Add to Cart buttons

1. Sign into your Vinoshipper account.
2. Go to "Account" > "Integrations".
3. Under "Vinoshipper Tools", click "Vinoshipper Injector".
4. Scroll down to the "Add to Cart Button" section under "Product Sales". Here you can create the code for each individual product's button.
   
5. Select the product from the first dropdown and select the descriptor (bottles, cans, growlers, etc) from the second dropdown.
6. Use the toggle to decide if you would like the quantity selector and add to cart button to be horizontally or vertically stacked.
   
7. Copy the given line of code using the blue button on the right side of the code.
   
   NOTE: If you have products hidden on your default cart they will not appear as options to select from the drop-down selector. If you wish to keep your products marked as "hidden" on the default cart you can manually create the add to cart buttons for your different products by filling in the data for your specific account/product ID.

   <div class="vs-add-to-cart" data-account-id="xxxx" data-vs-product-id="zzzz" data-vs-product-units="Bottles"></div>

8. Add the Add to Cart <div> on the page where you want the form element to display. 
9. Repeat this for each product.

Color options

The Add to Cart button color will be determined by the theme you select for the Injector Code.

For example: Setting theme: "red" in the Injector Code will make all Add To Cart buttons red. "purple-dark" will make the buttons purple and the quantity selector work best in dark background pages.

Styling with CSS

You can add styles in the head of the HTML page you have the add to cart button location on. In this example, the rounded edges of the buttons will become hard edges.

.vs-add-to-cart {
  --vs-atc-button-border-radius: 0;
}

If you want to remove ALL Vinoshipper provided styles to the Add-To-Cart button, set the following configuration variable in the Vinoshipper Injector code:

window.Vinoshipper.init(000, {
  // Add the following line to disable Add To Cart style:
  addToCartStyle: false,
});

Example

Below are some links to some Vinoshipper producers that are using the Add to Cart buttons.

1. https://www.lubanziwines.com/order
2. https://spadeandsparrows.com/collections/our-wines
3. https://westandwilder.com/shop

Other resources