This guide covers every available setting across all three table types: Data Table, Size Chart, and Product Catalogue. Where a setting applies only to specific types, it is clearly labeled.
🗺️ How to Open the Table Design Page
- Go to your Shopify Admin.
- Open the TablePress Size Chart & Guide app.
- From the Dashboard, find the table you want to edit.
- Click the Edit button under the Actions column.
- The Table Manipulation page will open.
- Click the “Table Design” tab at the top.
- All design and customization options will be visible. Make your changes and save.
Table Preview
The Table Preview shows you exactly how your table will look before you publish it. Any change you make in the settings is instantly reflected in the preview — no need to save and check your storefront each time.
You can switch between two modes:
- Desktop mode — see how the table looks on larger screens.
- Mobile mode — check responsiveness and usability on small screens.
Title & Description Settings
These settings control the name and description shown above your table on the storefront.
Table Name Text
Set an internal name for your table. This helps you identify it in the dashboard — it does not appear on the storefront unless you enable “Show Table Title.”
Description Text
Add or edit a short description for the table. You can also see the last modified date here.
Show Table Title Checkbox
Checkbox this on to display the table name as a visible heading above the table on your storefront.
Table Title Font Size px
Set the font size for the table title. A larger size makes the heading more prominent and easier to read.
Table Title Font Color Color
Choose the color for the table title text using the color picker.
Show Table Description Checkbox
Checkbox on to display the description text below the title on your storefront.
Table Description Font Size px
Adjust the font size of the description text shown below the title.
Table Description Font Color Color
Pick a color for the description text to match your store’s style.
Header & Footer Settings
Control the header and footer rows of your table and how they look.
Table Head Row Checkbox
When enabled, the first row of your table is treated as the header row. This also unlocks the additional header settings listed below.
Table Footer Row Checkbox
When enabled, the last row of your table is displayed as a footer. Only available when the head row option is active.
Allow Column Sorting Checkbox
Lets customers click on column headers to sort the table data in ascending or descending order.
Drag and Drop Column Checkbox
Allows customers to rearrange columns by dragging and dropping them. Requires the head row to be active.
Header Background Color Color
Set a background color for the header row. A distinct color helps the header stand out and improves the visual organization of the table.
Header Font Color Color
Choose the text color for the header cells.
Header Font Size px
Set the font size for the text inside the header cells to make it more prominent and easier to read.
Search Feature
Add a search bar so customers can quickly find what they need inside your table.
Search Feature Checkbox
Master Checkbox to enable or disable the search functionality for the table.
Search Full Width Checkbox
When enabled, the search bar stretches to the full width of the table, making it easier to spot and use.
Show Column Search Checkbox
Displays an individual search bar for each column, letting customers filter by specific fields. Requires the header row to be active.
Search Title Text
Customize the label shown above or beside the search input — for example, “Find data” or “Search products.”
Search Placeholder Text Text
The greyed-out text shown inside the search box before the customer types — for example, “Search here” or “Enter product name.”
No Records Text Text
The message shown when a search returns no results. Customize it to guide users — e.g., “No matching records found. Try a different keyword.”
Loading Records Text Text
Text displayed while the table loads data. Helps customers know the page is working — e.g., “Loading…”
Pagination Feature
Break long tables into pages so they don’t overwhelm customers.
Pagination Feature Checkbox
Master checkbox to enable or disable pagination for the table.
Pagination Per Page Number
Set the default number of rows displayed per page.
Pagination Font Size px
Set the font size for pagination controls like “Next,” “Previous,” and page numbers.
Pagination Font Color Color
Choose the text color for pagination controls for better visibility and contrast.
Pagination Background Color Color
Set a background color for the pagination area to visually separate it from the table body.
Pagination Length Change Checkbox
When enabled, customers can change the number of entries shown per page using a dropdown — e.g., 10, 25, 50.
General Feature Section
These settings control the overall layout, style, and interactivity of your table.
Hover Highlight
Hover Highlight Checkbox
When enabled, the entire row changes color when a customer hovers their cursor over it — making it easier to read across wide tables.
Hover highlight color color-picker
A color picer appear to set the hover highlight color in the table cells.
Row hover highlight Checkbox
Column hover highlight Checkbox
Cell hover highlight Checkbox
Row Hover Color Color ✦ New
A color picker appears when Row Hover Highlight is turned on. Choose any highlight color. Previously this was fixed — you can now set it freely to match your store’s branding.
Scroll & Layout
Horizontal Scroll Checkbox
Enables left-right scrolling so customers can view all columns — especially useful for wide tables on small screens.
Vertical Scroll Height & Fix Header px
Set a maximum height for the table. Once set, the table becomes vertically scrollable, and the header row stays fixed at the top while scrolling.
Table Information Checkbox
Shows a summary line below the table — e.g., “Showing 1 to 10 of 50 entries.” Helps customers understand how much data they’re viewing.
Alternating Row Colors Toggle
Applies different background colors to odd and even rows, creating a striped effect for easier readability. Two color pickers appear when this is enabled.
Styling Settings
Table Background Color Color
Set the background color of the entire table area.
Table Border Color Color
Choose the color of the lines (borders) separating cells. A well-defined border improves clarity and visual organization.
Table Border Style Select
Select the style of the cell borders — Solid, Dashed, Dotted, or None.
Cell Padding px
Add spacing inside each cell between the content and the cell edges, improving readability.
Font & Alignment
Table Data Font Family Select
Choose the font style for all cell data in the table.
Table Data Alignment Select
Set how text is aligned inside cells — Left, Center, or Right.
Table Data Font Size px
Adjust the font size for text inside the table cells.
Table Data Font Color Color
Pick the color for all cell text in the table body.
Word Spacing of Table Data px
Control the spacing between words inside cells. Leave at 0 for default spacing, or increase it for a more open, airy appearance.
Button Settings ✦ New
Control the appearance of action buttons inside your table — such as “Add to Cart” or “View Size Chart” buttons.
Border Radius px ✦ New
Set how rounded the button corners are. A value of 0 gives sharp square corners. A high value creates a fully rounded “pill” shape.
- Minimum:
0px— sharp square corners - Maximum: Fully rounded pill shape
- Default:
0px
Border Width px ✦ New Product Catalogue
Set the thickness of the button’s border. Works alongside the border color and border style settings. A maximum limit is enforced to prevent layout distortion.
Button Width Select ✦ New Product Catalogue
Choose how the button sizes itself across all table rows:
- Auto (Default) — Button width adjusts to fit its content (icon or text)
- Fixed — A width input (px) appears; all buttons get the same fixed width for a uniform look
Button Icon Select
Choose an icon to display inside your button from the available icon options.
Button Text Font Family Select
Set the font style for the text displayed inside buttons.
Button Font Size px
Control how large the button label text appears.
Button Text Color Color
Choose the color of the button’s text or label.
Button Background Color Color
Set the fill color of the button.
Button Border Color Color
Choose the color of the button’s border outline.
Button Border Style Select
Select the style of the button border — Solid, Dashed, Dotted, or Unset.
On Hover Button Background Color Color
Set the background color the button changes to when a customer hovers over it.
On Hover Button Border Color Color
Set the border color the button changes to on hover.
Vertical & Horizontal Padding px
Control the spacing inside the button between the text/icon and the button edges. More padding = a larger, more tappable button.
Quantity Picker ✦ New
Quantity Selector Size Select ✦ New
Choose how large the quantity input field appears in your product catalogue table. The width adjusts dynamically so even 2-digit numbers display cleanly without breaking the row layout.
- Small — Compact, ideal for tables with limited row space
- Medium — A balanced mid-size option
- Large (Default) — The most prominent size, ideal for desktop-first layouts
Quantity Picker Border Radius px
Set the corner roundness of the quantity picker box.
Quantity Picker Border Width px
Control the thickness of the picker’s border.
Quantity Picker Border Color Color
Choose the color of the quantity picker’s border.
Quantity Picker Border Style Select
Select a border style — Solid, Dashed, Dotted, or Unset.
Modal Settings
When your size chart is set to open in a popup (modal), these settings control how that popup looks.
Animation Type Select
Choose how the modal appears — options include Fade In, Slide, and more.
Modal Border Radius px
Set how rounded the popup window’s corners are.
Modal Background Color Color
Set the background color of the modal popup.
Header Font Size / Font Color / Background Color
Customize the appearance of the modal’s header section — including text size, text color, and background fill.
Footer Font Size / Font Color / Background Color
Customize the appearance of the modal’s footer section.
Logo Border Radius px
Adjust the corner shape of any logo displayed inside the modal.
Logo Visibility Select
Toggle the store logo inside the modal on or off.
Modal Border Style Select
Set the border style for the modal window — Solid, Dashed, Dotted, or Unset.
Custom CSS & Custom Commands
Custom CSS Code ✦ Now in Product Catalogue
Write your own CSS code to apply additional styling to the table — custom fonts, spacing tweaks, unique visual effects, and more.
Custom Commands Code
Add extra parameters from the DataTables.net library to the JavaScript initialization call. This is for developers who need advanced data table behavior not available in the settings panel.