Storefront Composer

The StitchIQ storefront is a fully self-contained embroidery catalog embedded directly on your Shopify store via App Proxy. Customers browse your designs, preview real-time thread colors, get instant price estimates, and add to cart — all without leaving your store.

How It Works

StitchIQ uses Shopify's App Proxy feature to serve the catalog at a URL on your own store domain. No iframes from an external domain, no clunky redirects — the page loads under your store's URL and inherits your browser session for cart operations.

https://your-store.myshopify.com/apps/stitchiq

Customer Experience

When a customer visits your catalog URL:

1. Browse — A grid of your designs loads with category/tag filter pills and a search bar.
2. Click a design — A detail modal opens with a live thread color preview rendered using WebGL.
3. Customize colors — Each thread layer has a color swatch. Customers can change individual thread colors and the preview updates in real time.
4. See the price — An estimated price is calculated and displayed based on your pricing settings.
5. Add to cart — Clicking "Add to Cart" adds your embroidery product to the Shopify cart with all design details attached as line item properties.

Adding the Catalog to Your Store Navigation

Go to Online Store → Navigation in your Shopify admin:

1. Click your main menu (e.g. "Main menu").
2. Click Add menu item.
3. Set the name (e.g. "Embroidery Catalog") and paste /apps/stitchiq as the link.
4. Save.

The catalog link will now appear in your store's navigation.

The Filter Bar

The filter bar automatically renders based on the categories and tags assigned to your designs — no configuration needed. If all your designs are in one category or have no tags, the filter bar is hidden automatically.

See Gallery & Deep Links for how to share pre-filtered catalog views.

Live Thread Color Preview

The preview renders each design layer with the customer's selected thread colors using a WebGL-based engine. The color picker uses standard HTML color inputs — any color the customer selects is previewed immediately without a page reload.

Preview accuracy

The WebGL preview approximates what the embroidery will look like but is not an exact reproduction of the physical embroidery output. Thread texture, fabric color, and stitching direction all affect the final result.

Cart Integration

"Add to Cart" requires a Shopify product configured as your embroidery product. When a customer adds an embroidered design, the following line item properties are attached to the cart item:

Property	Value
Design	Design name
Format	File format (.pes, .dst, etc.)
Stitch Count	Number of stitches
Thread Colors	JSON map of thread index → hex color
Price	Calculated price at time of add

These properties are visible in your Shopify order details and on packing slips.

See the Integration Guide for the full cart setup.

Embedding on a Specific Page

Instead of linking to the catalog as a navigation item, you can embed a link or button anywhere on your store:

In a theme section or page:

<a href="/apps/stitchiq" class="button">Browse Custom Designs</a>

On a product page — add a CTA button in your product template linking to the catalog or a category-filtered view.

Mobile Experience

The catalog is fully responsive. On mobile:

• The design grid collapses to 1-2 columns
• The filter bar wraps and remains scrollable
• The design modal is full-screen
• Touch-friendly color pickers

App Proxy URL

Shopify routes all requests to /apps/stitchiq through to the StitchIQ backend, which validates your shop domain and returns the catalog page scoped to your designs only. Customers from other stores cannot access your designs through this proxy.

Proxy must be enabled

The App Proxy is configured automatically during installation. If you ever see a 404 at /apps/stitchiq, try uninstalling and reinstalling the app, or contact support.