Skip to Content
Linkyt is released 🎉
DocumentationE-commerce Storefronts

E-commerce Storefronts

Turn any website into a complete online store with Linkyt’s embeddable e-commerce storefronts. Perfect for adding shopping functionality to existing websites without rebuilding from scratch.

Features

Complete Shopping Experience

Product catalog, shopping cart, checkout, and order management in one embed.

Secure Payments

PCI-compliant payment processing with support for all major payment methods.

Brand Customization

Fully customizable design that matches your existing website perfectly.

Global Ready

Multi-currency support, international shipping, and localization.

Quick Start

Get your online store running in minutes:

1. Include Required Files

Add the Linkyt storefront CSS and JavaScript to your page:

head-section.htmlhtml
<link rel="stylesheet" href="https://cdn.linkyt.io/style.css">
<script src="https://cdn.linkyt.io/linkyt-storefront.umd.cjs"></script>

2. Add the Storefront Container

Place this container where you want your store to appear:

storefront-container.htmlhtml
<div
data-linkyt-storefront
data-store-id="your-store-id"
data-accent-color="#3182ce"
style="width: 100%; min-height: 500px;"
></div>

3. Replace Your Store ID

Update your-store-id with your actual Linkyt store identifier.

Configuration Options

Customize your storefront with these data attributes:

AttributeRequiredDefaultDescription
data-store-id✅-Your store identifier
data-accent-color❌#3182cePrimary brand color
data-currency❌USDDefault currency
data-language❌enInterface language
data-theme❌lightTheme mode (light/dark/auto)

Advanced Customization

Custom CSS Styling

Override default styles to match your brand:

custom-storefront.csscss
.linkyt-storefront {
font-family: 'Your Custom Font', sans-serif;
border-radius: 12px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

  .linkyt-product-card {
    transition: transform 0.3s ease;
    border-radius: 8px;
    overflow: hidden;
  }

  .linkyt-product-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
  }

  .linkyt-add-to-cart-btn {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    border-radius: 6px;
    padding: 12px 24px;
    font-weight: 600;
    color: white;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .linkyt-add-to-cart-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
  }

React Component Wrapper

For React applications, create a reusable component:

LinkytStorefront.tsxtsx
import React, { useEffect, useRef } from 'react';

  interface LinkytStorefrontProps {
    storeId: string;
    accentColor?: string;
    height?: string;
    currency?: string;
    language?: string;
  }

  const LinkytStorefront: React.FC<LinkytStorefrontProps> = ({
    storeId,
    accentColor = '#3182ce',
    height = '700px',
    currency = 'USD',
    language = 'en'
  }) => {
    const containerRef = useRef<HTMLDivElement>(null);

    useEffect(() => {
      // Load the Linkyt script if not already loaded
      if (!window.LinkytStorefront) {
        const script = document.createElement('script');
        script.src = 'https://cdn.linkyt.io/linkyt-storefront.umd.cjs';
        script.async = true;
        document.body.appendChild(script);
      }
    }, []);

    return (
      <div
        ref={containerRef}
        data-linkyt-storefront
        data-store-id={storeId}
        data-accent-color={accentColor}
        data-currency={currency}
        data-language={language}
        style={{ width: '100%', minHeight: height }}
      />
    );
  };

  export default LinkytStorefront;

Platform Integration Guides

Detailed instructions for popular platforms:

Performance Optimization

Lazy Loading

Load the storefront only when needed:

lazy-loading.jsjavascript
// Intersection Observer for lazy loading
document.addEventListener('DOMContentLoaded', function() {
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      // Load the storefront script
      const script = document.createElement('script');
      script.src = 'https://cdn.linkyt.io/linkyt-storefront.umd.cjs';
      document.body.appendChild(script);

      // Stop observing once loaded
      observer.disconnect();
    }
  });
});

const container = document.querySelector('[data-linkyt-storefront]');
if (container) {
  observer.observe(container);
}
});

CDN Optimization

For better performance, use our global CDN:

  • Americas: https://cdn-us.linkyt.io/
  • Europe: https://cdn-eu.linkyt.io/
  • Asia-Pacific: https://cdn-ap.linkyt.io/

SEO Considerations

Structured Data

Add product schema for better SEO:

product-schema.jsonjson
{
"@context": "https://schema.org/",
"@type": "Product",
"name": "Product Name",
"image": "https://example.com/product-image.jpg",
"description": "Product description",
"brand": {
  "@type": "Brand",
  "name": "Your Brand"
},
"offers": {
  "@type": "Offer",
  "priceCurrency": "USD",
  "price": "19.99",
  "availability": "https://schema.org/InStock",
  "seller": {
    "@type": "Organization",
    "name": "Your Store"
  }
}
}

Security Features

  • 🔒 PCI DSS Compliant: Secure payment processing
  • 🛡️ Data Encryption: All data encrypted in transit and at rest
  • 🔐 Secure Checkout: Tokenized payment processing
  • 📊 Privacy First: GDPR and CCPA compliant

Need Help?

```

Last updated on
WordPress IntegrationTroubleshooting Guide