Storefront Experience
What your customers see when they visit a team store, and how the shopping experience works.
How It Works
TeamIQ serves each team store as a white-labeled page on your Shopify store's domain using Shopify's App Proxy feature. The URL looks like this:
https://your-store.myshopify.com/apps/teamiq/store-slugThe page loads inside your store's theme — so the header, footer, and navigation from your main Shopify theme wrap around the storefront content. Customers never leave your store domain.
Customer Flow
When a customer visits a team storefront:
- Landing — They see the store's branded header with the logo, store name, and optional tagline. If a banner is configured, it appears at the very top.
- Browse products — A responsive grid of products from the linked collections and tags loads automatically.
- Open a product — Clicking any product card opens a product detail modal with the full product description, all images in a gallery, and all available variants (size, color, etc.).
- Select a variant — Variant selectors (dropdowns or buttons) update the price and availability dynamically.
- Add to cart — The "Add to Cart" button adds the item directly to the Shopify cart at the correct variant and quantity.
- Cart drawer — A branded slide-out cart drawer opens, showing all items with quantities and subtotals. The cart inherits the store's colors and logo.
- Checkout — "Proceed to Checkout" takes the customer to the standard Shopify checkout. The white-label experience ends here.
Storefront Header
The header includes:
- The store's logo (if uploaded) or the store name as text
- The header text / tagline (if configured)
- A cart icon with item count that opens the cart drawer
Product Grid
Products are displayed in a responsive grid:
- Desktop: 3–4 columns
- Tablet: 2–3 columns
- Mobile: 1–2 columns
Each product card shows:
- Featured image
- Product title
- Price range (from lowest variant to highest)
Clicking a card opens the product detail modal.
Product Detail Modal
The modal is a full-screen overlay with:
- An image gallery — click the arrow buttons or swipe (mobile) to browse all product images. If the customer selects a variant that has its own image assigned in Shopify, the gallery automatically scrolls to that image.
- Product title and price — updates dynamically as the customer changes variants.
- Full description — rendered HTML from the Shopify product description field, including any formatting.
- Variant selectors — one per option (e.g. Size, Color). Unavailable variants are displayed as disabled so customers can see the full option set even if some are out of stock.
- Quantity selector — increment/decrement spinner, defaulting to 1.
- Add to Cart button — adds the selected variant and quantity to the Shopify cart and opens the cart drawer.
All interactive elements (buttons, selectors) use the store's primary color.
Closing the modal
Customers can dismiss the modal by clicking outside it or pressing Escape.
Cart Drawer
After adding to cart, a branded slide-out drawer opens from the right side of the screen:
- Displays the store's logo in the drawer header
- Lists all cart line items with product title, variant, quantity, and price
- Quantity can be updated inline (+ / − buttons)
- Shows the cart subtotal
- Proceed to Checkout button links to Shopify's standard checkout
The cart drawer uses the store's primary color for buttons and the brand's font.
One cart for the whole store
The cart is Shopify's standard cart — it persists across the storefront session. Customers can add multiple products from the same team store in one order.
Announcement Banner
If a banner is configured, it appears fixed at the top of the page in the store's primary color, above the theme header. It is always visible and cannot be dismissed by the customer.
Password Gate
If the store is password-protected, customers see a centered gate page with:
- The store's logo (if set)
- The store name
- A "This store is password protected" message
- A password input and an Enter Store button styled with the primary color
After entering the correct password, the customer is redirected to the storefront with the password passed as a URL parameter for the session.
Closed Store Behavior
When an ordering window is closed (or the store is set to a non-active status), three behaviors are available — see Ordering & Availability for full details.
App Proxy & Domain
The storefront is served from your Shopify store's domain via Shopify's App Proxy. TeamIQ does not redirect customers to an external site — the URL stays on your-store.myshopify.com.
404 on storefront URL
If customers see a 404 at /apps/teamiq/..., the App Proxy may not be registered. Confirm TeamIQ is installed, wait up to 5 minutes after a fresh install, or contact support.