Shopify C: Product Variants in Table App User Guide

• App Version: 1.0.0
• Our Support Email: supportshpfy@capacitywebsolutions.com

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: supportshpfy@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.

C: Product Variants in Table App Settings

1. Go to Admin >> Apps >> C: 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
     
   • Show table after Customer logged in
   • Show/Hide "In Stock" text
   • In stock over "Quantity" value
     
   • Default "Quantity" (table variant`s default "Qty.")
     
   • 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
     
   • 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.)
     
3.  
4. 2. General Texts Block: Manage various text inputs in different languages for the front end.
5. 
6.  
7. 3. Hide Elements Block: Manage to hide various inputs for your custom theme.
8. 
9. 
   


10. (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".


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


12. 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.
13. 
    


14. (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".


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


16. 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.
17. 
    


18. (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".


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


20. 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.
21. 
    
22.  
23. 4. Hide Price ['Call for Price'] Block: You can hide price for table variants and show "Call for Price" label with phone number.
    

Installation Steps:

Manual Installation Steps for "Vintage theme":

Show “Variant Table” on Product Details Page:

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

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!

 Copy to Clipboard
{% comment %} Do not edit - Start of Multi Variant Cart App {% endcomment %} {% if template.name == "product" %} {% unless product.has_only_default_variant %} {% capture the_snippet_content%} {% include "cws_variant_table" %} {% endcapture %} {% unless the_snippet_content contains "Liquid error" %} {% include "cws_variant_table" %} {% endunless %} {% endunless %} {% endif %} {% comment %} Do not edit - End of Multi Variant Cart App {% endcomment %}

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!

 Copy to Clipboard
{% comment %} Do not edit - Start of Multi Variant Cart Popup {% endcomment %} {% if template.name == "product" %} {% unless product.has_only_default_variant %} {% capture the_modal_content %} {% include "cws_cart_popup" %} {% endcapture %} {% unless the_modal_content contains "Liquid error" %} {% include "cws_cart_popup" %} {% endunless %} {% endunless %} {% endif %} {% comment %} Do not edit - End of Multi Variant Cart Popup {% endcomment %}

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!

 Copy to Clipboard
{% comment %} Start Variant Table short code {% endcomment %} {% unless product.has_only_default_variant %} <div id="cws_var_table"></div> {% endunless %} {% comment %} Ended Variant Table short code {% endcomment %}

App Configuration Steps for OS 2.0 Themes:

Show "Variant Table" on Product details page:

Watch Video Guide (click here)

Step-1: Go to General Settings Tab and set Enable App as Yes then click on "Save" button.

Step-2: Please open live theme customizer >> theme settings section then after please follow below screenshot and save your changes at last by click on "save" button at top right corner!

Step-3: Then go to product page of your theme from theme customizer section just by follow below screenshot:

Then just click on the arrow of theme settings header.

Step-4: Now, you can see product details page contents in your theme customizer and you can add our App as an app block to your theme.

NOTE: You can add app block (Variants table) inside any section for e.g. "Product information section" and alter Variants table block position by drag and drop and set it wherever you want to display. Please have a look to below screenshot:

OR

You can add app block (Variants table) as a section. So, it will spans out like another theme's section. Please see below screenshot to get more idea:

How to do App Code Uninstallation manually from "Vintage Theme"?

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 “C: 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
2. 
   
   
   

Customer Support

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

Please add our email: supportshpfy@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

• PHP
• Mysqli
• Angular JS
• jQuery Library
• Shopify API
• Shopify Theme Liquid