digitální zrcadlo
Když technologie pomáhají překonat strach z nákupu.
Kdo je
Pavlok's je česká kosmetická značka založená Klárou Pavlokovou, která propojuje dekorativní kosmetiku s péčí o rty. Rtěnky vznikají ručně v České republice s důrazem na promyšlené složení a pečlivě vybrané suroviny přírodního původu. Značka věří, že rtěnka by měla nejen krásně vypadat, ale také o rty pečovat.
- Obor
- E-commerce · kosmetika
- Distribuce
- E-shop a kamenné prodejny
- Web
- pavloks.com ↗
Chci ženám pomoct překonat strach z vyzkoušení nové rtěnky, aniž by si musely zajít do obchodu.
Klára PavlokováCEO · Pavlok's BeautyVyzkoušet rtěnku bez obchodu
Pomoct zákaznicím rozhodnout se u produktu, který se jinak dá vyzkoušet jen osobně, a nepřidat jim přitom do nákupu žádný krok navíc.
- Ostré hrany
- Černo-bílý design
- Jednoduché
{% comment %} Digitální zrcadlo · produktová stránka {% endcomment %}
<section class="mirror" data-product="{{ product.handle }}">
<button class="mirror__open">Zkus si ji!</button>
<div class="mirror__stage">
<video autoplay playsinline muted></video>
<canvas class="mirror__lips"></canvas>
</div>
<ul class="mirror__shades">
{% for variant in product.variants %}
<li data-color="{{ variant.metafields.custom.hex }}">
{{ variant.title }}
</li>
{% endfor %}
</ul>
<form action="/cart/add" method="post">
<input type="hidden" name="id" value="{{ variant.id }}">
<button type="submit">Tu chci — přidat do košíku</button>
</form>
</section>
{% render 'mirror-script' %}
{% comment %} Digitální zrcadlo · produktová stránka {% endcomment %}
<section class="mirror" data-product="{{ product.handle }}">
<button class="mirror__open">Zkus si ji!</button>
<div class="mirror__stage">
<video autoplay playsinline muted></video>
<canvas class="mirror__lips"></canvas>
</div>
<ul class="mirror__shades">
{% for variant in product.variants %}
<li data-color="{{ variant.metafields.custom.hex }}">
{{ variant.title }}
</li>
{% endfor %}
</ul>
<form action="/cart/add" method="post">
<input type="hidden" name="id" value="{{ variant.id }}">
<button type="submit">Tu chci — přidat do košíku</button>
</form>
</section>
{% render 'mirror-script' %}
{% comment %} Digitální zrcadlo · produktová stránka {% endcomment %}
<section class="mirror" data-product="{{ product.handle }}">
<button class="mirror__open">Zkus si ji!</button>
<div class="mirror__stage">
<video autoplay playsinline muted></video>
<canvas class="mirror__lips"></canvas>
</div>
<ul class="mirror__shades">
{% for variant in product.variants %}
<li data-color="{{ variant.metafields.custom.hex }}">
{{ variant.title }}
</li>
{% endfor %}
</ul>
<form action="/cart/add" method="post">
<input type="hidden" name="id" value="{{ variant.id }}">
<button type="submit">Tu chci — přidat do košíku</button>
</form>
</section>
{% render 'mirror-script' %}
{% comment %} Digitální zrcadlo · produktová stránka {% endcomment %}
<section class="mirror" data-product="{{ product.handle }}">
<button class="mirror__open">Zkus si ji!</button>
<div class="mirror__stage">
<video autoplay playsinline muted></video>
<canvas class="mirror__lips"></canvas>
</div>
<ul class="mirror__shades">
{% for variant in product.variants %}
<li data-color="{{ variant.metafields.custom.hex }}">
{{ variant.title }}
</li>
{% endfor %}
</ul>
<form action="/cart/add" method="post">
<input type="hidden" name="id" value="{{ variant.id }}">
<button type="submit">Tu chci — přidat do košíku</button>
</form>
</section>
{% render 'mirror-script' %}
{% comment %} Digitální zrcadlo · produktová stránka {% endcomment %}
<section class="mirror" data-product="{{ product.handle }}">
<button class="mirror__open">Zkus si ji!</button>
<div class="mirror__stage">
<video autoplay playsinline muted></video>
<canvas class="mirror__lips"></canvas>
</div>
<ul class="mirror__shades">
{% for variant in product.variants %}
<li data-color="{{ variant.metafields.custom.hex }}">
{{ variant.title }}
</li>
{% endfor %}
</ul>
<form action="/cart/add" method="post">
<input type="hidden" name="id" value="{{ variant.id }}">
<button type="submit">Tu chci — přidat do košíku</button>
</form>
</section>
{% render 'mirror-script' %}
{% comment %} Digitální zrcadlo · produktová stránka {% endcomment %}
<section class="mirror" data-product="{{ product.handle }}">
<button class="mirror__open">Zkus si ji!</button>
<div class="mirror__stage">
<video autoplay playsinline muted></video>
<canvas class="mirror__lips"></canvas>
</div>
<ul class="mirror__shades">
{% for variant in product.variants %}
<li data-color="{{ variant.metafields.custom.hex }}">
{{ variant.title }}
</li>
{% endfor %}
</ul>
<form action="/cart/add" method="post">
<input type="hidden" name="id" value="{{ variant.id }}">
<button type="submit">Tu chci — přidat do košíku</button>
</form>
</section>
{% render 'mirror-script' %}
{% comment %} Digitální zrcadlo · produktová stránka {% endcomment %}
<section class="mirror" data-product="{{ product.handle }}">
<button class="mirror__open">Zkus si ji!</button>
<div class="mirror__stage">
<video autoplay playsinline muted></video>
<canvas class="mirror__lips"></canvas>
</div>
<ul class="mirror__shades">
{% for variant in product.variants %}
<li data-color="{{ variant.metafields.custom.hex }}">
{{ variant.title }}
</li>
{% endfor %}
</ul>
<form action="/cart/add" method="post">
<input type="hidden" name="id" value="{{ variant.id }}">
<button type="submit">Tu chci — přidat do košíku</button>
</form>
</section>
{% render 'mirror-script' %}
{% comment %} Digitální zrcadlo · produktová stránka {% endcomment %}
<section class="mirror" data-product="{{ product.handle }}">
<button class="mirror__open">Zkus si ji!</button>
<div class="mirror__stage">
<video autoplay playsinline muted></video>
<canvas class="mirror__lips"></canvas>
</div>
<ul class="mirror__shades">
{% for variant in product.variants %}
<li data-color="{{ variant.metafields.custom.hex }}">
{{ variant.title }}
</li>
{% endfor %}
</ul>
<form action="/cart/add" method="post">
<input type="hidden" name="id" value="{{ variant.id }}">
<button type="submit">Tu chci — přidat do košíku</button>
</form>
</section>
{% render 'mirror-script' %}
{% comment %} Digitální zrcadlo · produktová stránka {% endcomment %}
<section class="mirror" data-product="{{ product.handle }}">
<button class="mirror__open">Zkus si ji!</button>
<div class="mirror__stage">
<video autoplay playsinline muted></video>
<canvas class="mirror__lips"></canvas>
</div>
<ul class="mirror__shades">
{% for variant in product.variants %}
<li data-color="{{ variant.metafields.custom.hex }}">
{{ variant.title }}
</li>
{% endfor %}
</ul>
<form action="/cart/add" method="post">
<input type="hidden" name="id" value="{{ variant.id }}">
<button type="submit">Tu chci — přidat do košíku</button>
</form>
</section>
{% render 'mirror-script' %}
{% comment %} Digitální zrcadlo · produktová stránka {% endcomment %}
<section class="mirror" data-product="{{ product.handle }}">
<button class="mirror__open">Zkus si ji!</button>
<div class="mirror__stage">
<video autoplay playsinline muted></video>
<canvas class="mirror__lips"></canvas>
</div>
<ul class="mirror__shades">
{% for variant in product.variants %}
<li data-color="{{ variant.metafields.custom.hex }}">
{{ variant.title }}
</li>
{% endfor %}
</ul>
<form action="/cart/add" method="post">
<input type="hidden" name="id" value="{{ variant.id }}">
<button type="submit">Tu chci — přidat do košíku</button>
</form>
</section>
{% render 'mirror-script' %}
{% comment %} Digitální zrcadlo · produktová stránka {% endcomment %}
<section class="mirror" data-product="{{ product.handle }}">
<button class="mirror__open">Zkus si ji!</button>
<div class="mirror__stage">
<video autoplay playsinline muted></video>
<canvas class="mirror__lips"></canvas>
</div>
<ul class="mirror__shades">
{% for variant in product.variants %}
<li data-color="{{ variant.metafields.custom.hex }}">
{{ variant.title }}
</li>
{% endfor %}
</ul>
<form action="/cart/add" method="post">
<input type="hidden" name="id" value="{{ variant.id }}">
<button type="submit">Tu chci — přidat do košíku</button>
</form>
</section>
{% render 'mirror-script' %}
{% comment %} Digitální zrcadlo · produktová stránka {% endcomment %}
<section class="mirror" data-product="{{ product.handle }}">
<button class="mirror__open">Zkus si ji!</button>
<div class="mirror__stage">
<video autoplay playsinline muted></video>
<canvas class="mirror__lips"></canvas>
</div>
<ul class="mirror__shades">
{% for variant in product.variants %}
<li data-color="{{ variant.metafields.custom.hex }}">
{{ variant.title }}
</li>
{% endfor %}
</ul>
<form action="/cart/add" method="post">
<input type="hidden" name="id" value="{{ variant.id }}">
<button type="submit">Tu chci — přidat do košíku</button>
</form>
</section>
{% render 'mirror-script' %}
{% comment %} Digitální zrcadlo · produktová stránka {% endcomment %}
<section class="mirror" data-product="{{ product.handle }}">
<button class="mirror__open">Zkus si ji!</button>
<div class="mirror__stage">
<video autoplay playsinline muted></video>
<canvas class="mirror__lips"></canvas>
</div>
<ul class="mirror__shades">
{% for variant in product.variants %}
<li data-color="{{ variant.metafields.custom.hex }}">
{{ variant.title }}
</li>
{% endfor %}
</ul>
<form action="/cart/add" method="post">
<input type="hidden" name="id" value="{{ variant.id }}">
<button type="submit">Tu chci — přidat do košíku</button>
</form>
</section>
{% render 'mirror-script' %}
{% comment %} Digitální zrcadlo · produktová stránka {% endcomment %}
<section class="mirror" data-product="{{ product.handle }}">
<button class="mirror__open">Zkus si ji!</button>
<div class="mirror__stage">
<video autoplay playsinline muted></video>
<canvas class="mirror__lips"></canvas>
</div>
<ul class="mirror__shades">
{% for variant in product.variants %}
<li data-color="{{ variant.metafields.custom.hex }}">
{{ variant.title }}
</li>
{% endfor %}
</ul>
<form action="/cart/add" method="post">
<input type="hidden" name="id" value="{{ variant.id }}">
<button type="submit">Tu chci — přidat do košíku</button>
</form>
</section>
{% render 'mirror-script' %}
{% comment %} Digitální zrcadlo · produktová stránka {% endcomment %}
<section class="mirror" data-product="{{ product.handle }}">
<button class="mirror__open">Zkus si ji!</button>
<div class="mirror__stage">
<video autoplay playsinline muted></video>
<canvas class="mirror__lips"></canvas>
</div>
<ul class="mirror__shades">
{% for variant in product.variants %}
<li data-color="{{ variant.metafields.custom.hex }}">
{{ variant.title }}
</li>
{% endfor %}
</ul>
<form action="/cart/add" method="post">
<input type="hidden" name="id" value="{{ variant.id }}">
<button type="submit">Tu chci — přidat do košíku</button>
</form>
</section>
{% render 'mirror-script' %}
{% comment %} Digitální zrcadlo · produktová stránka {% endcomment %}
<section class="mirror" data-product="{{ product.handle }}">
<button class="mirror__open">Zkus si ji!</button>
<div class="mirror__stage">
<video autoplay playsinline muted></video>
<canvas class="mirror__lips"></canvas>
</div>
<ul class="mirror__shades">
{% for variant in product.variants %}
<li data-color="{{ variant.metafields.custom.hex }}">
{{ variant.title }}
</li>
{% endfor %}
</ul>
<form action="/cart/add" method="post">
<input type="hidden" name="id" value="{{ variant.id }}">
<button type="submit">Tu chci — přidat do košíku</button>
</form>
</section>
{% render 'mirror-script' %}
{% comment %} Digitální zrcadlo · produktová stránka {% endcomment %}
<section class="mirror" data-product="{{ product.handle }}">
<button class="mirror__open">Zkus si ji!</button>
<div class="mirror__stage">
<video autoplay playsinline muted></video>
<canvas class="mirror__lips"></canvas>
</div>
<ul class="mirror__shades">
{% for variant in product.variants %}
<li data-color="{{ variant.metafields.custom.hex }}">
{{ variant.title }}
</li>
{% endfor %}
</ul>
<form action="/cart/add" method="post">
<input type="hidden" name="id" value="{{ variant.id }}">
<button type="submit">Tu chci — přidat do košíku</button>
</form>
</section>
{% render 'mirror-script' %}
{% comment %} Digitální zrcadlo · produktová stránka {% endcomment %}
<section class="mirror" data-product="{{ product.handle }}">
<button class="mirror__open">Zkus si ji!</button>
<div class="mirror__stage">
<video autoplay playsinline muted></video>
<canvas class="mirror__lips"></canvas>
</div>
<ul class="mirror__shades">
{% for variant in product.variants %}
<li data-color="{{ variant.metafields.custom.hex }}">
{{ variant.title }}
</li>
{% endfor %}
</ul>
<form action="/cart/add" method="post">
<input type="hidden" name="id" value="{{ variant.id }}">
<button type="submit">Tu chci — přidat do košíku</button>
</form>
</section>
{% render 'mirror-script' %}
{% comment %} Digitální zrcadlo · produktová stránka {% endcomment %}
<section class="mirror" data-product="{{ product.handle }}">
<button class="mirror__open">Zkus si ji!</button>
<div class="mirror__stage">
<video autoplay playsinline muted></video>
<canvas class="mirror__lips"></canvas>
</div>
<ul class="mirror__shades">
{% for variant in product.variants %}
<li data-color="{{ variant.metafields.custom.hex }}">
{{ variant.title }}
</li>
{% endfor %}
</ul>
<form action="/cart/add" method="post">
<input type="hidden" name="id" value="{{ variant.id }}">
<button type="submit">Tu chci — přidat do košíku</button>
</form>
</section>
{% render 'mirror-script' %}
{% comment %} Digitální zrcadlo · produktová stránka {% endcomment %}
<section class="mirror" data-product="{{ product.handle }}">
<button class="mirror__open">Zkus si ji!</button>
<div class="mirror__stage">
<video autoplay playsinline muted></video>
<canvas class="mirror__lips"></canvas>
</div>
<ul class="mirror__shades">
{% for variant in product.variants %}
<li data-color="{{ variant.metafields.custom.hex }}">
{{ variant.title }}
</li>
{% endfor %}
</ul>
<form action="/cart/add" method="post">
<input type="hidden" name="id" value="{{ variant.id }}">
<button type="submit">Tu chci — přidat do košíku</button>
</form>
</section>
{% render 'mirror-script' %}
{% comment %} Digitální zrcadlo · produktová stránka {% endcomment %}
<section class="mirror" data-product="{{ product.handle }}">
<button class="mirror__open">Zkus si ji!</button>
<div class="mirror__stage">
<video autoplay playsinline muted></video>
<canvas class="mirror__lips"></canvas>
</div>
<ul class="mirror__shades">
{% for variant in product.variants %}
<li data-color="{{ variant.metafields.custom.hex }}">
{{ variant.title }}
</li>
{% endfor %}
</ul>
<form action="/cart/add" method="post">
<input type="hidden" name="id" value="{{ variant.id }}">
<button type="submit">Tu chci — přidat do košíku</button>
</form>
</section>
{% render 'mirror-script' %}
{% comment %} Digitální zrcadlo · produktová stránka {% endcomment %}
<section class="mirror" data-product="{{ product.handle }}">
<button class="mirror__open">Zkus si ji!</button>
<div class="mirror__stage">
<video autoplay playsinline muted></video>
<canvas class="mirror__lips"></canvas>
</div>
<ul class="mirror__shades">
{% for variant in product.variants %}
<li data-color="{{ variant.metafields.custom.hex }}">
{{ variant.title }}
</li>
{% endfor %}
</ul>
<form action="/cart/add" method="post">
<input type="hidden" name="id" value="{{ variant.id }}">
<button type="submit">Tu chci — přidat do košíku</button>
</form>
</section>
{% render 'mirror-script' %}
{% comment %} Digitální zrcadlo · produktová stránka {% endcomment %}
<section class="mirror" data-product="{{ product.handle }}">
<button class="mirror__open">Zkus si ji!</button>
<div class="mirror__stage">
<video autoplay playsinline muted></video>
<canvas class="mirror__lips"></canvas>
</div>
<ul class="mirror__shades">
{% for variant in product.variants %}
<li data-color="{{ variant.metafields.custom.hex }}">
{{ variant.title }}
</li>
{% endfor %}
</ul>
<form action="/cart/add" method="post">
<input type="hidden" name="id" value="{{ variant.id }}">
<button type="submit">Tu chci — přidat do košíku</button>
</form>
</section>
{% render 'mirror-script' %}
{% comment %} Digitální zrcadlo · produktová stránka {% endcomment %}
<section class="mirror" data-product="{{ product.handle }}">
<button class="mirror__open">Zkus si ji!</button>
<div class="mirror__stage">
<video autoplay playsinline muted></video>
<canvas class="mirror__lips"></canvas>
</div>
<ul class="mirror__shades">
{% for variant in product.variants %}
<li data-color="{{ variant.metafields.custom.hex }}">
{{ variant.title }}
</li>
{% endfor %}
</ul>
<form action="/cart/add" method="post">
<input type="hidden" name="id" value="{{ variant.id }}">
<button type="submit">Tu chci — přidat do košíku</button>
</form>
</section>
{% render 'mirror-script' %}
{% comment %} Digitální zrcadlo · produktová stránka {% endcomment %}
<section class="mirror" data-product="{{ product.handle }}">
<button class="mirror__open">Zkus si ji!</button>
<div class="mirror__stage">
<video autoplay playsinline muted></video>
<canvas class="mirror__lips"></canvas>
</div>
<ul class="mirror__shades">
{% for variant in product.variants %}
<li data-color="{{ variant.metafields.custom.hex }}">
{{ variant.title }}
</li>
{% endfor %}
</ul>
<form action="/cart/add" method="post">
<input type="hidden" name="id" value="{{ variant.id }}">
<button type="submit">Tu chci — přidat do košíku</button>
</form>
</section>
{% render 'mirror-script' %}
{% comment %} Digitální zrcadlo · produktová stránka {% endcomment %}
<section class="mirror" data-product="{{ product.handle }}">
<button class="mirror__open">Zkus si ji!</button>
<div class="mirror__stage">
<video autoplay playsinline muted></video>
<canvas class="mirror__lips"></canvas>
</div>
<ul class="mirror__shades">
{% for variant in product.variants %}
<li data-color="{{ variant.metafields.custom.hex }}">
{{ variant.title }}
</li>
{% endfor %}
</ul>
<form action="/cart/add" method="post">
<input type="hidden" name="id" value="{{ variant.id }}">
<button type="submit">Tu chci — přidat do košíku</button>
</form>
</section>
{% render 'mirror-script' %}
{% comment %} Digitální zrcadlo · produktová stránka {% endcomment %}
<section class="mirror" data-product="{{ product.handle }}">
<button class="mirror__open">Zkus si ji!</button>
<div class="mirror__stage">
<video autoplay playsinline muted></video>
<canvas class="mirror__lips"></canvas>
</div>
<ul class="mirror__shades">
{% for variant in product.variants %}
<li data-color="{{ variant.metafields.custom.hex }}">
{{ variant.title }}
</li>
{% endfor %}
</ul>
<form action="/cart/add" method="post">
<input type="hidden" name="id" value="{{ variant.id }}">
<button type="submit">Tu chci — přidat do košíku</button>
</form>
</section>
{% render 'mirror-script' %}
{% comment %} Digitální zrcadlo · produktová stránka {% endcomment %}
<section class="mirror" data-product="{{ product.handle }}">
<button class="mirror__open">Zkus si ji!</button>
<div class="mirror__stage">
<video autoplay playsinline muted></video>
<canvas class="mirror__lips"></canvas>
</div>
<ul class="mirror__shades">
{% for variant in product.variants %}
<li data-color="{{ variant.metafields.custom.hex }}">
{{ variant.title }}
</li>
{% endfor %}
</ul>
<form action="/cart/add" method="post">
<input type="hidden" name="id" value="{{ variant.id }}">
<button type="submit">Tu chci — přidat do košíku</button>
</form>
</section>
{% render 'mirror-script' %}
{% comment %} Digitální zrcadlo · produktová stránka {% endcomment %}
<section class="mirror" data-product="{{ product.handle }}">
<button class="mirror__open">Zkus si ji!</button>
<div class="mirror__stage">
<video autoplay playsinline muted></video>
<canvas class="mirror__lips"></canvas>
</div>
<ul class="mirror__shades">
{% for variant in product.variants %}
<li data-color="{{ variant.metafields.custom.hex }}">
{{ variant.title }}
</li>
{% endfor %}
</ul>
<form action="/cart/add" method="post">
<input type="hidden" name="id" value="{{ variant.id }}">
<button type="submit">Tu chci — přidat do košíku</button>
</form>
</section>
{% render 'mirror-script' %}
{% comment %} Digitální zrcadlo · produktová stránka {% endcomment %}
<section class="mirror" data-product="{{ product.handle }}">
<button class="mirror__open">Zkus si ji!</button>
<div class="mirror__stage">
<video autoplay playsinline muted></video>
<canvas class="mirror__lips"></canvas>
</div>
<ul class="mirror__shades">
{% for variant in product.variants %}
<li data-color="{{ variant.metafields.custom.hex }}">
{{ variant.title }}
</li>
{% endfor %}
</ul>
<form action="/cart/add" method="post">
<input type="hidden" name="id" value="{{ variant.id }}">
<button type="submit">Tu chci — přidat do košíku</button>
</form>
</section>
{% render 'mirror-script' %}
Od prototypu do Shopify
Zrcadlo jsme integrovali do již existujícího Shopify e-shopu. Od prototypu po integraci jsme to zvládli za 8 dní.
Prototyp Prosté
<HTML>aJavaScript() Testování Světla, stíny, bugy…



Integrace do shopify Přepsání do
{% Liquid %}
Zkus & kup. Online.
Živé zkoušení přes webkameru přímo v produktové stránce Shopify. Obličej rozpozná prohlížeč, takže se nic nenahrává na server.
- Otevřete zrcadlo
- Vyzkoušejte odstín
- Přidejte do košíku



denity.cz 5 t
Boží!! ❤️🔥❤️🔥
OdpovědětTahle nova funkce se mi fakt libi 😂9:28
zákaznice 5 t
❤️❤️❤️
OdpovědětGood job ✌️
iMessage„Spolupráce s Matějem na Pavlok's Beauty byla naprosto skvělá. Dokázal na náš e‑shop přinést novinku v podobě virtuálního zrcadla a celý proces probíhal bez jediného problému.“
Máte nápad?
Chceme ho slyšet!
Napište nám o něm, nebo ho pojďme probrat u kafe.
Napište nám →