# Appearance, design, and theme
Source: https://product-comparison-docs.geticonicapps.com/help-center/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.
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**
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**.
# Comparison tables
Source: https://product-comparison-docs.geticonicapps.com/help-center/comparison-tables
Compare with is the main way to get the most relevant comparisons. If it is empty, the block can still use Shopify-related products. You need a linked specification table with Comparable attributes. Adjust the maximum number of products to show up to twenty.
## **What a comparison table does**
A comparison table lines up your current product with other products in columns so shoppers can scan differences quickly. The rows come from attributes in your linked specification table that you mark as **Comparable**. Without Comparable attributes, the comparison layout has nothing meaningful to show for those rows.
## **What must be in place**
1. The product has a **specification table** assigned (by assignment rules or by your choice on the product).
2. In that table, at least some attributes are turned on as **Comparable**.
The comparison block can still run when **Compare with** is empty, using **Shopify related products** as a fallback. **Compare with** is the main part of the app for getting the best results, because you choose exactly which products appear side by side.
## **How compare products are chosen**
**Compare with in the app:** Add **Compare with** products on each product in the app for full control and the most relevant comparisons. That list is saved on the product. When it is set, those products take priority in the grid ahead of automatic related picks.
You can select **up to twenty** products in **Compare with** for a single product. That lines up with the theme block setting described below.
**When Compare with is empty:** The app compares the current product with **Shopify related products** for that product. Those are the products Shopify’s recommendation system suggests as related or complementary, so the set can change as your catalog changes.
Use Compare with for tight comparisons, such as models in the same family. Related products alone are useful when you have not set Compare with yet, but hand picked products usually match your merchandising best.
## **Mark attributes as Comparable**
1. Open **Specification table** in the app and edit the table that applies to your products.
2. Open an attribute that should appear in comparisons.
3. Turn **Comparable** on for attributes you want in the comparison layout.
4. Save the table.
If no attributes are Comparable, comparison rows may look empty or incomplete even when products appear in the columns.
## **Set Compare with on a product**
1. Open **Products** in the app and click a product.
2. Find **Compare with** (wording may match your theme closely).
3. Browse or search and add up to **twenty** products for the strongest comparisons. You can leave this empty and rely on related products until you are ready to curate the list.
4. Save the product configuration in the app.
Leaving **Compare with** empty does **not** stop the comparison block from working when related products are available from Shopify, but adding products here is how you get the most out of the app.
## **Theme block: how many products appear**
In the theme editor, select the **Comparison table** app block. Use **Maximum products to show** to cap how many products appear in the comparison columns. You can choose a value from **1** through **20**.
This limit applies whether the columns are filled from **related products** or from your **Compare with** list.
Lowering the number keeps wide tables manageable on small screens. Raising it shows more columns when enough products are available.
If you use manual Compare with and saved twenty products but the block shows fewer, check Maximum products to show first.
## **Design the comparison table appearance**
Comparison styling is separate from specification table styling. In the app, go to **Settings**, then use **Customize** under the comparison table card. You get preview controls, layout options, and appearance settings tuned for the comparison grid.
# Getting started
Source: https://product-comparison-docs.geticonicapps.com/help-center/getting-started
Install the app, enable the Iconic Product Comparison app embed, add the specification and comparison blocks in your theme, and follow the dashboard setup guide. Use Settings to open the theme editor when you are ready.
## **What this app does**
Iconic Product Comparison helps you show clear specification tables and comparison tables on product pages. Shoppers see structured details next to each product, which can reduce questions before purchase and support confident buying decisions.
## **Before you begin**
Your store needs an Online Store 2.0 theme so you can use theme app blocks. The app works with any Shopify plan that includes the Online Store sales channel. You do not need a specific plan tier beyond that.
## **Open the app and use the dashboard**
1. In the Shopify admin, go to **Apps** and open **Iconic Product Comparison**.
2. The **Dashboard** is your home base. Here you can see whether the app embed is enabled on your live theme, review simple analytics such as how many tables you have created, and use the setup guide.
The setup guide lists the main tasks to finish first install. Work through each step in order. You can skip or complete steps as you go, and you can hide the guide when you no longer need it.
If you are unsure what to do next, expand the first incomplete step in the setup guide and use its button to jump to the right screen.
## **Turn on the app embed**
The app embed loads scripts your storefront needs. Without it, blocks may not behave correctly.
1. From the Dashboard, look for the message about the **Iconic Product Comparison** app embed.
2. Use the link or button that opens the theme editor for the embed.
3. In the theme editor, find **App embeds** and enable **Iconic Product Comparison**.
4. Save the theme.
The embed applies to your published theme. If you work in an unpublished theme, enable the embed there too before you publish that theme.
## **Add the storefront blocks**
You add two separate blocks in your product template: one for the specification table and one for the comparison table. They are styled independently, which is intentional so you can place them where they fit your layout.
1. In Shopify admin, go to **Online Store**, then **Themes**, then **Customize**.
2. Open a **Product** template.
3. Add a section block if needed, then click **Add block**.
4. Under **Apps**, add **Specification table** where you want product specifications to appear.
5. Add **Comparison table** where you want the comparison grid to appear.
6. Save.
You can start with both blocks on the same product template and adjust placement later.
## **Style tables and open the theme editor from Settings**
When you are ready to match your brand, open **Settings** in the app navigation. Under **Appearance**, use **Customize** for the specification table and for the comparison table. Each editor has its own preview and options.
Use **Add to your theme** on the Settings page when you want a shortcut back into the theme editor to position blocks.
## **See what changed in the app**
On the Dashboard, open the **Resources** section. Use **View changelog** to read release notes inside the app.
# Plans and billing
Source: https://product-comparison-docs.geticonicapps.com/help-center/plans-and-billing
Iconic Product Comparison is free to use today. Open Pricing in the app to view your plan on the billing page. If billing is still linking for your shop, finish setup from the home screen first.
## **Open Plans and billing**
1. In Shopify admin, open **Iconic Product Comparison**.
2. Click **Pricing** in the app sidebar.
The app opens your hosted billing session so you can review **Plans and billing** details in one place. What you see matches the live billing provider for your shop, including your current plan name and the features listed for that plan.
## **Current pricing**
The app is **free** today. Use the on-screen plan list as the source of truth for which features are included with your account. If your screen shows a **Free** plan, that reflects the current offering.
Future paid plans or new capabilities will appear here first. Rely on what your billing page shows rather than third-party rumors.
# Products and assignment
Source: https://product-comparison-docs.geticonicapps.com/help-center/products-and-assignment
Search products, see which specification table applies, manage Compare with up to twenty products, and learn why a manual table choice on a product overrides automatic assignment rules from your tables.
## **Products list overview**
1. Open **Iconic Product Comparison**.
2. Click **Products** in the app sidebar.
You see your catalog in a searchable list. Columns help you scan which specification table is linked and which products are set for comparison thumbnails when applicable.
Use search to find a product quickly in large catalogs.
## **Open a product’s details in the app**
1. From **Products**, click a product row to open the product details page inside the app.
2. Review the summary at the top so you confirm you are editing the correct item.
This page is where you override automatic assignment for that product and where you maintain **Compare with** products.
## **Choose a specification table for one product**
On the product details page, find the **Specification table** section.
1. Open the table dropdown.
2. Select the specification table that should apply to this product.
3. Use **Create table** if you need a new table and you are taken through creation first.
4. Use **Clear** if you want to remove the manual assignment and let assignment conditions take over again, when your workflow allows it.
5. Save your changes when prompted.
When you manually pick a table on a product, that choice overrides the automatic assignment conditions you configured on the specification table. Rules in the background will not replace your manual selection for that product.
## **Manage Compare with products**
In the **Compare with** area you can:
1. Search or browse the catalog to add products.
2. Add up to **twenty** compare products for this product.
3. Reorder compare products if your interface allows drag actions so the most important comparisons appear first.
4. Remove products you no longer want compared.
5. Save.
The comparison storefront block uses this list together with **Comparable** attributes from your specification table.
## **Jump to the theme editor**
When you want to check how the product looks live, use **Open theme editor** or a similar shortcut on the product page if your app version shows it. That takes you to the Shopify theme editor focused on product templates so you can confirm block placement.
## **Show on your store**
If your product page includes a **Show on your store** style card or summary, use it as a reminder that storefront visibility still depends on your theme, the app embed, and active blocks. The app controls data; the theme controls presentation.
# Specification tables
Source: https://product-comparison-docs.geticonicapps.com/help-center/specification-tables
Learn how specification tables work in Iconic Product Comparison: create a table, set assignment conditions, organize groups and attributes, upload optional icons, and keep your storefront data clear and consistent.
## **What is a specification table?**
A specification table is a reusable set of product attributes grouped for display on the product page. You define the structure once, then connect it to products either automatically through assignment conditions or manually on each product.
## **Open the specification tables list**
1. In Shopify admin, open **Iconic Product Comparison**.
2. In the app sidebar, click **Specification table**.
You see a list of your tables with search, status, and how many attributes each table uses. Use the **Add specification table** when you want a new table.
## **Create a new table**
1. Click **Add specification table**.
2. Choose one of the following:
* **Use the default template** to start from a ready-made, Amazon-style baseline with common attributes already grouped.
* **Start from scratch** to build groups and attributes yourself.
The default template is a fast way to go live. Starting from scratch gives you a blank canvas if you already know your structure.
## **Name your table and set visibility**
On the table details page, give the table an internal **Name** you will recognize in the admin. Turn **Active** on when you want this table available for matching products. If a table is not active, treat it as a draft until you are ready.
Use **Save** when you finish a set of edits.
## **Set assignment conditions**
Assignment conditions decide which products receive this table automatically when you do not choose a table manually on the product.
1. Find the assignment section on the table details page.
2. Choose whether **all** conditions must match or **any** condition may match.
3. Click **Add condition** to build rules using fields such as product category, product type, tags, collection, or vendor.
4. Pick an operator where offered, for example **Equals**, **Does not equal**, or **Contains**, depending on the field.
5. Enter or pick the value for each condition.
If you assign a specification table directly on a product, that manual choice overrides these assignment conditions for that product. Automatic rules will not replace your manual choice.
## **Organize groups and attributes**
Specification tables use **groups** to cluster related attributes. Within each group you add **attributes** that pull data from Shopify or from metafields.
1. Use **Add group** to create a section heading shoppers will see, such as General or Dimensions.
2. Use **Add attribute** inside a group to pick what to show.
3. Drag groups and attributes to reorder them.
### **Types of attributes you can add**
When you add an attribute, you choose a data type. The picker is organized by category. Available options include the following.
**Product information**
* Product option
* Type
* Product type
* Product category
* Vendor
* Description
* Price
* SKU
* Barcode
* Rating
* Weight
* Collections
* Tags
**Reference**
* Metafield reference
* Metaobject
**Text**
* Single-line text
* Multi-line text
**Measurement**
* Dimension
* Volume
* Weight (measurement)
**Number**
* Integer
* Decimal
**Other**
* Color
* True or false
* File (PDF, specification sheet, and similar)
* Link
* Money
* Date
Product metafields from any namespace are supported when you connect metafield-based attributes. The app reads **product** metafields. It does not read metafields that belong only to customers, orders, or other resources.
## **Edit an attribute in detail**
After you add an attribute, open it to customize how it appears.
* **Name** is the customer-facing label. Changing it only changes the label, not the underlying Shopify field.
* **Tooltip** adds optional helper text for shoppers.
* **Icon** lets you upload a small image next to the attribute. Uploads must be **500 KB** or smaller. Common image formats are accepted.
* **Comparable** marks whether this attribute should appear in comparison views when you use comparison features that rely on comparable attributes.
If an icon upload fails, shrink the file under 500 KB and confirm the file is a normal image type.
## **Ratings and review apps**
If you add a **Rating** attribute, it uses rating data stored on the product in Shopify. Review apps such as Judge.me or Loox often write ratings into product metafields. If ratings are empty, confirm your review app is saving ratings where Shopify product metafields can read them.
## **Edit or remove a table**
Use the actions on the table details page to **Delete table** when you no longer need it. Consider turning **Active** off first if you want to pause a table without deleting its definition.
# Storefront experience for shoppers
Source: https://product-comparison-docs.geticonicapps.com/help-center/storefront-experience-for-shoppers
Shoppers see grouped specification rows, optional long-table controls, and a comparison grid with column headers and actions you configure. Options like hiding matching values help people focus on differences.
## **Specification table on the product page**
The specification table presents attributes in a clean, Amazon-style two-column layout: labels on one side and values on the other. Attributes appear inside the **groups** you defined in the app.
Long tables may show a subset of rows first, then a control such as **Show more** or **Show all** so the page does not feel endless. Exact wording follows your theme block settings.
You can style zebra striping, borders, and spacing in the specification design editor so scanning is easy on both phones and desktops.
If a row looks empty, check whether Hide empty rows is available in your design settings or whether the product truly lacks a value for that attribute.
## **Comparison table on the product page**
The comparison table places **This item** beside **Compare products** columns using the products you picked in the app. Column headers reflect product titles and imagery according to your theme.
Shoppers can use controls you enable in the theme block, including:
* **Hide same value** (default label) to focus on differences between products when that option is available.
* Options that hide rows where every product matches, when your block exposes that behavior.
* Actions such as **Add to cart** or **View product** depending on how you configured the block.
Labels like Hide same value can be customized in the theme block if your theme editor allows editing block text.
## **Data types shoppers recognise**
Depending on your attributes, shoppers may see:
* Prices and currency formatted for your market
* Star ratings when rating data exists on the product
* Color swatches for color-type attributes
* Files and links you attached through attribute types that support them
* Dates and money values formatted for readability
Ratings rely on data stored on the product in Shopify, often populated by a review app you already use.
## **Mobile and desktop behavior**
Use the in-app preview modes when you design tables. Narrow screens may stack content that sits side by side on large screens, especially around the multi-column behavior described in design settings for wider blocks.
# Troubleshooting
Source: https://product-comparison-docs.geticonicapps.com/help-center/troubleshooting
Tables missing on the storefront usually trace back to the app embed, theme blocks, product assignment, or missing Comparable attributes. Compare with is the main way to control comparisons; related products can still appear when Compare with is empty.
## **Nothing appears on the product page**
Work through these checks in order:
1. **App embed:** On the **Dashboard**, confirm the **Iconic Product Comparison** app embed is enabled on your **live** theme. Enable it in the theme editor under **App embeds**, then save.
2. **Blocks on the template:** In the theme editor, open your **Product** template and confirm both **Specification table** and **Comparison table** blocks are present if you expect both sections.
3. **Product assignment:** In the app, open **Products**, select the item, and confirm a specification table is chosen or assigned by rules. Confirm the table is **Active** in **Specification table**.
4. **Comparison data:** For the comparison block, confirm the product has a specification table assigned and that attributes you expect are marked **Comparable**. If you do not use manual **Compare with**, Shopify still needs to return **related products** for that item when you rely on the default behavior.
Test a product you know meets your assignment conditions or one you configured manually to remove guesswork.
## **The specification table is wrong or missing for a product**
**Manual override:** If you previously picked a table on the product, that manual choice overrides automatic assignment conditions. Clear or change the table on the product, or adjust your expectations for automatic rules.
**Inactive table:** A table that is not active behaves like a draft. Activate it or assign a different table.
**Conflicting rules:** Two tables might match the same product through conditions. Narrow your conditions or set the product manually to the table you want.
## **Compare products look empty or too small**
**No columns or sparse rows:** Confirm **Comparable** is on for the attributes you need. If you rely on **related products** and see no compare columns, your product may not have enough related items returned yet, or **Maximum products to show** may be very low. Adding **Compare with** products in the app is the best fix when automatic picks are a weak match.
**Too few columns:** In the theme editor, select the **Comparison table** block and raise **Maximum products to show** up to the number you need (up to **twenty**).
**Comparable attributes:** Open your specification table and confirm important attributes have **Comparable** turned on where you expect them in comparisons.
## **Metafield values do not show**
Confirm you connected a **product** metafield, not a metafield that only exists on another Shopify resource. Verify the namespace and key, then confirm the product has a real value stored.
## **Ratings are missing**
Ratings require data in Shopify that the **Rating** attribute can read. If you use a review app, confirm it writes ratings into **product** metafields your setup expects. No review app means there may be no rating to display.
## **Icon upload fails**
Attribute icons must be **500 KB** or smaller and should be a normal image file. Reduce image size or re-export the file, then try again.
## **I changed themes and tables disappeared**
Each theme has its own app embed and block placement. Re-enable **Iconic Product Comparison** under **App embeds** and re-add **Specification table** and **Comparison table** blocks on the product templates in the new theme.
## **Online Store 2.0 requirement**
This app relies on **Online Store 2.0** features such as app blocks. Vintage themes or sections that cannot host app blocks will not show these app blocks on the storefront.
## **Product recommendations look unrelated**
Shopify chooses **related products** using its own logic. If the automatic picks are not a good fit, use **Compare with** in the app to pin exact products for that item.