# Comparison table 🔥

![image](https://docs-assets.foxecom.app/hyper-theme/Hyper%20docs%20screenshot%20do%20not%20delete%20(12)_8h1suFov.jpg)

Showcase key differences between your related products. It’s ideal for highlighting specs, ingredients, usage, or benefits—especially in industries like skincare, electronics, wellness, and supplements.

## How to add a Comparison table section to your Shopify store

<Hint type="success">

Steps:

1. In the theme editor **(Customize)**, click **Add section.**
2. Locate **Comparison table** section.
3. Make necessary changes.
4. **Save.**

</Hint>

## How to customize a Comparison table section

### Section settings

These settings affect the layout and overall appearance of the comparison table on your page.

#### General settings

* **Color scheme**: Select [predefined set of colors](https://docs.foxecom.com/hyper-theme/theme-settings/colors) for the section. This color scheme affects the header and background of the section.

#### Section header

Customize the heading that appears above the table.

* **Layout**

<Tabs>
<Tab title="Vertical">

![image](https://docs-assets.foxecom.app/hyper-theme/image_tVo7uubg.png)

</Tab>

<Tab title="Horizontal">

![image](https://docs-assets.foxecom.app/hyper-theme/image_D0I7XEjT.png)

</Tab>

<Tab title="Standing column">

![image](https://docs-assets.foxecom.app/hyper-theme/image_EAvLY8F9.png)

</Tab>
</Tabs>

#### Header content

<Expandable title="See settings">

* **Text alignment:** Align the text in the section to the **Left**, **Center**, or **Right**.
* **Text alignment on Mobile:** Override desktop alignment settings specifically for mobile devices if needed.
* **Subheading**: Add a short, secondary heading to complement the main heading. This can provide additional context or detail.
* **Heading**: Enter the primary title for your banner.
* **Heading size:** Adjust the size to fit your design preference and ensure readability. Choose from available heading sizes.

  ✍ [Add Highlighted text to your Headings](https://docs.foxecom.com/hyper-theme/faqs/add-highlighted-text-to-your-headings)
* **Text:** Add a detailed explanation or summary for the banner. Use rich text formatting like **bold**, *italic*, links, and lists for better visual emphasis.
* **Text size:** Select the size of the description text.
* **Button label:** Input the text for the call-to-action button.
* **Button link:** Add a link to the button to direct users to a specific page, product, or collection.
* **Button style:** Choose a style for the button.

</Expandable>

#### Table content

* **Icon size**: Controls the size of the icons for each heading row.

![image](https://docs-assets.foxecom.app/hyper-theme/image_K9caJwOF.png)

* **Text line limit**: Limits content height per cell to avoid overflow (No limits/ 1-5 lines).
* **Show view more button**: Toggle this to show/hide an expandable button if content is clipped.

<div>![image](https://docs-assets.foxecom.app/hyper-theme/image_zQxTuAb8.png) ![image](https://docs-assets.foxecom.app/hyper-theme/image_WXeb3e1K.png)</div>

### Block settings

The Comparison Table includes **two block types**:

* [Heading](#heading)
* [Content](#content)

#### Heading

Each heading defines a **row in your comparison table** (e.g., “Description,” “Skin Type,” “Usage”).

**Heading block fields:**

* **Icon**: Choose from theme icons (chat, heart, check, etc.) for visual clarity.
* **Image** (optional): Upload a custom icon.
* **Title**: The row label (e.g., “Key Ingredients”).

<Hint type="info">

💡 **Best practices:**

* Use clear, relevant labels.
* Keep titles short (1–3 words).
* Max 10 heading rows supported.

</Hint>

#### Content

Each Content block represents a **column** in the table—linked to one specific product.

**Content block fields**

* **Product**: Select the product to display in this column.
* **Text 1–10**: Match each **text field** to a heading row. For example:
  * Text 1 → Description
  * Text 2 → Skin Type
  * Text 3 → Key Ingredients
  * And so on...

💡 Tip: You don’t need to fill all 10 text fields—only what matches your current comparison table headings.

🔁 Repeat this for each product you want to compare.