Customization

Configure and style your TimberCloud Embeddable Storefront to match your brand and website design.

Important: The storefront's theme (light/dark) and brand colors are controlled by your TimberCloud settings — not by attributes in your embed code. The HTML/CSS on this page controls how the embed container sits inside your page (size, spacing, framing, responsiveness); the storefront's own look comes from your dashboard.

Theme & Brand Colors

The storefront's appearance is driven entirely by your TimberCloud company settings, so it stays consistent no matter how you embed it (script or iframe, on any platform).

Light / Dark theme

Whether the storefront renders in light or dark mode is controlled by your storefront theme mode setting in TimberCloud (site_theme_mode), not by your embed code.

Note: The data-theme attribute on the embed script is passed through to the iframe element for compatibility, but the storefront app does not use it to set the theme. Adding data-theme="dark" will not make the storefront dark — set the theme mode in your dashboard instead.

To change the storefront theme:

Log in to your TimberCloud dashboard at app.timbercloud.com.
Go to your storefront/website settings (see Storefront Settings and Domain, Theme & SEO).
Choose your theme mode (light or dark).
Save. The change applies everywhere the storefront is shown.

Brand colors

The storefront automatically uses your company's primary and secondary colors (site_primary_color and site_secondary_color) from your TimberCloud settings. These are applied to:

Buttons and interactive elements
Loading indicators and accents
Highlights and gradient effects throughout the interface

To set your brand colors:

In your TimberCloud dashboard, open your storefront/website branding settings.
Set your Primary Color and Secondary Color (hex values).
Save changes.

The embed reflects your brand colors automatically — no changes to your embed code are needed.

Tip: These colors are per-company white-label settings. If you also run a hosted website with a custom domain, it uses the same primary/secondary colors, so your storefront and site stay visually consistent.

Sizing Options

Script Embed Sizing

Control size via data attributes:

<div id="timbercloud-embed"></div>
<script
  src="https://embed.timbercloud.com/embed.js"
  data-company="your-company-slug"
  data-width="100%"
  data-height="900px"
  defer
></script>

The four supported attributes are data-company (required), data-theme (passed through but does not set the storefront theme), data-width (default 100%), and data-height (default 800px). See the API Reference and Setup guide for details.

Iframe Sizing

Control via HTML attributes and CSS:

<iframe
  id="timbercloud-embed"
  src="https://embed.timbercloud.com/your-company-slug"
  width="100%"
  height="800"
  style="border: none; border-radius: 8px;"
  allow="payment"
></iframe>

Container Styling

The examples below style the container that holds the embed. They work the same regardless of your storefront theme.

Full-Width Container (Script Embed)

<div 
  id="timbercloud-embed"
  style="
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    width: 100vw;
    max-width: 100vw;
    overflow: hidden;
    padding: 0 16px;
  "
></div>
<script
  src="https://embed.timbercloud.com/embed.js"
  data-company="your-company-slug"
  data-height="1280px"
  defer
></script>

Full-Width Container (Iframe Embed)

<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"
  ></iframe>
</div>

Card-Style Container

<style>
  .embed-card {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 
      0 4px 6px -1px rgba(0, 0, 0, 0.1),
      0 2px 4px -1px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    margin: 24px auto;
    max-width: 1200px;
  }
</style>
 
<div class="embed-card">
  <div id="timbercloud-embed"></div>
</div>
 
<script
  src="https://embed.timbercloud.com/embed.js"
  data-company="your-company-slug"
  data-height="800px"
  defer
></script>

With Header Section

<style>
  .storefront-section {
    max-width: 1400px;
    margin: 40px auto;
  }
  
  .storefront-header {
    margin-bottom: 24px;
  }
  
  .storefront-header h2 {
    font-size: 2rem;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 8px 0;
  }
  
  .storefront-header p {
    color: #666;
    margin: 0;
  }
</style>
 
<div class="storefront-section">
  <div class="storefront-header">
    <h2>Shop Our Products</h2>
    <p>Browse our collection and order online</p>
  </div>
  
  <div id="timbercloud-embed"></div>
</div>
 
<script
  src="https://embed.timbercloud.com/embed.js"
  data-company="your-company-slug"
  data-height="800px"
  defer
></script>

Responsive Sizing

CSS Media Queries

<style>
  /* Target the iframe created by embed.js */
  #timbercloud-iframe,
  #timbercloud-embed iframe {
    height: 600px !important;
  }
  
  @media (min-width: 640px) {
    #timbercloud-iframe,
    #timbercloud-embed iframe {
      height: 700px !important;
    }
  }
  
  @media (min-width: 768px) {
    #timbercloud-iframe,
    #timbercloud-embed iframe {
      height: 800px !important;
    }
  }
  
  @media (min-width: 1024px) {
    #timbercloud-iframe,
    #timbercloud-embed iframe {
      height: 900px !important;
    }
  }
  
  @media (min-width: 1280px) {
    #timbercloud-iframe,
    #timbercloud-embed iframe {
      height: 1000px !important;
    }
  }
</style>
 
<div id="timbercloud-embed"></div>
<script
  src="https://embed.timbercloud.com/embed.js"
  data-company="your-company-slug"
  defer
></script>

Tip: The script embed auto-resizes its iframe to fit content via a postMessage event, so in most cases you don't need fixed heights at all. Use the media queries above only when you want to enforce specific heights.

Full Viewport Height

<style>
  .full-height-container {
    height: calc(100vh - 80px); /* Subtract your header height */
    min-height: 600px;
  }
  
  #timbercloud-iframe,
  #timbercloud-embed iframe {
    height: 100% !important;
  }
</style>
 
<div id="timbercloud-embed" class="full-height-container"></div>
<script
  src="https://embed.timbercloud.com/embed.js"
  data-company="your-company-slug"
  data-height="100%"
  defer
></script>

Full-Page Layouts

Dedicated Store Page

<!DOCTYPE html>
<html>
<head>
  <title>Shop | Your Company</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    }
    
    header {
      background: #1a1a1a;
      color: white;
      padding: 16px 24px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    header .logo {
      font-size: 1.25rem;
      font-weight: 700;
    }
    
    header nav a {
      color: white;
      text-decoration: none;
      margin-left: 24px;
    }
    
    main {
      height: calc(100vh - 60px);
    }
    
    #timbercloud-embed {
      height: 100%;
    }
    
    #timbercloud-iframe {
      height: 100% !important;
    }
  </style>
</head>
<body>
  <header>
    <div class="logo">Your Company</div>
    <nav>
      <a href="/">Home</a>
      <a href="/about">About</a>
      <a href="/contact">Contact</a>
    </nav>
  </header>
  
  <main>
    <div id="timbercloud-embed"></div>
  </main>
  
  <script
    src="https://embed.timbercloud.com/embed.js"
    data-company="your-company-slug"
    data-height="100%"
    defer
  ></script>
</body>
</html>

Tip: If you don't already have a website to embed into, you can skip the HTML above entirely and use the hosted website instead — a complete, white-label site we host for you at embed.timbercloud.com/site/your-slug (or your own custom domain).

Dark-Theme Pages

If your website uses a dark design, you can style the embed container to blend in. Remember: this styles only the container — to make the storefront chrome itself dark, set your theme mode to dark in your TimberCloud settings (it is not controlled by embed code).

<style>
  .dark-container {
    background: #1a1a2e;
    padding: 24px;
    border-radius: 16px;
  }
  
  .dark-container #timbercloud-iframe {
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  }
</style>
 
<div class="dark-container">
  <div id="timbercloud-embed"></div>
</div>
 
<script
  src="https://embed.timbercloud.com/embed.js"
  data-company="your-company-slug"
  data-height="800px"
  defer
></script>

Loading States

Show a placeholder while the embed loads:

<style>
  .embed-loader {
    position: relative;
    background: #f5f5f5;
    border-radius: 8px;
    min-height: 800px;
  }
  
  .embed-loader .placeholder {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #666;
    z-index: 0;
  }
  
  .embed-loader .spinner {
    width: 40px;
    height: 40px;
    border: 3px solid #e0e0e0;
    border-top-color: #3b82f6;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 16px;
  }
  
  @keyframes spin {
    to { transform: rotate(360deg); }
  }
  
  .embed-loader #timbercloud-iframe {
    position: relative;
    z-index: 1;
    background: white;
  }
</style>
 
<div class="embed-loader">
  <div class="placeholder">
    <div class="spinner"></div>
    <p>Loading store...</p>
  </div>
  
  <div id="timbercloud-embed"></div>
</div>
 
<script
  src="https://embed.timbercloud.com/embed.js"
  data-company="your-company-slug"
  data-height="800px"
  defer
></script>

Mobile Considerations

The embed is fully responsive by default. The storefront UI itself is mobile-optimized (touch-friendly controls, no iOS input zoom). These container tweaks help it sit well on small screens:

Mobile-Friendly Height

<style>
  #timbercloud-iframe {
    /* Taller on mobile to avoid excessive scrolling within the iframe */
    height: 100vh !important;
    max-height: 1200px;
    min-height: 600px;
  }
  
  @media (min-width: 768px) {
    #timbercloud-iframe {
      height: 800px !important;
    }
  }
</style>
 
<div id="timbercloud-embed"></div>
<script
  src="https://embed.timbercloud.com/embed.js"
  data-company="your-company-slug"
  defer
></script>

Remove Horizontal Scroll

<style>
  body {
    overflow-x: hidden;
  }
  
  #timbercloud-embed {
    width: 100%;
    max-width: 100vw;
    overflow: hidden;
  }
</style>

Iframe-Specific Styling

When using the iframe embed method, you have full control over the iframe element:

<style>
  #timbercloud-embed {
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: box-shadow 0.3s ease;
  }
  
  #timbercloud-embed:hover {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
  }
</style>
 
<iframe
  id="timbercloud-embed"
  src="https://embed.timbercloud.com/your-company-slug"
  width="100%"
  height="800"
  style="border: none;"
  allow="payment"
></iframe>

What You Can and Can't Customize

Customized from your TimberCloud settings (not from embed code):

Theme mode — light or dark, set by your storefront theme mode (site_theme_mode).
Brand colors — primary and secondary colors (site_primary_color, site_secondary_color) applied to buttons, accents, and highlights.
Selling mode & pricing visibility — Direct Order vs. Quote-based, and whether prices show. See Storefront Settings.
Catalog contents — products, categories, attributes, and pricing all come from your catalog. Shoppers can filter the catalog by category in the storefront.

Controlled from your own page (this guide):

The container's size, spacing, framing, and responsiveness via the HTML/CSS shown above.

Not currently configurable:

Typography — the storefront uses its own font (Poppins); you can't substitute a different font in the storefront UI.
Storefront layout — the product grid and overall storefront layout are standardized and not rearrangeable from embed code.

Note: If you want full control over page structure, copy, and layout around your products, use the hosted website and its block-based page editor instead of the embeddable storefront.

Best Practices

Test on Multiple Devices — Ensure your container styling works on mobile, tablet, and desktop.
Let It Auto-Resize — The script embed auto-sizes its height to fit content; set fixed heights only when you need them.
Use the Script Embed — It handles edge cases like password-reset routing automatically.
Keep Containers Simple — Complex container styling can conflict with the embed's internal styles.
Use HTTPS — Required for payment processing and secure cookies.
Use the defer Attribute — Ensures the script runs after the DOM is ready.

Next Steps

Setup — Install the embeddable storefront
Storefront Features — Pagination, live carrier rates, order tracking, and more
API Reference — PostMessage communication, URL parameters, and events
Your Website — The full hosted, white-label site alternative to embedding

Installation & Setup Storefront Features