Accessing customization settings
- Open CompareKit in your Shopify admin
- Click Customization in the sidebar
- The settings page opens with a live preview panel on the right
All changes are shown in real time in the preview panel, so you can see exactly how your widget will look before saving.
Data source
CompareKit can pull product information in two ways:
- Storefront API — Fetches structured product data directly from Shopify. This is the fastest and most reliable option, and works with all stores.
- Product page content — Scrapes the actual content from your product pages. Use this if you have custom content from page builders (like Shogun or GemPages) that isn't available through the Storefront API.
If your store is password-protected, the "Product page content" option won't work because the scraper can't access your pages. Switch to Storefront API in this case. See Troubleshooting Common Issues for more on this.
Widget behavior
These toggles control the interactive features of the comparison widget:
- Show search bar — When enabled, customers can search for products by name to add them to a comparison. Disable this if you only want customers to pick from the carousel.
- Show product carousel — Displays a scrollable row of suggested products below the search bar. Customers can browse and click to add products.
- Enable variant comparison — Allows customers to select specific variants (size, color, etc.) for each product. When enabled, variant dropdowns appear on product cards that have multiple variants. Customers can even add the same product twice to compare different variants side by side.
Button styling
Customize the appearance and text of the widget buttons:
- Button label — The text on the main compare button (default: "Compare products")
- Compare now button label — The text on the button that triggers the comparison (default: "Compare now")
- Button icon — Choose from 13 different icons (bar chart, scale, star, arrows, and more) or select "No icon" to show text only
- Button color — Overrides your theme's accent color for the compare button
- Button text color — Sets the text color on the button
- Border radius — Controls how rounded the button corners are (in pixels)
Widget panel styling
These settings control the container that holds the product selection area:
- Panel background color — The background color of the entire comparison panel
- Panel background opacity — How transparent the panel background is (0% = fully transparent, 100% = fully opaque)
- Panel border color — The color of the border around the panel
- Card & input background color — The background color for search bars, product cards, and selected product rows
- Card border radius — How rounded the product cards and selection boxes are (in pixels)
Comparison table styling
Customize the look of the comparison results table and modal:
- Table header background — The background color for the row showing product names and images
- Header text / product name color — The color of product names in the table header
- Alternating row background — The background color for every other row, making the table easier to read
- Row border color — The color of the lines between rows
- Modal background — The background color of the comparison popup
- Modal text color — The main text color inside the comparison modal
AI Provider (Starter and Pro plans)
If you're on the Starter or Pro plan, you can connect your own AI API key to unlock unlimited comparisons. This section appears at the bottom of the Customization page.
To set it up:
- Choose your AI provider from the dropdown — supported providers are Google Gemini, OpenAI, Anthropic Claude, Mistral, DeepSeek, and Grok
- Enter your API key from your provider's dashboard
- Optionally set a model override if you want to use a specific model instead of the default
- Click Save
Your API key is encrypted and stored securely. It is never shown in full after saving — only the last 4 characters are displayed for verification.
The default models used for each provider are:
| Provider | Default model |
|---|---|
| Gemini | gemini-2.5-flash-lite |
| OpenAI | gpt-4o-mini |
| Claude | claude-3-5-haiku-latest |
| Mistral | mistral-small-latest |
| DeepSeek | deepseek-chat |
| Grok | grok-3-mini-fast |
To remove your key and go back to using CompareKit's built-in AI (with your plan's standard comparison limit), click Remove key and confirm.
This section is only visible to merchants on the Starter or Pro plan. If you're on the Free or Development plan, upgrade on the Plans page to access this feature.
Saving your changes
When you modify any setting, a save bar appears at the top of the page with two options:
- Save — Applies your changes immediately to the live storefront
- Discard — Reverts all unsaved changes back to the previous state
Changes take effect as soon as you save — no need to republish your theme.