Storefront & Theme Extension
TeamCo installs a Shopify theme extension that adds 13 blocks to your Online Store. The extension works with any Shopify theme and requires no code changes.
Installing the Theme Extension
TeamCo automatically installs the extension when you add the app to your store. To activate and place blocks in your theme:
- 1In Shopify admin, go to Online Store โ Themes.
- 2Click Customize on your active theme.
- 3In the App embeds section, enable TeamCo B2B โ this activates the core functionality.
- 4Add individual blocks to your desired sections using the theme editor sidebar.
App embed must be enabled first
The TeamCo B2B app embed in the App embeds section is required for all other blocks to function. Enable it before adding any individual blocks to your theme.
Available Blocks (13 total)
| Block | Purpose | Recommended placement |
|---|---|---|
| TeamCo B2B (App Embed) | Core functionality โ must be enabled | App embeds section |
| B2B Header | Portal navigation with logo and menu | Header section |
| Login / Logout Button | Magic-link login entry point for employees | Header section |
| Header Search | Product search bar for the portal | Header section |
| Catalog Dropdown | Catalog selector for browsing | Collection / product pages |
| Catalog View | Product listing grid with filters | Collection pages |
| Product Image | Variant-specific product image display | Product page |
| Variant Picker | Size, color, and option selectors | Product page |
| B2B Price Display | Price with discount badge for logged-in employees | Product page |
| Add to Cart | B2B buy button for the portal | Product page |
| Cart Drawer | Sliding cart sidebar with budget check | Any section |
| Cart View | Full cart page with address selector | Cart page |
| Employee Sizes | Size preference form for employees | Product / account page |
โLog in to see pricesโ Setup
You can hide prices from visitors who are not logged in as employees. Instead they see a โLog in to see pricesโ message with a lock icon.
To enable:
- 1Open the B2B Price Display block settings in the theme editor.
- 2Enable the "Hide prices when logged out" toggle.
- 3Optionally customize the message text, display style (block or inline text), and colors.
B2B Discount Display
When an employee is logged in, the B2B Price Display block shows their discounted price alongside the original price with a strikethrough.
- Discounted price calculated from the company's configured discount rate or vendor-specific discounts.
- Compare-at price shown with strikethrough (configurable โ can be hidden).
- Discount badge displaying the savings percentage, e.g. "Save 20%".
- Badge position: inline with price or below price โ configurable in block settings.
- Badge colors and font size are customizable.
Catalog View in the Storefront
The Catalog View block renders a product grid showing only the items from the employee's assigned catalogs. Products outside their catalog access are automatically hidden.
Filtering options โ vendor, category, tags, and product options such as size and color โ appear above the grid. Employees can combine filters to quickly find what they need. Navigation elements such as collection links can be hidden for catalog-restricted employees if needed.