↶ Launch your store, automate sales, and scale your business with AI-driven speed.

Templates

Pick a template and go live fast

You can also start from our ready-made webshop templates and make them yours in minutes.

Site Template

Ötvös

Elegáns, időtálló megjelenésű webshop sablon kézzel készült ékszerek, ötvösműhelyek és exkluzív márkák számára. A design a meleg arany–bézs árnyalatokra, finom tipográfiára és letisztult kompozícióra épül, így tökéletes választás arany, ezüst és drágaköves kollekciók bemutatására.
Site Template

Teaház

Friss, prémium megjelenésű webshop sablon kézműves teák, specialty teaboltok és modern tea brandek számára. A design a természetesség és a minőség érzetére épül: lágy zöld árnyalatok, elegáns tipográfia és letisztult, levegős elrendezés teremti meg a nyugodt, bizalmat sugárzó atmoszférát.
Site Template

Virágkötő

Ez a virágkötő webshop sablon egy elegáns, prémium hangulatú megjelenést biztosít kézzel készített koszorúk és virágdíszek bemutatásához. A letisztult tipográfia, a meleg, természetes színvilág és a nagy méretű vizuális elemek érzelmes, inspiráló atmoszférát teremtenek. A felépítés tudatosan vezeti végig a látogatót a történeteden, a kínálaton és a rendelési folyamaton, így a márkaépítést és az értékesítést egyszerre támogatja. Ideális választás egyedi, szezonális és személyre szabott virágkompozíciók online értékesítéséhez.
Site Template

Beekeeper

This clean, honey-themed webshop template creates trust with warm golden tones and a natural atmosphere. Large visual elements and well-structured sections highlight the products effectively. The introduction and product blocks are clearly organized to support conversions. It is an ideal choice for premium, handcrafted online stores.
Ready-to-use snippets

Copy-paste starter code

Small building blocks for integrations, retries, and workflows.

Code Snippet

Product List Example

No description

product-list-example
<products-loader (loaded)="products = $event"/>
                <div class="product-grid">
                    <loop [data]="products" let="product">
                        <a [href]="product.pageURL" class="product-link">
                            <div class="product-card">
                                <div class="product-image-container">
                                    <img class="product-image" [src]="product.imageURL"/>
                                </div>
                                <div class="product-info">
                                    <span class="product-name">{{ product.name }}</span>
                                    <span class="product-price">{{ product.price }} {{ product.currency }}</span>
                                </div>
                            </div>
                        </a>
                    </loop>
            </div>
Code Snippet

Unnamed

No description

centered-header
<header-context (loaded)="hdr = $event"/>

    <style>
        /* --- CSAK A HEADER STÍLUSAI --- */
        .header-container {
            display: flex;
            align-items: center;
            padding: 0 5%;
            height: 100px;
            /* Megemelt magasság a nagyobb logónak */
            background: #ffffff;
            border-bottom: 1px solid #eaeaea;
            position: sticky;

        }

        /* Logó méretezése */
        .header-logo-img {
            height: 100px;
            /* Nagyobb logó */
            width: auto;
            transition: height 0.3s ease;
        }

        /* Menü középre igazítása */
        .desktop-nav-center {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 30px;
        }

        .nav-item-link {
            text-decoration: none;
            color: #666;
            font-size: 14px;
            font-weight: 500;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        /* Hover animáció a menüpontokhoz */
        .nav-item-link {
            position: relative;
            transition: color 0.3s ease;
        }

        .nav-item-link:hover {
            color: #1a1a1a;
            /* Sötétebb szín hoverre */
        }

        .nav-item-link::after {
            content: '';
            position: absolute;
            width: 0;
            height: 1.5px;
            bottom: -5px;
            left: 50%;
            background-color: #4a5d4e;
            /* A márka zöldes színe */
            transition: all 0.3s ease;
            transform: translateX(-50%);
        }

        .nav-item-link:hover::after {
            width: 100%;
            /* Szépen kihúzódik a vonal */
        }

        /* Mobil hamburger */
        .burger-btn {
            display: none;
            flex-direction: column;
            justify-content: space-around;
            width: 24px;
            height: 18px;
            background: transparent;
            border: none;
            cursor: pointer;
            padding: 0;
            z-index: 10;
        }

        .burger-line {
            width: 24px;
            height: 2px;
            background-color: #333;
            border-radius: 10px;
        }

        /* Mobil Drawer */
        .drawer-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.4);
            backdrop-filter: blur(2px);
            z-index: 10001;
        }

        .drawer-content {
            position: fixed;
            top: 0;
            left: 0;
            width: 300px;
            height: 100%;
            background: white;
            z-index: 10002;
            display: flex;
            flex-direction: column;
            box-shadow: 5px 0 15px rgba(0, 0, 0, 0.1);
            animation: slideIn 0.25s ease-out;
        }

        @keyframes slideIn {
            from {
                transform: translateX(-100%);
            }

            to {
                transform: translateX(0);
            }
        }

        /* --- RESPONSIVE --- */
        @media (max-width: 850px) {
            .desktop-only {
                display: none !important;
            }

            .desktop-nav-center {
                display: none !important;
            }

            .burger-btn {
                display: flex !important;
            }

            .header-container {
                height: 70px;
                justify-content: space-between;
            }

            .header-logo-img {
                height: 35px;
            }
        }
    </style>

    <if [condition]="hdr">
        <div class="header-container">
            <div class="burger-btn" (click)="hdr.menuOpen = true">
                <div class="burger-line"/>
                <div class="burger-line"/>
                <div class="burger-line"/>
            </div>

            <a [href]="hdr.navigation.homeUrl" style="display: flex; align-items: center; z-index: 11;">
                <img [src]="hdr.branding.logoUrl" class="header-logo-img"/>
            </a>

            <div class="desktop-nav-center">
                <loop [data]="hdr.navigation.entries" let="navItem">
                    <a [href]="navItem.url" class="nav-item-link">
                        {{ navItem.title }}
                    </a>
                </loop>
            </div>

            <div style="flex: 1;"/>

            <div style="display: flex; align-items: center; gap: 16px; z-index: 11;">
                <div class="desktop-only" style="font-size: 14px;">
                    <if [condition]="hdr.user.isLoggedIn">
                        <span style="color: #444;">{{ hdr.user.name }}</span>
                    </if>
                </div>
                <cart-button-1/>
            </div>

            <if [condition]="hdr.menuOpen">
                <div class="drawer-overlay" (click)="hdr.menuOpen = false"/>
                <div class="drawer-content">
                    <div style="padding: 20px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #eee;">
                        <img [src]="hdr.branding.logoUrl" style="height: 24px;"/>
                        <div (click)="hdr.menuOpen = false" style="font-size: 28px; cursor: pointer;"/>
                    </div>
                    <div style="display: flex; flex-direction: column; overflow-y: auto;">
                        <loop [data]="hdr.navigation.entries" let="mItem">
                            <a [href]="mItem.url" style="padding: 16px 20px; text-decoration: none; color: #333; border-bottom: 1px solid #f9f9f9;" (click)="hdr.menuOpen = false">
                                {{ mItem.title }}
                            </a>
                        </loop>
                    </div>
                </div>
            </if>
        </div>
    </if>
Code Snippet

Editable header

No description

header
<header-context (loaded)="hdr = $event"/>

  <style>
    .header-container {
      display: flex;
      align-items: center;
      padding: 0 1.5rem;
      height: 64px;
      background: #ffffff;
      border-bottom: 1px solid #eaeaea;
      gap: 20px;
      font-family: sans-serif;
    }

    /* Hamburger Button Styling */
    .burger-btn {
      display: none; /* Hidden by default */
      flex-direction: column;
      justify-content: space-around;
      width: 24px;
      height: 18px;
      background: transparent;
      border: none;
      cursor: pointer;
      padding: 0;
      z-index: 10;
    }

    .burger-line {
      width: 24px;
      height: 2px;
      background-color: #333;
      border-radius: 10px;
    }

    .admin-badge {
      background: #c70e01;
      color: white;
      font-size: 10px;
      padding: 2px 6px;
      border-radius: 4px;
      margin-left: 8px;
      font-weight: bold;
    }

    /* Floating Menu Overlay */
    .drawer-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.4);
      backdrop-filter: blur(2px);
      z-index: 999;
    }

    .drawer-content {
      position: fixed;
      top: 0;
      left: 0;
      width: 300px;
      height: 100%;
      background: white;
      z-index: 1000;
      display: flex;
      flex-direction: column;
      box-shadow: 5px 0 15px rgba(0,0,0,0.1);
      animation: slideIn 0.25s ease-out;
    }

    @keyframes slideIn {
      from { transform: translateX(-100%); }
      to { transform: translateX(0); }
    }

    .drawer-header {
      padding: 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #eee;
    }

    .drawer-link {
      padding: 16px 20px;
      border-bottom: 1px solid #f9f9f9;
      text-decoration: none;
      color: #333;
      font-weight: 500;
    }

    /* Responsive Logic */
    @media (max-width: 850px) {
      .desktop-only { display: none !important; }
      .burger-btn { display: flex !important; }
    }
  </style>

  <if [condition]="hdr">
    <div class="header-container">
      
      <div class="burger-btn" (click)="hdr.menuOpen = true">
        <div class="burger-line"/>
        <div class="burger-line"/>
        <div class="burger-line"/>
      </div>

      <a [href]="hdr.navigation.homeUrl" style="display: flex; align-items: center;">
        <img [src]="hdr.branding.logoUrl" style="height: 30px;"/>
      </a>

      <div class="desktop-only" style="display: flex; gap: 24px; margin-left: 10px;">
        <loop [data]="hdr.navigation.entries" let="navItem">
          <a [href]="navItem.url" style="text-decoration: none; color: #666; font-size: 14px; font-weight: 500;">
            {{ navItem.title }}
          </a>
        </loop>
      </div>

      <div style="flex: 1;"/>

      <div style="display: flex; align-items: center; gap: 16px;">
        <div class="desktop-only" style="font-size: 14px;">
          <if [condition]="hdr.user.isLoggedIn">
            <span style="color: #444;">{{ hdr.user.name }}</span>
            <if [condition]="hdr.user.isAdmin">
              <span class="admin-badge">ADMIN</span>
            </if>
          </if>
        </div>
        <cart-button-1/>
      </div>

      <if [condition]="hdr.menuOpen">
        <div class="drawer-overlay" (click)="hdr.menuOpen = false"/>
        
        <div class="drawer-content">
          <div class="drawer-header">
            <img [src]="hdr.branding.logoUrl" style="height: 24px;"/>
            <div (click)="hdr.menuOpen = false" style="font-size: 28px; cursor: pointer; line-height: 1;">
              &times;
            </div>
          </div>

          <div style="display: flex; flex-direction: column; overflow-y: auto;">
            <loop [data]="hdr.navigation.entries" let="mItem">
              <a [href]="mItem.url" class="drawer-link" (click)="hdr.menuOpen = false">
                {{ mItem.title }}
              </a>
            </loop>
          </div>

          <if [condition]="hdr.user.isLoggedIn">
            <div style="margin-top: auto; padding: 20px; background: #fcfcfc; border-top: 1px solid #eee;">
              <div style="color: #888; font-size: 12px; margin-bottom: 4px;">Signed in as</div>
              <div style="font-weight: 600; display: flex; align-items: center;">
                {{ hdr.user.name }}
                <if [condition]="hdr.user.isAdmin"><span class="admin-badge">ADMIN</span></if>
              </div>
            </div>
          </if>
        </div>
      </if>

    </div>
  </if>

Next-Generation E-commerce Platform

Private AI network for your team and corporation

Intuitive AI-Powered Visual Editor

Our proprietary AI editor allows for point-and-click customization on any element, enabling both subtle adjustments and sweeping, page-wide modifications to enhance design and functionality..

Growth-Focused Integrations

Our platform is fine-tuned for sales, monitoring, and marketing. Our proprietary integrations with key platforms like Meta (Facebook) Pixel are perfected to directly fuel and track your business growth.:

An LLM platform that supports role-based access control
Explore different LLM models running on your PC

Scalable, Future-Proof Architecture

Our advanced underlying technology enables you to drastically change the core functionality of your website, not just its visual appearance. This ensures we can robustly support you even after you 10x or 100x your company size.

Unbeatable packages

Unlimited Webshop

Own domain, unlimited staff, 10 AI requests a day. 10th of the price of the competitors.

$50Per
Month

Unlimited Webshop & AI

Everything the fundamental package contains plus unlimited AI requests.

$150Per
Month

Enterprise

Custom package for enterprise clients. Fine tuned to your bussiness for growth.

$2 000+Per
Month
Net prices.
Rikrol™ Internet culture. © 2025. All rights reserved.