These instructions only pertain to product catalogs and/or club sign up forms that were added to your website before October 1, 2022. If you are adding a club sign up or product catalog for the first time, follow these instructions.
IMPORTANT: Once you update the injector code, you will need to update both the Club Sign Up Form code and the Product Catalog code.
Injector v4 Code
Step 1: Remove old code
- Remove the old injector code.
Depending on your website builder, the code may be found in a few places but is typically found in the footer.
The old injector to remove will look something like the image below. - Check to make sure all instances of this code block are removed from your website before continuing.
Step 2: Add new code
- Sign in to your Vinoshipper producer portal.
- Select Account > Integrations > Vinoshipper Injector.
Here you will see an area to get your injector code. - Select the theme of your website under "Theme".
- If you have a website with a darker background enable dark mode using the toggle.
- Once those selections are done, hit the clipboard icon in the bottom right corner.
This will copy that code to your clipboard. - Navigate back to your website builder and paste this where you removed your old integration code.
NOTE: Once you update the injector code, you will need to update both the Club Sign Up Form code and the Product Catalog code.
Product Catalog
NOTE: If you update the Injector code, you will also need to update the product catalog on your website (if applicable).
Step 1: Remove old code
- Locate the product catalog page on your website.
- Remove the code that looks like
<div id="vs-winelist"></div>
Step 2: Add new code
- Sign in to your Vinoshipper producer portal.
- Select Account > Integrations > Vinoshipper Injector.
- Scroll down to the Product Catalog section.
- In the drop-down selector, choose if you want a list or card layout of the product catalog. You can also select here a toggle to separate the "Available In" widget from the rest of the product catalog if you'd like to add that somewhere else. By default, it is included as that is the most popular option.
- Click the clipboard icon in the bottom right to copy the code.
- Paste this item where you removed the old div you just deleted from your website page.
- Now your product list will be up to date.
Club Sign Up Form
NOTE: If you update the Injector code, you will also need to update the club sign up on your website (if applicable).
Step 1: Remove old code
- Locate the club sign-up page on your website.
- Remove the code that looks like
<div id="vs-wineclub-signup"></div>
Step 2: Add new code
- Sign into your Vinoshipper producer portal.
- Select Account > Integrations > Vinoshipper Injector.
- Scroll down to the Club Sign Up Form section.
- Click the clipboard icon in the bottom right to copy the code to your clipboard.
- Paste this item where you removed the old code you just deleted from your website page.
Customized Product Catalog and Club Sign Up Form
You are able to add your own custom CSS to modify certain portions of the product catalog and club sign up form on v4 to better match your website. To see some more information please see our developer documentation linked below.
Add to Cart Buttons
If you are using Vinoshipper Add to Cart buttons, you will not need to update the code for those buttons. You will just need to update the injector code to version 4.