# Comparison table š„
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 style="success" %}
Steps:
1. In the theme editor **(Customize)**, click **Add section.**
2. Locate **Comparison table** section.
3. Make necessary changes.
4. **Save.**
{% endhint %}
## 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" %}
{% endtab %}
{% tab title="Horizontal" %}
{% endtab %}
{% tab title="Standing column" %}
{% endtab %}
{% endtabs %}
#### Header content
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.
:writing\_hand: [add-highlighted-text-to-your-headings](https://docs.foxecom.com/hyper-theme/faqs/add-highlighted-text-to-your-headings "mention")
* **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.
#### Table content
* **Icon size**: Controls the size of the icons for each heading row.
* **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.
### Block settings
The Comparison Table includes **two block types**:
* [#heading](#heading "mention")
* [#content](#content "mention")
#### 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 style="info" %}
š” **Best practices:**
* Use clear, relevant labels.
* Keep titles short (1ā3 words).
* Max 10 heading rows supported.
{% endhint %}
#### 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.
***
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://docs.foxecom.com/hyper-theme/theme-sections/comparison-table.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
.jpg?alt=media&token=fa7b53c9-ef5c-41d1-92ea-9a02d19fa4e7)
.png?alt=media&token=90cbed2c-e791-49c8-9f43-49a08bed6f1f)