Data table

What this does

Data table displays the text you supply as a Plain table, Striped table, or Cards. It does not calculate percentages, draw statistical charts, or generate product facts. Use accurate product information and keep units and qualifiers such as “minimum” or “maximum”.

For a two-product feature comparison with a highlighted product, use Product comparison. Its Highlighted columns / Comparison rows / Text and comparison layouts belong to a separate section and Product content block. They are not extra Data table styles; unlike this table, comparison rows require exactly three cells.

Choose an entry point

• Independent section: open the required template and select Add section → Data table. Then choose Table style → Plain table, Striped table, or Cards. There is one add entry for all three styles.
• Product details: open Product content, then add or edit Table. Existing Table content and its original five settings are kept. See Product content.
• Custom container: in Custom section or a compatible theme-block container, select Add block → Data table.

Data table is the single section entry for all three styles. In Product content, the block is named Table; in Custom section it is named Data table. You can change Table style later without re-entering your data. See Custom section for the container setup.

All entries use the same format. They do not automatically share content. To display the same product data in two places, connect compatible fields to the same product metafields.

Previously added Data cards and Striped data table instances keep their saved style and content. Those names were presets of the same section, so no migration is needed.

Quick start: a materials table

1. Open the theme editor for the theme you want to edit, then choose the page template. Add one of the entries above.

2. Set Heading to a clear title, such as Materials. Before typing the data, know how the two text fields work: Column headings lists the column names separated by the pipe character |, and Table rows holds one row per paragraph or line, with each cell separated by | in the same order as the headings. For this example, enter Material|Share|Details in Column headings.

3. Replace the two starting dash rows in Table rows with these two rows — one paragraph or line per row:

   Cotton|70%|Main fabric
   Polyester|30%|Supporting fabric

   The facts above are examples only: replace them with your product’s real information. Give every row the same number of cells as there are headings — missing cells stay empty and extra cells are ignored (full rules under Enter the data below).

4. Choose Table style. Leave First column is a row heading on when Material identifies each row. Optionally choose Background tint, Row icon, and a source or unit in Note.

5. In the independent section, optionally add Introduction and adjust Full width, Top spacing, and Bottom spacing. Product content and Custom section control their own outer layout.

6. Save, check the intended product or page, and review the mobile layout. If several products use the template, check whether the content should be shared or connected to product data as explained below.

Enter the data

Use the ASCII pipe character | to separate columns. In Table rows, make each paragraph or line a new row. You do not need to write HTML or add a Markdown divider line.

Example only; these are not facts about your products:

Column headings

Material|Share|Details

Table rows

Cotton|70%|Main fabric
Polyester|30%|Supporting fabric

Rich text is an input method. Cell content is displayed as plain text; bold formatting and links inside a cell are not retained as HTML. Blank rows disappear. Missing cells remain empty and extra cells are ignored, so check that each row matches the headings.

Consecutive pipes preserve an empty cell: Cotton||Main fabric. A final pipe can represent an empty last cell. A matching pair of outer pipes is also accepted, for example |Cotton|70%|Main fabric|. Literal pipes inside a cell are not supported.

Empty cells and format checks

These examples assume the three headings Material, Share, and Details:

Table rows input	Result
Cotton||Main fabric	The Share cell stays empty; Details stays in the third column.
Cotton|70%|	The last cell stays empty.
Cotton|70%	The missing last cell is filled with an empty cell.
Cotton|70%|Main fabric|Extra	Extra is ignored because there are only three headings. Add a heading if you need another column.
|Cotton|70%|Main fabric|	The matching outer pipes are removed once.

Choose one format consistently. If a line starts and ends with a pipe, the pair is treated as outer decoration; do not use that form to represent both an empty first and last cell. Trim spaces around values. Use ASCII |, rather than the full-width ｜. Do not paste Markdown heading or --- divider rows into Table rows: enter headings only in Column headings, because divider text is displayed as data rather than interpreted as Markdown. Do not add bullet markers or row numbers unless they belong in the actual cell text.

Shared settings

The section, theme block, and Product content Table share these eight settings:

Setting	Default	How to configure it
Heading	Data table; Product table in Product content	Name the information. When empty, Product content uses the product title; other entries use the translated Data table label.
Column headings	Column 1|Column 2	One column name per pipe-separated item. An empty individual heading uses Column N. Completely empty headings hide the component.
Table rows	Two paragraphs, each —|—	One row per paragraph or line. Replace the neutral dashes with accurate information, or clear the field to hide the table.
First column is a row heading	On	Treat the first cell as the heading for that row. Turn off when it is an ordinary value.
Note	Empty	Optional plain-text source, unit, method, or other explanation below the table.
Table style	Plain table	Plain table / Striped table / Cards. Cards keep every column and display its label.
Background tint	None	None / Cream / Lilac / Mint / Apricot, using your theme colors.
Row icon	None	None / Paw / Leaf / Check / Heart. One decorative icon repeated in the first column; it does not certify a product.

Independent-section settings

These four controls are only in the independent section:

Setting	Default	Range and effect
Introduction	Empty	Optional formatted introduction, displayed only when there is valid table data.
Full width	Off	Extend the section’s content width while retaining page-edge spacing.
Top spacing	32 px	0–120 px, step 8.
Bottom spacing	32 px	0–120 px, step 8.

Product content and custom containers manage their outer layout themselves.

None does not promise a transparent table. It removes the selected pastel tint; the table header or cards can still use the theme’s normal background. Row icon repeats one decorative icon for every row; it does not select a different status or ingredient icon per row. It uses the theme’s built-in icons, with no custom-image setting here.

In Product content, the section’s Layout and Background tint are separate from the Table block’s Table style and Background tint. Select the Table block to change the table itself. The block’s tint does not recolor the whole Product content section.

Product-specific data

Static content belongs to the template. Editing a shared product template can change every product using it. For different ingredients or specifications, create appropriate product metafields and connect compatible settings with the dynamic-source button. Table rows can use a compatible multi-line or rich-text field. Available sources depend on the template, resource context, and field type.

For a product-specific materials table:

1. Create a product metafield definition for the rows, with a multi-line text or rich-text type. For example, name it Materials table rows. This is your own definition; Pawglade does not require a fixed namespace or key.
2. Open each product and enter its own complete rows, using the same pipe-separated column order. Save each product. The definition is shared; its values differ by product.
3. In the theme editor, choose the product template and select the independent Data table section, Product content’s Table block, or Data table block inside Custom section.
4. Next to Table rows, use Connect dynamic source and choose your rows definition. Connect a complete rows value; separate ingredient and percentage fields are not automatically joined into columns.
5. Keep Column headings static if their order is the same for every product. For product-specific headings, use a separate compatible single-line text definition and connect Column headings to it.
6. Save the template, preview two products with different saved rows, and then check one with no rows. Missing rows hide the table, including its introduction and note. The component does not invent facts or supply a named fallback metafield.

If the definition is absent from the dynamic-source list, check that it belongs to products, that its type is compatible, and that the editor is showing the intended product context. See Shopify’s instructions for connecting metafields.

On non-product pages, use manual content or an available compatible source. The section does not assume a product exists or automatically read a fixed metafield key. Shopify’s dynamic-source guide explains supported field types.

Layout examples and mobile behavior

Specifications: choose Plain table, use the first column as row headings, and add the measurement method in Note.

Longer nutrition or care reference: choose Striped table and retain the exact source values, units, and qualifiers. The theme does not normalize them into a composition chart.

Materials story: choose Cards and a subtle Background tint. Each row becomes a card, with the column labels beside the values. A decorative Row icon is optional.

Regular tables can scroll horizontally within their own region on small screens; focus that region to use arrow keys. Cards stack in one column on mobile. Both render without JavaScript and retain table headers for assistive technology.

Limits and common questions

How large should a table be? Keep it readable: ideally no more than six columns and 40 rows. These are recommendations, not truncation controls. Very large data should be split; Shopify rendering limits still apply.

Why is the whole section hidden? Both meaningful headings and at least one non-empty data row are needed. Empty content is hidden in the storefront and editor alike.

Why did my values move? Check the pipe count. Missing cells stay empty, extra cells are ignored, and a matching outer pipe pair is removed once. You cannot put a literal pipe inside a cell.

Why does the table look empty just after I add it? New entries start with Column 1/Column 2 headings and two rows of neutral dashes. Replace both the headings and the rows. If you clear the headings or all meaningful rows, the component hides even if you filled in Heading, Introduction, or Note. An empty individual column heading instead uses Column N.

Why do all products show the same materials? You edited static template content. Connect a product metafield as above, or assign separate templates where appropriate. Adding a Data table in two places does not synchronize their settings.

Why did bold text or a link disappear? Rich text supplies the rows, but cells render as plain text. Use Introduction for formatted context in the independent section, or add a separate text block beside the table.

Why are there no per-row check or cross icons? Row icon is one repeated decoration. It does not interpret values or certify ingredients. A typed symbol inside a value remains text.

Does this replace the full ingredient list? Use text or collapsible content for a full ordered ingredient list that has no meaningful columns. Do not invent percentages to fill a table.

Can old Table blocks keep working? Yes. Their original five setting IDs and block type remain. Without a saved new style, they use Plain table. New style, tint, and icon settings are optional.