Storefront Settings
Configure how your embeddable storefront appears and behaves on your website. The storefront lets customers browse products, configure options, and submit orders or quote requests directly from your existing site.
Navigation: Settings → Orders → Storefront
Tip: The embeddable storefront is one of two front-ends TimberCloud gives you from the same catalog. If you don't have your own website (or want a full marketing site), you can use the hosted Website builder instead — see Domain, Theme & SEO and the Website overview. Both share the same products and checkout; you don't have to embed.
Storefront URL Configuration
Embed Host URL
Enter the full URL of the page where you've embedded TimberCloud.
| Field | Example |
|---|---|
| Embed Host URL | https://yoursite.com/orders |
This URL ensures password-reset emails return customers to the correct page on your website rather than to TimberCloud directly.
Selling Mode
Choose how customers interact with your products. You can switch between two modes:
Direct Order
Customers can purchase products directly without manual approval.
| Feature | Description |
|---|---|
| Immediate Checkout | Customers complete payment instantly |
| Configured Pricing | Products use the prices set by your pricing formulas |
| Best For | Standard products with clear specifications |
Requirements:
- A connected and active Stripe account (Stripe must be ready to accept charges)
- A paid plan — payments are only available on Commerce and above
Note: Direct Order auto-disables when Stripe isn't connected. If your Stripe account can't yet accept charges, the storefront automatically falls back to Quote-Based mode until Stripe is connected.
Important: On the Free plan, payments are off and pricing is hidden, so Direct Order is unavailable — the storefront is inquiry/quote-only. To accept payments and switch to Direct Order, upgrade to Commerce or higher. See The Free Plan and Subscriptions & Plans.
Quote-Based Workflow
Customers submit quote requests that you review before any payment is taken.
| Feature | Description |
|---|---|
| Quote Submission | Customers request a quote instead of buying immediately |
| Review Process | You approve, modify, or decline each quote |
| Flexible Pricing | Adjust pricing before sending the quote to the customer |
| Best For | Custom work, complex orders, negotiated pricing, or Free-plan inquiry collection |
Price Visibility
Control whether prices are shown to customers in quote-based selling.
Quote Mode Settings
When using the quote-based workflow, a single toggle controls indicative pricing:
| Toggle: Show prices for quote-based products | Behavior |
|---|---|
| On | Customers see indicative prices before requesting a quote |
| Off | Customers only see Request Quote buttons (prices hidden) |
When to show prices:
- Products have consistent pricing
- You want transparency before a quote is submitted
- You want to reduce back-and-forth on pricing expectations
When to hide prices:
- Highly customizable products
- Pricing varies significantly by specification
- Competitive or negotiable pricing
Note: On the Free plan, pricing is hidden regardless of this toggle — Free storefronts are always inquiry-only.
Embed Your Storefront
Add your TimberCloud storefront to your website using one of the embed codes below. Both load your catalog from embed.timbercloud.com/your-company-slug.
Embed Options
Iframe Only (Simple)
Best for: quick setup and broad CMS compatibility.
<div
style="
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
width: 100vw;
max-width: 100vw;
overflow: hidden;
padding-left: 16px;
padding-right: 16px;
"
>
<iframe
id="timbercloud-embed"
src="https://embed.timbercloud.com/your-company-slug"
width="100%"
height="1280"
style="border: none; border-radius: 8px; display: block;"
title="Product Catalog"
allow="payment"
loading="lazy"
></iframe>
</div>Pros:
- Works immediately on any website
- No scripts that could be blocked by a CMS
- Full-width responsive design
Cons:
- Password-reset emails return to the homepage rather than the exact page
Dynamic Script (Recommended)
Best for: a better user experience and proper routing.
<div id="timbercloud-embed"></div>
<script
src="https://embed.timbercloud.com/embed.js"
data-company="your-company-slug"
data-theme="light"
data-width="100%"
data-height="1280px"
defer
></script>Pros:
- Password reset returns to the exact page
- Better routing and a seamless experience
- Auto-adjusting height
- Cleaner HTML
Cons:
- WordPress may strip script tags from Custom HTML blocks
Script Customization Options
The embed.js script supports exactly four data attributes:
| Attribute | Values | Description |
|---|---|---|
data-company | Your company slug | Required identifier |
data-width | 100%, 1200px, etc. | Embed width (default 100%) |
data-height | 1280px, 1600px, etc. | Embed height (default 800px) |
data-theme | light, dark | Passed through to the iframe only |
Important:
data-themedoes not change the storefront's light/dark appearance. The storefront chrome is controlled by your company theme setting (site_theme_mode), and brand colors come from your storefront settings — not from the embed code. To change the storefront's look, update your TimberCloud settings (see Customization), not the embed snippet.
Iframe Customization Options
| Property | Description |
|---|---|
height | Adjust the height attribute (e.g., 1280, 1600) |
padding-left/right | Adjust mobile gutters (default 16px) |
width | Uses 100vw for full-width display |
Installation Instructions
Standard HTML Website
- Choose your embed type (Iframe or Script).
- Copy the embed code from Settings → Orders → Storefront.
- Paste it into your HTML where the storefront should appear.
- Customize dimensions as needed.
WordPress
For Script Embed:
- Use a plugin like "Insert Headers and Footers"
- Or add it via your theme's
functions.php
For Iframe Embed:
- Add it directly to the page using a Custom HTML block
- Works without script restrictions
Squarespace / Wix / Shopify
- Use the Iframe embed method.
- Add it as a custom HTML/embed block.
- Adjust the height to match your page design.
Testing Your Embed
- Copy your embed code.
- Paste it into your website.
- Verify the storefront loads correctly.
- Test product configuration.
- Test checkout (Direct Order) or quote submission (Quote-Based).
- Verify mobile responsiveness.
Preview Link
Access your storefront directly:
https://embed.timbercloud.com/your-company-slugTroubleshooting
Storefront Not Loading
- Verify your company slug is correct.
- Ensure the embed page URL is publicly accessible.
- Confirm the snippet uses
embed.timbercloud.com(not an older.iohost).
Direct Order Option Missing
- Direct Order requires a connected Stripe account that can accept charges; until then the storefront stays in Quote-Based mode.
- On the Free plan, payments are off entirely — upgrade to Commerce or higher to enable checkout. See Subscriptions & Plans.
Height Issues
- Adjust the
heightordata-heightattribute. - Use the script embed for auto-adjusting height.
- Test on different screen sizes.
Password-Reset Links Wrong
- Use the Dynamic Script method.
- Set your Embed Host URL in Settings → Orders → Storefront.
- Verify the embed page URL matches.
CMS Blocking Scripts
- Switch to the Iframe embed method.
- Use a trusted script-insertion plugin.
- Contact your CMS provider about whitelisting.
Embed or Hosted Website?
You don't have to embed at all. TimberCloud also offers a full hosted website (Site Builder) on Commerce and above — a multi-page, white-label marketing site at embed.timbercloud.com/site/your-slug or your own custom domain.
- Embed the storefront if you already have a website and just want to drop in a catalog and checkout.
- Use the hosted Website if you want a complete site (or don't have one yet).
See Your Website and Domain, Theme & SEO to set up the hosted site, theme, custom domain, analytics, and SEO.
Related Settings
- Order Settings — Order processing configuration
- Embeddable Storefront overview — Full embed reference and customer-facing features
- Storefront Features — Pagination, live carrier rates, order tracking, add-ons
- Domain, Theme & SEO — Hosted website settings (theme, custom domain, analytics)
- Company Settings — Company profile and subscription