Shopify C: Product Variants in Table App User Guide


Thank you for purchasing C: Product Variants in Table Shopify 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.

Introduction


C: Product Variants in Table App will display variants in a table format with quantity box & add to cart button.

C: Product Variants in Table allows you to list product attribute options on a product's details page in a table format with a quantity box and quick add to cart button. Quick add to cart creates positive online shopping experience for customers. Customers can select which product variant(s) they want to purchase, enter the quantity of each variant, and click add to cart to place all product variants and quantities into their shopping cart at once.


Check Live Demo Here     Watch Video Guide

Buy App


1. Click here to visit our Shopify App >> C: Product Variants in Table

2. Click on Add app button.

Pricing Details: (Click Here)

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.

Enable App

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!

No Img Available

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

No Img Available

Then just click on the arrow of theme settings header.

No Img Available

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:

No Img Available

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:

No Img Available

For Vintage Themes - App Configuration Steps:



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.

Enable App

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!

No Img Available

Step-3: 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!

 

Frontend


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
      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

Product Variants in Table Design Settings


  1. Go to Admin >> Apps >> C: Product Variants in Table >> Design Settings

  2. 1. Add to Cart button Options : Manage various options for the add to cart button design. Like:
    • Background Color
    • Text Color
    • Hover Background Color
    • Hover Text Color
    Add to Cart button Options
  3. 2. Variant Table design Options : Manage various options for the Variant Table design. Like:
    • Table heading BG color
    • Table heading text color
    • Table Border color
    • Table fonts color
    Variant Table design Options
  4. 3. Other Options : Manage various other options for the Variant Table design. Like:
    • Special Message color
    • Qty. box BG color
    • Qty. box +/- btn color
    • In stock text color
    • Out of stock text color
    • Sale price color
    Other Options
  5. 4. Cart Popup Options : Manage various options for the Cart Popup design. Like:
    • Cart popup head/foot BG colors
    • Cart popup head/foot texts color
    • View Cart btn BG color
    • View Cart btn text color
    • Continue Shop btn BG color
    • Continue Shop btn text color
    • Flying Cart BG color
    • Cart Item Count BG color
    • Cart Item Count text color
    Cart Popup Options
  6. 5. Add Custom CSS : Add a custom css for the Variant Table design. Custom Css
  7. !IMPORTANT NOTE:- It is recommended to use all app config via app dashboard rather than app block for the best App feature experience.

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


Buy Now
Faq
Support