Skip to main content

Auto-Import Your BrandKit with Scan My Store

Auto-detect your store's colors, typography, and icons in one click and review every proposed change side-by-side before anything saves to your BrandKit.

Setting up your BrandKit by hand means picking dozens of colors, uploading fonts, and choosing icon styles one field at a time. With Scan My Store, Tapcart reads your live Shopify storefront and pre-fills your BrandKit for you — colors, typography, and icons in one pass. You review every detected change before anything saves, so you stay in control.


What Scan My Store does

When you run a scan, Tapcart loads your storefront and pulls computed styles directly from the rendered pages. It looks at both your homepage and a product detail page so it can capture everything from your sticky header background to your "Add to Cart" button styling.

Scan My Store can detect and map up to 36+ BrandKit fields across three categories:

  • Colors — Core Colors (page, header, modal, dividing lines, icons), Button Colors (text, fill, outline), Typography Colors (primary text, page title, product title, price, legal/caption), and State Colors (disabled, skeleton).

  • Typography — App font weight and font family.

  • Icons — Icon style detected from your existing site (e.g., the cart icon).

You decide what to import. Nothing is saved until you explicitly click Save Changes.


Before you start

You'll need:

  • A connected Shopify store (the URL is pulled from your Shopify connection automatically).

  • A live, publicly accessible storefront. Password-protected or development stores can't be scanned.


How to run a scan

1. Open Scan My Store

Go to App Studio › BrandKit. From any BrandKit page (Colors, Typography, Icons, or Brand Assets), click Scan My Store in the top-right corner of the screen.

A modal opens over the BrandKit page. Your existing BrandKit stays visible behind the modal — nothing is touched until you save.

2. Confirm your store URL

The URL field is pre-filled with your connected Shopify store. If you want to scan a different page or domain, you can edit the URL before scanning.

Below the URL, the Recent Scans list shows your previous scan attempts and their status (Complete, Processing). You can use this to quickly re-open a recent scan instead of running a new one.

3. Click Scan Now

The scan typically takes 30–60 seconds. The button shows a "Scanning…" state while it runs, and the new scan appears at the top of the Recent Scans list with a Processing label. Behind the scenes, Tapcart is loading your homepage, detecting sticky header colors, extracting button styles, and pulling icon styles from your product pages.

You can leave the modal open and wait, or close it and return — the scan keeps running in the background.

4. Review & Apply changes

Once the scan finishes, the Review & Apply screen opens. You'll see something like "17 changes detected" at the top, with all proposed changes grouped by category:

  • Colors — broken into Core Colors, Button Colors, Typography Colors, and State Colors sections.

  • Typography — font weight and family changes.

  • Icons — icon swaps (e.g., cart icon).

Each row shows a before → after comparison so you can see exactly what's changing. For example, Dividing Lines might show #E5E7EB → #000000, or Primary Outline Enabled might show Enabled → Disabled.

Every change has an individual checkbox. By default, all detected changes are checked. You can:

  • Uncheck any individual change you don't want to apply.

  • Click Select All to re-check everything.

  • Click Clear to uncheck everything and start fresh.

Fields where the detected value matches your current BrandKit are hidden — you'll only see things that are actually changing.

The footer shows a running count (e.g., "15 of 17 changes selected") so you always know what you're about to save.

5. Save your changes

Click Save X Changes. The modal shows a brief saving spinner, then closes automatically. Your BrandKit page updates to reflect the new values, and a toast confirmation appears in the bottom-left corner: "15 changes saved to BrandKit."

You can confirm the changes by browsing the BrandKit sub-pages (Core Colors, Typography Colors, etc.) — every imported value is now live and will be applied the next time you submit an app update.


Cancelling a scan or skipping changes

You can dismiss the modal at any step without saving. Use any of:

  • The X button in the top-right of the modal

  • The Cancel button in the footer

  • Clicking the dimmed backdrop outside the modal

No changes are persisted until you click Save Changes, so closing early is always safe.


Tips for best results

  • Run the scan after your Shopify theme is finalized. If you're mid-redesign, your detected values may not match what you actually want long-term.

  • Review every change carefully before saving. Sites often have one-off colors (a promotional banner, a holiday section) that aren't part of your true brand palette. Uncheck those before saving.

  • Use it for first-time setup AND ongoing updates. If your storefront rebrands later, re-running Scan My Store is the fastest way to bring your app in sync.

  • Combine with manual fine-tuning. Scan My Store is a starting point, not a final answer. After importing, you can still hand-edit any field in BrandKit.


FAQ

Will running a scan overwrite my current BrandKit? No. Scan My Store only proposes changes — nothing is saved until you click Save Changes in the Review & Apply step. Even then, only the changes you have checked will be applied.

My scan failed or returned wrong colors. What now? First, confirm your storefront is publicly accessible (not password-protected). If it is and the scan still looks off, re-run it — sticky banners or popups on your homepage can occasionally throw off detection. If problems persist, contact Tapcart Support with the scan timestamp from your Recent Scans list.

Does Scan My Store work on Shopify Plus / Markets / multi-region stores? The scan reads whichever URL you provide. For multi-region stores, run separate scans on each region's storefront if their styling differs.

How long does a scan take? Most scans complete in 30–60 seconds. Larger sites with heavy product imagery may take slightly longer.

Did this answer your question?