Part 1 — Install the app
- Open the FitKit listing on the Shopify App Store and click Install.
- Shopify shows the permissions screen. FitKit requests read access to products only — that's how it matches guides to your products, tags, collections and vendors. It never writes to your catalog and it collects no customer data. Click Install app.
- You land on the FitKit dashboard inside your Shopify admin. The onboarding walks you through the two remaining steps: adding the block to your theme and creating your first guide.
Plans and trial: you start on the Free plan (1 guide, basic templates, product + global assignment). If you pick Growth or Pro, the 14-day free trial starts immediately and billing is handled by Shopify on your regular invoice.
Part 2 — Add the block in the theme editor
FitKit is a Theme App Extension: you place it visually, and nothing is ever written into your theme's code files.
- In your Shopify admin, go to Online Store → Themes.
- On your current theme, click Customize to open the theme editor.
- In the top-center dropdown (it usually says “Home page”), select Products → Default product. Your product template opens.
- In the left sidebar, inside the Product information section, click ⊕ Add block.
- Switch to the Apps tab and pick FitKit — Size guide.
- Click Save (top right). Where the block sits in the sidebar doesn't matter in the default mode — see positioning below.
How the “Size guide” link is positioned
FitKit renders a small “Size guide” link (or button) on the product page. Three placement modes are available:
- Automatic (default) — FitKit detects the size/variant selector in your product form and places the link right next to it, where shoppers expect it. This works out of the box on most themes.
- Custom CSS selector — for heavily customized themes: enter a CSS selector in FitKit's settings and the link is inserted next to the first matching element.
- Block position — the link renders exactly where you dragged the block in the theme editor. Useful when you want it in a very specific spot, or when your theme's markup defeats automatic detection.
Plan note: on the Free plan the link uses the default look and automatic placement. Changing the placement mode, label, colors and button style is part of full customization on the Growth plan.
Multiple product templates? If you use several product templates (e.g. one for a specific collection), repeat the steps above for each template that should show a size guide.
Part 3 — Verify it on a product page
- Make sure at least one guide exists and is assigned — the fastest route is creating a guide from a template and assigning it to a test product.
- Open that product on your storefront in a private/incognito window. The Size guide link should appear near the size selector.
- Click it. The modal opens instantly with your chart, the cm/inches switch, and any how-to-measure blocks you added.
Link not showing? The link only renders on products that actually have a guide assigned (directly, or via a tag, collection, vendor or global assignment). If a product matches no guide, FitKit stays invisible — by design.
Zero impact on page speed: nothing is fetched over the network when the product page loads — the guide configuration travels with the page via a metafield, and the modal script (4.8 KB gzipped) is lazy-loaded only on the first click. Your Core Web Vitals stay exactly where they were.
Next step: create your first size guide from a template.
Still stuck? Email us at anadvisory.fr@gmail.com.
We read everything and reply within one business day.