Native Color Schemes #73
Closed
+19,497
−582
Conversation
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
This commit implements all 10 phases of the Influence theme development plan, making the theme ready for Shopify Theme Store submission. Phase 1 - Design System Foundation: - CSS variables with comprehensive design tokens - Critical and non-critical CSS architecture - SVG icon sprite with 60+ icons - Color scheme snippet for dynamic theming Phase 2 - Settings Schema: - Complete settings_schema.json with colors, typography, layout - Full schema translations in en.default.schema.json Phase 3 - Layout & Navigation: - Header with sticky/transparent modes, mega menu, mobile drawer - Footer with blocks, social links, country/language selectors - Announcement bar with carousel support - Section groups for header and footer Phase 4 - Hero & Marketing Sections: - Full-bleed hero with video/image backgrounds - Featured collection with product grid - Rich text with drop cap option - Image with text section - Custom Liquid section (REQUIRED) Phase 5 - Product Sections (CRITICAL): - main-product with all Theme Store required blocks - @app block support for third-party integrations - Dynamic checkout buttons (enabled by default) - Selling plans/subscriptions support - Gift card recipient form - Shop Pay Installments - Variant picker with swatches - Product recommendations Phase 6 - Collection & Discovery: - main-collection with faceted filtering (REQUIRED) - Sorting, view toggle, pagination - collection-list for all collections page Phase 7 - Content & Engagement: - main-blog and main-article sections - Newsletter signup section - Testimonials with carousel/grid - Blog posts section - Contact form section - FAQ accordion section Phase 8 - Cart & Checkout: - main-cart with selling plans, discounts, dynamic checkout - cart-drawer with AJAX functionality Phase 9 - Utility Pages & Customer Templates: - main-search with predictive search (REQUIRED) - main-404 and main-password sections - main-page section - gift_card.liquid with QR code + Apple Wallet (REQUIRED) - All 7 customer account templates Phase 10 - Preset & Polish: - settings_data.json with 3 presets (Influence, Runway, Atelier) - Complete en.default.json translations - Demo home page content in index.json Theme Store Requirements Satisfied: ✓ 16+ JSON templates including all customer templates ✓ App blocks (@app) in main-product section ✓ Product blocks (price, vendor, description as separate blocks) ✓ Dynamic checkout buttons enabled by default ✓ Faceted filtering on collection + search ✓ Selling plans/subscriptions support ✓ Predictive search ✓ Custom Liquid section ✓ Header/Footer in section groups ✓ 4+ color settings (8 colors in 2 schemes + semantic) ✓ Font picker for headings + body ✓ Gift card with QR code + Apple Wallet ✓ Country/language selectors
…-BHAyK Complete Theme Store requirements implementation for Influence theme
- Add new product-carousel-3d section with CSS-only 3D rotating carousel - Fix SVG icons not displaying by embedding sprites directly in icons-sprite.liquid (replaced non-existent inline_asset_content filter) - Add viewBox attribute to icon.liquid for proper SVG scaling - Fix header layout: nav items no longer stretched by mega-menu width - Update header flexbox: proper alignment for logo, nav, and icons - Add centered logo layout option with nav repositioning - Update hero section with enhanced video support and overlay options - Update typography settings (Space Mono headings, Bricolage Grotesque body) - Add schema translations for new section settings 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Deep analysis of current implementation vs premium theme requirements: - Identified critical Theme Store gaps (predictive search, Follow on Shop) - Documented 25+ feature enhancements across header, announcement bar, footer - Created phased implementation plan with priorities - Included CSS additions, locale strings, and settings schema changes - Added testing checklist for accessibility and performance
Header: - Add predictive search with products, collections, articles, pages - Add smart sticky behavior (always/smart/reduce) - Add utility navigation with localization selectors - Enhance mega menu with promotional image support - Add cart badge options (number/dot/none) - Enhance mobile drawer with search, social, locale Announcement Bar: - Add dismissible functionality with cookie persistence - Add icon support per announcement (truck, gift, tag, clock, star) - Add countdown timer block for promotions Footer: - Add new block types: image, contact, brand - Add mobile accordion behavior - Add layout options (auto/equal/first-wide/last-wide) - Add back to top button - Add Follow on Shop integration (Theme Store requirement) New snippets: - predictive-search.liquid: Full search component - follow-on-shop.liquid: Theme Store required button - header-localization.liquid: Country/language selectors - social-icons.liquid: Reusable social links - announcement-countdown.liquid: Countdown timer - footer-contact-content.liquid: Contact info display Also adds ~700 lines of CSS and new locale strings.
- Replace hardcoded color settings with color_scheme_group in settings_schema.json - Add 4 customizable color schemes: scheme_1 (light), scheme_2 (dark), scheme_3 (subtle), scheme_4 (accent) - Update css-variables.liquid to dynamically generate color scheme CSS classes - Migrate all sections from select-based color_scheme to native color_scheme setting type - Update color-scheme.liquid snippet to work with native color scheme IDs - Update settings_data.json presets with new color scheme format for all 3 theme presets - Remove hardcoded color scheme classes from critical.css (now generated dynamically) Affected sections: - announcement-bar, blog-posts, collection-list, contact-form, custom-liquid - faq, featured-collection, footer, header, hero, image-with-text - newsletter, product-carousel-3d, rich-text, testimonials
New Header and Footer
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
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.
No description provided.