AI Overview
The Table Design section is where you control how your table looks and behaves on your storefront. You can change colors, fonts, layout, search options, and much more — all from a single place. 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.
[Insert Image: Table Preview section showing desktop and mobile toggle with a live table preview]
Title & Description Settings
These settings control the name and description shown above your table on the storefront.Table Name TextSet 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 TextAdd or edit a short description for the table. You can also see the last modified date here.Show Table Title CheckboxCheckbox this on to display the table name as a visible heading above the table on your storefront.Table Title Font Size pxSet the font size for the table title. A larger size makes the heading more prominent and easier to read.Table Title Font Color ColorChoose the color for the table title text using the color picker.Show Table Description CheckboxCheckbox on to display the description text below the title on your storefront.Table Description Font Size pxAdjust the font size of the description text shown below the title.Table Description Font Color ColorPick a color for the description text to match your store's style.[Insert Image: Title/Description settings panel showing name, font size, font color, and toggle options]
Header & Footer Settings
Control the header and footer rows of your table and how they look.Table Head Row CheckboxWhen 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 CheckboxWhen enabled, the last row of your table is displayed as a footer. Only available when the head row option is active.Note: The settings below are only enabled when the "Table Head Row" option is turned on.
Allow Column Sorting CheckboxLets customers click on column headers to sort the table data in ascending or descending order.Drag and Drop Column CheckboxAllows customers to rearrange columns by dragging and dropping them. Requires the head row to be active.Header Background Color ColorSet 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 ColorChoose the text color for the header cells.Header Font Size pxSet the font size for the text inside the header cells to make it more prominent and easier to read.[Insert Image: Header & Footer settings panel showing head row checkbox and color/font controls]
Search Feature
Add a search bar so customers can quickly find what they need inside your table.Search Feature CheckboxMaster Checkbox to enable or disable the search functionality for the table.Search Full Width CheckboxWhen enabled, the search bar stretches to the full width of the table, making it easier to spot and use.Show Column Search CheckboxDisplays 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 TextThe greyed-out text shown inside the search box before the customer types — for example, "Search here" or "Enter product name."No Records Text TextThe 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 TextText displayed while the table loads data. Helps customers know the page is working — e.g., "Loading…"[Insert Image: Search settings panel showing Checkbox, placeholder text, and no-records text options]
Pagination Feature
Break long tables into pages so they don't overwhelm customers.Example: If you set pagination to 10, customers see 10 rows per page and click "Next" to view more rows.
Pagination Feature CheckboxMaster checkbox to enable or disable pagination for the table.Pagination Per Page NumberSet the default number of rows displayed per page.Pagination Font Size pxSet the font size for pagination controls like "Next," "Previous," and page numbers.Pagination Font Color ColorChoose the text color for pagination controls for better visibility and contrast.Pagination Background Color ColorSet a background color for the pagination area to visually separate it from the table body.Pagination Length Change CheckboxWhen enabled, customers can change the number of entries shown per page using a dropdown — e.g., 10, 25, 50.[Insert Image: Pagination settings panel showing per-page count, font, color, and length-change options]
General Feature Section
These settings control the overall layout, style, and interactivity of your table.Hover Highlight
Hover Highlight CheckboxWhen 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-pickerA color picer appear to set the hover highlight color in the table cells.Row hover highlight CheckboxColumn hover highlight CheckboxCell hover highlight CheckboxRow Hover Color Color ✦ NewA 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.[Insert Image: General Feature settings panel showing hover, button settings, and quantity picker options]
Scroll & Layout
Horizontal Scroll CheckboxEnables left-right scrolling so customers can view all columns — especially useful for wide tables on small screens.Vertical Scroll Height & Fix Header pxSet 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 CheckboxShows 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 ToggleApplies different background colors to odd and even rows, creating a striped effect for easier readability. Two color pickers appear when this is enabled.[Insert Image: General Feature settings panel showing hover, button settings, and quantity picker options]
Styling Settings
Table Background Color ColorSet the background color of the entire table area.Table Border Color ColorChoose the color of the lines (borders) separating cells. A well-defined border improves clarity and visual organization.Table Border Style SelectSelect the style of the cell borders — Solid, Dashed, Dotted, or None.Cell Padding pxAdd spacing inside each cell between the content and the cell edges, improving readability.[Insert Image: General Feature settings panel showing hover, button settings, and quantity picker options]
Font & Alignment
Table Data Font Family SelectChoose the font style for all cell data in the table.Table Data Alignment SelectSet how text is aligned inside cells — Left, Center, or Right.Table Data Font Size pxAdjust the font size for text inside the table cells.Table Data Font Color ColorPick the color for all cell text in the table body.Word Spacing of Table Data pxControl the spacing between words inside cells. Leave at 0 for default spacing, or increase it for a more open, airy appearance.[Insert Image: General Feature settings panel showing hover, button settings, and quantity picker options]
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 ✦ NewSet how rounded the button corners are. A value of0 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
- 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
[Insert Image: General Feature settings panel showing hover, button settings, and quantity picker options]
Quantity Picker ✦ New
Quantity Selector Size Select ✦ NewChoose 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
[Insert Image: General Feature settings panel showing hover, button settings, and quantity picker options]
Modal Settings
When your size chart is set to open in a popup (modal), these settings control how that popup looks.Animation Type SelectChoose how the modal appears — options include Fade In, Slide, and more.Modal Border Radius pxSet how rounded the popup window's corners are.Modal Background Color ColorSet the background color of the modal popup.Header Font Size / Font Color / Background ColorCustomize the appearance of the modal's header section — including text size, text color, and background fill.Footer Font Size / Font Color / Background ColorCustomize the appearance of the modal's footer section.Logo Border Radius pxAdjust the corner shape of any logo displayed inside the modal.Logo Visibility SelectToggle the store logo inside the modal on or off.Modal Border Style SelectSet the border style for the modal window — Solid, Dashed, Dotted, or Unset.[Insert Image: General Feature settings panel showing hover, button settings, and quantity picker options]
Custom CSS & Custom Commands
Custom CSS Code ✦ Now in Product CatalogueWrite your own CSS code to apply additional styling to the table — custom fonts, spacing tweaks, unique visual effects, and more.Note: Custom CSS applies only to the specific table you are editing. It will not affect any other tables in your store.
Custom Commands CodeAdd 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.[Insert Image: General Feature settings panel showing hover, button settings, and quantity picker options]