Storefront Setup Guide

Use this guide to configure the exact storefront surfaces merchants use.

Step 1: Install the App and Open the Dashboard

Find Fits In The Box in the Shopify App Store and click Install. Approve the required permissions and then open the app from Apps > Fits In The Box in Shopify admin.

The dashboard is where you sync products, manage boxes, configure settings, and verify which storefront surfaces are ready.

Step 2: Sync Products

Run Sync Products from the dashboard before testing the widget. Fits In The Box uses the synced catalog to calculate live shipping estimates.

Fits In The Box reads product dimensions from the metafields configured in Settings. By default, the app expects shipping.length, shipping.width, and shipping.height on products. If the dashboard still shows With Dimensions: 0 after syncing, update the mapping in Settings and sync again.

Step 3: Add Your Boxes

Go to the Boxes tab and click Add Box. Enter the box name, inner dimensions (length, width, height), maximum weight, and shipping cost.

Most merchants start with their carrier flat rate boxes. For example, USPS Priority Mail offers Small (8.625 × 5.375 × 1.625 in), Medium (11.25 × 8.75 × 6.0 in), and Large (12.25 × 12.25 × 6.0 in) flat rate boxes. Add as many box sizes as you use.

The packing engine can only show a shipping price when at least one valid box matches the order, so make sure your active boxes have complete dimensions, weight limits, and real shipping costs.

Step 4: Add the Product Page Block

If you expect shipping estimates on product pages, add the Shipping Estimate app block to the active product template:

Go to Online Store > Themes > Customize
Open the active Product template
Click Add block in the product section
Under Apps, select Shipping Estimate
Save the theme

This is the most common missing setup step when a store shows the cart drawer asset but never shows a shipping estimate on the product page.

Step 5: Add the Cart Surface Your Theme Uses

Fits In The Box supports two cart surfaces, and they are configured separately:

Cart page: open the active Cart template and add the Cart Shipping Estimate block.
Cart drawer: open App embeds in the theme editor and enable Cart Drawer Shipping Estimate.

Turning on the cart drawer embed does not add the product page block. Product pages, cart pages, and app embeds are separate storefront surfaces.

Step 6: Verify the Storefront

Before you consider the storefront setup complete, verify the setup on a live store:

Products have been synced at least once
At least one active box has dimensions, max weight, and shipping cost
The product page block is installed on the active product template
The cart page block is installed if the theme uses a dedicated cart page
The cart drawer embed is enabled if the theme uses a drawer
You opened a live product page and confirmed the estimate is visible

If a product page shows no estimate and no request is sent to /api/shipping-estimate, reopen the product template and confirm the product page block is actually present there.

Tips for Best Results

Accurate dimensions matter. Measure actual product packaging dimensions, not just the item itself. Include any padding or protective packaging.
Use inner box dimensions. When configuring boxes, use the inner (usable) dimensions, not the outer measurements.
Save after each theme change. App blocks and app embeds are not live until the theme editor changes are saved.
Use the dashboard status cards. The embedded app shows product, cart, and app-embed status so you can spot missing theme setup before someone reports a blank widget.

Need Help?

If you run into any issues, email us at support@fitsinthebox.com and we'll get you sorted.