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.
Step 1: Enable the app from app General Settings by following the instructions below.
Go to Apps → C: Product Variants in Table → General Settings and enable the app as shown in the screenshot below.
Step 2: Enable the app embed for your theme by following the instructions below.
Go to Online Store → Themes → Current Theme → Customize → Theme Settings → App Embeds and enable the C: Product Variants in Table embed as shown in the screenshot below.
Step 3: Open your theme customizer and navigate to the product page. From there, add the “Product Variants Table” app block inside any section (e.g., Product information section). You can also drag and
drop the block to adjust its position as shown below
Note: If you change your theme, you’ll need to reconfigure the C: Product Variants in Table app for the new theme by repeating the steps listed above.
Using a Vintage Theme? – How to Manually Add the App Block
If you are using a vintage theme, app blocks are not supported. You will need to manually add our Product Variant Table shortcode inside your theme’s product template file.
Copy the shortcode provided below and paste it inside the product template — preferably below the product price div (or wherever you want the Variant Table to appear on your product page).
Click on the Save button in the top-right corner to save the changes.
General Settings
Step-1: Go to Admin >> Apps >> C: Product Variants in Table >> General Settings
Step-2: Now, you can see the General Settings section.
This section allows you to control how the Variant Table behaves, how it appears on your store, and how add-to-cart, stock, and pricing features function.
1. App Behavior & Status
Manage app activation and control where the app should appear.
Enable App
Turn ON this option to activate the app on your storefront. Without enabling it, the variant table won’t display.
Show Table After Login
Display the Variant Table only for logged-in customers.
Disable App on Products
Add a disable_pvt tag in your Shopify product settings to hide the variant table for specific products.
2. Product Display Settings
Manage how product information appears in the variant table.
Show SKU
Enable this option to display Stock Keeping Unit (SKU) in the variant table, useful for identifying items by inventory code.
Show Compare Price
Display both the original and discounted prices.
Show Product Title
Show the product title above each variant.
Display Currency with Code
Include currency code (e.g., USD, EUR) beside prices.
Show Variant Images in Table
Enable to show variant images.
Product Column Name
Customize column name for product variant details header.
SKU Name
Rename the SKU name.
Price Column Name
Rename the price column header.
3. Stock & Availability Settings
Control how stock quantities and availability messages are shown.
Show Out of Stock Variants
Enable to Display out-of-stock variants.
Hide Quantity Column
Hides the quantity column from the variant table to simplify the layout or when quantity selection is not required.
Show In Stock Text
Display “In Stock” text when the item is available.
In Stock Over Quantity
Sets a limit for displaying stock quantity. For example, if the available stock exceeds the set value (e.g., 99), it will display as “In stock: 99+”.
Preset/Default Quantity
Sets the default quantity value in the quantity input box (e.g., 1 means “1” is prefilled automatically).
Quantity Column Name
Customize the name of the quantity column.
Stock Alert Text
Set a custom stock alert message to inform customers about limited stock availability.
You can use %s in your message as a placeholder for the current inventory quantity. Example:We have maximum %s items in stock will display as “We have maximum 5 items in stock” when only 5 items are available.
In Stock Text / Out of Stock Text
Define custom text for availability status.
4. Cart & Button Settings
Manage add-to-cart button behavior and labels.
Redirect to Cart Page After Add to Cart
Automatically redirect users to the cart page after adding items.
Enable Single Add to Cart
Enable single variant add-to-cart functionality for quick purchases.
Display Multi Add to Cart Button
Choose where to display the multi add-to-cart button on the variant table — at the Top, Bottom, Both, or Hide it completely.
Bulk Add to Cart Text
Customize the label for the multi add-to-cart button.
Single Add to Cart Text
Customize the label for the single add-to-cart button.
Special Message
Display a custom message above the variant table to highlight important information or promotions.
Adding Button Label / Added Button Label / Thank You Button Label / Add More Button Label
Customize the button texts shown during each add-to-cart action step.
5. Cart Popup Settings
Manage floating cart and popup messages that appear after items are added to the cart.
Show Floating Cart
Enable or disable the floating mini-cart button that appears on the right side of the product page. When clicked, it opens the cart popup for a quick view of added items.
Modal Header Text
Customize the title displayed at the top of the cart popup (e.g., “Your cart has %s items”). The %s will automatically be replaced with the total number of items in the cart.
Modal Subtotal Text
Define the label for the subtotal section inside the popup.
View Cart Button Text
Customize the label for the “View Cart” button shown in the popup.
Continue Shopping Button Text
Customize the label for the “Continue Shopping” button to encourage further browsing.
6. Visibility Settings
Hide or customize default Shopify elements that you don’t want to display when using the app’s custom variant table or cart functionality.
Hide Quantity Box
Hide Shopify’s default quantity input field to avoid duplicate quantity controls.
Quantity Selector
Enter the class or ID selector for the default quantity box if you want to hide it using CSS.
Hide Variant Dropdowns
Hide Shopify’s default variant dropdowns to prevent duplication with the app’s variant table options.
Variant Dropdown Selector
Define the class or ID selector for the default variant dropdown container in your theme.
Hide Add to Cart Button
Hide Shopify’s default “Add to Cart” button to prevent multiple add-to-cart options appearing.
Add to Cart Button Selector
Specify the class or ID selector for the default add-to-cart button container in your theme.
Show a 'Call for Price' message instead of product prices. When this feature is active, the product price, Add to Cart button, and quantity boxes are automatically hidden from the product variants table.
Enable Call for Price
Activate this feature to replace product prices with a "Call for Price" message. When enabled, it automatically hides the product Price, Add to Cart button, and
Quantity box from the variants table.
Call for Price Text
Customize the text shown in place of the product price (e.g., “Call for Price”).
Phone Number
Enter the phone number to display next to the “Call for Price” text for customer inquiries.
💡 Tip: To hide the quantity column, go to Stock & Availability Settings and enable Hide Quantity Column.
Find Selectors for Quantity Box, Add to Cart Button, and Variant Dropdown
Our app relies on your store’s theme structure to function properly. In most cases, it automatically detects the required elements, but if your theme uses custom structures, you may need to configure these selectors manually.
Below are the three key selectors you can set up.
(a) Quantity Selector:
This selector identifies your product’s Quantity Box for multi-product actions. Enter the class or ID name of your quantity container (for example: .quantity-wrapper).
Example:
- For a class, add: .quantity-wrapper
- For an ID, add: #quantity-wrapper
How to find it:
1. Right-click on the Quantity Box and select Inspect.
2. Note the class or ID name of the container.
3. Add it in the app settings field.
(b) Variant Dropdown Selector:
This selector allows the app to recognize your product Variant Dropdown. Enter the class or ID name of your variant dropdown container (for example: .selector-wrapper).
Example:
- For a class, add: .selector-wrapper
- For an ID, add: #selector-wrapper
How to find it:
1. Right-click on the Variant Dropdown on your product page and select Inspect.
2. Identify the container’s class or ID name.
3. Enter that name into the app settings field.
(c) Add to Cart Button Selector:
This selector helps the app identify your store’s Add to Cart button. Enter the class or ID name of your Add to Cart button container (for example: #AddToCart-product-template).
Example:
- For a class, add: .AddToCart-product-template
- For an ID, add: #AddToCart-product-template
How to find it:
1. Go to your product page.
2. Right-click on the Add to Cart button and select Inspect.
3. Check for the HTML element’s class or ID.
4. Enter it in the app settings field.
Note: If you’re unsure which selector to use, please contact your theme developer or our support team. Correct selectors ensure smooth integration between the app and your theme.
Design Settings
Step-1: Go to Admin >> Apps >> C: Product Variants in Table >> Design Settings
Step-2: Now, you can see the Design Settings section.
This section allows you to fully customize the appearance of your Variant Table and Cart elements. You can set button colors, table styles, quantity box visuals, and popup cart themes to match your store’s branding and improve
user experience.
1. Add to Cart Button & Message Colors
Customize the look and feel of your Add to Cart button and related messages to match your store’s branding. These options let you control background, text, and hover colors for better visual consistency.
Add to Cart - Background Color:
Set the primary background color for the Add to Cart button.
Add to Cart - Text Color:
Define the text color of the Add to Cart button for normal state.
Add to Cart - Hover Background Color:
Choose a background color that appears when a customer hovers over the Add to Cart button.
Add to Cart - Hover Text Color:
Set the text color for the button when hovered to create a clear contrast.
Special Message Text Color:
Adjust the text color of special messages displayed above table or near the Multi Add to Cart button (e.g., low stock alerts or promotional notes).
2. Variant Table Colors
Style your variant table to make it visually appealing and easy to read. These color settings let you control table header, border, and text appearance for product variant listings.
Table Header Background Color:
Choose the background color for the header row of your variant table.
Table Header Text Color:
Define the text color used in the table header for clarity and contrast.
Table Border Color:
Set the border color between table rows and columns to maintain a clean layout.
Table Font Color:
Adjust the text color for product information displayed in the table rows.
3. Quantity Box, Stock & Price Colors
Manage how quantity selectors, stock indicators, and price details appear. Use these settings to make important information—like stock status or sale prices—stand out effectively.
Quantity Box Background Color:
Set the background color for the quantity input field or box.
Quantity Box Button/Text Color:
Customize the color of the text or buttons within the quantity box.
In-Stock Text Color:
Define a color for in-stock product text, typically green to indicate availability.
Out-of-Stock Text Color:
Choose a color for out-of-stock text, usually red to signal unavailability.
Sale Price Text Color:
Set a distinct color for discounted or sale prices to attract attention.
4. Popup & Cart Colors
Control the design of your popup cart and related buttons to ensure they align with your store’s theme. Adjust header, footer, and button colors to create a seamless shopping experience.
Cart Popup Header/Footer Background Color:
Set the background color for the popup cart’s header and footer areas.
Cart Popup Header/Footer Text Color:
Define the text color used in the popup’s header and footer sections.
View Cart Button Background Color:
Choose a background color for the “View Cart” button inside the popup.
View Cart Button Text Color:
Set the text color for the “View Cart” button.
Continue Shopping Button Background Color:
Adjust the background color of the “Continue Shopping” button in the popup.
Continue Shopping Button Text Color:
Define the text color of the “Continue Shopping” button.
Floating Cart Background Color:
Set the background color for the floating cart icon or section.
Cart Item Count Background Color:
Choose a background color for the small count badge showing the number of items in the cart.
Cart Item Count Text Color:
Define the text color inside the cart item count badge.
Add Custom CSS
Want to apply your own custom CSS styling for the app?
Go to Admin >> Apps >> C: Product Variants in Table >> Design Settings.
Scroll down to the bottom of the page. You’ll find the Add Custom CSS section.
In this section, you can directly write your own CSS code to override the app’s default styles. This allows you to match the app’s appearance perfectly with your store’s theme design.
Example:
div.modal-body {
background-color: #027f029c;
}
After adding your custom CSS, click on the Save button to apply your changes.
Language Translation
Step-1: Go to Admin >> Apps >> C: Product Variants in Table >> Language Translation
Step-2: Now, select Language from Translation Settings.
Step-3: Fill all field for particular language and save it
The Language Translation section allows you to translate static text and labels used in the Product Variants in Table interface into different languages. This helps store owners provide a localized experience to
customers based on their preferred language.
1. Language Selector
Use the dropdown menu (e.g., Translating Spanish) to select the language you want to translate. Once selected, all editable text fields will display reference text in English and editable translation fields for
the selected language.
2. Translation Table
The table consists of three main columns for easy translation management:
Field Name
Displays the internal name used in the system. These are primarily for reference and should not be changed.
Reference (English)
Shows the default English text that appears in the app. This helps you understand what each field represents.
Translation (Selected Language)
Editable text boxes where you can enter translations for each English term in the selected language (e.g., “Variante”, “Precios” for Spanish).
4. Save Button
After entering or modifying translations, click the Save button to store your changes. Translations are saved per language and automatically applied to the storefront interface when that language is active.
5. Key Notes
Each language has its own set of saved translations.
Default English text is used if a translation is left empty.
You can update translations at any time without affecting other settings.
Translations will reflect instantly in the frontend once saved.
Tip: Use this feature to provide a seamless multilingual experience for your global customers by translating key interface elements into their native language.
