Product Customizer & Bundle Builder: Collecting Customization Information with Table Options

The Table option in the Option designer allows merchants to collect structured, multi-field customization information directly on the product page. This option is ideal for industries that require customers to enter multiple related values in a clear, grid-based format—such as eyewear prescriptions, custom apparel sizing, personalized gifts, and printing services.

By organizing inputs into rows and columns, the Table option helps reduce errors, improves data accuracy, and ensures merchants receive all required customization details before fulfillment. 

Overview: What Is the Table Option?

The Table option is a custom product element that displays a table on the product details page, allowing customers to enter or select values for each cell.

You can use the Table option when:

• Customers need to provide multiple related values at once
• Input must follow a structured format
• Accuracy and completeness of customization data are critical

Depending on your settings, customers can either manually enter values or select values from dropdown lists.

Adding a Table Option

In the option designer for custom products, you can add a Table option and configure its basic settings: 

1. From the customizable elements, select Table.

   

2. On the configuration page, configure the following settings:

   • Title (visible to customers): Enter the name of the table as it appears on the product page.
   • Notes: Provide instructions or explanations to help customers complete the table correctly.
   • Product requires custom element: Enable this option to make the table mandatory.
   • Additional fee: Set an extra charge for this customization, if applicable.

   

Once completed, continue configuring the input mode and table structure based on how you want customers to provide their information.

Selecting an Input Mode

The Input mode determines how customers provide values in the table. You can choose one of the following modes:

• Manual input: Customers manually type values into each table cell.
• Dropdown: Customers select values from predefined dropdown lists in each cell.

After selecting an input mode, continue configuring the table structure based on the selected mode.

Configuring the Table Structure (Manual Input)

When Input mode is set to Manual input, you define the table layout and headers:

1. In Input mode, select Manual input.

   

2. Under Row and Column, enter the number of rows and columns customers need to fill in.

   

3. In the Header area:

   • Enter column header text for the top row.
   • Enter row header text for the left column.

   

4. Review the Product details preview panel on the right to confirm the table layout.

   

5. Click Save and apply to apply the changes.

Configuring the Table Structure (Dropdown Options)

When Input mode is set to Dropdown, you can control header visibility and configure dropdown values at the cell level.

Step 1: Configure Headers

To configure the table headers, follow these steps:

1. In Input mode, select Dropdown.

   

2. Under Cell configuration, choose whether to display Row header and/or List header.

   

   Tip: If your table is long, you can hide row or column headers and add the header labels as the default dropdown options. This helps customers understand what to select while keeping the table clean and easy to read.

Step 2: Manage Rows and Columns

Define header text and adjust the table structure using the available table controls:

• Enter header text where applicable.

  

• Click the table controls to:

  • Add rows (above or below) or columns (left or right)
  • Delete rows or columns
  • Reorder rows or columns

  

  Tip: You can also add a row or column by hovering between two rows or columns and clicking the + icon that appears.

Step 3: Configure Dropdown Values

Configure the selectable values for each cell to guide customers when filling in the table:

1. Click the cell you want to configure.

2. In the pop-up window, you can configure dropdown values in the following ways:

   • Manually add dropdown options and define the value for each option.
   • Select Common Options to quickly apply industry-specific preset values, which are automatically populated to save configuration time.
   • (Optional) Click the clock icon to set a default option.
   • (Optional) Click the trash bin icon to remove unused options.
   • (Optional) Drag the drag handle next to an option to reorder the options.

   

Managing Table Options in Bulk (Dropdown Options)

To manage dropdown table configurations more efficiently, you can use the following features to reuse and import dropdown option data.

Copy and Paste Dropdown Options

Hover over a cell, then:

• Use Copy all options to duplicate dropdown values from one cell.
• Use Paste all options to apply them to other cells.

Import or Export Table Configuration

Use the Import Table or Export Table options to quickly update or reuse table configurations:

• Import table: Upload a file to overwrite the current table configuration. For first-time uploads, you can download the provided template and fill in the table data according to the required format before uploading.
• Export table: Download the current configuration for reuse or backup.

Customizing Table and Text Styles (Dropdown Options)

To better match your store’s design and improve readability for customers, you can customize the visual styles of the table and its text.

Customizing Table Style

You can click Custom Table Style to adjust the table’s appearance to align with your storefront theme, including:

• Table background and border colors
• Row header and column header colors
• Cell padding

These settings help ensure the table is visually clear and consistent with the overall style of the product page.

Customizing Text Style

You can also click Text Style customize how text is displayed in table headers and cells, such as:

• Font, size, and weight
• Text alignment
• Uploading and using custom fonts to match your store’s brand style

Adjusting text styles can significantly improve readability, especially for tables with many rows, columns, or detailed values.

Previewing and Applying the Table

Before saving, always verify the customer experience.

1. Review the Product details preview panel to confirm:

   • Table layout
   • Dropdown behavior
   • Required fields

   

2. Once confirmed, click Save and activate to activate the table option.

Notes and Best Practices

• Use Product requires custom element for critical customization data.
• Keep headers short and descriptive to avoid confusion.
• Use dropdown options whenever possible to reduce input errors.
• For complex tables, consider using Import table to manage configurations efficiently.