Shopify Product Variants in Table User Guide


Thank you for purchasing Product Variants in Table App. If you have any difficulty with this App or you find an issue, please feel free to send us a message: shopify@capacitywebsolutions.com

Below you will find the detailed documentation on how to use our App and we wish you have a great experience with our Shopify App.

Product Variants in Table App Front-end


Product Variants in Table Settings


  1. Go to Admin >> Apps >> Product Variants in Table >> General Settings

  2. 1. General Options Block: Manage various options for the front-end. From here, You can:
    • Enable/Disable App
    • Show/Hide out of stock variants
    • Show/Hide SKU
    • Show/Hide compare price
    • Show/Hide product title
    • Show/Hide floating cart
      Floating Cart
    • Show table after Customer logged in
    • Show/Hide "In Stock" text
    • In stock over "Quantity" value
      In stock over 'Quantity' value
    • Default "Quantity" (table variant`s default "Qty.")
      Default 'Quantity'
    • Redirect to Cart Page After Bulk Add to Cart
    • Show Variant Images in Table
    • Variant Image Resolution (Enter shopify provided image resolution values for eg. small, large, medium, grande, 400x400, 400x, x400)
    • Enable Single Add to Cart
      Enable Single Add to Cart
    • Display Price with Currency Code
    • Multi Add to Cart Button Position
    • Disable App on specific products (To Disable App on specific products, You'll need to enter "disable_pvt" tag in that product.) Disable App on specific products
  3.  
  4. 2. General Texts Block: Manage various text inputs in different languages for the front end.
  5. General Texts Block
  6.  
  7. 3. Hide Elements Block: Manage to hide various inputs for your custom theme.
  8. Hide Elements Block


  9. (a) Add to Cart Button Selector: Set your store add to cart button element "class-name" or "id-name" according to your theme (for Eg: #AddToCart-product-template). If your add to cart button container have "AddToCart-product-template" class then please add ".AddToCart-product-template" and if your Add to cart button container have "AddToCart-product-template" id then please add "#AddToCart-product-template".

  10. How a merchant can find the Add to Cart Button selector for their theme?

  11. Our app functionality is closely connected with your theme HTML structure, so we did our best to test it on different themes and make sure app will work without any manual configuration. But there's always a chance that your theme have some unique elements that will require a bit custom setup - Add to Cart Button selector allow us to point your add to cart button if app failed to find it automatically. For find Add to Cart selector right click on Add to Cart and inspect it, Please check below screenshot.
    Please check below screenshot.
  12. Add to Cart Selector

  13. (b) Variant Dropdown Selector: Set your store variant dropdown selector "class-name" or "id-name" according to your theme (for Eg: .selector-wrapper). If your variant dropdown container have selector-wrapper class then please add ".selector-wrapper" and if your variant dropdown container have selector-wrapper id then please add "#selector-wrapper".

  14. How a merchant can find the Variant selector for their theme?

  15. Our app functionality is closely connected with your theme HTML structure, so we did our best to test it on different themes and make sure app will work without any manual configuration. But there's always a chance that your theme have some unique elements that will require a bit custom setup - Variant Dropdown selector allow us to point your variant dropdown selector if app failed to find it automatically. For find Variant dropdown selector right click on Variant Dropdown and inspect it, Please check below screenshot.
    Please check below screenshot.
  16. Variant Selector

  17. (c) Quantity Selector: Set your store quantity selector "class-name" or "id-name" according to your theme (for Eg: .quantity-wrapper). If your quantity selector container have quantity-wrapper class then please add ".quantity-wrapper" and if your quantity selector container have quantity-wrapper id then please add "#quantity-wrapper".

  18. How a merchant can find the Quantity selector for their theme?

  19. Our app functionality is closely connected with your theme HTML structure, so we did our best to test it on different themes and make sure app will work without any manual configuration. But there's always a chance that your theme have some unique elements that will require a bit custom setup - Quantity selector allow us to point your product quantity selector if app failed to find it automatically. For find quantity selector right click on Quantity box and inspect it, Please check below screenshot.
    Please check below screenshot.
  20. Quantity Selector
  21.  
  22. 4. Hide Price ['Call for Price'] Block: You can hide price for table variants and show "Call for Price" label with phone number.
    Hide Price ['Call for Price'] Block

App Code Installation


Show “Variant Table” on Product Details Page

Step-1: Go to Admin >> Apps >> Product Variants in Table >> General Settings then Enable App and click on "Save" button.
Enable App

Step-2: Open theme.liquid file.

Step-3: Paste below shortcode before the closing head in file:Like below screenshot to load “Variant Table” JS. Then click on save button in top right corner to save the file!

 


Step-4: Paste below shortcode before the closing body in file:Like below screenshot to load “Cart Modal Popup”. Then click on save button in top right corner to save the file!

 


>> IF you`re using Online Store 2.0 Shopify theme then please follow below listed step.

Step-5: First please open Templates/product.json file. From which, you`ll get an idea about actual section file that is being used to render product details page contents on the front-end. In this file, you can see there is a "sections" object in which you can see "main" key and it's type such as: "main-product" (Depending on your theme, exact template may differ). Here, Section "Type" value is actual section file name i.e. "main-product" ("sections/main-product.liquid"). So, Please open sections folder's file i.e. "main-product.liquid". Please have a look to below screenshot to get an idea >>

Then please paste app's shortcode inside "sections/main-product.liquid" file before this tag </product-form> OR you can paste it wherever you want to display 'Variants table'. Please have a look to below screenshot to get an idea >>

!IMPORTANT NOTE: If you`re not sure for how to perform above step for your OS 2.0 Theme then you can drop us one email at shopify@capacitywebsolutions.com.

>> ELSE follow below step for your older Shopify theme.

Step-5: Open sections/product-template.liquid file. Paste below shortcode:Like below screenshot to show “Variant Table” in product page after the product price div otherwise you can place it whichever place you want it to appear. Then click on save button in top right corner to save the file!

 

How to do App Code Uninstallation manually?


After App Uninstalled by Store Owner, Shopify does not permit us to access files on your store. So, You have to remove App code files manually from your Active Theme or Any Theme in which You had previously installed “Product Variants in Table” App Files.

 Watch Manual Uninstallation Guide

  1. Step-1: From your Shopify admin, click on Online Store >> Themes and Select your Current Active Theme and Delete 9 files one by one:
    • Folder: snippets & Filename: cws_variant_table.liquid
    • Folder: snippets & Filename: cws_cart_popup.liquid
    • Folder: assets & Filename: variant_table.css
    • Folder: assets & Filename: cws_variant_table.js
    • Folder: assets & Filename: cws_variant_install.js
    • Folder: assets & Filename: cws_variant_init.js
    • Folder: assets & Filename: variant-loader.gif
    • Folder: assets & Filename: cws-variant-cart.png
    • Folder: assets & Filename: variant_no_img.png



Customer Support


If you have any questions, please do not hesitate to contact us at shopify@capacitywebsolutions.com.We are happy to help!

Please add our email: shopify@capacitywebsolutions.com to your address book to ensure our response email isn’t marked as spam mail.

We will try our best to reply your emails as soon as possible , except weekends and National Holidays.

Thank you.
Capacity Web Solutions Team

Credits