On this page
Add injector code
IMPORTANT: The injector code must be added if you are going to use the product catalog, add to cart buttons, or club sign up form. It only has to be added one time, even if you are using both product catalog/add to cart buttons and the club sign up form.
- Sign in to Your Account.
- Go to "Account" - "Integrations".
- Under Vinoshipper Tools click on Vinoshipper Injector.
- Here you will see three different sections: Injector Code, Product Sales, and Sign Up Form.
- 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.
- Click on the box in the bottom right-hand corner in the blue circle. This will copy that section of code to your clipboard.
- Navigate to your Shopify website.
- On the left side of the screen, you will have the navigation bar. Select the Online Store and go to Themes.
- Towards the middle of the page, you will see a drop-down menu called Actions. Click here and click on the edit code.
- You will see many different Layouts and Templates. Navigate to theme.liquid.
- Once you have this selected scroll down to the very bottom portion. Paste that portion of code you copied from the Vinoshipper website. Place this code above the /body and /html tags that are at the very bottom.
- Click Save.
Product sales
Product catalog
- Once the injector code has been added, scroll down to the section called "Product Sales".
- Use the drop-down selector to choose either a list or cards layout type. You can also toggle the "Available In" widget on or off. Turning it off will allow you to add it separately from the product catalog. By default, it is included as that is the most popular option.
- Once you have made your selection click on the box in the bottom right-hand corner in the blue circle.
- Go back to your Shopify hosted webpage.
- Select the Online Store from the left-hand side and select Pages.
- Choose the page where you would like to have the Vinoshipper product list appear. This will bring you to the page's editor.
Example: Below they chose to place this on the page named "Test Product Catalog". - Click on the button that looks like this <>. If you hover over it, it says "Show HTML".
- Paste the portion of code that looks like <div class="vs-products"></div>.
- Save the page. When you view that page now you will see your product catalog appear on that webpage.
Add to cart
Use these instructions to use the "Add to Cart" button on your site. This is best if you would like full control of the design layout. You will choose between this and the product catalog, you do not need both.
- Once the injector code has been added to your website, scroll down to the section labeled "Add to Cart Button".
- Use the drop-down selector to choose the product you would like to create an add to cart button for. Use the second drop-down selector to choose the product descriptor you would like to have for that button.
- Once you have made your selection click on the box in the bottom right-hand corner in the blue circle. This will copy that unique code for that specific products add to cart button to your clipboard.
- Paste this code wherever you would like the add to cart button on your website.
- Repeat these steps for each product.
Club sign up form
- Once the injector code has been added to your website, scroll down to the section labeled "Club Sign Up Form".
- Click on the box in the bottom right-hand corner in the blue circle. This will copy that unique code for that club sign up form to your clipboard.
- Go back to your Shopify hosted webpage.
- Select the Online Store from the left-hand side and select Pages.
- Choose the page where you would like to have the Vinoshipper club sign up form to appear. This will bring you to the page's editor.
Example: Below they chose to place this on the page named "Test Product Catalog". - Click on the button that looks like this <>. If you hover over it, it says "Show HTML".
- Paste the portion of code that looks like <div class="vs-club-registration"></div>.
- Save the page. When you view that page now you will see your club sign up form appear on that webpage.
Important notes
- If you integrate your product catalog (or add to cart buttons) and the sign up form onto the same website you will only have one set of the same code in the Footer section. Do not add multiples of the Injector Code to the footer of your website.
- Reveal sections on scroll must be turned off. We do not support this Shopify feature at this time. If it is turned on, your Shopify pages will not display correctly.