↶ Indítsd el az áruházad, automatizáld az eladásokat, és skálázd vállalkozásodat AI-vezérelt sebességgel.

Sablonok

Válassz sablont, és indulj pillanatok alatt

Itt is találsz kész webshop-sablonokat, amit pillanatok alatt a saját márkádra szabunk.

Webshop sablon

Ö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.
Webshop sablon

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.
Webshop sablon

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.
Webshop sablon

Méhész

Ez a letisztult, méhészet témájú webshop sablon meleg, arany árnyalatokkal és természetközeli hangulattal teremt bizalmat. A nagyméretű vizuális elemek és a jól tagolt szekciók segítik a termékek kiemelését. A bemutatkozó és termékblokkok átlátható felépítése támogatja az értékesítést. Ideális választás prémium, kézműves termékeket kínáló webáruházak számára.
Kész kód snippetek

Másolható kódrészletek

Kis építőelemek integrációkhoz, retry-hoz és workflowkhoz.

Kód snippet

Product List Example

Nincs leírás

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>
Kód snippet

Névtelen

Nincs leírás

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>
Kód snippet

Editable header

Nincs leírás

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>

A Jövő E-kereskedelmi Platformja

Private AI network for your team and corporation

Intuitív, Mesterséges Intelligencián Alapuló Szerkesztő

A Rikrol saját fejlesztésű mesterséges intelligencia szerkesztője lehetővé teszi, hogy bármely elemen pont és kattintás (point-and-click) elven végezzen testreszabást, amely révén átfogó, oldalszintű módosításokat eszközölhet a design és a funkcionalitás tökéletesítésére..

Növekedés-orientált Integrációk

Platformunk eladásra, monitoringra és marketingre van hangolva. A kulcsfontosságú rendszerekkel, mint például a Meta (Facebook) Pixel, kialakított saját integrációink tökéletesek arra, hogy közvetlenül támogassák és nyomon kövessék az Ön üzleti növekedését.:

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

Skálázható, Jövőbiztos Architektúra

Fejlett alaptechnológiánk lehetővé teszi, hogy ne csak a vizuális megjelenésen, hanem webhelye alapvető funkcionalitásán is drasztikusan változtasson. Ez biztosítja, hogy stabilan támogassuk Önt azután is, hogy vállalata mérete tíz- vagy százszorosára növekszik.

Verhetetlen csomagok

Korlátlan Webshop

Saját domain, korlátlan alkalmazott, napi 10 AI használat. A versenytársak árának tizedéért.

15 000 FtPer
Hó

Korlátlan Webshop és AI

Minden, amit az alapcsomag tartalmaz, plusz korlátlan AI használat.

45 000 FtPer
Hó

Vállalati

Egyedi csomag vállalati ügyfeleknek. Az üzletedre finomhangolva a növekedésért.

600 000 Ft+Per
Hó
Nettó árak.
Rikrol™ Internet culture. © 2025. Minden jog fenntartva.