Skip to content

Feat/product collection redesign #3788

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
27 commits
Select commit Hold shift + click to select a range
d244d06
Refactor CSS for improved readability and performance; consolidate ad…
datagekko May 7, 2025
7e378df
Refactor CSS for improved readability and performance; consolidate ad…
datagekko May 7, 2025
21edc4a
Update from Shopify for theme rave/main
shopify[bot] May 7, 2025
32e69e3
gadg
datagekko May 7, 2025
3e04ddd
Update from Shopify for theme rave/main
shopify[bot] May 7, 2025
dc719f8
Merge branch 'main' of https://github.com/datagekko/rave
datagekko May 7, 2025
f9b8273
feat: Implement desktop header, initial mobile styling, and add workf…
datagekko May 8, 2025
665215d
Update from Shopify for theme rave/main
shopify[bot] May 8, 2025
8a06564
Update from Shopify for theme rave/main
shopify[bot] May 8, 2025
3e378a3
Update from Shopify for theme rave/main
shopify[bot] May 8, 2025
03cdf7c
fix: Remove border between footer items and payment methods
datagekko May 12, 2025
6a5e0e1
Update from Shopify for theme rave/main
shopify[bot] May 13, 2025
00460fd
Update from Shopify for theme rave/main
shopify[bot] May 13, 2025
c946aca
Update from Shopify for theme rave/main
shopify[bot] May 13, 2025
09c2992
feat: Style mobile footer with two-column layout and condensed spacing
datagekko May 13, 2025
e3297ab
refactor: Simplify footer layout by removing custom snippet and enhan…
datagekko May 13, 2025
93147f9
Merge branch 'fix/footer-border' into main
datagekko May 13, 2025
b984d2c
Update from Shopify for theme rave/main
shopify[bot] May 13, 2025
afbca67
Update from Shopify for theme rave/main
shopify[bot] May 13, 2025
01f63f5
Update from Shopify for theme rave/main
shopify[bot] May 13, 2025
fe40ff0
Update from Shopify for theme rave/main
shopify[bot] May 13, 2025
5b53451
fix: Ensure rave-custom-footer-layout renders both menu blocks
datagekko May 13, 2025
a3256c4
Update from Shopify for theme rave/main
shopify[bot] May 14, 2025
b79cf65
fix: Apply Inter font and bold weight to header navigation
datagekko May 14, 2025
df00cda
Update from Shopify for theme rave/main
shopify[bot] May 17, 2025
2f5129a
Update from Shopify for theme rave/main
shopify[bot] May 17, 2025
bd0bc5a
feat: Implement product collection page redesign with styling adjustm…
datagekko May 17, 2025
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
47 changes: 47 additions & 0 deletions .cursor/rules/common-debugging-steps.mdc
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
---
description: Common Debugging Steps for Shopify Theme Customization
globs:
alwaysApply: false
---
# Common Debugging Steps for Shopify Theme Customization

This guide outlines common issues and recommended debugging steps when working on Shopify theme customizations, particularly with CSS and Liquid.

1. **Verify Theme Customizer Settings:**
* Many visual aspects (e.g., logo position, color schemes, feature toggles) are controlled by settings in the Shopify Admin (Online Store -> Themes -> Customize -> Section/Theme Settings).
* Always double-check that the relevant settings are configured as expected, as these often drive Liquid logic that adds CSS classes or changes behavior.
* **Example:** Header mobile logo position relies on "Mobile logo position" being set to "Left" in Header settings.

2. **Clear Browser Cache / Hard Refresh:**
* Browsers aggressively cache CSS and JavaScript. After making changes to these assets, always perform a hard refresh to ensure you're seeing the latest version.
* **Shortcuts:** Cmd+Shift+R (Mac), Ctrl+Shift+R (Windows/Linux).

3. **Use Browser Developer Tools (Inspector):**
* **Element Inspection:** Right-click on the problematic element and choose "Inspect" or "Inspect Element".
* **Styles Panel:** This is crucial for CSS debugging.
* See all CSS rules applying to the selected element.
* Identify which rules are active and which are overridden (struck-through).
* Check the specificity of selectors. Highly specific selectors from base theme CSS (like Dawn's `base.css`) might override your custom styles.
* Verify your custom CSS file (`[assets/rave-custom.css](mdc:assets/rave-custom.css)`) is loaded and its rules are present.
* **Computed Panel:** Shows the final, calculated value for each CSS property on the element, after all stylesheets and inline styles have been considered.
* **Classes:** Verify that the expected CSS classes (e.g., `header--mobile-left`) are present on the HTML elements. These are often added by Liquid logic based on theme settings.
* **Console:** Check for JavaScript errors, which might break functionality or prevent CSS classes from being applied correctly.

4. **CSS Specificity and `!important`:**
* If your custom styles aren't applying, it's often due to more specific selectors in the base theme's CSS.
* You can increase the specificity of your selectors or, as a last resort for targeted overrides, use `!important`. Use `!important` judiciously as it can make future CSS maintenance harder.

5. **Media Query Scoping:**
* Ensure styles intended for specific viewports (mobile, tablet, desktop) are correctly wrapped in appropriate media queries (e.g., `@media screen and (max-width: 749px)` for mobile, `@media screen and (min-width: 990px)` for desktop).
* A common issue encountered was desktop-specific grid styles for the header unintentionally affecting mobile layout until they were properly scoped with a `min-width` media query.

6. **Homepage-Specific Issues:**
* Shopify themes can have CSS rules or Liquid logic that applies only to the homepage (e.g., via `body.template-index` class or specific homepage section IDs).
* If an issue occurs only on the homepage, inspect elements there to find homepage-specific styles that might be overriding more general rules.

7. **Liquid Asset Inclusion Order:**
* Ensure that shared resources like CSS variable definitions (`[snippets/rave-variables.liquid](mdc:snippets/rave-variables.liquid)`) are included in `[layout/theme.liquid](mdc:layout/theme.liquid)` *before* the main custom stylesheet (`[assets/rave-custom.css](mdc:assets/rave-custom.css)`) that depends on them.

8. **Shopify CLI and Development Server:**
* Use `shopify theme dev --store YOUR_STORE.myshopify.com` for local development.
* Ensure the dev server is running and syncing changes. Sometimes, a restart of the dev server might be needed if changes don't appear to be syncing.
43 changes: 43 additions & 0 deletions .cursor/rules/custom-files-reference.mdc
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
---
description: This document outlines the key custom files created or significantly modified for the Rave Yoga Shopify theme migration.
globs:
alwaysApply: false
---
# Custom Files Reference

This document outlines the key custom files created or significantly modified for the Rave Yoga Shopify theme migration.

* **`[assets/rave-custom.css](mdc:assets/rave-custom.css)`**
* **Purpose:** Contains all primary custom CSS overrides and new styles for the theme.
* **Structure:** Organized with comments for global resets (use sparingly), Rave-specific utility classes, and section-specific styles (e.g., `/* == HEADER == */`, `/* == FOOTER == */`).
* **Important:** This file is enqueued in `[layout/theme.liquid](mdc:layout/theme.liquid)`.

* **`[assets/rave-custom.js](mdc:assets/rave-custom.js)`**
* **Purpose:** Houses custom JavaScript functionalities.
* **Structure:** Currently uses an Immediately Invoked Function Expression (IIFE) to avoid polluting the global scope.
* **Important:** This file is enqueued in `[layout/theme.liquid](mdc:layout/theme.liquid)`.

* **`[snippets/rave-variables.liquid](mdc:snippets/rave-variables.liquid)`**
* **Purpose:** Defines custom CSS variables for Rave Yoga brand (colors, fonts). It also maps these custom variables to Dawn's global CSS variables where appropriate.
* **Source of Values:** Uses color settings defined in Theme Settings -> "Rave Brand Settings" (from `[config/settings_schema.json](mdc:config/settings_schema.json)`).
* **Important:** Included in `[layout/theme.liquid](mdc:layout/theme.liquid)` *before* `rave-custom.css` is loaded to ensure variables are available.

* **`[config/settings_schema.json](mdc:config/settings_schema.json)`**
* **Purpose:** Modified to add a new "Rave Brand Settings" section in the Shopify Theme Customizer.
* **Functionality:** Allows easy selection of brand colors (primary text, secondary text, accent, main background) via color pickers. These settings are then used by `[snippets/rave-variables.liquid](mdc:snippets/rave-variables.liquid)`.

* **`[locales/en.default.json](mdc:locales/en.default.json)`**
* **Purpose:** The default English localization file for the theme. Used for any custom text strings required by the theme that are not part of standard Shopify/Dawn translations.

* **`[layout/theme.liquid](mdc:layout/theme.liquid)`**
* **Purpose:** The main theme layout file. Modified to correctly include/enqueue custom assets:
1. `[snippets/rave-variables.liquid](mdc:snippets/rave-variables.liquid)` (as a snippet render).
2. `[assets/rave-custom.css](mdc:assets/rave-custom.css)` (as a stylesheet link).
3. `[assets/rave-custom.js](mdc:assets/rave-custom.js)` (as a script tag, typically deferred).

* **`[sections/header.liquid](mdc:sections/header.liquid)`**
* **Purpose:** The Liquid file for the header section. Has been significantly modified from the default Dawn header.
* **Key Customizations:** Contains Liquid logic to split the main navigation menu for desktop view (when logo is centered) and to hide default header icons. Also structured to support distinct mobile layout requirements.

* **`[CUSTOMIZATIONS.md](mdc:CUSTOMIZATIONS.md)`**
* **Purpose:** A manually maintained Markdown file intended to log significant customizations, decisions, and troubleshooting steps made during the project. This helps with future maintenance and understanding the evolution of the theme.
47 changes: 47 additions & 0 deletions .cursor/rules/header-logic.mdc
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
---
description: Header Customization Logic
globs:
alwaysApply: false
---
# Header Customization Logic

The header in this theme (`[sections/header.liquid](mdc:sections/header.liquid)`) has significant customizations to achieve specific desktop and mobile layouts.

## Desktop Header (min-width: 990px)

* **Layout Goal:** Split navigation (Left Navigation - Centered Logo - Right Navigation).
* **Theme Setting Trigger:** This layout is active when "Logo position" is set to "Middle center" in the Theme Customizer (Header section settings).
* **Implementation Details:**
* **Liquid (`[sections/header.liquid](mdc:sections/header.liquid)`)**: When the above condition is met and the menu type is not "drawer", the Liquid code calculates the midpoint of the main menu (`linklists[section.settings.menu]`). It then renders the first half of the links in a `<nav class="...--left">` before the logo, and the second half in a `<nav class="...--right">` after the logo.
* **CSS (`[assets/rave-custom.css](mdc:assets/rave-custom.css)`)**: The `header.header--middle-center` element is styled with `display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;`. The child navigation elements (`nav.header__inline-menu--left`, `nav.header__inline-menu--right`) and the logo (`>.header__heading`) are explicitly placed using `grid-column` and `justify-self`.
* **Important:** All these grid-related CSS rules are wrapped in an `@media screen and (min-width: 990px)` query to ensure they only apply to desktop views.

## Mobile Header (max-width: 749px)

* **Layout Goal:** Logo on the far left, Hamburger Menu icon on the far right.
* **Theme Setting Trigger:** This layout relies on "Mobile logo position" being set to "Left" in the Theme Customizer (Header section settings). This adds the `header--mobile-left` class to the `<header>` element.
* **Implementation Details (CSS in `[assets/rave-custom.css](mdc:assets/rave-custom.css)` within `@media screen and (max-width: 749px)`)**:
* The `header.header--mobile-left` element is styled with `display: flex !important; justify-content: space-between !important; align-items: center !important;`.
* The logo container (`.header__heading`) has `order: 1 !important; margin-right: auto !important; justify-self: start !important; margin-left: 0 !important;` to force it left.
* The `header-drawer` (containing the hamburger icon) has `order: 2 !important;`.
* The entire `header.header` element (which contains the logo and hamburger) has `position: relative; z-index: 101;` and a `background-color` (e.g., `rgb(var(--color-background))`) to ensure it stays visually above the unfolding menu panel.

## Mobile Menu Panel (`#menu-drawer.menu-drawer`)

* **Appearance:** Slides down from directly beneath the header bar.
* **Animation:** Achieved using a `max-height` transition. The panel is `position: fixed;`.
* Closed state: `max-height: 0; visibility: hidden; overflow: hidden;`.
* Open state: `max-height: calc(100vh - var(--header-bottom-position)); visibility: visible;`.
* **Positioning:**
* `top: var(--header-bottom-position);` (Dynamically set by Dawn's JS to be the bottom edge of the visible header bar).
* `height` is effectively controlled by `max-height` to fill the space below the header.
* `z-index: 100;` (below the main header bar, which is `z-index: 101`).
* **Styling:**
* Background: White (uses `var(--rave-color-background-main, #FFFFFF) !important;`).
* Item Separators: Each `<li>` has a `border-bottom` using `var(--rave-color-primary-text)`.
* Active/Hover/Focus Item Style: Underlined text (`text-decoration: underline !important;`), transparent background.
* **Overlay Removal:** Dawn's default `summary::before` overlay (for side drawers) is hidden with `display: none !important;` for `.js header-drawer > details[open] > summary.header__icon--menu::before` because it conflicts with the full-screen top-slide menu.

## General Header Customizations

* **Icons Hidden:** Default Shopify header icons (search, account, cart) are hidden by commenting out the `<div class="header__icons">...</div>` block in `[sections/header.liquid](mdc:sections/header.liquid)`.
28 changes: 28 additions & 0 deletions .cursor/rules/project-overview.mdc
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
---
description:
globs:
alwaysApply: false
---
# Project Overview

**Goal:** Migrate the Readymag site `rave-yoga.com` to Shopify using the Dawn theme (v15.3.0), aiming for a pixel-perfect replication of the design. The initial focus has been on replicating the header.

**Key Technologies:**
* Shopify Liquid for templating and logic.
* CSS (within the context of Dawn's SCSS structure, but primarily custom CSS additions).
* Custom JavaScript for any behaviors not covered by theme settings or Liquid.
* Shopify Theme Customizer for settings and content.

**Primary Custom Files & Starting Points:**
* Main custom styles: `[assets/rave-custom.css](mdc:assets/rave-custom.css)`
* Custom JavaScript: `[assets/rave-custom.js](mdc:assets/rave-custom.js)`
* Custom CSS Variables: `[snippets/rave-variables.liquid](mdc:snippets/rave-variables.liquid)`
* Theme settings additions: `[config/settings_schema.json](mdc:config/settings_schema.json)`
* Main layout file: `[layout/theme.liquid](mdc:layout/theme.liquid)` (for including custom assets)
* Header section: `[sections/header.liquid](mdc:sections/header.liquid)` (heavily customized)

**Development Approach:**
* Follow the "Super-Prompt 3" workflow (Technical PM/Lead Dev, sprint-based).
* Utilize Shopify CLI for local development (e.g., `shopify theme dev --store YOUR_STORE.myshopify.com`).
* Maintain a `[CUSTOMIZATIONS.md](mdc:CUSTOMIZATIONS.md)` file for logging significant changes.
* Prioritize theme update safety by isolating custom CSS/JS, using CSS variables, and commenting Liquid changes.
46 changes: 46 additions & 0 deletions .cursor/rules/styling-conventions.mdc
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
---
description:
globs:
alwaysApply: false
---
# Styling Conventions and Brand Assets

This rule outlines the primary styling conventions, brand assets (colors, fonts), and CSS structure used in the Rave Yoga Shopify theme customization.

## CSS Variables and Custom Properties

* **Central Definition:** Custom CSS variables for the Rave Yoga brand are centrally defined in `[snippets/rave-variables.liquid](mdc:snippets/rave-variables.liquid)`.
* **Source of Values:** These variables often pull their values from theme settings configured in the Shopify Customizer, specifically under "Rave Brand Settings" (added via `[config/settings_schema.json](mdc:config/settings_schema.json)`).
* **Mapping to Dawn:** `[snippets/rave-variables.liquid](mdc:snippets/rave-variables.liquid)` also maps these custom Rave brand variables to Dawn's standard global CSS variables (e.g., `--color-text`, `--color-background`, `--color-button`) to ensure brand consistency throughout the theme.
* **Usage:** All custom CSS written in `[assets/rave-custom.css](mdc:assets/rave-custom.css)` should prioritize using these defined CSS variables (e.g., `var(--rave-color-primary-text)`) rather than hardcoding hex values.

## Brand Colors

These are the primary brand colors, accessible via their respective CSS variables defined in `[snippets/rave-variables.liquid](mdc:snippets/rave-variables.liquid)`:

* **Primary Text:** `#3D2120` (variable: `--rave-color-primary-text`)
* **Main Background:** `#FFFFFF` (variable: `--rave-color-background-main`)
* **Secondary Text:** `#555555` (variable: `--rave-color-secondary-text`)
* **Accent Color:** `#412F26` (variable: `--rave-color-accent`)
* **Button Text:** `#FFFFFF` (variable: `--rave-color-button-text` - typically used with the accent color as button background)

## Typography

* **Primary Font Stack:** "Inter" (including its fallbacks like `sans-serif`).
* **Theme Setting:** The "Inter" font is set globally via the Shopify Theme Customizer (Theme Settings -> Typography).
* **CSS Variables:** `[snippets/rave-variables.liquid](mdc:snippets/rave-variables.liquid)` captures the theme's font choices into variables like `--rave-font-stack-primary` and `--rave-font-stack-secondary`, which are then mapped to Dawn's `--font-heading-family` and `--font-body-family`.

## Breakpoints and Responsive Design

* **Approach:** Mobile-first.
* **Key Breakpoints Used in Custom CSS:**
* **Mobile:** Styles typically apply by default, or are scoped within `@media screen and (max-width: 749px) { ... }`.
* **Tablet (Implied):** Styles for viewports between `750px` and `989px` are handled by styles that apply from `min-width: 750px` but are overridden by `min-width: 990px` desktop styles if necessary.
* **Desktop:** Styles are typically scoped within `@media screen and (min-width: 990px) { ... }`. This is Dawn's primary desktop breakpoint.

## CSS File Structure (`[assets/rave-custom.css](mdc:assets/rave-custom.css)`)

* The file is intended to be organized with clear comments:
1. Global Resets or Overrides (use sparingly).
2. Rave Specific Reusable Utility Classes.
3. Component/Section Specific Styles (e.g., `/* == HEADER == */`, `/* == FOOTER == */`, `/* == MOBILE MENU == */`).
Loading
Loading