{"id":24633,"date":"2026-05-14T08:42:19","date_gmt":"2026-05-14T08:42:19","guid":{"rendered":"https:\/\/www.shoprenter.hu\/blog\/?p=24633"},"modified":"2026-05-18T08:56:26","modified_gmt":"2026-05-18T08:56:26","slug":"a-horizont-brewing-megujulasa","status":"publish","type":"post","link":"https:\/\/www.shoprenter.hu\/blog\/a-horizont-brewing-megujulasa","title":{"rendered":"Sablonos web\u00e1ruh\u00e1zb\u00f3l egyedi m\u00e1rka\u00e9lm\u00e9ny: a Horizont Brewing meg\u00fajul\u00e1sa"},"content":{"rendered":"\n<p>A Horizont Brewing m\u00e1rka 2014-t\u0151l v\u00e1lt a hazai kis\u00fczemi s\u00f6rpiac egyik meghat\u00e1roz\u00f3 szerepl\u0151j\u00e9v\u00e9. A kezdetekkor m\u00e9g gerillaf\u0151zdek\u00e9nt m\u0171k\u00f6dtek, saj\u00e1t \u00fczem n\u00e9lk\u00fcl, de a min\u0151s\u00e9gi kis\u00fczemi s\u00f6r\u00f6k ir\u00e1nti n\u00f6vekv\u0151 ig\u00e9ny hamar igazolta az elk\u00e9pzel\u00e9st &#8211; 2016-ra a m\u00e1rka saj\u00e1t f\u0151zd\u00e9hez jutott a k\u0151b\u00e1nyai F\u0151zdeparkban. Innen indult az a fejl\u0151d\u00e9si \u00fat, amelynek k\u00f6z\u00e9ppontj\u00e1ban az\u00f3ta is k\u00e9t dolog \u00e1ll: a mer\u00e9sz innov\u00e1ci\u00f3 \u00e9s a k\u00f6vetkezetes min\u0151s\u00e9g.<\/p>\n\n\n\n<p>A ma Ott\u00f3 G\u00e1bor vezet\u00e9s\u00e9vel m\u0171k\u00f6d\u0151 Horizont Brewing az elm\u00falt \u00e9vekben nemcsak itthon, hanem nemzetk\u00f6zi szinten is bizony\u00edtott. A f\u0151zde 2017-ben els\u0151k\u00e9nt K\u00f6z\u00e9p-Eur\u00f3p\u00e1b\u00f3l hozta el a dublini Craft Beer Cup Grand Champion d\u00edj\u00e1t, 2019-ben pedig a magyar s\u00f6rbloggerek v\u00e1lasztott\u00e1k a Legjobb F\u0151zd\u00e9nek. Ezek az elismer\u00e9sek j\u00f3l mutatj\u00e1k, hogy a Horizont nem csup\u00e1n r\u00e9sztvev\u0151je, hanem form\u00e1l\u00f3ja is lett a hazai kraft s\u00f6rkult\u00far\u00e1nak.<\/p>\n\n\n\n<p>Egy ilyen m\u00e1rk\u00e1n\u00e1l azonban a digit\u00e1lis jelenl\u00e9tnek is ugyanazt a szintet kell k\u00e9pviselnie, mint amit a term\u00e9kek \u00edg\u00e9rnek. A <a href=\"http:\/\/horizontsorok.hu\" target=\"_blank\" rel=\"noreferrer noopener\">horizontsorok.hu<\/a> 2020 \u00f3ta m\u0171k\u00f6dik Shoprenteren. Az indul\u00e1skor az akkor m\u00e9g leg\u00fajabbnak sz\u00e1m\u00edt\u00f3 Amsterdam t\u00e9m\u00e1t v\u00e1lasztott\u00e1k. Az\u00f3ta elr\u00f6ppent 5 \u00e9v, ami webdesign \u00e9s technol\u00f3giai szempontb\u00f3l sok.<\/p>\n\n\n\n<p>G\u00e1bor\u00e9k felismert\u00e9k, hogy ez a t\u00e9ma m\u00e1r nem szolg\u00e1lja megfelel\u0151en a pr\u00e9mium m\u00e1rka\u00e9lm\u00e9nyt, ez\u00e9rt a meg\u00fajul\u00e1s mellett d\u00f6nt\u00f6ttek. Ebben a cikkben a web\u00e1ruh\u00e1z \u00e1talakul\u00e1s\u00e1t mutatjuk be.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Miel\u0151tt rajzoltunk, elemezt\u00fcnk<\/h2>\n\n\n\n<p>A tervez\u00e9st egy <strong>UX audit <\/strong>el\u0151zte meg, melynek keret\u00e9ben adatokkal, kattint\u00e1s- \u00e9s h\u0151t\u00e9rk\u00e9pekkel elemezt\u00fck hol m\u0171k\u00f6dik j\u00f3l a web\u00e1ruh\u00e1z, hol akadnak el a l\u00e1togat\u00f3k, \u00e9s mely pontokon lehet jav\u00edtani a v\u00e1s\u00e1rl\u00e1si \u00e9lm\u00e9nyt. Ehhez k\u00e9t f\u0151 eszk\u00f6zt haszn\u00e1ltunk: Google Analytics-et \u00e9s Microsoft Clarity-t.<\/p>\n\n\n\n<p>A <strong>Google Analytics<\/strong> abban seg\u00edtett, hogy sz\u00e1mszer\u0171en l\u00e1ssuk a l\u00e1togat\u00f3i viselked\u00e9st:<\/p>\n\n\n\n<ul>\n<li>honnan \u00e9rkeznek a v\u00e1s\u00e1rl\u00f3k,&nbsp;<\/li>\n\n\n\n<li>milyen eszk\u00f6zr\u0151l b\u00f6ng\u00e9sznek, \u00e9s<\/li>\n\n\n\n<li>mely oldalak a legn\u00e9pszer\u0171bbek.<\/li>\n<\/ul>\n\n\n\n<p>A <strong>Microsoft Clarity<\/strong> ezzel szemben ink\u00e1bb azt mutatta meg, hogyan haszn\u00e1lj\u00e1k az oldalt a l\u00e1togat\u00f3k a gyakorlatban:&nbsp;<\/p>\n\n\n\n<ul>\n<li>hova kattintanak,&nbsp;<\/li>\n\n\n\n<li>meddig g\u00f6rgetnek,&nbsp;<\/li>\n\n\n\n<li>mely elemek vonzz\u00e1k a figyelmet, \u00e9s&nbsp;<\/li>\n\n\n\n<li>melyek zavarhatj\u00e1k meg a v\u00e1s\u00e1rl\u00e1si folyamatot.<\/li>\n<\/ul>\n\n\n\n<p>Az elemz\u00e9s egyik legfontosabb tanuls\u00e1ga az volt, hogy a Horizont v\u00e1s\u00e1rl\u00f3i \u00e9lm\u00e9ny\u00e9t mobilon kellett igaz\u00e1n er\u0151sre tervezni, ugyanis az adatok alapj\u00e1n a l\u00e1togat\u00f3k d\u00f6nt\u0151 t\u00f6bbs\u00e9ge mobilr\u00f3l \u00e9rkezett &#8211; az eszk\u00f6zmegoszl\u00e1sban a mobilhaszn\u00e1lat 75% f\u00f6l\u00f6tt volt, m\u00edg az asztali forgalom j\u00f3val kisebb ar\u00e1nyt k\u00e9pviselt. Ez azt jelentette, hogy a meg\u00fajult designn\u00e1l nem lehetett m\u00e1sodlagos szempont a mobiln\u00e9zet, a navig\u00e1ci\u00f3nak, a term\u00e9kk\u00e1rty\u00e1knak, a kos\u00e1rba helyez\u00e9snek \u00e9s a prom\u00f3ci\u00f3s elemeknek kis k\u00e9perny\u0151n is gyorsan \u00e9rthet\u0151nek \u00e9s k\u00f6nnyen haszn\u00e1lhat\u00f3nak kellett lenni\u00fck.<\/p>\n\n\n\n<p>A h\u0151t\u00e9rk\u00e9pes vizsg\u00e1latok enn\u00e9l m\u00e9lyebbre mentek. Ezekb\u0151l l\u00e1that\u00f3v\u00e1 v\u00e1lt, hogy a l\u00e1togat\u00f3k mely fel\u00fcleteket haszn\u00e1lj\u00e1k akt\u00edvan, mire kattintanak, \u00e9s mely elemek vonj\u00e1k el a figyelmet.&nbsp;<\/p>\n\n\n\n<p>A kezd\u0151lapon p\u00e9ld\u00e1ul er\u0151s vizu\u00e1lis figyelmet kaptak a kamp\u00e1ny- \u00e9s prom\u00f3ci\u00f3s fel\u00fcletek, ugyanakkor a mobilos n\u00e9zetekn\u00e9l t\u00f6bb ponton is l\u00e1tszott, hogy a felugr\u00f3 elemek zavarhatj\u00e1k a b\u00f6ng\u00e9sz\u00e9st. Ezek k\u00f6z\u00f6tt vannak hasznos funkci\u00f3k, de rossz helyen vagy rossz id\u0151z\u00edt\u00e9ssel k\u00f6nnyen megszak\u00edthatj\u00e1k a v\u00e1s\u00e1rl\u00f3i \u00fatvonalat.<\/p>\n\n\n\n<p>Az elemz\u00e9s alapj\u00e1n teh\u00e1t a designmeg\u00fajul\u00e1s nem csup\u00e1n eszt\u00e9tikai feladat volt. A meg\u00fajult web\u00e1ruh\u00e1z designja adatvez\u00e9relt d\u00f6nt\u00e9sekre \u00e9p\u00fclt, amit a l\u00e1togat\u00f3k t\u00e9nyleges viselked\u00e9se mutatott meg.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Ilyen volt<\/h2>\n\n\n\n<p>A horizontsorok.hu kor\u00e1bbi megjelen\u00e9se az Amsterdam t\u00e9m\u00e1n \u00edgy n\u00e9zett ki:<\/p>\n\n\n\n<style>\n.scrollbox {\n    max-height: 500px;\n    overflow-y: auto;\n    border: 1px solid #e6e6e6;\n    border-radius: 10px;\n    box-shadow: 0 4px 12px rgba(0,0,0,0.08);\n}\n\n.scrollbox::-webkit-scrollbar { width:6px; }\n.scrollbox::-webkit-scrollbar-track { background:#f1f1f1; border-radius:10px; }\n.scrollbox::-webkit-scrollbar-thumb { background:#bfbfbf; border-radius:10px; }\n.scrollbox::-webkit-scrollbar-thumb:hover { background:#a0a0a0; }\n\n.design-nav {\n    text-align:center;\n    display:flex;\n    justify-content:center;\n    gap:8px;\n    flex-wrap:wrap;\n    margin-bottom:14px;\n}\n\n.design-nav button{\n    border:1px solid #d9dee7;\n    background:#fff;\n    color:#1f2937;\n    padding:10px 18px;\n    border-radius:999px;\n    cursor:pointer;\n    margin:0 0 15px 0;\n    font-size:15px;\n    font-weight:600;\n    transition:all 0.2s ease;\n}\n\n.design-nav button:hover{\n    background:#f4f6f8;\n}\n\n.design-nav button.active{\n    background:#111827;\n    color:#fff;\n    border-color:#111827;\n}\n\n.design-page{ display:none; }\n<\/style>\n\n<div class=\"design-nav\">\n<button class=\"active\" onclick=\"showPageA(1, this)\">F\u0151oldal<\/button>\n<button onclick=\"showPageA(2, this)\">Kateg\u00f3ria oldal<\/button>\n<button onclick=\"showPageA(3, this)\">Term\u00e9k oldal<\/button>\n<\/div>\n\n<div id=\"pageA1\" class=\"design-page\" style=\"display:block;\">\n<div class=\"scrollbox\">\n<img decoding=\"async\" src=\"https:\/\/www.shoprenter.hu\/blog\/wp-content\/uploads\/2026\/05\/horizont-home-old.webp\" style=\"width:100%;display:block;\">\n<\/div>\n<\/div>\n\n<div id=\"pageA2\" class=\"design-page\">\n<div class=\"scrollbox\">\n<img decoding=\"async\" src=\"https:\/\/www.shoprenter.hu\/blog\/wp-content\/uploads\/2026\/05\/horizont-category-old-scaled.webp\" style=\"width:100%;display:block;\">\n<\/div>\n<\/div>\n\n<div id=\"pageA3\" class=\"design-page\">\n<div class=\"scrollbox\">\n<img decoding=\"async\" src=\"https:\/\/www.shoprenter.hu\/blog\/wp-content\/uploads\/2026\/05\/horizont-product-old-scaled.webp\" style=\"width:100%;display:block;\">\n<\/div>\n<\/div>\n\n<script>\ndocument.getElementById('pageA1').style.display='block';\n\nfunction showPageA(num, btn){\ndocument.querySelectorAll('#pageA1,#pageA2,#pageA3').forEach(el=>el.style.display='none');\ndocument.getElementById('pageA'+num).style.display='block';\n\ndocument.querySelectorAll('.design-nav button').forEach(el=>el.classList.remove('active'));\nbtn.classList.add('active');\n}\n<\/script>\n\n\n\n<h2 class=\"wp-block-heading\">Ilyen lett<\/h2>\n\n\n\n<p>Az \u00fcgyf\u00e9l m\u00e1r a projekt elej\u00e9n pontosan megfogalmazta, milyen ir\u00e1nyba szeretn\u00e9 elmozd\u00edtani az oldalt: exkluz\u00edv, kifinomult, artisztikus \u00e9s profi megjelen\u00e9st k\u00e9pzelt el, amely k\u00f6zben k\u00f6zvetlen, k\u00f6z\u00e9rthet\u0151 \u00e9s emberk\u00f6zeli marad.<\/p>\n\n\n\n<p>A c\u00e9l az volt, hogy a webshop ugyanazt a min\u0151s\u00e9get \u00e9s kreat\u00edv energi\u00e1t k\u00f6zvet\u00edtse, amit a Horizont term\u00e9kei is k\u00e9pviselnek: l\u00e1tsz\u00f3djon rajta a profizmus, de ne v\u00e1ljon t\u00e1vols\u00e1gtart\u00f3v\u00e1.<\/p>\n\n\n\n<p><strong>\u00cdme a Horizontnak tervezett \u00faj l\u00e1tv\u00e1ny:<\/strong><\/p>\n\n\n\n<style>\n#design-window-b .scrollbox {\n    max-height: 500px;\n    overflow-y: auto;\n    overflow-x: hidden;\n    border: 1px solid #e6e6e6;\n    border-radius: 10px;\n    box-shadow: 0 4px 12px rgba(0,0,0,0.08);\n    background: #fff;\n}\n\n#design-window-b .scrollbox img {\n    width: 100%;\n    display: block;\n    border-radius: 0 !important;\n    margin: 0;\n    padding: 0;\n}\n\n#design-window-b .scrollbox::-webkit-scrollbar {\n    width: 6px;\n}\n\n#design-window-b .scrollbox::-webkit-scrollbar-track {\n    background: #f1f1f1;\n}\n\n#design-window-b .scrollbox::-webkit-scrollbar-thumb {\n    background: #bfbfbf;\n}\n\n#design-window-b .scrollbox::-webkit-scrollbar-thumb:hover {\n    background: #a0a0a0;\n}\n\n#design-window-b .design-nav {\n    text-align: center;\n    display: flex;\n    justify-content: center;\n    gap: 8px;\n    flex-wrap: wrap;\n    margin-bottom: 14px;\n}\n\n#design-window-b .design-nav button {\n    border: 1px solid #d9dee7;\n    background: #fff;\n    color: #1f2937;\n    padding: 10px 18px;\n    border-radius: 999px;\n    cursor: pointer;\n    margin: 0 0 15px 0;\n    font-size: 15px;\n    font-weight: 600;\n    transition: all 0.2s ease;\n}\n\n#design-window-b .design-nav button:hover {\n    background: #f4f6f8;\n}\n\n#design-window-b .design-nav button.active {\n    background: #111827;\n    color: #fff;\n    border-color: #111827;\n}\n\n#design-window-b .design-page {\n    display: none;\n}\n<\/style>\n\n<div id=\"design-window-b\">\n\n    <div class=\"design-nav\">\n        <button class=\"active\" onclick=\"showPageB(1, this)\">F\u0151oldal<\/button>\n        <button onclick=\"showPageB(2, this)\">Kateg\u00f3ria oldal<\/button>\n        <button onclick=\"showPageB(3, this)\">Term\u00e9k oldal<\/button>\n    <\/div>\n\n    <div id=\"pageB1\" class=\"design-page\" style=\"display:block;\">\n        <div class=\"scrollbox\">\n            <img decoding=\"async\" src=\"https:\/\/www.shoprenter.hu\/blog\/wp-content\/uploads\/2026\/05\/fooldal-1.webp\" alt=\"F\u0151oldal design 1\">\n            <img decoding=\"async\" src=\"https:\/\/www.shoprenter.hu\/blog\/wp-content\/uploads\/2026\/05\/fooldal-2.webp\" alt=\"F\u0151oldal design 2\">\n            <img decoding=\"async\" src=\"https:\/\/www.shoprenter.hu\/blog\/wp-content\/uploads\/2026\/05\/fooldal-3.webp\" alt=\"F\u0151oldal design 3\">\n            <img decoding=\"async\" src=\"https:\/\/www.shoprenter.hu\/blog\/wp-content\/uploads\/2026\/05\/fooldal-4.webp\" alt=\"F\u0151oldal design 4\">\n        <\/div>\n    <\/div>\n\n    <div id=\"pageB2\" class=\"design-page\">\n        <div class=\"scrollbox\">\n            <img decoding=\"async\" src=\"https:\/\/www.shoprenter.hu\/blog\/wp-content\/uploads\/2026\/05\/Horizont-cat-scaled.webp\" alt=\"Kateg\u00f3ria oldal design\">\n        <\/div>\n    <\/div>\n\n    <div id=\"pageB3\" class=\"design-page\">\n        <div class=\"scrollbox\">\n            <img decoding=\"async\" src=\"https:\/\/www.shoprenter.hu\/blog\/wp-content\/uploads\/2026\/05\/termek-1.webp\" alt=\"Term\u00e9k oldal design 1\">\n            <img decoding=\"async\" src=\"https:\/\/www.shoprenter.hu\/blog\/wp-content\/uploads\/2026\/05\/termek-2.webp\" alt=\"Term\u00e9k oldal design 2\">\n            <img decoding=\"async\" src=\"https:\/\/www.shoprenter.hu\/blog\/wp-content\/uploads\/2026\/05\/termek-3.webp\" alt=\"Term\u00e9k oldal design 3\">\n        <\/div>\n    <\/div>\n\n<\/div>\n\n<script>\nfunction showPageB(num, btn) {\n    document.querySelectorAll('#design-window-b .design-page').forEach(function(el) {\n        el.style.display = 'none';\n    });\n\n    document.getElementById('pageB' + num).style.display = 'block';\n\n    document.querySelectorAll('#design-window-b .design-nav button').forEach(function(el) {\n        el.classList.remove('active');\n    });\n\n    btn.classList.add('active');\n}\n<\/script>\n\n\n\n<p><\/p>\n\n\n\n<p><strong>A v\u00e9gleges verzi\u00f3t pedig megn\u00e9zheted \u00e9l\u0151ben a <a href=\"http:\/\/horizontsorok.hu\" target=\"_blank\" rel=\"noreferrer noopener\">horizontsorok.hu<\/a> oldalon.<\/strong><\/p>\n\n\n\n<p>A projekt v\u00e9g\u00e9n sz\u00e1munkra az egyik legfontosabb visszajelz\u00e9s az volt, hogy az elk\u00e9sz\u00fclt design val\u00f3ban azt az ir\u00e1nyt t\u00fckr\u00f6zi, amit a Horizont az \u00faj m\u00e1rk\u00e1z\u00e1s\u00e1val k\u00e9pviselni szeretett volna. K\u00fcl\u00f6n \u00f6r\u00f6m volt l\u00e1tni, hogy nemcsak a csapat, hanem a v\u00e1s\u00e1rl\u00f3k r\u00e9sz\u00e9r\u0151l is pozit\u00edv fogadtat\u00e1st kapott a meg\u00fajult webshop.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><em>&#8222;Nagyon j\u00f3l siker\u00fclt a design v\u00e1lt\u00e1s, szerint\u00fcnk j\u00f3l elkaptuk azt a vonalat, amit az \u00faj m\u00e1rk\u00e1z\u00e1sunk k\u00e9pvisel. Eddigi visszajelz\u00e9sek is pozit\u00edvak a vev\u0151ink r\u00e9sz\u00e9r\u0151l. Nagyon k\u00f6sz\u00f6n\u00f6m a munk\u00e1tokat!&#8221;<\/em><\/p>\n<cite>Ott\u00f3 G\u00e1bor (\u00fcgyvezet\u0151, Horizont Brewing)<\/cite><\/blockquote>\n\n\n\n<p><\/p>\n\n\n\n<p>Most pedig n\u00e9zz\u00fcnk meg p\u00e1r r\u00e9szletet k\u00f6zelebbr\u0151l is!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Amsterdam vs. Hamburg alap\u00fa egyedi design<\/h2>\n\n\n\n<p>2020 k\u00f6rny\u00e9k\u00e9n a web\u00e1ruh\u00e1zakn\u00e1l m\u00e9g er\u0151sen meghat\u00e1roz\u00f3 volt a klasszikus, j\u00f3l tagolt webshopfel\u00e9p\u00edt\u00e9s. Az Amsterdam t\u00e9ma ezt a korszakot k\u00e9pviselte: stabil, \u00e1tl\u00e1that\u00f3 \u00e9s \u00e1ltal\u00e1nos e-kereskedelmi logik\u00e1ra \u00e9p\u00fcl\u0151 megjelen\u00e9st adott, amely akkoriban sok web\u00e1ruh\u00e1z sz\u00e1m\u00e1ra korszer\u0171 alapot jelentett.<\/p>\n\n\n\n<p>Az\u00f3ta azonban nemcsak a vizu\u00e1lis trendek, hanem a web\u00e1ruh\u00e1zakkal szembeni technikai \u00e9s \u00fczleti elv\u00e1r\u00e1sok is sokat v\u00e1ltoztak. Ma m\u00e1r egy modern t\u00e9ma eset\u00e9ben kiemelt szempont a gyorsabb v\u00e1s\u00e1rl\u00e1si folyamat, a k\u00f6nnyebben szerkeszthet\u0151 modulrendszer, a rugalmasabb f\u0151oldali tartalomkezel\u00e9s, az akad\u00e1lymentesebb m\u0171k\u00f6d\u00e9s \u00e9s az, hogy a v\u00e1s\u00e1rl\u00f3 min\u00e9l kevesebb felesleges l\u00e9p\u00e9ssel jusson el a d\u00f6nt\u00e9sig.&nbsp;<\/p>\n\n\n\n<p>A <a href=\"https:\/\/register.shoprenter.hu\/hamburg-tema\" target=\"_blank\" rel=\"noreferrer noopener\">Hamburg t\u00e9ma<\/a> ezekre ad korszer\u0171bb alapot: t\u00f6bb be\u00e9p\u00edtett modullal, fejlettebb kos\u00e1r- \u00e9s men\u00fcmegold\u00e1sokkal, jobb testreszabhat\u00f3s\u00e1ggal \u00e9s konverzi\u00f3t\u00e1mogat\u00f3 elemekkel.<\/p>\n\n\n\n<p>A horizontsorok.hu \u00faj megjelen\u00e9s\u00e9nek alapj\u00e1t ez\u00e9rt tudatosan a Hamburg t\u00e9m\u00e1ra \u00e9p\u00edtett\u00fck fel. Pontosabban ez adta az alapot, de jelent\u0151s \u00e1talak\u00edt\u00e1sokat eszk\u00f6z\u00f6lt\u00fcnk rajta.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">S\u00f6t\u00e9t h\u00e1tt\u00e9r, er\u0151s karakter<\/h2>\n\n\n\n<p>A webshop meg\u00fajul\u00e1s\u00e1nak egyik legl\u00e1tv\u00e1nyosabb eleme a s\u00f6t\u00e9t, fekete alap\u00fa vizu\u00e1lis vil\u00e1g bevezet\u00e9se volt. A kor\u00e1bbi, vil\u00e1gos h\u00e1tter\u0171 sablonos megjelen\u00e9s \u00e1ltal\u00e1nosabb web\u00e1ruh\u00e1z\u00e9rzetet adott, m\u00edg az \u00faj dark style sokkal jobban illeszkedik a m\u00e1rka karakteres, k\u00eds\u00e9rletez\u0151 \u00e9s pr\u00e9mium vil\u00e1g\u00e1hoz.&nbsp;<\/p>\n\n\n\n<p>A fekete h\u00e1tt\u00e9r eset\u00fckben az\u00e9rt is k\u00fcl\u00f6nleges, mert kiemeli a term\u00e9kfot\u00f3kat, nagyobb kontrasztot ad a c\u00edmk\u00e9knek, \u00e9s l\u00e1tv\u00e1nyosabb\u00e1 teszi a kamp\u00e1ny- \u00e9s aj\u00e1nlati blokkokat.<\/p>\n\n\n\n<p>A Horizont eset\u00e9ben ez a v\u00e1lt\u00e1s nemcsak eszt\u00e9tikai ir\u00e1ny, hanem m\u00e1rka\u00e9p\u00edt\u00e9si d\u00f6nt\u00e9s is volt: az \u00faj megjelen\u00e9s er\u0151sebb els\u0151 benyom\u00e1st ad, jobban megk\u00fcl\u00f6nb\u00f6zteti a webshopot a hagyom\u00e1nyos sablonoldalakt\u00f3l, \u00e9s vizu\u00e1lisan is k\u00f6zelebb viszi a l\u00e1togat\u00f3t ahhoz az \u00e9lm\u00e9nyhez, amit maga a m\u00e1rka k\u00e9pvisel.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Vide\u00f3s modul a f\u0151oldali bannerben<\/h2>\n\n\n\n<p>Az \u00fcgyf\u00e9l k\u00e9r\u00e9s\u00e9re a f\u0151oldali banner szekci\u00f3t t\u00f6bb kisebb, jobban struktur\u00e1lt egys\u00e9gre bontottuk, amelynek k\u00f6zponti eleme egy vide\u00f3s modul lett.&nbsp;<\/p>\n\n\n\n<p>Ez egy olyan karakteres, vizu\u00e1lisan er\u0151s m\u00e1rk\u00e1n\u00e1l, mint a Horizont, k\u00fcl\u00f6n\u00f6sen fontos, mert a vide\u00f3 gyorsabban adja \u00e1t a hangulatot, az \u00e9let\u00e9rz\u00e9st \u00e9s a pr\u00e9mium term\u00e9kvil\u00e1got, mint egy statikus k\u00e9p. Emellett seg\u00edt m\u00e1r az els\u0151 m\u00e1sodpercekben bevonni a l\u00e1togat\u00f3t, \u00edgy az oldal eml\u00e9kezetesebb\u00e9 is v\u00e1lik.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1902\" height=\"822\" src=\"https:\/\/www.shoprenter.hu\/blog\/wp-content\/uploads\/2026\/05\/videos-modul.webp\" alt=\"videos-modul\" class=\"wp-image-24658\" srcset=\"https:\/\/www.shoprenter.hu\/blog\/wp-content\/uploads\/2026\/05\/videos-modul.webp 1902w, https:\/\/www.shoprenter.hu\/blog\/wp-content\/uploads\/2026\/05\/videos-modul-1024x443.webp 1024w, https:\/\/www.shoprenter.hu\/blog\/wp-content\/uploads\/2026\/05\/videos-modul-768x332.webp 768w, https:\/\/www.shoprenter.hu\/blog\/wp-content\/uploads\/2026\/05\/videos-modul-1536x664.webp 1536w\" sizes=\"(max-width: 1902px) 100vw, 1902px\" \/><\/figure><\/div>\n\n\n<p><\/p>\n\n\n\n<p>A modulban a vide\u00f3 m\u00e1sodpercek alatt cser\u00e9lhet\u0151 az admin fel\u00fcleten.<\/p>\n\n\n\n<p>A m\u00e1rka nem csak a f\u0151oldalon haszn\u00e1lja el\u0151szeretettel a vide\u00f3kat &#8211; a kateg\u00f3ria \u00e9s term\u00e9k oldalakon is tal\u00e1lkozhatunk vel\u00fck, amelyek mindig egy kapcsol\u00f3d\u00f3, relev\u00e1ns \u00fczenettel sz\u00f3l\u00edtj\u00e1k meg a l\u00e1togat\u00f3kat.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Csomagaj\u00e1nlatok<\/h2>\n\n\n\n<p>A csomagaj\u00e1nlatok kiemelt szerepet kaptak a meg\u00fajult web\u00e1ruh\u00e1zban, hiszen a Horizont term\u00e9kk\u00edn\u00e1lata kifejezetten alkalmas arra, hogy t\u00f6bb s\u00f6r tematikus v\u00e1logat\u00e1sk\u00e9nt, k\u00f3stol\u00f3csomagk\u00e9nt jelenjen meg.&nbsp;<\/p>\n\n\n\n<p>Az \u00fcgyf\u00e9l visszajelz\u00e9se alapj\u00e1n n\u00e1luk kifejezetten jellemz\u0151 az impulz\u00edv v\u00e1s\u00e1rl\u00e1s: a megragad\u00f3 dobozdiz\u00e1jn, az izgalmas \u00edzvil\u00e1gok, a k\u00fcl\u00f6nleges alapanyagok \u00e9s a limit\u00e1lt vagy szezon\u00e1lis aj\u00e1nlatok sokszor spont\u00e1n d\u00f6nt\u00e9sre \u00f6szt\u00f6nzik a l\u00e1togat\u00f3kat.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"880\" height=\"662\" src=\"https:\/\/www.shoprenter.hu\/blog\/wp-content\/uploads\/2026\/05\/csomagok.webp\" alt=\"csomagajnlatok\" class=\"wp-image-24660\" srcset=\"https:\/\/www.shoprenter.hu\/blog\/wp-content\/uploads\/2026\/05\/csomagok.webp 880w, https:\/\/www.shoprenter.hu\/blog\/wp-content\/uploads\/2026\/05\/csomagok-768x578.webp 768w\" sizes=\"(max-width: 880px) 100vw, 880px\" \/><\/figure><\/div>\n\n\n<p><\/p>\n\n\n\n<p>E-kereskedelmi szempontb\u00f3l a csomagaj\u00e1nlatok az\u00e9rt is \u00e9rt\u00e9kesek, mert egyszer\u0171bb\u00e9 teszik a v\u00e1laszt\u00e1st. A v\u00e1s\u00e1rl\u00f3nak nem egyes\u00e9vel kell v\u00e9gign\u00e9znie a teljes k\u00edn\u00e1latot, hanem egy el\u0151re \u00f6ssze\u00e1ll\u00edtott, j\u00f3l kommunik\u00e1lhat\u00f3 aj\u00e1nlatot kap. Ez k\u00fcl\u00f6n\u00f6sen hasznos azoknak, akik m\u00e9g csak ismerkednek a m\u00e1rk\u00e1val, aj\u00e1nd\u00e9kot keresnek, vagy t\u00f6bbf\u00e9le Horizont s\u00f6rt szeretn\u00e9nek kipr\u00f3b\u00e1lni.&nbsp;<\/p>\n\n\n\n<p>A j\u00f3l fel\u00e9p\u00edtett csomagok emellett n\u00f6velhetik a kos\u00e1r\u00e9rt\u00e9ket, t\u00e1mogatj\u00e1k a kereszt\u00e9rt\u00e9kes\u00edt\u00e9st, \u00e9s seg\u00edtenek abban, hogy a v\u00e1s\u00e1rl\u00f3 t\u00f6bb term\u00e9kkel tal\u00e1lkozzon egyetlen rendel\u00e9sen bel\u00fcl.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Social media szerepe&nbsp;<\/h2>\n\n\n\n<p>A Horizont m\u00e1rka kommunik\u00e1ci\u00f3j\u00e1nak fontos r\u00e9sze a k\u00f6z\u00f6ss\u00e9gi m\u00e9dia: az Instagramon \u00e9s a TikTok-on is akt\u00edvan \u00e9p\u00edtik azt a vizu\u00e1lis vil\u00e1got \u00e9s \u00e9let\u00e9rz\u00e9st, amely a term\u00e9keiket is k\u00f6r\u00fclveszi. Ez\u00e9rt a meg\u00fajult f\u0151oldalon is helyet kapott a social media szekci\u00f3, hogy a webshop ne elszigetelt \u00e9rt\u00e9kes\u00edt\u00e9si fel\u00fcletk\u00e9nt m\u0171k\u00f6dj\u00f6n, hanem kapcsol\u00f3djon azokhoz a csatorn\u00e1khoz, ahol a m\u00e1rka k\u00f6z\u00f6ss\u00e9ge nap mint nap tal\u00e1lkozik a Horizont tartalmaival.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"829\" src=\"https:\/\/www.shoprenter.hu\/blog\/wp-content\/uploads\/2026\/05\/social-media.webp\" alt=\"\" class=\"wp-image-24662\" srcset=\"https:\/\/www.shoprenter.hu\/blog\/wp-content\/uploads\/2026\/05\/social-media.webp 1920w, https:\/\/www.shoprenter.hu\/blog\/wp-content\/uploads\/2026\/05\/social-media-1024x442.webp 1024w, https:\/\/www.shoprenter.hu\/blog\/wp-content\/uploads\/2026\/05\/social-media-768x332.webp 768w, https:\/\/www.shoprenter.hu\/blog\/wp-content\/uploads\/2026\/05\/social-media-1536x663.webp 1536w\" sizes=\"(max-width: 1920px) 100vw, 1920px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>A social media ikonok emellett felt\u0171nnek a men\u00fc feletti fels\u0151 s\u00e1vban is, hogy minden oldalon szem el\u0151tt legyenek.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Taproom: ahol a Horizont webshopb\u00f3l \u00e9lm\u00e9nny\u00e9 v\u00e1lik<\/h2>\n\n\n\n<p>A projekt sor\u00e1n egy egyedi landol\u00f3 oldal is k\u00e9sz\u00fclt a Taproom sz\u00e1m\u00e1ra, amely a Horizont \u00e9lm\u00e9nyalap\u00fa oldal\u00e1t mutatja be. Itt kommunik\u00e1l a m\u00e1rka arr\u00f3l, hogy milyen programokat, esem\u00e9nyeket \u00e9s k\u00f6z\u00f6ss\u00e9gi \u00e9lm\u00e9nyeket k\u00edn\u00e1l a f\u0151zde saj\u00e1t helysz\u00edne.&nbsp;<\/p>\n\n\n\n<style>\n#design-window-c .scrollbox {\n    max-height: 500px;\n    overflow-y: auto;\n    overflow-x: hidden;\n    border: 1px solid #e6e6e6;\n    border-radius: 10px;\n    box-shadow: 0 4px 12px rgba(0,0,0,0.08);\n    background: #fff;\n}\n\n#design-window-c .scrollbox img {\n    width: 100%;\n    display: block;\n    border-radius: 0 !important;\n    margin: 0;\n    padding: 0;\n}\n\n#design-window-c .scrollbox::-webkit-scrollbar {\n    width: 6px;\n}\n\n#design-window-c .scrollbox::-webkit-scrollbar-track {\n    background: #f1f1f1;\n}\n\n#design-window-c .scrollbox::-webkit-scrollbar-thumb {\n    background: #bfbfbf;\n}\n\n#design-window-c .scrollbox::-webkit-scrollbar-thumb:hover {\n    background: #a0a0a0;\n}\n<\/style>\n\n<div id=\"design-window-c\">\n    <div class=\"scrollbox\">\n        <img decoding=\"async\" src=\"https:\/\/www.shoprenter.hu\/blog\/wp-content\/uploads\/2026\/05\/taproom-1.webp\" alt=\"Taproom design 1\">\n        <img decoding=\"async\" src=\"https:\/\/www.shoprenter.hu\/blog\/wp-content\/uploads\/2026\/05\/taproom-2.webp\" alt=\"Taproom design 2\">\n    <\/div>\n<\/div>\n\n\n\n<p><\/p>\n\n\n\n<p>Egy ilyen landing oldal k\u00fcl\u00f6n c\u00e9loldalk\u00e9nt tud megsz\u00f3l\u00edtani egy m\u00e1sik v\u00e1s\u00e1rl\u00f3i sz\u00e1nd\u00e9kot: nem term\u00e9ket, hanem programot, helysz\u00ednt \u00e9s \u00e9lm\u00e9nyt \u00e9rt\u00e9kes\u00edt.&nbsp;<\/p>\n\n\n\n<p>A design feladata itt az volt, hogy ezt a laz\u00e1bb, esem\u00e9nyk\u00f6zpont\u00fa hangulatot vizu\u00e1lisan is \u00e1tadja, mik\u00f6zben egy\u00e9rtelm\u0171en terelje a l\u00e1togat\u00f3t az \u00e9rdekl\u0151d\u00e9s vagy kapcsolatfelv\u00e9tel fel\u00e9.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">El\u0151fizet\u00e9s \u00e9s Klub<\/h2>\n\n\n\n<p>A Horizont Brewing az <strong>els\u0151k k\u00f6z\u00f6tt v\u00e1gott bele az <a href=\"https:\/\/www.shoprenter.hu\/blog\/elofizeteses-e-kereskedelem-igy-is-lehet-stabil-beveteled-es-novekvo-huseges-vasarloi-bazisod\" target=\"_blank\" rel=\"noreferrer noopener\">el\u0151fizet\u00e9ses modell<\/a> bevezet\u00e9s\u00e9be<\/strong>, ami\u00f3ta ez a Shoprenter rendszer\u00e9ben el\u00e9rhet\u0151v\u00e9 v\u00e1lt.<\/p>\n\n\n\n<p>Az El\u0151fizet\u00e9s \u00e9s Klub program t\u00falmutat a klasszikus s\u00f6rrendel\u00e9sen. Egy k\u00f6z\u00f6ss\u00e9gi \u00e9lm\u00e9nyt \u00e9p\u00edt a m\u00e1rka k\u00f6r\u00e9, ahol az el\u0151fizet\u0151k klubtagk\u00e9nt kedvezm\u00e9nyekhez, limit\u00e1lt term\u00e9kekhez, exkluz\u00edv tartalmakhoz \u00e9s z\u00e1rtk\u00f6r\u0171 esem\u00e9nyekhez f\u00e9rhetnek hozz\u00e1.<\/p>\n\n\n\n<p>\u00dczleti szempontb\u00f3l az el\u0151fizet\u00e9ses modell az\u00e9rt izgalmas, mert az egyszeri v\u00e1s\u00e1rl\u00e1sok helyett <strong>rendszeresebb m\u00e1rkakapcsol\u00f3d\u00e1st \u00e9s kisz\u00e1m\u00edthat\u00f3bb bev\u00e9telt teremthet. <\/strong>Egy olyan term\u00e9kkateg\u00f3ri\u00e1ban, ahol az \u00fajdons\u00e1gok, a limit\u00e1lt f\u0151zetek \u00e9s a k\u00f6z\u00f6ss\u00e9gi \u00e9lm\u00e9ny er\u0151s v\u00e1s\u00e1rl\u00e1si motiv\u00e1ci\u00f3t jelentenek, az el\u0151fizet\u00e9s t\u00e1mogatja a lojalit\u00e1st, \u00f6szt\u00f6nzi a visszat\u00e9r\u00e9st, \u00e9s hosszabb t\u00e1von stabilabb \u00fcgyf\u00e9lkapcsolatot \u00e9p\u00edt. A Horizont Brewing pedig \u00e9kes p\u00e9ld\u00e1ja annak, hogy lehet ebb\u0151l a maximumot kihozni.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Z\u00e1rsz\u00f3<\/h2>\n\n\n\n<p>A Horizont Brewing meg\u00fajul\u00e1sa j\u00f3l mutatja, hogy egy webshop fejleszt\u00e9se nem mer\u00fcl ki abban, hogy modernebb sz\u00edneket, nagyobb k\u00e9peket vagy l\u00e1tv\u00e1nyosabb blokkokat kap az oldal. Egy igaz\u00e1n j\u00f3 designv\u00e1lt\u00e1s m\u00f6g\u00f6tt strat\u00e9gia van: adatok, felhaszn\u00e1l\u00f3i viselked\u00e9s, \u00fczleti c\u00e9lok \u00e9s m\u00e1rka\u00e9p\u00edt\u00e9si szempontok tal\u00e1lkoznak benne.<\/p>\n\n\n\n<p>A r\u00e9gi Amsterdam alap \u00e9veken \u00e1t stabilan kiszolg\u00e1lta a web\u00e1ruh\u00e1zat, de a v\u00e1s\u00e1rl\u00f3i elv\u00e1r\u00e1sok, a technol\u00f3giai lehet\u0151s\u00e9gek \u00e9s maga a Horizont m\u00e1rka is sokat fejl\u0151d\u00f6tt az\u00f3ta. A meg\u00fajult egyedi megjelen\u00e9s akt\u00edvan t\u00e1mogatja a v\u00e1s\u00e1rl\u00f3i d\u00f6nt\u00e9st, er\u0151s\u00edti a m\u00e1rka\u00e9lm\u00e9nyt, \u00e9s teret ad azoknak az \u00fczleti ir\u00e1nyoknak is, amelyek t\u00falmutatnak a klasszikus term\u00e9kelad\u00e1son.<\/p>\n\n\n\n<p>A meg\u00fajul\u00e1s eredm\u00e9nye egy karakteresebb, korszer\u0171bb \u00e9s \u00fczletileg tudatosabb web\u00e1ruh\u00e1z lett. Olyan fel\u00fclet, amely m\u00e9lt\u00f3 a m\u00e1rka pr\u00e9mium vil\u00e1g\u00e1hoz, \u00e9s k\u00f6zben jobban szolg\u00e1lja ki a v\u00e1s\u00e1rl\u00f3kat is.<\/p>\n\n\n\n<p>Ez a projekt arra is j\u00f3 p\u00e9lda, hogy egy web\u00e1ruh\u00e1z meg\u00faj\u00edt\u00e1s\u00e1t nem \u00e9rdemes addig halogatni, am\u00edg a r\u00e9gi megjelen\u00e9s m\u00e1r l\u00e1tv\u00e1nyosan elavultnak hat. Ha egy webshop nem illeszkedik a m\u00e1rka jelenlegi szintj\u00e9hez, nem t\u00e1mogatja el\u00e9g j\u00f3l a mobilos v\u00e1s\u00e1rl\u00e1st, vagy nem ad el\u00e9g rugalmas fel\u00fcletet az \u00faj \u00fczleti c\u00e9lokhoz, akkor a designv\u00e1lt\u00e1s nem k\u00f6lts\u00e9g, hanem befektet\u00e9s.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"https:\/\/www.shoprenter.hu\/egyedi-design\/\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"1200\" height=\"675\" src=\"https:\/\/www.shoprenter.hu\/blog\/wp-content\/uploads\/2025\/11\/egyedi-design.png\" alt=\"egyedi-design\" class=\"wp-image-23432\" srcset=\"https:\/\/www.shoprenter.hu\/blog\/wp-content\/uploads\/2025\/11\/egyedi-design.png 1200w, https:\/\/www.shoprenter.hu\/blog\/wp-content\/uploads\/2025\/11\/egyedi-design-1024x576.png 1024w, https:\/\/www.shoprenter.hu\/blog\/wp-content\/uploads\/2025\/11\/egyedi-design-768x432.png 768w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" \/><\/a><\/figure><\/div>\n\n\n<style>\n.sr-author {\n  display: flex;\n  gap: 16px;\n  background-color: #F1F1F1;\n  padding: 20px;\n  border-radius: 12px;\n}\n\n.sr-author-img img {\n  width: 100px;\n  height: 100px;\n  border-radius: 50%;\n  object-fit: cover;\n}\n\n.sr-author-desc {\n  font-size: 15px;\n  line-height: 1.5;\n}\n<\/style>\n\n<h3>A szerz\u0151r\u0151l:<\/h3>\n<div class=\"sr-author\">\n<div class=\"sr-author-img\"><img decoding=\"async\" src=\"https:\/\/www.shoprenter.hu\/blog\/wp-content\/uploads\/2022\/09\/64893035_2521851461171901_2293678253082148864_n.jpg\" alt=\"Engi Laura\"><\/div>\n<div class=\"sr-author-desc\"><span class=\"sr-author-name\">Engi Laura<\/span><br><span class=\"sr-author-pos\">Online marketer &#8211; <\/span><a href=\"https:\/\/www.shoprenter.hu\/\" target=\"_blank\" rel=\"noopener noreferrer\"> Shoprenter<\/a><br>Laura a Shoprenter marketing csapat\u00e1nak tagja. Az online marketing \u00e9s az e-kereskedelemi trendek m\u00e1r 2016 \u00f3ta szerves r\u00e9sz\u00e9t k\u00e9pezik a mindennapjainak. C\u00e9lja, hogy \u00e1tadja az \u00e9vek sor\u00e1n megszerzett tud\u00e1s\u00e1t \u00e9s tapasztalatait a fejl\u0151dni \u00e9s n\u00f6vekedni v\u00e1gy\u00f3 e-keresked\u0151knek.\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>A Horizont Brewing m\u00e1rka 2014-t\u0151l v\u00e1lt a hazai kis\u00fczemi s\u00f6rpiac egyik meghat\u00e1roz\u00f3 szerepl\u0151j\u00e9v\u00e9. A &#8230;<\/p>\n<p class=\"read-more-link\"><a class=\"btn btn-outline-primary btn-xs understrap-read-more-link\" href=\"https:\/\/www.shoprenter.hu\/blog\/a-horizont-brewing-megujulasa\">Elolvasom<\/a><\/p>\n","protected":false},"author":68,"featured_media":24726,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[18,19,17],"tags":[],"_links":{"self":[{"href":"https:\/\/www.shoprenter.hu\/blog\/wp-json\/wp\/v2\/posts\/24633"}],"collection":[{"href":"https:\/\/www.shoprenter.hu\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.shoprenter.hu\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.shoprenter.hu\/blog\/wp-json\/wp\/v2\/users\/68"}],"replies":[{"embeddable":true,"href":"https:\/\/www.shoprenter.hu\/blog\/wp-json\/wp\/v2\/comments?post=24633"}],"version-history":[{"count":21,"href":"https:\/\/www.shoprenter.hu\/blog\/wp-json\/wp\/v2\/posts\/24633\/revisions"}],"predecessor-version":[{"id":24728,"href":"https:\/\/www.shoprenter.hu\/blog\/wp-json\/wp\/v2\/posts\/24633\/revisions\/24728"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.shoprenter.hu\/blog\/wp-json\/wp\/v2\/media\/24726"}],"wp:attachment":[{"href":"https:\/\/www.shoprenter.hu\/blog\/wp-json\/wp\/v2\/media?parent=24633"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.shoprenter.hu\/blog\/wp-json\/wp\/v2\/categories?post=24633"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.shoprenter.hu\/blog\/wp-json\/wp\/v2\/tags?post=24633"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}