Embeddable Storefront
Customization

Customization

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

Theme Selection

Both integration methods support theming via the data-theme attribute or URL parameter.

Script Embed

<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="800px"
  defer
></script>

Available themes:

  • light (default)
  • dark

Iframe Embed

The theme is determined by your company settings in TimberCloud.

Brand Colors

The embed automatically uses your company's primary color from your TimberCloud settings. This color is applied to:

  • Buttons and interactive elements
  • Loading indicators
  • Accent colors throughout the interface
  • Gradient effects

Setting Your Primary Color

  1. Log in to your TimberCloud dashboard
  2. Go to Settings → Company
  3. Set your Primary Color
  4. Save changes

The embed will automatically reflect your brand color — no additional configuration needed.

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>

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

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>

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>

Dark Mode Containers

If your website has a dark theme, style the container to match:

<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-theme="dark"
  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. However, consider these mobile optimizations:

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 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's NOT Customizable (Currently)

The following aspects of the embed are not currently customizable:

  • Fonts: The embed uses the Poppins font family
  • Layout: Product grid layout is fixed
  • Component Visibility: All components are shown
  • Product Filtering by Category: Products are not pre-filtered

These features use your TimberCloud backend settings where applicable. Customization options may expand in future updates.

Best Practices

  1. Test on Multiple Devices: Ensure your container styling works on mobile, tablet, and desktop
  2. Set Appropriate Heights: Too short causes excessive scrolling; too tall wastes space
  3. Use the Script Embed: It handles edge cases like password reset routing automatically
  4. Keep Containers Simple: Complex styling can conflict with the embed's internal styles
  5. Use HTTPS: Required for payment processing and secure cookies
  6. Use defer Attribute: Ensures the script runs after DOM is ready

Next Steps

Installation & SetupAPI Reference