> ## Documentation Index
> Fetch the complete documentation index at: https://product-comparison-docs.geticonicapps.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Appearance, design, and theme

> Iconic Product Comparison keeps two design systems: one for specification tables and one for comparison tables. Use Settings, open each Customize editor, tune layout and colors, then use Add to your theme to return to the theme editor.

## **Why there are two design areas**

Specification tables and comparison tables serve different jobs on the product page. The app gives you **separate** design editors so you can tune each experience without forcing one style to fit both.

## **Open Settings**

1. In Shopify admin, open **Iconic Product Comparison**.

2. Click **Settings** in the app sidebar.

You see an **Appearance** area with two cards:

* **Specification table** with **Customize** and **Add to your theme**

* **Comparison table** with **Customize** and **Add to your theme**

Use **Customize** to open the visual editor for that table type. Use **Add to your theme** when you want a quick path into the Shopify theme editor to place or check app blocks.

## **Specification table editor highlights**

In the specification table editor you can:

1. Move between preview widths such as mobile and desktop so you see how wrapping and columns change.

2. Adjust **Preview background** so your colors read well against light or dark samples.

3. Expand accordion sections such as **Layout**, **Borders**, **Group names**, **Attributes**, **Tooltips**, **Icons**, **Swatches**, and **Scale values** depending on what your table uses.

Common layout choices include:

* **Hide empty rows** so blank attributes do not clutter the table.

* **Show multiple columns** when the block is wide enough. Two attributes can sit side by side when the block is wider than **600 pixels**. Narrower widths stack into one column.

* **Gap between columns** to add comfortable spacing in multi-column mode.

<Tip>
  The preview uses sample data and theme typography may differ slightly from your live store. Always confirm the final look on a real product page.
</Tip>

## **Comparison table editor highlights**

The comparison editor mirrors many concepts from the specification editor but targets the comparison grid. Open the same kinds of sections and preview modes, then tune borders, typography, and controls shoppers see next to compared products.

If something looks different between the two editors, that is expected. Each surface only changes its own table type.

## **Theme placement checklist**

1. Confirm the **Iconic Product Comparison** app embed is enabled for your live theme.

2. On your product template, add the **Specification table** block where specifications should appear.

3. Add the **Comparison table** block where you want comparisons.

4. In the **Comparison table** block, review **Maximum products to show** if you need fewer columns than you saved in **Compare with**.