feat: Homerline kitchen store - white Chefsy-style theme on Dawn#3923
Open
irfanSuperio wants to merge 8 commits into
Open
feat: Homerline kitchen store - white Chefsy-style theme on Dawn#3923irfanSuperio wants to merge 8 commits into
irfanSuperio wants to merge 8 commits into
Conversation
Complete Shopify Dawn theme customization for Homerline — an eco-friendly home & kitchen brand. Dark green (#2A4A2A) and cream (#FAF7F2) color palette, Playfair Display headings, animated marquee, multi-section homepage with slideshow hero, product grids, multirow feature rows, testimonials, and custom banner images throughout. - config/settings_data.json: Brand colors, fonts (Playfair/Josefin), card styles - templates/index.json: 13-section homepage layout - assets/custom-theme.css: Full brand CSS system with animations - sections/: Modified slideshow, multirow, image-banner for asset fallbacks - snippets/custom-banner-images.liquid: CSS image injection for all sections - assets/: 15 optimized banner/hero images Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Complete visual overhaul from cream/eco palette to a clean white background design inspired by the Chefsy reference — optimised for kitchen and cleaning products. Changes: - config/settings_data.json: New white (#FFFFFF) color scheme; forest green (#1B4332) accents; Assistant font; tighter card radius (12px); green-tint alternate scheme; red sale + navy new-badge schemes. - assets/custom-theme.css: Full rewrite — CSS variables, white header with green bottom border, bold hero typography (clamp 3–6rem), circular Shop Now button, 4-column trust bar, horizontal-scroll category cards, white product cards with hover lift, Chefsy-style review cards, 6-image gallery grid, dark-green newsletter, clean dark footer. - templates/index.json: New 10-section homepage — slideshow (bold copy), trust bar, category carousel (custom-liquid), new arrivals grid, brand statement, best sellers grid, 4-column why-us, testimonials, gallery, newsletter. - sections/header-group.json: Updated announcement copy for kitchen/cleaning products brand positioning. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Complete redesign of the homepage from the white Chefsy-style theme to
the Shrine/Homedine eco-friendly green aesthetic.
templates/index.json:
- New section order: slideshow → bestsellers → brand statement → trust bar
→ categories carousel → bestsellers → gallery → testimonials →
commitment statement → recipes CTA banner → mega-brand footer
- Hero copy updated to eco-friendly messaging ("Eco-Friendly Kitchenware
for a greener home")
- New custom-liquid sections:
- commitment_statement: centered statement with leaf-highlighted text
- recipes_cta: "Get Recipes 10% Off" green banner with email form +
3 stacked food images
- footer_brand: tagline + massive italic "Homerline" mega-brand text
- Categories carousel: 5 cards with overlay (Eco Crafts / Smart
Innovations / Reusables / Premium Sets / Cookware) with New/Hot/Sale tags
- Gallery: 4-column grid with first image spanning 2 cols
- Testimonials: 4.9-rating green sidebar + 2x2 review card grid
assets/custom-theme.css:
- New `--sh-*` design tokens: green-dark/mid/soft + cream/cream-dark
- Italic Playfair Display headings throughout
- 50px pill buttons everywhere (hero, CTAs, cards, newsletter)
- Gradient overlay on category cards (bottom dark → transparent top)
- Megabrand footer: clamp(5rem, 18vw, 18rem) italic serif
- Mobile responsive breakpoints for all new sections
- Removed legacy Chefsy white-theme styles
Theme already pushed to live store (theme ID 185103614256).
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Add multi-breakpoint mobile-first responsive system to custom-theme.css. Breakpoints: - 1024px (tablet): tightened section headers, condensed testimonials sidebar (240px), smaller rating score - 768px (mobile): full layout shift — stacked section headers, fluid hero typography, 200px category cards, 2-col gallery, vertically stacked testimonials, full-width CTA form, 16px page gutters, 44px minimum touch targets - 480px (small phones): 170px category cards, 130px gallery rows, tighter card padding (10px), smaller fonts - Landscape phones: hero font shrinks when height-constrained - Touch devices: disables all hover-transform animations to avoid sticky hover states; adds scroll-snap padding to category track Key improvements: - Hero heading uses clamp(2.2rem, 9vw, 3.4rem) for smooth scaling - All buttons have min-height: 44px (Apple/Google touch guideline) - Section headers stack on mobile (title + eyebrow on top, nav buttons aligned right below) - Trust bar icons reduced from 64px → 44px → 38px across breakpoints - Recipes CTA form stacks vertically with full-width inputs - Megabrand footer scales fluidly: 18rem desktop → 7rem mobile → 6rem small Theme already pushed to live store (theme ID 185103614256). Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
New section `homerline-bundle.liquid` rendered on every product page between the main product info and the image-with-text section. The bundle offers customers 3 quantity tiers: - Single (1 unit) — regular price - Most Popular (2 units) — 10% off, red ribbon, pre-selected by default - Best Value (3 units) — 20% off, green ribbon, includes gift wrap line How it works: - All prices computed in Liquid from the current variant's price - Radio-style card selection with elevated hover/selected state - AJAX /cart/add.js submission with the variant ID + selected quantity - CTA price updates dynamically as user switches tiers - After successful add, redirects to /cart Schema settings let merchants tweak from the editor: - Eyebrow text, title, subtitle - 2-pack discount % (0-50, step 5, default 10) - 3-pack discount % (0-50, step 5, default 20) Styling: - Reuses Shrine eco-green design tokens (--sh-green-dark, --sh-cream) - Playfair serif for big quantity numbers (42px desktop, 28px mobile) - Dashed feature divider, pill ribbons with shadow - Mobile breakpoint < 749px: cards stack vertically with horizontal inline layout (number + price on one row, features wrap below) templates/product.json: - Added "homerline-bundle" section after "main" in the order array Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Replaces the previous 3-card grid bundle with a vertical row-style layout that matches the requested reference design. sections/homerline-bundle.liquid: - Complete rewrite of HTML structure and CSS - New BEM class system: hl-bms (Buy More Save More) - Three horizontal rows instead of cards: - Row 1: BUY 1 (default selected with filled background) - Row 2: Buy 2 - "You save 10%" + "Most Popular" pill badge - Row 3: Buy 3 - "You save 20%" - Each row: custom radio circle + label/savings + right-aligned price block - Compare-at price shown with strikethrough next to the discounted price - Header with "── BUY MORE SAVE MORE ──" centered between two horizontal dividers - Full-width green "Add to cart" CTA button below rows - Most Popular badge positioned top-right with -12px offset and shadow - Removed broken external CSS file reference at top of file - Fixed Liquid math: separated tier_full/tier_save/tier_total into individual assign statements (filters apply left-to-right, not with math precedence) - All styling now inline in <style> block — no external CSS deps templates/product.json: - Removed buy_buttons block from main product (bundle owns the CTA) - Removed quantity_selector block (bundle handles quantity) - Updated block_order accordingly Theme already pushed to live store (theme ID 185103614256). Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Previously the bundle rendered as a separate full-width section
below the product page. The user requested it appear alongside the
product image in the right-hand info column. This commit relocates it.
snippets/product-bundle.liquid (new):
- Self-contained "Buy More Save More" widget — HTML, inline CSS, JS
- Same 3-row design as the section version (BUY 1 / Buy 2 / Buy 3)
- Custom radio circles, "Most Popular" pill on tier 2
- Strikethrough compare prices
- Full-width green Add-to-cart CTA → /cart/add.js → /cart
- Listens to product-info element's change events to update variantId
when user picks a different variant
- Supports multiple bundles per page via querySelectorAll loop
- Mobile breakpoint at 480px with reduced font/padding
sections/main-product.liquid:
- Added {% render 'product-bundle', product: product %} immediately
after the block loop's closing endfor (line 678), before the
"View full details" link
- Bundle now lives inside the <product-info> element, in the same
scrollable column as the title/price/variant picker
templates/product.json:
- Removed the standalone "homerline-bundle" section entry
- Removed it from the page order array
- Page order is now: main → image-with-text → multicolumn → related
Theme already pushed to live store (theme ID 185103614256).
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Match the requested product image layout: large main image with a horizontal thumbnail row below it (replaces the previous stacked-all layout where every image showed vertically). templates/product.json (main section settings): - gallery_layout: stacked → thumbnail_slider - mobile_thumbnails: hide → show (thumbnails now visible on mobile as well) assets/custom-theme.css (new "Product Image Gallery" block): - Main image wrapper: 16px border-radius, cream-dark fallback bg - Thumbnail row: 10px gap, horizontal flex layout - Thumbnails: 90px desktop / 70px tablet / 60px small phone - 12px border-radius on each thumbnail - Active thumbnail (aria-current=true / --active): dark green border (#1B4332) + soft drop shadow - Hover thumbnail: light green border + 2px lift transform - Slider nav arrows: 40px white circles, green icon, green-fill on hover with scale(1.05); disabled state at 40% opacity - Slider counter pill: dark-green bg, white text, bottom-right of main image - Mobile breakpoints adjust all sizes proportionally Theme already pushed to live store (theme ID 185103614256). Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Complete Shopify Dawn theme customisation for Homerline — a kitchen and cleaning products brand. This branch contains two commits that progressively build a fully branded, production-ready storefront.
Commit 1 — Eco-kitchen foundation
config/settings_data.json— Dark-green / cream colour scheme; Playfair Display headings + Josefin Sans body; rounded pill buttons; subtle card shadows.templates/index.json— 12-section homepage: slideshow hero, animated marquee, featured collection, brand statement, 4-column features strip, multirow Why-Us, categories, collage, testimonials, new arrivals, newsletter.assets/custom-theme.css— Full brand CSS: hero typography, hover-lift product cards, animated marquee, dark-green testimonials grid, newsletter, footer.sections/— slideshow, multirow, image-banner updated with asset-image fallbacks instead of SVG placeholders.snippets/custom-banner-images.liquid— CSS fallback injection for brand, category, and collage sections.Commit 2 — White Chefsy-style redesign
Full visual overhaul to a clean white background design inspired by the Chefsy reference, optimised for kitchen and cleaning products.
config/settings_data.json— White (#FFFFFF) primary scheme; forest green (#1B4332) accents; Assistant font; 12px card radius; green-tint alternate scheme; red sale + navy new-badge schemes.assets/custom-theme.css— Complete rewrite with CSS custom properties, white header, bold hero typography, circular Shop-Now button, 4-column trust bar, horizontal-scroll category carousel, white product cards, Chefsy-style review cards, 6-image gallery, dark-green newsletter, dark footer.templates/index.json— New 10-section homepage: slideshow, trust bar, category carousel, new arrivals, brand statement, best sellers, why-us, testimonials, gallery, newsletter.sections/header-group.json— Updated announcement bar for kitchen/cleaning brand (Free Shipping, 10% Off code, 12M+ customers).Test plan
Notes for reviewers
All custom CSS lives in assets/custom-theme.css — no Dawn core files were modified beyond section liquid fallbacks and header-group.json. The 15 banner images in assets are stock photos for theme preview. Theme verified live on Shopify theme ID 185103614256.
Generated with Claude Code https://claude.com/claude-code