Table

Author: Jade Abit 3745 views

The Table element allows you to organize and display information in a clear, structured format using rows and columns. It is ideal for presenting product specifications, product comparisons, pricing, size charts, and other structured content.

Each table cell can be configured with different content types, including Text, Icon, Image, Button, and Metafield, giving you more flexibility when creating tables for your store.

1. How to Add a Table

Follow these steps to add a Table element to your page:

1. Open the EComposer Editor and select the page where you want to add the table.
2. Click Add Element and search for Table.
3. Drag and drop the Table element into your desired section.

2. Configure Table Content

After adding the Table element, you can customize the content of each cell based on your needs.

1. Select the Table element on your page.
2. Click the cell you want to edit.
3. In the Content tab, locate the Cell type setting.
4. Click Choose type to select the content type for the cell.

Available Cell Types

The Table element supports the following cell types:

Text – Display regular text content.
Icon – Add an icon to a cell.
Image – Display an image inside a cell.
Button – Add a clickable button.
Metafield – Display dynamic information from Shopify product metafields.

2.1 Text

The Text cell type allows you to display static text directly inside a table cell. It is suitable for product names, specifications, descriptions, and other text-based information.

Use the Cell content section to add or edit the text displayed in the selected cell.

2.2 Icon

The Icon cell type allows you to display an icon inside a table cell. It is useful for representing features, statuses, or options visually, such as checkmarks for available features and cross icons for unavailable features.

For example, you can use icons in a product comparison table to indicate whether a product includes a specific feature.

2.3 Image

The Image cell type allows you to display an image directly inside a table cell. It is useful for showcasing product images, visual features, or other image-based information in your table.

After selecting the Image cell type, you can add an image to the selected cell and customize its display settings.

2.4 Button

The Button cell type allows you to add a clickable button inside a table cell. It is useful for adding actions such as View Details, Shop Now, or Learn More to your table.

After selecting the Button cell type, you can customize the button text and link from the Cell content settings.

2.5 Metafield

Create a Product Metafield in Shopify
Before connecting a metafield to your Table, you need to create the metafield definition in Shopify and add a value to the product.

In your Shopify admin, go to Products and select the product you want to configure. In the Product metafields section, click Add definition.

Enter a name for the metafield and select the appropriate Type based on the information you want to store.

After creating the metafield definition, enter the corresponding value in the product’s Product metafields section.

Once the metafield has been created and a value has been added, you can connect it to a Table cell in EComposer.

Connect a Metafield to a Table Cell

To display a metafield value, enter the corresponding Liquid code in the Metafield namespace and key field. If the metafield has no value, you can add Fallback text to display a default value instead.

3. Adjust General Settings

The General settings allow you to configure the overall structure and behavior of the Table element.

– Layout : Choose how the table content is arranged :
+ Horizontal: Arranges table content across columns.

+ Vertical: Arranges table content vertically.

– Rows: Adjust the number of columns displayed in the table.
– Columns: Adjust the number of columns displayed in the table.

– Border Collapse: Control how borders between table cells are displayed:
+ Collapse: Combines adjacent cell borders into a single border.
+ Separate: Displays each cell with separate borders.
+ Inherit: Uses the border-collapse setting inherited from the parent element.

4.Adjust Design Settings

The Design tab allows you to customize the appearance and layout of the table. You can adjust the table container, headings, rows, columns, buttons, and icons to match your store’s design.

General
Customize the overall layout and appearance of the table.

Width – Set the table width using the available units.
Alignment – Choose how the table is aligned within its container.
Background Color – Set a background color for the table.
Background – Add or customize the table background.
Box Shadow – Add a shadow effect around the table.
Border – Customize the table border.
Spacing – Adjust the table’s margin and padding.
Border Radius – Set the corner radius of the table.

Heading
Customize the appearance of the table header.

Alignment – Set the horizontal alignment of header content.
Vertical Align – Control the vertical position of header content.
Typography – Customize the font, size, weight, and other text properties.
Text Color – Set the color of the header text.
Background Color – Set the header background color.
Border – Customize the header border.
Width – Adjust the width of the header cells.
Min Height – Set a minimum height for the header.
Padding – Adjust the spacing inside the header cells.
Text Gradient – Apply a gradient effect to the header text.
Text Shadow – Add a shadow effect to the header text.

Table Row
Customize the appearance and spacing of table rows.

Border – Customize the borders between rows.
Min Height – Set the minimum height of each row.
Odd Row Background – Set the background color for odd-numbered rows.
Odd Row Color – Set the text color for odd-numbered rows.
Odd Row Typography – Customize the typography of odd-numbered rows.
Even Row Background – Set the background color for even-numbered rows.
Even Row Color – Set the text color for even-numbered rows.
Even Row Typography – Customize the typography of even-numbered rows.

Table Column
Customize the appearance and alignment of table columns.

Alignment – Set the horizontal alignment of column content.
Vertical Align – Control the vertical position of content.
Typography – Customize the font and text styling.
Text Color – Set the text color.
Background Color – Set the column background.
Border – Customize the column border.
Padding – Adjust the spacing inside column cells.
Text Gradient – Apply a gradient effect to the text.
Text Shadow – Add a shadow effect to the text.

Button
Customize buttons displayed inside table cells.

Typography – Customize the button text styling.
Text Shadow – Add a shadow effect to the button text.
Box Shadow – Add a shadow around the button.
Normal / Hover – Configure separate styles for the default and hover states.
Width – Set the button width.
Height – Set the button height.
Text Color – Set the button text color.
Background – Customize the button background.
Border – Configure the button border.
Border Radius – Adjust the button corner radius.
Spacing – Control the spacing around the button.