Homepage
{{ 'cozy-homepage.css' | asset_url | stylesheet_tag }}
<div class="cpb-page">
<!-- HERO -->
<section class="cpb-hero">
<div class="cpb-hero__bg">
<div class="cpb-hero__blob cpb-hero__blob--1"></div>
<div class="cpb-hero__blob cpb-hero__blob--2"></div>
<div class="cpb-hero__blob cpb-hero__blob--3"></div>
</div>
<div class="cpb-hero__content">
<div class="cpb-hero__badge">🐾 Livraison rapide • Qualité garantie</div>
<h1 class="cpb-hero__title">
Tout le bonheur<br>
<span class="cpb-hero__title--accent">de vos animaux</span>
</h1>
<p class="cpb-hero__sub">Accessoires kawaii & cosy pour chats et chiens. Parce qu'ils méritent ce qu'il y a de mieux.</p>
<div class="cpb-hero__ctas">
<a href="/collections/all" class="cpb-btn cpb-btn--primary">Découvrir la boutique</a>
<a href="/collections/chats" class="cpb-btn cpb-btn--ghost">🐱 Chats</a>
<a href="/collections/chiens" class="cpb-btn cpb-btn--ghost">🐶 Chiens</a>
</div>
<div class="cpb-hero__trust">
<span>⭐ 4.9/5 clients satisfaits</span>
<span>📦 +500 commandes</span>
<span>🔒 Paiement sécurisé</span>
</div>
</div>
<div class="cpb-hero__visual">
<div class="cpb-hero__card cpb-hero__card--1">
<div class="cpb-hero__card-icon">🍯</div>
<div class="cpb-hero__card-text">Panier Pot de Miel</div>
<div class="cpb-hero__card-price">34,99€</div>
</div>
<div class="cpb-hero__card cpb-hero__card--2">
<div class="cpb-hero__card-icon">💧</div>
<div class="cpb-hero__card-text">Fontaine Filtrante</div>
<div class="cpb-hero__card-price">29,99€</div>
</div>
<div class="cpb-hero__card cpb-hero__card--3">
<div class="cpb-hero__card-icon">🦴</div>
<div class="cpb-hero__card-text">Jouet Interactif</div>
<div class="cpb-hero__card-price">18,99€</div>
</div>
</div>
</section>
<!-- CATEGORIES -->
<section class="cpb-cats">
<div class="cpb-container">
<h2 class="cpb-section-title">Choisissez votre compagnon</h2>
<div class="cpb-cats__grid">
<a href="/collections/chats" class="cpb-cat-card cpb-cat-card--cat">
<div class="cpb-cat-card__emoji">🐱</div>
<div class="cpb-cat-card__content">
<h3>Pour les chats</h3>
<p>Paniers, fontaines, jouets & plus</p>
<span class="cpb-cat-card__cta">Voir la collection →</span>
</div>
<div class="cpb-cat-card__deco"></div>
</a>
<a href="/collections/chiens" class="cpb-cat-card cpb-cat-card--dog">
<div class="cpb-cat-card__emoji">🐶</div>
<div class="cpb-cat-card__content">
<h3>Pour les chiens</h3>
<p>Manteaux, lits, jouets & plus</p>
<span class="cpb-cat-card__cta">Voir la collection →</span>
</div>
<div class="cpb-cat-card__deco"></div>
</a>
</div>
</div>
</section>
<!-- FEATURED PRODUCTS -->
<section class="cpb-featured">
<div class="cpb-container">
<div class="cpb-section-header">
<h2 class="cpb-section-title">Nos bestsellers ✨</h2>
<a href="/collections/all" class="cpb-link">Tout voir →</a>
</div>
<div class="cpb-products__grid">
{% for product in collections.frontpage.products limit: 4 %}
<a href="{{ product.url }}" class="cpb-product-card">
<div class="cpb-product-card__img-wrap">
{% if product.featured_image %}
<img src="{{ product.featured_image | img_url: '400x400', crop: 'center' }}" alt="{{ product.title }}" loading="lazy" class="cpb-product-card__img">
{% else %}
<div class="cpb-product-card__placeholder">🐾</div>
{% endif %}
{% if product.compare_at_price > product.price %}
<span class="cpb-product-card__badge">Promo</span>
{% endif %}
</div>
<div class="cpb-product-card__body">
<h3 class="cpb-product-card__title">{{ product.title }}</h3>
<div class="cpb-product-card__prices">
<span class="cpb-product-card__price">{{ product.price | money }}</span>
{% if product.compare_at_price > product.price %}
<span class="cpb-product-card__old">{{ product.compare_at_price | money }}</span>
{% endif %}
</div>
<div class="cpb-product-card__btn">Ajouter au panier</div>
</div>
</a>
{% endfor %}
</div>
</div>
</section>
<!-- WHY US -->
<section class="cpb-why">
<div class="cpb-container">
<h2 class="cpb-section-title">Pourquoi CozyPetShop ?</h2>
<div class="cpb-why__grid">
<div class="cpb-why__item">
<div class="cpb-why__icon">🚚</div>
<h4>Livraison rapide</h4>
<p>7 à 14 jours partout en France</p>
</div>
<div class="cpb-why__item">
<div class="cpb-why__icon">💝</div>
<h4>Sélection kawaii</h4>
<p>Des produits mignons et de qualité pour vos compagnons</p>
</div>
<div class="cpb-why__item">
<div class="cpb-why__icon">🔒</div>
<h4>Paiement sécurisé</h4>
<p>CB, Apple Pay, Google Pay acceptés</p>
</div>
<div class="cpb-why__item">
<div class="cpb-why__icon">↩️</div>
<h4>Retour 14 jours</h4>
<p>Satisfait ou remboursé, sans questions</p>
</div>
</div>
</div>
</section>
<!-- BANNER CTA -->
<section class="cpb-banner">
<div class="cpb-container">
<div class="cpb-banner__inner">
<div class="cpb-banner__text">
<h2>Offrez-leur le meilleur 🐾</h2>
<p>Des produits pensés pour le confort et le bonheur de vos animaux</p>
</div>
<a href="/collections/all" class="cpb-btn cpb-btn--white">Voir tous les produits</a>
</div>
</div>
</section>
</div>
{% schema %}
{
"name": "CozyPetShop Homepage",
"settings": [],
"presets": [{ "name": "CozyPetShop Homepage" }]
}
{% endschema %}