Appearance, design, and theme

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

In Shopify admin, open Iconic Product Comparison.
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:

Move between preview widths such as mobile and desktop so you see how wrapping and columns change.
Adjust Preview background so your colors read well against light or dark samples.
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.

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.

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

Confirm the Iconic Product Comparison app embed is enabled for your live theme.
On your product template, add the Specification table block where specifications should appear.
Add the Comparison table block where you want comparisons.
In the Comparison table block, review Maximum products to show if you need fewer columns than you saved in Compare with.

Frequently asked questions

Can I use different designs for holiday and everyday?

You can return to either editor anytime and publish updated styling. Keep a simple note of what you changed if you plan to revert later.

Do fonts come from the app or my theme?

Storefront text generally inherits your theme’s fonts. The in-app preview approximates layout; your published theme controls fine typography details.

Does Add to your theme replace manual theme edits?

It is a shortcut into the theme editor. It does not remove other customizations you already made.

What if my block looks too wide on desktop?

Use your theme’s section width settings and the app’s layout options together. Narrow sections may force single-column layout under the 600 pixel behavior described above.

Why do my specification and comparison sections look like different brands?

You may have customized only one editor. Open both Customize flows and align colors and borders.