diff --git a/### AGH Shopify Site PRD.md b/### AGH Shopify Site PRD.md
new file mode 100644
index 000000000..8fdc11dd1
--- /dev/null
+++ b/### AGH Shopify Site PRD.md
@@ -0,0 +1,106 @@
+### AGH Shopify Site PRD
+
+### Product Requirements Document (PRD)
+
+#### Project Title
+
+Custom Shopify Website for Andra’s Garden Heaven
+
+#### Objective
+
+To develop a custom Shopify website for Andra’s Garden Heaven that effectively showcases their handmade rattan furniture, enhances user experience, and drives sales through a seamless checkout process. The website should reflect the brand’s values of high quality, handmade craftsmanship, and affordability, while evoking a natural, calm, and garden-based feeling.
+
+#### Background
+
+Andra’s Garden Heaven is a retailer based in Glasgow, specializing in handmade rattan furniture. The company aims to provide high-quality, affordable furniture that brings a touch of nature and tranquility to any space. The new Shopify website will serve as the primary platform for sales and brand representation.
+
+#### Goals
+
+1. Increase online sales through an intuitive and user-friendly interface.
+2. Provide a seamless checkout and payment process.
+3. Reflect the brand’s identity with a modern, natural, and calming design.
+4. Ensure the website is mobile-responsive and optimized for search engines.
+5. Integrate social media and marketing tools to enhance customer engagement.
+
+#### Target Audience
+
+- Homeowners looking for unique, handmade furniture.
+- Interior designers and decorators seeking high-quality rattan pieces.
+- Eco-conscious consumers who appreciate natural and sustainable materials.
+- Customers in Glasgow and the surrounding areas, as well as nationwide shipping.
+
+#### Key Features and Functionalities
+
+| Feature | Description |
+| --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Homepage | A visually appealing homepage with high-quality images of rattan furniture, a clear value proposition, and easy navigation to product categories. |
+| Product Listings | Detailed product pages with high-resolution images, descriptions, pricing, and customer reviews. |
+| Search and Filter | Advanced search and filter options to help users find products based on categories, price range, and other attributes. |
+| Shopping Cart | A user-friendly shopping cart with easy add/remove functionality and clear visibility of items and total cost. |
+| Checkout Process | A streamlined checkout process with multiple payment options (credit/debit cards, PayPal, etc.) and guest checkout capability. |
+| Mobile Responsiveness | A fully responsive design that ensures a seamless experience across all devices. |
+| SEO Optimization | On-page SEO elements such as meta tags, alt text for images, and keyword optimization to improve search engine rankings. |
+
+|
+Social Media Integration | Links to social media profiles and options to share products on social media platforms. ||
+Blog Section | A blog section to share stories about the craftsmanship, tips for garden decor, and other relevant content to engage customers.
+|
+| Customer Reviews | Integration of customer reviews and ratings to build trust and credibility. |
+|
+Contact Information | Easy-to-find contact information, including a contact form, email address, and phone number. |
+|
+Branding Elements | Consistent use of brand colors, fonts, and imagery to create a cohesive and recognizable brand identity. |
+
+#### Design Requirements
+
+- **Color Scheme**: Use the primary color combo of Pakistani Green over White and the secondary combo of Black over White with Green Accents.
+
+ - Pakistan Green: #1C4219
+ - French Grey: #D0CCD0
+ - White: #FBFCFF
+ - Cerulean: #1C6E8C
+ - Black: #000000
+
+- **Typography**:
+
+ - **Font Family - Futura Book**: Use for the AGH logo, headings, and titles. The company name should never be smaller than 16pt.
+ - **Font Family - Elgian**: Use for body text and other content.
+
+- **Imagery**: High-quality images of rattan furniture in various settings, such as gardens, patios, and living rooms. Ensure images evoke a natural and calming feeling.
+
+- **Logo Usage**: Use Logo A as the primary choice. For digital placements, use Logo C. Ensure logos are square-shaped with sharp edges, standard size 50mm x 50mm.
+
+- **Layout**: A clean and organized layout with ample white space to highlight products and create a pleasant browsing experience.
+
+#### Technical Requirements
+
+- Platform: Shopify.
+- Hosting: Reliable and secure hosting provider.
+- Domain: Custom domain name (e.g., andrasgardenheaven.com).
+- SSL Certificate: Ensure the website is secure with an SSL certificate.
+- Analytics: Integration with Google Analytics to track website performance and user behavior.
+- Marketing Tools: Integration with email marketing tools (e.g., Mailchimp) and social media platforms.
+- Code : HTML | CSS | JS | LIQUID
+
+#### Success Metrics
+
+- Increase in online sales by 50% within the first 3 months.
+- Improvement in website traffic and search engine rankings.
+- Positive customer feedback and reviews.
+- High user engagement and low bounce rates.
+- Successful integration of social media and marketing tools.
+
+#### Risks and Mitigation
+
+- Delay in Development: Regular progress meetings and clear communication with the development team.
+- Budget Overruns: Careful planning and monitoring of expenses.
+- Technical Issues: Thorough testing and quality assurance processes.
+- Low User Engagement: Continuous optimization based on user feedback and analytics.
+
+#### Conclusion
+
+The custom Shopify website for Andra’s Garden Heaven aims to create a seamless and enjoyable shopping experience for customers, reflecting the brand’s commitment to high quality, handmade craftsmanship, and affordability. By focusing on user experience, design, and functionality, the website will drive sales and enhance the brand’s online presence.
+
+---
+
+.
diff --git a/.github/copilot-instructions.md b/.github/copilot-instructions.md
new file mode 100644
index 000000000..fba2679cc
--- /dev/null
+++ b/.github/copilot-instructions.md
@@ -0,0 +1,639 @@
+---
+description: Liquid development rules for Shopify themes
+globs:
+alwaysApply: true
+---
+
+
+
+ valid_filters = [
+
+ // array
+ { name: "compact", usage: "array | compact" },
+ { name: "concat", usage: "array | concat: array" },
+ { name: "find", usage: "array | find: string, string" },
+ { name: "find_index", usage: "array | find_index: string, string" },
+ { name: "first", usage: "array | first" },
+ { name: "has", usage: "array | has: string, string" },
+ { name: "join", usage: "array | join" },
+ { name: "last", usage: "array | last" },
+ { name: "map", usage: "array | map: string" },
+ { name: "reject", usage: "array | reject: string, string" },
+ { name: "reverse", usage: "array | reverse" },
+ { name: "size", usage: "variable | size" },
+ { name: "sort", usage: "array | sort" },
+ { name: "sort_natural", usage: "array | sort_natural" },
+ { name: "sum", usage: "array | sum" },
+ { name: "uniq", usage: "array | uniq" },
+ { name: "where", usage: "array | where: string, string" },
+
+ // cart
+ { name: "item_count_for_variant", usage: "cart | item_count_for_variant: {variant_id}" },
+ { name: "line_items_for", usage: "cart | line_items_for: object" },
+
+ // collection
+ { name: "link_to_type", usage: "string | link_to_type" },
+ { name: "link_to_vendor", usage: "string | link_to_vendor" },
+ { name: "sort_by", usage: "string | sort_by: string" },
+ { name: "url_for_type", usage: "string | url_for_type" },
+ { name: "url_for_vendor", usage: "string | url_for_vendor" },
+ { name: "within", usage: "string | within: collection" },
+ { name: "highlight_active_tag", usage: "string | highlight_active_tag" },
+
+ // color
+ { name: "brightness_difference", usage: "string | brightness_difference: string" },
+ { name: "color_brightness", usage: "string | color_brightness" },
+ { name: "color_contrast", usage: "string | color_contrast: string" },
+ { name: "color_darken", usage: "string | color_darken: number" },
+ { name: "color_desaturate", usage: "string | color_desaturate: number" },
+ { name: "color_difference", usage: "string | color_difference: string" },
+ { name: "color_extract", usage: "string | color_extract: string" },
+ { name: "color_lighten", usage: "string | color_lighten: number" },
+ { name: "color_mix", usage: "string | color_mix: string, number" },
+ { name: "color_modify", usage: "string | color_modify: string, number" },
+ { name: "color_saturate", usage: "string | color_saturate: number" },
+ { name: "color_to_hex", usage: "string | color_to_hex" },
+ { name: "color_to_hsl", usage: "string | color_to_hsl" },
+ { name: "color_to_oklch", usage: "string | color_to_oklch" },
+ { name: "color_to_rgb", usage: "string | color_to_rgb" },
+ { name: "hex_to_rgba", usage: "string | hex_to_rgba" },
+
+ // customer
+ { name: "customer_login_link", usage: "string | customer_login_link" },
+ { name: "customer_logout_link", usage: "string | customer_logout_link" },
+ { name: "customer_register_link", usage: "string | customer_register_link" },
+ { name: "avatar", usage: "customer | avatar" },
+ { name: "login_button", usage: "shop | login_button" },
+
+ // date
+ { name: "date", usage: "date | date: string" },
+
+ // default
+ { name: "default_errors", usage: "string | default_errors" },
+ { name: "default", usage: "variable | default: variable" },
+ { name: "default_pagination", usage: "paginate | default_pagination" },
+
+ // font
+ { name: "font_face", usage: "font | font_face" },
+ { name: "font_modify", usage: "font | font_modify: string, string" },
+ { name: "font_url", usage: "font | font_url" },
+
+ // format
+ { name: "date", usage: "string | date: string" },
+ { name: "json", usage: "variable | json" },
+ { name: "structured_data", usage: "variable | structured_data" },
+ { name: "unit_price_with_measurement", usage: "number | unit_price_with_measurement: unit_price_measurement" },
+ { name: "weight_with_unit", usage: "number | weight_with_unit" },
+
+ // hosted_file
+ { name: "asset_img_url", usage: "string | asset_img_url" },
+ { name: "asset_url", usage: "string | asset_url" },
+ { name: "file_img_url", usage: "string | file_img_url" },
+ { name: "file_url", usage: "string | file_url" },
+ { name: "global_asset_url", usage: "string | global_asset_url" },
+ { name: "shopify_asset_url", usage: "string | shopify_asset_url" },
+
+ // html
+ { name: "class_list", usage: "settings.layout | class_list" },
+ { name: "time_tag", usage: "string | time_tag: string" },
+ { name: "inline_asset_content", usage: "asset_name | inline_asset_content" },
+ { name: "highlight", usage: "string | highlight: string" },
+ { name: "link_to", usage: "string | link_to: string" },
+ { name: "placeholder_svg_tag", usage: "string | placeholder_svg_tag" },
+ { name: "preload_tag", usage: "string | preload_tag: as: string" },
+ { name: "script_tag", usage: "string | script_tag" },
+ { name: "stylesheet_tag", usage: "string | stylesheet_tag" },
+
+ // localization
+ { name: "currency_selector", usage: "form | currency_selector" },
+ { name: "translate", usage: "string | t" },
+ { name: "format_address", usage: "address | format_address" },
+
+ // math
+ { name: "abs", usage: "number | abs" },
+ { name: "at_least", usage: "number | at_least" },
+ { name: "at_most", usage: "number | at_most" },
+ { name: "ceil", usage: "number | ceil" },
+ { name: "divided_by", usage: "number | divided_by: number" },
+ { name: "floor", usage: "number | floor" },
+ { name: "minus", usage: "number | minus: number" },
+ { name: "modulo", usage: "number | modulo: number" },
+ { name: "plus", usage: "number | plus: number" },
+ { name: "round", usage: "number | round" },
+ { name: "times", usage: "number | times: number" },
+
+ // media
+ { name: "external_video_tag", usage: "variable | external_video_tag" },
+ { name: "external_video_url", usage: "media | external_video_url: attribute: string" },
+ { name: "image_tag", usage: "string | image_tag" },
+ { name: "media_tag", usage: "media | media_tag" },
+ { name: "model_viewer_tag", usage: "media | model_viewer_tag" },
+ { name: "video_tag", usage: "media | video_tag" },
+ { name: "article_img_url", usage: "variable | article_img_url" },
+ { name: "collection_img_url", usage: "variable | collection_img_url" },
+ { name: "image_url", usage: "variable | image_url: width: number, height: number" },
+ { name: "img_tag", usage: "string | img_tag" },
+ { name: "img_url", usage: "variable | img_url" },
+ { name: "product_img_url", usage: "variable | product_img_url" },
+
+ // metafield
+ { name: "metafield_tag", usage: "metafield | metafield_tag" },
+ { name: "metafield_text", usage: "metafield | metafield_text" },
+
+ // money
+ { name: "money", usage: "number | money" },
+ { name: "money_with_currency", usage: "number | money_with_currency" },
+ { name: "money_without_currency", usage: "number | money_without_currency" },
+ { name: "money_without_trailing_zeros", usage: "number | money_without_trailing_zeros" },
+
+ // payment
+ { name: "payment_button", usage: "form | payment_button" },
+ { name: "payment_terms", usage: "form | payment_terms" },
+ { name: "payment_type_img_url", usage: "string | payment_type_img_url" },
+ { name: "payment_type_svg_tag", usage: "string | payment_type_svg_tag" },
+
+ // string
+ { name: "hmac_sha1", usage: "string | hmac_sha1: string" },
+ { name: "hmac_sha256", usage: "string | hmac_sha256: string" },
+ { name: "md5", usage: "string | md5" },
+ { name: "sha1", usage: "string | sha1: string" },
+ { name: "sha256", usage: "string | sha256: string" },
+ { name: "append", usage: "string | append: string" },
+ { name: "base64_decode", usage: "string | base64_decode" },
+ { name: "base64_encode", usage: "string | base64_encode" },
+ { name: "base64_url_safe_decode", usage: "string | base64_url_safe_decode" },
+ { name: "base64_url_safe_encode", usage: "string | base64_url_safe_encode" },
+ { name: "capitalize", usage: "string | capitalize" },
+ { name: "downcase", usage: "string | downcase" },
+ { name: "escape", usage: "string | escape" },
+ { name: "escape_once", usage: "string | escape_once" },
+ { name: "lstrip", usage: "string | lstrip" },
+ { name: "newline_to_br", usage: "string | newline_to_br" },
+ { name: "prepend", usage: "string | prepend: string" },
+ { name: "remove", usage: "string | remove: string" },
+ { name: "remove_first", usage: "string | remove_first: string" },
+ { name: "remove_last", usage: "string | remove_last: string" },
+ { name: "replace", usage: "string | replace: string, string" },
+ { name: "replace_first", usage: "string | replace_first: string, string" },
+ { name: "replace_last", usage: "string | replace_last: string, string" },
+ { name: "rstrip", usage: "string | rstrip" },
+ { name: "slice", usage: "string | slice" },
+ { name: "split", usage: "string | split: string" },
+ { name: "strip", usage: "string | strip" },
+ { name: "strip_html", usage: "string | strip_html" },
+ { name: "strip_newlines", usage: "string | strip_newlines" },
+ { name: "truncate", usage: "string | truncate: number" },
+ { name: "truncatewords", usage: "string | truncatewords: number" },
+ { name: "upcase", usage: "string | upcase" },
+ { name: "url_decode", usage: "string | url_decode" },
+ { name: "url_encode", usage: "string | url_encode" },
+ { name: "camelize", usage: "string | camelize" },
+ { name: "handleize", usage: "string | handleize" },
+ { name: "url_escape", usage: "string | url_escape" },
+ { name: "url_param_escape", usage: "string | url_param_escape" },
+ { name: "pluralize", usage: "number | pluralize: string, string" },
+
+ // tag
+ { name: "link_to_add_tag", usage: "string | link_to_add_tag" },
+ { name: "link_to_remove_tag", usage: "string | link_to_remove_tag" },
+ { name: "link_to_tag", usage: "string | link_to_tag" },
+
+ ]
+
+ valid_tags = [
+ "content_for",
+ "form",
+ "layout",
+ "assign",
+ "break",
+ "capture",
+ "case",
+ "comment",
+ "continue",
+ "cycle",
+ "decrement",
+ "doc",
+ "echo",
+ "for",
+ "if",
+ "include",
+ "increment",
+ "raw",
+ "render",
+ "tablerow",
+ "unless",
+ "paginate",
+ "javascript",
+ "section",
+ "stylesheet",
+ "sections",
+ "style",
+ "else",
+ "else",
+ "liquid",
+ ]
+
+ valid_objects = [
+ "collections",
+ "pages",
+ "all_products",
+ "articles",
+ "blogs",
+ "cart",
+ "closest",
+ "content_for_header",
+ "customer",
+ "images",
+ "linklists",
+ "localization",
+ "metaobjects",
+ "request",
+ "routes",
+ "shop",
+ "theme",
+ "settings",
+ "template",
+ "additional_checkout_buttons",
+ "all_country_option_tags",
+ "canonical_url",
+ "content_for_additional_checkout_buttons",
+ "content_for_index",
+ "content_for_layout",
+ "country_option_tags",
+ "current_page",
+ "handle",
+ "page_description",
+ "page_image",
+ "page_title",
+ "powered_by_link",
+ "scripts",
+ ]
+
+ validation_rules = {
+ syntax: {
+ - Use {% liquid %} for multiline code
+ - Use {% # comments %} for inline comments
+ - Never invent new filters, tags, or objects
+ - Follow proper tag closing order
+ - Use proper object dot notation
+ - Respect object scope and availability
+ },
+
+ theme_structure: {
+ - Place files in appropriate directories
+ - Follow naming conventions
+ - Respect template hierarchy
+ - Maintain proper section/block structure
+ - Use appropriate schema settings
+ }
+ }
+
+ ∀ liquid_code ∈ theme:
+ validate_syntax(liquid_code) ∧
+ validate_filters(liquid_code.filters ∈ valid_filters) ∧
+ validate_tags(liquid_code.tags ∈ valid_tags) ∧
+ validate_objects(liquid_code.objects ∈ valid_objects) ∧
+ validate_structure(liquid_code.location ∈ theme_structure)
+
+
+
+ folder_structure = {
+ sections: theme_sections(),
+ blocks: theme_blocks(),
+ layout: theme_layout(),
+ snippets: theme_snippets(),
+ config: theme_config(),
+ assets: theme_assets(),
+ locales: theme_locales(),
+ templates: theme_templates(),
+ templates/customers: theme_templates/customers(),
+ templates/metaobject: theme_templates/metaobject()
+ }
+ theme_sections = {
+ - Liquid files that define customizable sections of a page
+ - They include blocks and settings defined via a schema, allowing merchants to modify them in the theme editor
+ - Should occupy the full width of the page container and be self-contained layout units
+ - Can be added to any JSON template and reordered via the theme editor
+ - Must include a {% schema %} tag to define settings and presets
+ - Examples: hero banners, product grids, testimonials, featured collections
+ }
+ theme_blocks = {
+ - Configurable elements within sections that can be added, removed, or reordered
+ - They are defined with a schema tag for merchant customization in the theme editor
+ - Allow merchants to build dynamic content without code changes
+ - Each block has a type and can contain settings for text, images, groups, links, etc.
+ - Limited to specific block types defined in the section's schema
+ - Blocks can be nested within other blocks to create hierarchical content structures
+ - Examples: individual testimonials, slides in a carousel, feature items
+ }
+ theme_layout = {
+ - Defines the structure for repeated content such as headers and footers, wrapping other template files
+ - It's the frame that holds the page together, but it's not the content
+ - Contains the HTML document structure (head, body tags)
+ - Includes global elements like navigation, cart drawer, and footer
+ - Typically includes global CSS/JS assets and meta tags or render a snippet that do that
+ }
+ theme_snippets = {
+ - Reusable code fragments included in templates, sections, and layouts via the render tag
+ - Ideal for logic that needs to be reused but not directly edited in the theme editor
+ - Can accept parameters when rendered for dynamic behavior
+ - Perfect for repetitive UI components like product cards, buttons, or form elements
+ - Help maintain DRY (Don't Repeat Yourself) principles in theme development
+ - Examples: product-card.liquid, icon.liquid, price.liquid
+ }
+ theme_config = {
+ - Holds settings data and schema for theme customization options, accessible through the Admin theme editor
+ - Stores global theme context like typography, colors, spacing, and branding
+ - Contains theme-wide settings that affect multiple pages (global variables)
+ - Includes presets for different theme variations or demo content
+ - Settings are accessible via settings object in all Liquid files
+ - Examples: brand colors, font choices, layout options, feature toggles
+ }
+ theme_assets = {
+ - Contains static files such as CSS, JavaScript, and images referenced via asset_url filter
+ - Includes compiled stylesheets, JavaScript bundles, and media files
+ - Can be organized in subdirectories for better file management
+ - Supports asset optimization and minification for performance
+ - Images should be optimized and include responsive variants when possible
+ - Examples: theme.css, theme.js, logo.png, icon sprites
+ }
+ theme_locales = {
+ - Stores translation files for localizing theme editor and storefront content
+ - Organized by language code (en.default.json, fr.json, etc.)
+ - Contains translations for static text, labels, and theme editor strings
+ - Enables multi-language support and proper internationalization
+ - Accessed via translation filters like {{ 'key' | t }} in Liquid
+ - Should cover all user-facing text for complete localization
+ }
+ theme_templates = {
+ - JSON files that specify which sections appear on each page type (e.g., product, collection, blog)
+ - They are wrapped by layout files for consistent header/footer content
+ - Templates can be Liquid files as well, but JSON is preferred as best practice for flexibility
+ - Define the page structure and section ordering for different page types
+ - Allow merchants to customize page layouts without code changes
+ - Support alternate templates for A/B testing or different page variants
+ }
+ theme_templates/customers = {
+ - Templates for customer-related pages such as login, register, account overview, and order history
+ - Handle customer authentication flows and account management interfaces
+ - Include forms for login, registration, password reset, and profile updates
+ - Must follow Shopify's customer data handling and security requirements
+ - Examples: login.json, register.liquid, account.json, order.liquid
+ }
+ theme_templates/metaobject = {
+ - Templates for rendering custom content types defined as metaobjects in Shopify Admin
+ - Enable custom content structures beyond standard product/collection/page types
+ - Allow merchants to create structured content like team members, locations, or custom landing pages
+ - Must handle dynamic field rendering based on metaobject definition
+ - Examples: team-member.json, location.liquid, custom-page.json
+ }
+ ∀ file ∈ theme:
+ validate(file.location) ∈ folder_structure;
+
+
+
+
+ - Keep every piece of text in the theme translated.
+ - Update the locale files with sensible keys and text.
+ - Just add english text, not other languages, as we have translators on staff who handle other languages
+
+
+
+ Keep it simple, clear, and non-repetitive.
+
+ - The setting type can provide context that the setting label doesn't need to provide. Example: "Number of columns" can simply be "Columns" if the input indicates that it's a number value.
+ - Assume all settings to be device-agnostic, with graceful scaling between breakpoints. Only mention mobile or desktop if there is a unique setting required.
+ - Use common shorthand where it makes sense. Example: Max/Min to mean Maximum and Minimum. Caveat: ensure these values are translated/localized correctly
+ - Help text: Minimize use as much as possible. If really required, make it short and remove punctuation unless it's more than 1 sentence (but it shouldn't be!)
+
+
+
+
+ The order of theme settings greatly impacts the merchant's ability to understand and configure the section/block.
+
+ - List settings to reflect the order of elements they control in the preview. Top to bottom, left to right, background to foreground.
+ - List resource pickers first, if they're needed, followed by customization settings. Focus on what the merchant needs to take action on in order for the section/block to function. Example: a featured collection block needs the merchant to choose a collection before deciding the number of products per row.
+ - List settings in order of visual impact, example: Number of products per row should come before the product card settings.
+
+
+
+ Consider grouping settings under a heading if there are more than 1 related setting. List ungrouped settings at the top of the section/block.
+
+ Common groupings:
+
+ - Layout
+ - Typography
+ - Colors
+ - Padding
+
+
+
+ Remove word duplication in the heading and nested labels. When a word appears in a heading (e.g. "Color"), it should not be repeated in nested setting labels or help text. The hierarchy of information provides sufficient context.
+
+
+
+ Use conditional settings when it:
+
+ - simplifies decision-making for merchants via progressive disclosure
+ - avoids duplication of settings
+ - avoids visual clutter and reduces cognitive load
+
+ Conditional settings should appear in the information architecture wherever they're most relevant. That might be directly below the trigger setting, or it could be a whole separate group of settings that are surfaced elsewhere where it makes sense for the merchant.
+
+ Tradeoffs and considerations of conditional settings:
+
+ - They hide functionality/options that help merchants decide how style their website, so be judicious in what concepts you tie together. For example, don't make a Product card's "Swatch display" setting conditional on a "Quick buy" setting. They are both related to variant selection, but they serve different purposes.
+ - Limit conditions to 2 levels deep to avoid complex logic (up for discussion!)
+ - Even when not shown, a conditional setting's value is evaluated in the Liquid code. Code defensively, never assume a theme setting's value is nil.
+
+
+
+ **Checkbox**: Treat checkbox as an on/off switch. Avoid using verb-based labels, example: use "Language selector" and not "Enable language selector". The presence of the verb may inadvertently suggest the direction to toggle to enable or disable it.
+
+ **Select**: Keep select option labels as short as possible so they can be dynamically displayed as segmented controls
+
+
+
+
+
+ Storefronts are to be rendered server-side with Liquid as a first principle. As opposed to client-side JavaScript.
+
+ When using JavaScript to render part of the page, fetch the new HTML from the server wherever possible.
+
+ This is the exception to the rule of server-side rendering
+
+ "Optimistic UI" is the idea that we can update part of the UI before the server response is received in the name of **perceived performance**.
+
+
+ Key factors to consider when deciding whether to use optimistic UI:
+
+ 1. You are updating a **small** portion of the UI on the client (with JavaScript) before the server response is received.
+ 2. The API request has a high degree of certainty of being successful.
+
+ Examples of appropriate use cases:
+
+ When filtering a collection page, we can update the a list of applied filters client-side as a Buyer chooses them, i.e. "Color: Red" or "Size: Medium". However, we do not know how many products will be returned that match the filters, so we can't update the product grid or a count of products.
+
+ When a Buyer attempts to add an item to their cart, we can update the cart item count client-side. Assuming our product form's "add to cart" button is already checking the item's availability, we can have a reasonably high degree of certainty that the item will be added to the cart (API request is successful). However, we do not know what the new cart total will be, nor do we know what the line items will look like, so we can't update those in a cart drawer without waiting for the server response.
+
+
+
+
+
+
+ - Use semantic HTML
+ - Prefer `` and `` over JS for show/hide
+ - Use `CamelCase` for IDs. Append `-{{ block.id }}` or `-{{ section.id }}`
+
+
+
+ - Make interactive elements focusable with `tabindex="0"`
+ - Only use `tabindex="0"` - avoid hijacking tab flow
+
+
+
+
+
+ - Never use IDs as selectors for styles
+ - Avoid element selectors
+ - Avoid !important (comment why if absolutely necessary)
+ - Use 0 1 0 specificity (single .class selector)
+ - Maximum 0 4 0 specificity for parent/child relationships
+ - Keep selectors simple and readable
+ - Use pseudo selectors sparingly (:has, :where, :nth-child, et )
+
+
+
+ - Use CSS variables to reduce redundancy
+ - Hardcode values as variables first (e.g. --touch-target-size: 45px)
+ - Never hardcode colors, use color schemes
+ - Scope variables to components unless global
+ - Global variables go in :root (in may live in a file like snippets/theme-styles-variables.liquid)
+ - Scoped variables can reference global variables
+
+
+
+ - Use {% stylesheet %} tags in sections, blocks, and snippets
+ - Reset CSS variables inline with style attributes for settings
+ - Avoid {% style %} tags with block/section ID selectors
+ - Use variables to reduce redundancy
+
+
+
+ - Block: component name
+ - Element: block__element
+ - Modifier: block--modifier, block__element--modifier
+ - Use dashes to separate words
+
+
+
+ - Mobile first (min-width queries)
+ - Use screen for all media queries
+
+
+
+ - No & operator
+ - Never nest beyond first level
+ - Exceptions: media queries, parent-child with multiple states
+ - Keep nesting simple
+
+
+
+
+
+ - Use zero external dependencies
+ - Use native browser features over JS ("popover", "details")
+ - Never use "var"
+ - Use "const" over "let" - avoid mutation
+ - Use "for (const thing of things)" over "things.forEach()"
+ - Add new lines before blocks with "{" and "}"
+
+
+
+ - Group scripts by feature area
+ - Co-locate related classes (e.g. "collection.js" contains all collection page classes)
+
+
+
+ - Use the module pattern to avoid global scope pollution
+
+
+ - Keep public APIs minimal
+ - Prefix private methods with "#"
+ - Don't use instance methods for functions that don't need the class instance
+
+ ```
+ class MyClass {
+ constructor() {
+ this.cache = new Map();
+ }
+
+ // Public method for external use
+ myPublicMethod() {
+ this.#myPrivateMethod();
+ }
+
+ // Private method requiring instance access
+ #myPrivateMethod() {
+ this.cache.set('key', 'value');
+ }
+ }
+
+ // Module-scoped utility - no instance access needed
+ const someUtilityFunction = (num1, num2) => num1 + num2;
+ ```
+
+
+
+
+ - Use "async/await" syntax
+ - Use "await" over chaining ".then()"
+
+
+
+ - Use events for custom element communication to avoid explicit dependencies
+
+
+
+ - Initialize JS components as custom elements for seamless DOM updates
+ - Use shadow DOM and slots
+
+
+
+ - Use early returns over nested conditionals
+
+
+ Multiple optional chains require early returns. Single chains are acceptable.
+
+ ```
+ // Multiple chains - use early return
+ const button = this.querySelector('ref="button"');
+ if (!button) return;
+ button.enable();
+ button.textContent = 'Add to cart';
+
+ // Single chain is fine
+ const button = this.querySelector('ref="button"');
+ button?.enable();
+ ```
+
+
+
+
+
+ Use ternaries for simple if/else blocks:
+ `simpleCondition ? this.doAThing() : this.doAnotherThing();`
+
+
+
+ Write simple conditional returns on one line:
+ `if (simpleCondition) return;`
+
+
+
+ Return boolean comparisons directly:
+ `return simpleCondition;`
+
+
+
+
diff --git a/assets/AGH Logo GreenAsset 1@4x.png b/assets/AGH Logo GreenAsset 1@4x.png
new file mode 100644
index 000000000..b1a90b254
Binary files /dev/null and b/assets/AGH Logo GreenAsset 1@4x.png differ
diff --git a/assets/BackgrndPattern.png b/assets/BackgrndPattern.png
new file mode 100644
index 000000000..40c739dd3
Binary files /dev/null and b/assets/BackgrndPattern.png differ
diff --git a/assets/EmailIcon.svg b/assets/EmailIcon.svg
new file mode 100644
index 000000000..65b1307d5
--- /dev/null
+++ b/assets/EmailIcon.svg
@@ -0,0 +1,9 @@
+
diff --git a/assets/IGicon.svg b/assets/IGicon.svg
new file mode 100644
index 000000000..f49acc4be
--- /dev/null
+++ b/assets/IGicon.svg
@@ -0,0 +1,9 @@
+
diff --git a/assets/Scm Footer Logo.svg b/assets/Scm Footer Logo.svg
new file mode 100644
index 000000000..8deb383ac
--- /dev/null
+++ b/assets/Scm Footer Logo.svg
@@ -0,0 +1,9 @@
+
diff --git a/assets/WORDMARKAsset 19@3x.png b/assets/WORDMARKAsset 19@3x.png
new file mode 100644
index 000000000..720eb7ef3
Binary files /dev/null and b/assets/WORDMARKAsset 19@3x.png differ
diff --git a/assets/critical.css b/assets/critical.css
index cdb1ae1aa..863bb5aab 100644
--- a/assets/critical.css
+++ b/assets/critical.css
@@ -4,6 +4,27 @@
* {
box-sizing: border-box;
margin: 0;
+ padding: 0;
+}
+:root {
+ --green100: #e3f5d7;
+ --green200: #c4ecb1;
+ --green300: #8dc67c;
+ --green400: #558d4b;
+
+ --green: #1c4219;
+ --green600: #123812;
+
+ --green700: #0c2f0f;
+ --green800: #07260d;
+
+ --green900: #041f0b;
+ --grey: #d0ccd0;
+ --white: #fbfcff;
+ --blue: #1c6e8c;
+ --black: #000;
+ --heading-font: "Futura Book", sans-serif;
+ --body-font: "Elgian", serif;
}
body {
@@ -11,6 +32,8 @@ body {
flex-direction: column;
margin: 0;
min-height: 100svh;
+ background-color: #1c4219;
+ color: #fbfcff;
}
html:has(dialog[scroll-lock][open], details[scroll-lock][open]) {
@@ -35,17 +58,34 @@ select {
}
select {
- background-color: var(--color-background);
- color: currentcolor;
+ background-color: var(--white);
+ color: var(--blue);
}
dialog {
- background-color: var(--color-background);
- color: var(--color-foreground);
+ background-color: var(--white);
+ color: var(--blue);
+}
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+ font-family: var(--heading-font);
}
-
p {
text-wrap: pretty;
+ font-family: var(--body-font);
+}
+a {
+ text-decoration: none;
+ color: var(--white);
+}
+
+a:hover {
+ text-decoration: underline;
+ text-decoration-color: var(--blue);
}
p,
h1,
@@ -73,11 +113,68 @@ p:empty {
/** Theme styles below */
body {
- font-family: var(--font-primary--family);
- background-color: var(--color-background);
- color: var(--color-foreground);
+ font-family: var(--body-font);
+ background-color: var(--grey);
+ color: var(--green);
+ max-width: 100%;
+ overflow-x: hidden;
+}
+/* Button Styles */
+.button {
+ font-family: var(--body-font);
+ background-color: var(--green);
+ color: var(--white);
+ padding: 0.5rem 1rem;
+ border-radius: 1rem;
+ border: none;
+ transition: all 0.3s ease-in-out;
+ text-decoration: none;
+}
+.shop-now {
+ background-color: var(--green900);
+ color: var(--white);
+ padding: 0.5rem 1rem;
+ border-radius: 1rem;
+ border: 1px solid var(--white);
+ transition: all 0.3s ease-in-out;
+}
+.shop-now:hover {
+ background-color: var(--green300);
+ scale: 1.1;
+ text-decoration: none;
+
+ transition: all 0.3s ease-in-out;
+}
+
+.learn-more {
+ background-color: var(--green700);
+ color: var(--white);
+ padding: 0.5rem 1rem;
+ border-radius: 1rem;
+
+ text-decoration: none;
+ border: none;
+ transition: all 0.3s ease-in-out;
+}
+.learn-more:hover {
+ background-color: var(--green300);
+ scale: 1.1;
+ transition: all 0.3s ease-in-out;
}
+.newsletter-button {
+ background-color: var(--blue);
+ color: var(--white);
+ padding: 0.5rem 1rem;
+ border-radius: 1rem;
+ border: none;
+ transition: all 0.3s ease-in-out;
+}
+.newsletter-button:hover {
+ background-color: var(--green300);
+ scale: 1.1;
+ transition: all 0.3s ease-in-out;
+}
/** Section layout utilities */
/**
@@ -97,8 +194,8 @@ body {
calc(100% - var(--page-margin) * 2)
);
--content-margin: minmax(var(--page-margin), 1fr);
- --content-grid: var(--content-margin) var(--content-width) var(--content-margin);
-
+ --content-grid: var(--content-margin) var(--content-width)
+ var(--content-margin);
/* This is required to make ![]()
elements work as background images */
position: relative;
grid-template-columns: var(--content-grid);
@@ -115,3 +212,81 @@ body {
.shopify-section > .full-width {
grid-column: 1 / -1;
}
+
+/* Section Headings Styles */
+
+.section-title {
+ color: var(--grey);
+}
+
+/* Product Grid */
+
+.product-grid {
+ background-color: var(--grey);
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+ gap: 2rem;
+ padding: 2rem;
+}
+
+.BelowFoldImage:hover {
+ transform: scale(1.1) rotate(360deg);
+ transition: transform 4.5s ease-in-out;
+}
+
+/* Liquid Glass css */
+.glass {
+ position: relative;
+ background: rgba(255, 255, 255, 0.15);
+ backdrop-filter: blur(2px) saturate(180%);
+ border: 1px solid rgba(255, 255, 255, 0.8);
+ border-radius: 2rem;
+ box-shadow: 0 8px 32px rgba(31, 38, 135, 0.2),
+ inset 0 4px 20px rgba(255, 255, 255, 0.3);
+}
+
+.glass::after {
+ content: "";
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+
+ height: 100%;
+ background: rgba(255, 255, 255, 0.1);
+ border-radius: 2rem;
+ backdrop-filter: blur(1px);
+ box-shadow: inset -10px -8px 0px -11px rgba(255, 255, 255, 1),
+ inset 0px -9px 0px -8px rgba(255, 255, 255, 1);
+ opacity: 0.6;
+ z-index: -1;
+ filter: blur(1px) drop-shadow(10px 4px 6px black) brightness(115%);
+}
+
+/* Glass Card css */
+.glass-card {
+ position: relative;
+ background: rgba(255, 255, 255, 0.15);
+ backdrop-filter: blur(2px) saturate(180%);
+ border: 1px solid rgba(255, 255, 255, 0.8);
+ border-radius: 2rem;
+ box-shadow: 0 8px 32px rgba(31, 38, 135, 0.2),
+ inset 0 4px 20px rgba(255, 255, 255, 0.3);
+}
+
+.glass-card::after {
+ content: "";
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background: rgba(255, 255, 255, 0.1);
+ border-radius: 2rem;
+ backdrop-filter: blur(1px);
+ box-shadow: inset -10px -8px 0px -11px rgba(255, 255, 255, 1),
+ inset 0px -9px 0px -8px rgba(255, 255, 255, 1);
+ opacity: 0.6;
+ z-index: -1;
+ filter: blur(1px) drop-shadow(10px 4px 6px black) brightness(115%);
+}
diff --git a/assets/hero_image.png b/assets/hero_image.png
new file mode 100644
index 000000000..ac1569263
Binary files /dev/null and b/assets/hero_image.png differ
diff --git a/assets/styles.css b/assets/styles.css
new file mode 100644
index 000000000..8bc908ece
--- /dev/null
+++ b/assets/styles.css
@@ -0,0 +1,467 @@
+:root {
+ --green100: #e3f5d7;
+ --green200: #c4ecb1;
+ --green300: #8dc67c;
+ --green400: #558d4b;
+ --green: #1c4219;
+ --green600: #123812;
+ --green700: #0c2f0f;
+ --green800: #07260d;
+ --green900: #041f0b;
+ --grey: #d0ccd0;
+ --white: #fbfcff;
+ --blue: #1c6e8c;
+ --black: #000;
+ --heading-font: "Futura Book", sans-serif;
+ --body-font: "Elgian", serif;
+}
+
+/* === hero-banner.css === */
+
+/* Reset any default margins/padding that might cause gaps */
+.hero-banner {
+ position: relative;
+ width: 100%;
+ min-height: 100vh;
+ overflow: hidden;
+ margin-bottom: 3rem;
+ padding: 0;
+}
+
+/* Navigation Bar */
+.hero-nav {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ z-index: 10;
+ background: rgba(0, 0, 0, 0.8);
+ backdrop-filter: blur(10px);
+ border: 2px solid var(--white);
+ border-top: none;
+ border-radius: 0 0 1rem 1rem;
+ margin: 0 20px;
+}
+
+.nav-content {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 12px 24px;
+ max-width: 100vw;
+ margin: 0 auto;
+}
+
+.nav-text {
+ color: var(--white);
+ font-family: var(--heading-font);
+ font-size: 1rem;
+ font-weight: 500;
+ letter-spacing: 1px;
+}
+
+.search-icon {
+ color: var(--blue);
+ cursor: pointer;
+ transition: transform 0.2s ease;
+}
+
+.search-icon:hover {
+ transform: scale(1.1);
+}
+
+/* Main Hero Layout */
+.hero-content {
+ display: flex;
+ height: 100vh;
+ width: 100%;
+}
+
+.hero-image-section {
+ flex: 1;
+ position: relative;
+ overflow: hidden;
+}
+
+.hero-image {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ object-position: center;
+ filter: brightness(0.5);
+}
+
+.hero-text-section {
+ flex: 1;
+ position: relative;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background: var(--black);
+}
+
+/* Pattern Background */
+.pattern-background {
+ position: absolute;
+ inset: 0;
+ background-size: cover;
+ background-position: center;
+ background-repeat: no-repeat;
+ opacity: 0.75;
+}
+
+.hero-text-content {
+ position: relative;
+ z-index: 2;
+ text-align: center;
+ padding: 3rem;
+ max-width: 500px;
+}
+
+.wordmark {
+ max-width: 90%;
+ width: 350px;
+ height: auto;
+ margin-top: 6rem;
+ filter: brightness(0) invert(1);
+}
+
+.hero-description {
+ margin-top: 1rem;
+}
+
+.hero-description p {
+ color: var(--white);
+ font-family: var(--body-font);
+ font-size: 1rem;
+ line-height: 1.5;
+ margin: 0;
+ font-weight: 500;
+ letter-spacing: 1px;
+ max-width: 400px;
+}
+
+.underline-text {
+ text-decoration: underline;
+ text-decoration-color: var(--blue);
+ text-decoration-thickness: 2px;
+ text-underline-offset: 4px;
+}
+
+/* Mobile Responsive */
+@media (max-width: 768px) {
+ .hero-content {
+ flex-direction: column;
+ height: auto;
+ min-height: 100vh;
+ }
+
+ .hero-image-section {
+ height: 50vh;
+ min-height: 400px;
+ }
+
+ .hero-text-section {
+ min-height: 50vh;
+ padding: 1rem;
+ }
+
+ .hero-text-content {
+ padding: 2rem 1rem;
+ }
+
+ .hero-nav {
+ margin: 0 15px;
+ }
+
+ .nav-content {
+ padding: 10px 16px;
+ }
+
+ .nav-text {
+ font-size: 12px;
+ }
+
+ .hero-description p {
+ font-size: 1rem;
+ }
+
+ .wordmark {
+ width: 280px;
+ margin-bottom: 2rem;
+ }
+
+ .pattern-background {
+ background-size: 250px 250px;
+ }
+}
+
+@media (max-width: 480px) {
+ .hero-nav {
+ margin: 0 10px;
+ }
+
+ .hero-text-content {
+ padding: 1.5rem 0.5rem;
+ }
+
+ .wordmark {
+ width: 250px;
+ margin-bottom: 1.5rem;
+ }
+
+ .hero-description p {
+ font-size: 0.95rem;
+ }
+
+ .pattern-background {
+ background-size: 200px 200px;
+ }
+}
+/* Below Fold Styles */
+/* Below Fold Styles - Cross-Browser Compatible */
+.BelowFoldSection {
+ background: #1e3c27;
+ color: var(--grey);
+ border-radius: 2rem;
+ position: relative;
+ overflow: hidden;
+}
+
+.BelowFoldSection::before {
+ content: "";
+ position: absolute;
+ top: -50%;
+ left: -50%;
+ width: 200%;
+ height: 200%;
+ background: linear-gradient(
+ 45deg,
+ #1e3c27 0%,
+ #2d5a3d 20%,
+ #1a7431 40%,
+ #0f5132 60%,
+ #2d5a3d 80%,
+ #1e3c27 100%
+ );
+ /* Cross-browser animation */
+ -webkit-animation: gradientRotate 8s linear infinite;
+ -moz-animation: gradientRotate 8s linear infinite;
+ -ms-animation: gradientRotate 8s linear infinite;
+ -o-animation: gradientRotate 8s linear infinite;
+ animation: gradientRotate 8s linear infinite;
+ z-index: 1;
+ /* Performance optimizations */
+ will-change: transform;
+ backface-visibility: hidden;
+ -webkit-backface-visibility: hidden;
+}
+
+.BelowFoldSectionWrapper {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ align-items: center;
+ position: relative;
+ z-index: 2;
+}
+
+/* Cross-browser keyframes */
+@-webkit-keyframes gradientRotate {
+ 0% {
+ -webkit-transform: rotate(0deg);
+ }
+ 100% {
+ -webkit-transform: rotate(360deg);
+ }
+}
+
+@-moz-keyframes gradientRotate {
+ 0% {
+ -moz-transform: rotate(0deg);
+ }
+ 100% {
+ -moz-transform: rotate(360deg);
+ }
+}
+
+@-ms-keyframes gradientRotate {
+ 0% {
+ -ms-transform: rotate(0deg);
+ }
+ 100% {
+ -ms-transform: rotate(360deg);
+ }
+}
+
+@-o-keyframes gradientRotate {
+ 0% {
+ -o-transform: rotate(0deg);
+ }
+ 100% {
+ -o-transform: rotate(360deg);
+ }
+}
+
+@keyframes gradientRotate {
+ 0% {
+ transform: rotate(0deg);
+ }
+ 100% {
+ transform: rotate(360deg);
+ }
+}
+
+.BelowFoldLeft {
+ flex: 1;
+ padding: 2rem;
+ text-align: left;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: flex-start;
+ gap: 1rem;
+}
+
+.BelowFoldRight {
+ flex: 1;
+ padding: 2rem;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: flex-end;
+}
+
+/* Featured Products */
+.featured-products {
+}
+
+/* CTAs */
+.Hero-ctas {
+ display: flex;
+ gap: 1rem;
+}
+/* About Styles */
+.about-content {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ align-items: center;
+ gap: auto;
+ padding: 2rem;
+ border: var(--green) 1px solid top bottom;
+}
+.about-title {
+ color: var(--green);
+ flex: 1;
+ padding: 2rem;
+ text-align: center;
+ display: flex;
+
+ gap: 1rem;
+}
+.about-text {
+ color: var(--green);
+ flex: 1;
+ padding: 2rem;
+ text-align: left;
+ font-size: 1rem;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: flex-start;
+ gap: 1rem;
+}
+/* Newsletter Styles */
+.newsletter-container {
+ background: var(--green600);
+ color: var(--grey);
+ padding: 2rem;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ gap: 1rem;
+}
+.newsletter-text {
+ color: var(--grey);
+ text-align: center;
+ max-width: 50ch;
+}
+.newsletter-form {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ gap: 1rem;
+}
+
+/* Trust Section */
+.trust {
+ color: var(--grey);
+ background-color: var(--green700);
+}
+.trust-container {
+ display: flex;
+ flex-direction: column;
+ text-align: center;
+ gap: 1rem;
+ padding: 2rem;
+}
+/* Trade Shows */
+.trade-shows {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ align-items: center;
+ gap: 1rem;
+ padding: 2rem;
+}
+
+/* Add a leafy texture here for cards */
+.trade-show-item {
+ display: flex;
+ flex-direction: column;
+ padding: 2rem;
+ text-align: center;
+ gap: 1rem;
+}
+
+.trade-show-image {
+ border-radius: 20%;
+ box-shadow: 0 5px 20px rgba(28, 66, 25, 0.05);
+}
+.trade-show-image:hover {
+ transform: scale(1.05);
+ box-shadow: 0 5px 20px rgba(28, 66, 25, 0.1);
+}
+.trust-elements {
+ display: flex;
+ gap: 1rem;
+ flex-wrap: wrap;
+ justify-content: space-between;
+ align-items: stretch;
+ min-height: auto;
+ inline-size: auto;
+}
+
+.trust-item {
+ font-family: var(--heading-font);
+ flex: 1 1 10%;
+ padding: 1.5rem;
+ text-align: center;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ align-items: center;
+ gap: 1rem;
+ border: var(--green600) 1px solid;
+ border-radius: 1rem;
+ box-shadow: 0 5px 20px rgba(28, 66, 25, 0.05);
+ transition: all 0.3s ease-in-out;
+}
+
+.trust-item:hover {
+ transform: scale(1.05);
+ box-shadow: 0 5px 20px rgba(28, 66, 25, 0.1);
+}
diff --git a/layout/theme.liquid b/layout/theme.liquid
index 8123ab782..8c89429e7 100644
--- a/layout/theme.liquid
+++ b/layout/theme.liquid
@@ -9,15 +9,26 @@
{% # Social, title, etc. %}
{% render 'meta-tags' %}
-
{{ content_for_header }}
+ {% comment %}Root Styles {% endcomment %}
+
+ {{ 'styles.css' | asset_url | append: '?v=' | append: 'now' | date: '%s' | stylesheet_tag }}
- {% sections 'header-group' %}
-
{{ content_for_layout }}
+ {% section 'hero-banner' %}
+
+ {% section 'BelowFold' %}
+
+ {% section 'featured-products' %}
+
+ {% section 'trust' %}
+
+ {% section 'about' %}
+
+ {% section 'newsletter' %}
- {% sections 'footer-group' %}
+ {% section 'footer' %}