Settings
Storefront Settings

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.

FieldExample
Embed Host URLhttps://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.

FeatureDescription
Immediate CheckoutCustomers complete payment instantly
Configured PricingProducts use the prices set by your pricing formulas
Best ForStandard 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.

FeatureDescription
Quote SubmissionCustomers request a quote instead of buying immediately
Review ProcessYou approve, modify, or decline each quote
Flexible PricingAdjust pricing before sending the quote to the customer
Best ForCustom 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 productsBehavior
OnCustomers see indicative prices before requesting a quote
OffCustomers 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:

AttributeValuesDescription
data-companyYour company slugRequired identifier
data-width100%, 1200px, etc.Embed width (default 100%)
data-height1280px, 1600px, etc.Embed height (default 800px)
data-themelight, darkPassed through to the iframe only

Important: data-theme does 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

PropertyDescription
heightAdjust the height attribute (e.g., 1280, 1600)
padding-left/rightAdjust mobile gutters (default 16px)
widthUses 100vw for full-width display

Installation Instructions

Standard HTML Website

  1. Choose your embed type (Iframe or Script).
  2. Copy the embed code from Settings → Orders → Storefront.
  3. Paste it into your HTML where the storefront should appear.
  4. 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

  1. Use the Iframe embed method.
  2. Add it as a custom HTML/embed block.
  3. Adjust the height to match your page design.

Testing Your Embed

  1. Copy your embed code.
  2. Paste it into your website.
  3. Verify the storefront loads correctly.
  4. Test product configuration.
  5. Test checkout (Direct Order) or quote submission (Quote-Based).
  6. Verify mobile responsiveness.

Preview Link

Access your storefront directly:

https://embed.timbercloud.com/your-company-slug

Troubleshooting

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 .io host).

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 height or data-height attribute.
  • 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