# 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="https://2586998482-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoR59WHukDFiu96fv0kDY%2Fuploads%2FtfCWDYIar47gTEnZx4Ps%2Fproduct_comparison_table.jpg?alt=media&#x26;token=9ae5b410-528d-4fdc-b8f0-afe3dd8275b3" alt=""><figcaption></figcaption></figure>

### **Settings & Customization**

<figure><img src="https://2586998482-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoR59WHukDFiu96fv0kDY%2Fuploads%2FaoaUUXZtEkXGDMEN7Az0%2Fproduct_comparison_table-01.jpg?alt=media&#x26;token=15b60e3a-2a6f-4085-89a6-4585ea5a47c6" 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.**
* **Subheading:** 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.

#### **Shapes & Styling**

* **Shaper:** Adds shape effects to the section. Options: **Shaper Top,  &#x20;Shaper Bottom, Shaper Both, None, Border Top, Border Bottom, and Both Border.**
* **Shaper Top Color:** Customize the top shape color ( choose your preferred color).
* **Shaper Bottom Color:** Customize the bottom shape color ( choose your preferred color ).

#### **Theme Customization**

* Adjust additional styles in **Theme Settings**.
* Use **Custom CSS** for further design modifications.

{% hint style="success" %}
&#x20;**Product Comparison Table > Add Product**
{% endhint %}

<figure><img src="https://2586998482-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoR59WHukDFiu96fv0kDY%2Fuploads%2FCFBBSCLp0IuK1ys9kevU%2Fproduct_comparison_table-02.jpg?alt=media&#x26;token=493a3a38-1fee-40ed-ab71-f41745f58ad0" 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**)
