From a592b5d25cc1a7cd87cd2054b1a7878b1a9c65ee Mon Sep 17 00:00:00 2001 From: Claude Date: Wed, 3 Dec 2025 09:40:45 +0000 Subject: [PATCH] Create Shopify fragrance theme based on design mockup Implemented comprehensive e-commerce theme with following features: - Enhanced header with logo, navigation, search, and icons - Sticky header with contact information bar - Full navigation menu with dropdown support - Search functionality integrated - Account, wishlist, and cart icons - Hero slider section - Multiple slide support with automatic rotation - Navigation arrows and dot indicators - Customizable per-slide content and CTAs - Brand carousel section - Horizontal scrolling brand logos - Support for multiple brand images or text - Navigation controls - Featured products section - Product grid with category filters - Add to cart functionality - Sale badges and pricing display - Load more capability - Promotional banners section - Responsive grid layout - Image overlay with text content - Hover effects - Enhanced footer - Multi-column layout with links - Contact information - Feature highlights section - Newsletter signup - Payment icons display - Homepage template configuration - All sections integrated in proper order - Default content and settings All sections are fully customizable through Shopify theme editor and follow Shopify theme development best practices. --- assets/critical.css | 12 + sections/brand-carousel.liquid | 294 ++++++++++++++++++++ sections/featured-products.liquid | 427 +++++++++++++++++++++++++++++ sections/footer.liquid | 442 ++++++++++++++++++++++++++++-- sections/header.liquid | 314 ++++++++++++++++++--- sections/hero-slider.liquid | 340 +++++++++++++++++++++++ sections/promo-banners.liquid | 207 ++++++++++++++ templates/index.json | 138 +++++++++- 8 files changed, 2112 insertions(+), 62 deletions(-) create mode 100644 sections/brand-carousel.liquid create mode 100644 sections/featured-products.liquid create mode 100644 sections/hero-slider.liquid create mode 100644 sections/promo-banners.liquid diff --git a/assets/critical.css b/assets/critical.css index cdb1ae1a..4a4f7302 100644 --- a/assets/critical.css +++ b/assets/critical.css @@ -76,6 +76,18 @@ body { font-family: var(--font-primary--family); background-color: var(--color-background); color: var(--color-foreground); + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +button { + cursor: pointer; + font-family: inherit; +} + +a { + color: inherit; + transition: color 0.2s ease; } /** Section layout utilities */ diff --git a/sections/brand-carousel.liquid b/sections/brand-carousel.liquid new file mode 100644 index 00000000..a539a999 --- /dev/null +++ b/sections/brand-carousel.liquid @@ -0,0 +1,294 @@ +
+
+
+ {% for block in section.blocks %} + {% case block.type %} + {% when 'brand' %} +
+ {% if block.settings.link != blank %} + + {% endif %} + {% if block.settings.image != blank %} + {{ block.settings.image | image_url: width: 200 | image_tag: alt: block.settings.brand_name, loading: 'lazy', class: 'brand-carousel__logo' }} + {% else %} + {{ block.settings.brand_name }} + {% endif %} + {% if block.settings.link != blank %} + + {% endif %} +
+ {% endcase %} + {% endfor %} + + {%comment%} Duplicate items for seamless loop {%endcomment%} + {% for block in section.blocks limit: 5 %} + {% case block.type %} + {% when 'brand' %} +
+ {% if block.settings.link != blank %} + + {% endif %} + {% if block.settings.image != blank %} + {{ block.settings.image | image_url: width: 200 | image_tag: alt: block.settings.brand_name, loading: 'lazy', class: 'brand-carousel__logo' }} + {% else %} + {{ block.settings.brand_name }} + {% endif %} + {% if block.settings.link != blank %} + + {% endif %} +
+ {% endcase %} + {% endfor %} +
+ + {% if section.settings.show_navigation %} + + + {% endif %} +
+
+ +{% stylesheet %} + .brand-carousel { + background: #fff; + padding: 2rem 0; + border-top: 1px solid #e0e0e0; + border-bottom: 1px solid #e0e0e0; + overflow: hidden; + } + .brand-carousel__container { + max-width: var(--page-width, 1400px); + margin: 0 auto; + padding: 0 var(--page-margin, 20px); + position: relative; + } + .brand-carousel__track { + display: flex; + gap: 3rem; + align-items: center; + overflow-x: auto; + scroll-behavior: smooth; + scrollbar-width: none; + -ms-overflow-style: none; + padding: 1rem 0; + } + .brand-carousel__track::-webkit-scrollbar { + display: none; + } + .brand-carousel__item { + flex: 0 0 auto; + display: flex; + align-items: center; + justify-content: center; + min-width: 120px; + opacity: 0.7; + transition: opacity 0.3s; + } + .brand-carousel__item:hover { + opacity: 1; + } + .brand-carousel__link { + display: block; + text-decoration: none; + } + .brand-carousel__logo { + max-width: 150px; + max-height: 60px; + width: auto; + height: auto; + object-fit: contain; + filter: grayscale(100%); + transition: filter 0.3s; + } + .brand-carousel__item:hover .brand-carousel__logo { + filter: grayscale(0%); + } + .brand-carousel__text { + font-size: 1.2rem; + font-weight: 600; + color: #333; + text-transform: uppercase; + letter-spacing: 0.05em; + } + .brand-carousel__nav { + position: absolute; + top: 50%; + transform: translateY(-50%); + width: 40px; + height: 40px; + background: #fff; + border: 1px solid #ddd; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + transition: all 0.3s; + z-index: 10; + box-shadow: 0 2px 10px rgba(0,0,0,0.1); + } + .brand-carousel__nav:hover { + background: #f5f5f5; + border-color: #999; + } + .brand-carousel__nav--prev { + left: 0; + } + .brand-carousel__nav--next { + right: 0; + } + .brand-carousel__nav svg { + color: #333; + } + + @media (max-width: 768px) { + .brand-carousel__track { + gap: 2rem; + } + .brand-carousel__item { + min-width: 100px; + } + .brand-carousel__logo { + max-width: 100px; + max-height: 50px; + } + .brand-carousel__nav { + display: none; + } + } +{% endstylesheet %} + +{% javascript %} + class BrandCarousel { + constructor(element) { + this.carousel = element; + this.track = this.carousel.querySelector('.brand-carousel__track'); + this.prevBtn = this.carousel.querySelector('.brand-carousel__nav--prev'); + this.nextBtn = this.carousel.querySelector('.brand-carousel__nav--next'); + + this.init(); + } + + init() { + if (!this.track) return; + + this.prevBtn?.addEventListener('click', () => this.scroll(-300)); + this.nextBtn?.addEventListener('click', () => this.scroll(300)); + } + + scroll(distance) { + this.track.scrollBy({ + left: distance, + behavior: 'smooth' + }); + } + } + + document.addEventListener('DOMContentLoaded', () => { + const carousels = document.querySelectorAll('.brand-carousel'); + carousels.forEach(carousel => new BrandCarousel(carousel)); + }); +{% endjavascript %} + +{% schema %} +{ + "name": "Brand Carousel", + "tag": "section", + "class": "brand-carousel-section", + "settings": [ + { + "type": "checkbox", + "id": "show_navigation", + "label": "Show navigation arrows", + "default": true + } + ], + "blocks": [ + { + "type": "brand", + "name": "Brand", + "settings": [ + { + "type": "image_picker", + "id": "image", + "label": "Brand logo" + }, + { + "type": "text", + "id": "brand_name", + "label": "Brand name", + "default": "Brand Name" + }, + { + "type": "url", + "id": "link", + "label": "Brand link" + } + ] + } + ], + "presets": [ + { + "name": "Brand Carousel", + "blocks": [ + { + "type": "brand", + "settings": { + "brand_name": "CREED" + } + }, + { + "type": "brand", + "settings": { + "brand_name": "BURBERRY" + } + }, + { + "type": "brand", + "settings": { + "brand_name": "CHANEL" + } + }, + { + "type": "brand", + "settings": { + "brand_name": "CALVIN KLEIN" + } + }, + { + "type": "brand", + "settings": { + "brand_name": "Christian Dior" + } + }, + { + "type": "brand", + "settings": { + "brand_name": "GIORGIO ARMANI" + } + }, + { + "type": "brand", + "settings": { + "brand_name": "TOM FORD" + } + }, + { + "type": "brand", + "settings": { + "brand_name": "VERSACE" + } + } + ] + } + ] +} +{% endschema %} diff --git a/sections/featured-products.liquid b/sections/featured-products.liquid new file mode 100644 index 00000000..ad7ff540 --- /dev/null +++ b/sections/featured-products.liquid @@ -0,0 +1,427 @@ +
+
+ {% if section.settings.heading != blank %} +

{{ section.settings.heading }}

+ {% endif %} + {% if section.settings.subheading != blank %} +

{{ section.settings.subheading }}

+ {% endif %} + + {% if section.settings.show_filters %} +
+ + + + +
+ {% endif %} + +
+ {% assign collection = collections[section.settings.collection] %} + {% if collection != blank %} + {% for product in collection.products limit: section.settings.products_limit %} +
+
+ + {% if product.featured_image %} + {{ product.featured_image | image_url: width: 400 | image_tag: alt: product.title, loading: 'lazy' }} + {% else %} +
+ {% endif %} + + {% if product.compare_at_price > product.price %} + Sale + {% endif %} +
+
+

{{ product.vendor }}

+

+ {{ product.title }} +

+
+ {% if product.compare_at_price > product.price %} + {{ product.compare_at_price | money }} + {% endif %} + {{ product.price | money }} +
+ +
+
+ {% endfor %} + {% else %} + {%comment%} Show placeholder products if no collection is selected {%endcomment%} + {% for i in (1..8) %} +
+
+
+
+
+

Brand Name

+

+ Product Title +

+
+ $0.00 +
+ +
+
+ {% endfor %} + {% endif %} +
+ + {% if section.settings.show_view_all %} +
+ +
+ {% endif %} +
+
+ +{% stylesheet %} + .featured-products { + padding: 4rem 0; + background: #fff; + } + .featured-products__container { + max-width: var(--page-width, 1400px); + margin: 0 auto; + padding: 0 var(--page-margin, 20px); + } + .featured-products__heading { + text-align: center; + font-size: 2rem; + font-weight: 700; + text-transform: uppercase; + margin: 0 0 0.5rem; + color: #000; + } + .featured-products__subheading { + text-align: center; + font-size: 1rem; + color: #666; + margin: 0 0 2rem; + } + .featured-products__filters { + display: flex; + justify-content: center; + gap: 1rem; + margin: 2rem 0; + flex-wrap: wrap; + } + .filter-btn { + padding: 0.6rem 1.5rem; + background: #fff; + border: 1px solid #4a1c40; + color: #4a1c40; + font-size: 0.9rem; + font-weight: 600; + text-transform: capitalize; + cursor: pointer; + transition: all 0.3s; + border-radius: 4px; + } + .filter-btn:hover, + .filter-btn--active { + background: #4a1c40; + color: #fff; + } + .featured-products__grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); + gap: 2rem; + margin: 2rem 0; + } + .product-card { + position: relative; + display: flex; + flex-direction: column; + background: #fff; + border: 1px solid #e0e0e0; + transition: all 0.3s; + } + .product-card:hover { + box-shadow: 0 4px 20px rgba(0,0,0,0.1); + transform: translateY(-5px); + } + .product-card__image { + position: relative; + width: 100%; + padding-bottom: 100%; + overflow: hidden; + background: #f5f5f5; + } + .product-card__image img { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + object-fit: cover; + transition: transform 0.3s; + } + .product-card:hover .product-card__image img { + transform: scale(1.05); + } + .product-card__placeholder { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: linear-gradient(135deg, #e0e0e0 0%, #f5f5f5 100%); + } + .product-card__badge { + position: absolute; + top: 10px; + right: 10px; + padding: 0.3rem 0.8rem; + background: #ff0000; + color: #fff; + font-size: 0.75rem; + font-weight: 600; + text-transform: uppercase; + border-radius: 3px; + z-index: 5; + } + .product-card__content { + padding: 1rem; + flex: 1; + display: flex; + flex-direction: column; + } + .product-card__vendor { + font-size: 0.85rem; + color: #999; + margin: 0 0 0.5rem; + text-transform: uppercase; + } + .product-card__title { + font-size: 0.95rem; + font-weight: 500; + margin: 0 0 0.8rem; + flex: 1; + } + .product-card__title a { + text-decoration: none; + color: #333; + transition: color 0.3s; + } + .product-card__title a:hover { + color: #4a1c40; + } + .product-card__price { + display: flex; + gap: 0.5rem; + align-items: center; + margin: 0 0 1rem; + } + .product-card__price--compare { + text-decoration: line-through; + color: #999; + font-size: 0.9rem; + } + .product-card__price--current { + font-size: 1.1rem; + font-weight: 700; + color: #000; + } + .product-card__button { + width: 100%; + padding: 0.8rem; + background: #4a1c40; + color: #fff; + border: none; + font-size: 0.85rem; + font-weight: 600; + text-transform: uppercase; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + gap: 0.5rem; + transition: all 0.3s; + } + .product-card__button:hover { + background: #3a1530; + } + .featured-products__footer { + display: flex; + justify-content: center; + margin-top: 3rem; + } + .featured-products__load-more { + padding: 0.8rem 2rem; + background: transparent; + border: 2px solid #4a1c40; + color: #4a1c40; + font-size: 0.9rem; + font-weight: 600; + text-transform: lowercase; + cursor: pointer; + transition: all 0.3s; + border-radius: 50px; + min-width: 150px; + } + .featured-products__load-more:hover { + background: #4a1c40; + color: #fff; + } + + @media (max-width: 768px) { + .featured-products__grid { + grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); + gap: 1rem; + } + } +{% endstylesheet %} + +{% javascript %} + class FeaturedProducts { + constructor(element) { + this.element = element; + this.filterBtns = this.element.querySelectorAll('.filter-btn'); + this.products = this.element.querySelectorAll('.product-card'); + this.addToCartBtns = this.element.querySelectorAll('.product-card__button'); + + this.init(); + } + + init() { + this.filterBtns.forEach(btn => { + btn.addEventListener('click', () => this.filter(btn)); + }); + + this.addToCartBtns.forEach(btn => { + btn.addEventListener('click', (e) => this.addToCart(e)); + }); + } + + filter(btn) { + const filter = btn.dataset.filter; + + this.filterBtns.forEach(b => b.classList.remove('filter-btn--active')); + btn.classList.add('filter-btn--active'); + + this.products.forEach(product => { + const category = product.dataset.category; + if (filter === 'all' || category === filter) { + product.style.display = 'flex'; + } else { + product.style.display = 'none'; + } + }); + } + + async addToCart(e) { + const btn = e.currentTarget; + const productId = btn.dataset.productId; + + if (!productId) return; + + btn.disabled = true; + btn.innerHTML = 'Adding...'; + + try { + const response = await fetch('/cart/add.js', { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + }, + body: JSON.stringify({ + id: productId, + quantity: 1 + }) + }); + + if (response.ok) { + btn.innerHTML = 'Added!'; + setTimeout(() => { + btn.innerHTML = 'ADD TO CART'; + btn.disabled = false; + }, 2000); + + // Update cart count + document.dispatchEvent(new CustomEvent('cart:updated')); + } + } catch (error) { + console.error('Error adding to cart:', error); + btn.innerHTML = 'Error'; + setTimeout(() => { + btn.innerHTML = 'ADD TO CART'; + btn.disabled = false; + }, 2000); + } + } + } + + document.addEventListener('DOMContentLoaded', () => { + const sections = document.querySelectorAll('.featured-products'); + sections.forEach(section => new FeaturedProducts(section)); + }); +{% endjavascript %} + +{% schema %} +{ + "name": "Featured Products", + "tag": "section", + "class": "featured-products-section", + "settings": [ + { + "type": "text", + "id": "heading", + "label": "Heading", + "default": "THE MOST POPULAR" + }, + { + "type": "text", + "id": "subheading", + "label": "Subheading", + "default": "Moisturising beautifully glowing and clean skin all year round" + }, + { + "type": "collection", + "id": "collection", + "label": "Collection" + }, + { + "type": "range", + "id": "products_limit", + "min": 4, + "max": 24, + "step": 4, + "label": "Number of products to show", + "default": 8 + }, + { + "type": "checkbox", + "id": "show_filters", + "label": "Show category filters", + "default": true + }, + { + "type": "checkbox", + "id": "show_view_all", + "label": "Show load more button", + "default": true + } + ], + "presets": [ + { + "name": "Featured Products" + } + ] +} +{% endschema %} diff --git a/sections/footer.liquid b/sections/footer.liquid index 66e6f097..7445aa87 100644 --- a/sections/footer.liquid +++ b/sections/footer.liquid @@ -1,56 +1,448 @@ -