Documentation for Shopify Custom Modern Theme by Nora Essadry

Theme Sections

Logo Section

   - Purpose: Displays the store's logo or store name.
   - Customization:
        - If a logo is uploaded in settings (settings.logo), it appears in the header.
       - If no logo is provided, the store name is displayed as a clickable text link.

Collapsible Navigation

  - Purpose: Creates a responsive, collapsible navigation menu.
  - How it works:
      - The menu includes a hamburger button (nav-toggle) for expanding and collapsing navigation on both mobile and desktop.
      - Note: Navigation items are contained in a list (nav-list), hidden or shown based on the active class.

Sticky Header

-   Purpose: Keeps the header at the top of the page while scrolling.
-   How it works:
     -  Uses CSS (position: sticky; top: 0;) to ensure the header remains visible.

JavaScript Functions (script.js)

   -Purpose: Adds interactivity to the header.
  - Features:
      - Expanding and collapsing the navigation menu.
      - Smooth scrolling for internal page links.
     -  Toggleable color palettes.

Theme Settings

Logo Upload (image_picker)

Allows users to upload a custom logo for the navigation bar.
Color Palette Options (select and color)

 -  Purpose: Customizes colors within the theme.
 -  Details:
     -  Users can select from three predefined color palettes.
     -  Alternatively, custom colors for primary, secondary, and background colors are available.

Sticky Header Option (checkbox)

Allows users to enable or disable the sticky header.
Testimonial Display Option (checkbox)

Allows users to show or hide the testimonial section on the homepage.
Homepage and Hero Section
Hero Section Customization

 -  Purpose: Customizes the main banner with text and a call-to-action button.
 -  Details:
      - Options for setting title, subtitle, button link, and button text.

Footer Customization

  - Purpose: Allows users to set a custom footer text.

Dynamic Product Display
Product Image

 -  Purpose: Displays the main product image, or a placeholder if no image is provided.

Product Information

-   Details:
      - Product Name: Displayed in a header format.
     -  Price: Shows original price if on sale, otherwise the regular price is shown.

"Add to Cart" Button

Adds the selected product to the cart using a hidden input field for the product variant ID.
Advanced Theme Features
Sticky, Collapsible Navigation

-  The nav-toggle button enables the expandable menu for desktop and mobile users.

Hover Effects on Product Cards

 -  Adds visual effects on hover, like shadows or color changes, enhancing the user experience.

Color Palette Switching

 -  If a color selector is added (#color-palette-selector), users can dynamically change the color scheme without reloading the page.