# Product Comparison Table

A **Product Comparison Table** allows customers to compare similar products based on key attributes. This feature is especially useful for stores selling products with various options or tiers (e.g., different versions of a product or subscription plans).

{% hint style="success" %}

1. **Go to Shopify Admin** > Online Store > Themes.
2. Click **Customize** on your active theme.
3. In the theme editor, click **Add Section** > **Product Comparison Table**
4. Create a comparison table by adding key product attributes (like size, price, features, etc.) for each product in a **structured table layout**.
   * Example columns: Product Name, Price, Size, Features, Reviews, etc.
     {% endhint %}

<figure><img src="/files/MZf5yX03nIQBO9YtznMT" alt=""><figcaption></figcaption></figure>

### **Settings & Customization**

<figure><img src="/files/Ma2EwGKc7BqoJUzFwV1C" alt=""><figcaption></figcaption></figure>

#### **Layout**

* **Expand to Full Width:** Enable this option to extend the section across the entire screen width.
* **Color scheme:** You can customize the section’s appearance by changing the **text color, background color**, and more using **preset color** options.
* **Background Opacity:** Adjust transparency (Range: 0–100%, Default: 100%). This applies to the background image, customizable in theme settings.

#### **Content Settings**

* **Heading:** Set a custom title (e.g., "Compare Our Products").
* **Heading Size:** Choose from **Small, Medium, or Large.**
* **Text :** Add additional descriptive text if needed.
* **Text Position:** Choose placement relative to the heading:
  * **Above Main Heading** : Display subheading above the main heading.
  * **Below Main Heading** : Display subheading below the main heading.
* **Desktop Content Alignment:** Align content to **Left, Right, or Center** (automatically centered on mobile screens).

#### **Product Table Settings**

* **Color Scheme:** Choose a preset color scheme for the table.
* **Table Heading:** Set a title for the comparison table.

**Table Data** : Add or leave blank to hide specific rows:

* **Table Data 1** : Set compaction product data (e.g., Fragrance).
* **Table Data 2** : Set compaction product data (e.g., Sulphate-Free).
* **Table Data 3** : Set compaction product data (e.g., Paraben-Free).
* **Table Data 4** : Set compaction product data (e.g., Cruelty-Free).

#### **Section Padding**

* **Top Padding:** Adjust spacing above the section.
* **Bottom Padding:** Adjust spacing below the section.

#### Section divider

* **Shapes** : Adds shape effects to the section. Options: **( Curve Top, Curve Bottom, Curve Both, None, Border Top, Border Bottom, and Both Border)**.

{% hint style="success" %}
**Product Comparison Table > Add Product**
{% endhint %}

<figure><img src="/files/6gpbCF4ORu2l9wTPWyee" alt=""><figcaption></figcaption></figure>

**Add Product**

* **Product:** Add your product to compare (e.g., lavender-body-mist)
* **Toggle Option:** Enable or disable icons for product display.

**Product Options&#x20;*****(Enable/Disable each feature as needed)***

* **Option 1:** Add your first product feature or specification (**Enable / Disable**)
* **Option 2:** Add your second product feature or specification (**Enable / Disable**)
* **Option 3:** Add your third product feature or specification (**Enable / Disable**)
* **Option 4:** Add your fourth product feature or specification (**Enable / Disable**)


---

# 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://themessupport.gitbook.io/lollipop-theme/sections/product-comparison-table.md?ask=<question>
```

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.