⚙️ Section Settings

1. Main Menu (main_menu)
   • Choose the navigation menu that will display in the header.
     
     
   • The menu items are managed under Online Store → Navigation in your Shopify admin.
     
     
   • Desktop Logo (desktop_logo) – Upload your store’s main logo for desktop devices.
     
     
   • Alternate Logo (alternate_logo) – Optional secondary logo (often used for transparent headers or sticky states).
     
     
2. Layout & Behavior
   
   
   • Sticky Header (sticky_header)
     ON → Header stays fixed at the top while scrolling.
     OFF → Header scrolls away with the page.
     
     
   • Header Transparency (header_transparency)
     ON → Header background is transparent (useful for hero banners).
     OFF → Header uses the color scheme background.
     
     
   • Menu Event (menu_event)
     Hover → Dropdowns open when hovering.
     Click → Dropdowns open only when clicked.
     
     
   • Logo Size (logo_size) – Adjusts the size of your logo (50px–150px).
     
     
   • Header Bottom Margin (header_bottom_margin) – Adds spacing below the header (0–100px).
     
     
   • Padding (Top & Bottom)
     Padding Top (padding_top) – Spacing above header content.
     Padding Bottom (padding_bottom) – Spacing below header content.
     Both range from 0–100px.
     
     
3. Menu Display Style
   
   
   • Menu Behavior (menu_behavior)
     Dropdown → Standard dropdown menu.
     Mega Menu → Wide menu layout with multiple columns.
     
     
4. Internationalization
   
   
   • Show Country Selector (show_country_selector)
     ON → Adds a country selector.
     OFF → Hides it.
     
     
   • Show Language Selector (show_language_selector)
     ON → Adds a language selector.
     OFF → Hides it.
     (Requires multi-language setup in Shopify.)
     
     
5. Design Settings
   • Color Scheme (color_scheme) – Choose a predefined color scheme (dark, light, custom).
     
     
6. Blocks
   • @app block – Placeholder for third-party app integrations (search, cart drawer, etc.).
     
     
7. Presets
   • Makes it easy to add the Header with default settings in the Shopify editor.
     
     
8. How This Section Works
   • Displays your logo(s), navigation menu, and optional selectors.
   • Flexible control over positioning, spacing, and behavior.
   • Supports dropdowns or mega menus.
   • Lets customers switch country or language directly from the header.

⚙️ Section Settings

1. Color Scheme (color_scheme)
   • Applies theme color palette (background + text).
     
     
2. Background Style (section_background)
   • solid → solid color background.
   • gradient → gradient background (uses theme gradients).
     
     
3. Auto Rotate (auto_rotate)
   • ON → slides auto-rotate like a slideshow.
   • OFF → user swipes/clicks manually.
     
     
4. Change Every (slide_interval)
   • Time between slides (in seconds).
   • Example: 5 → slide changes every 5 seconds when auto-rotate is on.
     
     
5. Slide Direction (slide_direction)
   • horizontal → swipes left ↔ right.
   • vertical → swipes up ↕ down.
     
     
6. Desktop Height (desktop_display)
   • Controls banner height on desktop.
   • Options: fixed (250px → 750px) or fullscreen.
     
     
7. Mobile Height (mobile_height)
   • Controls banner height on mobile.
   • Options: fixed (200px → 750px) or fullscreen.
     
     
8. Spacing – Desktop (top_space_desktop, bottom_space_desktop)
   • Adds extra space above/below the hero on desktop.
     
     
9. Spacing – Mobile (top_space_mobile, bottom_space_mobile)
   • Adds extra space above/below the hero on mobile.

🧱 Block-Level Settings (per slide)

       1. Media

• • Desktop Image (desktop_image) → shown on desktop.
  • Mobile Image (mobile_image) → shown on mobile.
  • Overlay Opacity (overlay_opacity) → optional dark/light overlay (0% = none, 100% = fully covered).

       2. Text Content

• • Subheading (subheading) → small top text.
  • Subheading Size (subheading_size) → xsmall → xlarge.
  • Heading (heading) → main title (supports [ ] for highlighted text with stroke effect).
  • Heading Tag (heading_tag) → HTML tag (H1, H2, div, span, etc.).
  • Heading Font Family (heading_font_family) → choose theme font family.
  • Markers Font Family (markers_font_family) → font for highlighted markers [ ].
  • Description (description) → supporting paragraph text.
  • Description Size (description_size) → control font size.

        3. Layout

• • Content Width (content_width) → small, medium, large, full.
  • Content Position (content_position) → top/middle/bottom + left/center/right.
  • Content Alignment (content_alignment) → align text left, center, or right.

        4. Buttons

• • Primary Button → label, link, size, style (solid, outline, animated, link).

Output:-

Configurations:-

⚙️ Section Settings

          1. Images

• • Image Left (image_left) → Upload/select left-side image.
  • Image Right (image_right) → Upload/select right-side image.
  • If no image → fallback placeholder loads.
  • Uses responsive srcset + webp for performance.

          2. Text Content

• • Subheading (subheading) → Small text above heading.
  • Heading (heading) → Main title text.

          3. Layout

• • Layout Direction (layout_direction)
    • horizontal → Left/right split.
    • vertical → Top/bottom split.
  • Content Position (content_position)
    • top, middle, or bottom overlay alignment.

          4. Buttons

• • Button 1 → Text (button1_text), Link (button1_link), Background (button1_color), Text Color (button1_text_color).
  • Button 2 → Text (button2_text), Link (button2_link), Background (button2_color), Text Color (button2_text_color).
  • Button Corner Radius (button_corner) → 0 = square, 50 = pill shape.

          5. Spacing – Desktop

• • Margin Top (margin_top_desktop)
  • Margin Bottom (margin_bottom_desktop)
  • Padding Top (padding_top_desktop)
  • Padding Bottom (padding_bottom_desktop)

          6. Spacing – Mobile

• • Margin Top (margin_top_mobile)
  • Margin Bottom (margin_bottom_mobile)
  • Padding Top (padding_top_mobile)
  • Padding Bottom (padding_bottom_mobile)

Output:

Configuration:

⚙️ Section Settings

1. Heading & Text
   •  Heading (heading) → Big title displayed at the top of the testimonials section.
   • Subheading (subheading) → Optional smaller text shown below the heading.
     
   •  Color Scheme (color_scheme) → Controls background + text palette    applied to the section.
     
     
2. Spacing – Desktop
   •    Margin Top / Bottom → Adds space outside the section (0–200px).
   •    Padding Top / Bottom → Adds space inside the section (0–200px).
     
     
3. Spacing – Mobile
   •    Margin Top / Bottom → Adds space outside the section (0–100px).
   •    Padding Top / Bottom → Adds space inside the section (0–100px).
     
     
4. Slider Functionality
   •    Uses Slick Slider.
   •    Shows 2 testimonials at a time on desktop, 1 on mobile/tablet.
   •    Autoplay → Automatically rotates every 5s.
   •    Looping → Infinite scroll, never ends.
   •    Navigation → Custom Prev/Next arrows (visible if more than one testimonial).
   •    Touch/Swipe → Works on mobile and tablets.
   •    Pauses on hover/focus for better readability.
     
     

🧱 Block Settings (per testimonial)

• •    Avatar (avatar) → Upload customer photo. If left blank → default avatar icon shown.
  •    Name (name) → Customer name.
  •    Location (location) → Optional customer location (city, state, etc.).
  •    Title (title) → Short headline (appears above testimonial text).
  •    Testimonial Text (text) → Main review or feedback (can be multiple lines).
  •    Rating (rating) → Star rating (0–5). Stars filled according to number selected.
  •    Quote Icon (quote_icon) → Optional decorative icon. Empty → default quote SVG used.

Preview :

Configuration :

⚙️ Section Settings

        1. Default Banner (default_banner)

• • Upload an image → Used as fallback when the collection has no image.
  • Leave empty → If collection has no image, banner will not show.

       2. Custom Title (custom_title)

• • Add custom text → Replaces the collection title.
  • Leave empty → Displays the default collection.title.

        3. Color Scheme (color_scheme)

• • Controls the text and background color scheme of the banner.
  • Matches global theme color schemes for consistency.

        4. Banner Height – Desktop (banner_height_desktop)

• • Sets fixed banner height on desktop (200–800px).

        5. Banner Height – Mobile (banner_height_mobile)

• • Sets fixed banner height on mobile (150–600px).

        6. Spacing – Desktop

• • Margin Top (margin_top_desktop) → Controls space above the banner (0–200px).
  • Margin Bottom (margin_bottom_desktop) → Controls space below the banner (0–200px).

         7. Spacing – Mobile

• • Margin Top (margin_top_mobile) → Controls space above the banner (0–100px).
  • Margin Bottom (margin_bottom_mobile) → Controls space below the banner (0–100px).

Preview :

⚙️ Section Settings

• Color Scheme (color_scheme)
  Defines background & text palette.
  
  

• Spacing – Desktop

  • Margin Top / Bottom → Space outside the section (0–200px).

  • Padding Top / Bottom → Space inside the section (0–200px).
    
    

• Spacing – Mobile

  • Margin Top / Bottom → Space outside the section (0–100px).

  • Padding Top / Bottom → Space inside the section (0–100px).

🧱 Block Settings (Rich Text Block)

              Each block = heading + content + optional button.

• • Heading (heading)
    Title text, styled larger (default: 34px desktop, 28px mobile).

  • Content (content)
    Rich text description (supports links, bold, italic, lists).

  • Button Label (button_label)

    • Filled → Button shows.

    • Empty → Button hidden.

  • Button Link (button_link)

    • Added → Button is clickable link.

    • Empty → Button acts like a dummy button (non-clickable).

  • Content Position (content_position)

    • Left → Aligns content block left.

    • Center → Aligns content block center.

    • Right → Aligns content block right.

  • Text Alignment (text_alignment)

    • Left → Text lines align left.

    • Center → Text lines align center.

    • Right → Text lines align right.

Output:-

⚙️ Section Settings

1. 1. Title & Header
      • Title (title) → Main section heading.
      • Show View All (show_view_all) → Checkbox to toggle “View All” link.
      • View All Text (view_all_text) → Customizable label for the link.
   2. Collection & Products
      • Collection (collection) → Select which collection to feature.
      • Products Limit (products_limit) → Max number of products shown.
      • Products Per Row (products_per_row) → Number of products per row (grid or carousel visible items).
   3. Layout
      • Show Carousel (show_carousel)
      • ON → Products display in a slick-style carousel (.carousel-slick).
      • OFF → Products display in a static grid layout.
   4. Design & Colors
      • Color Scheme (color_scheme) → Select theme color scheme.
   5. Spacing – Desktop
      • Margin Top Desktop (margin_top_desktop)
      • Margin Bottom Desktop (margin_bottom_desktop)
      • Padding Top Desktop (padding_top_desktop)
      • Padding Bottom Desktop (padding_bottom_desktop)
   6. Spacing – Mobile
      • Margin Top Mobile (margin_top_mobile)
      • Margin Bottom Mobile (margin_bottom_mobile)
      • Padding Top Mobile (padding_top_mobile)
      • Padding Bottom Mobile (padding_bottom_mobile)

Output:-

⚙️ Section Settings

1. Section Title (section_title)
   •    Optional heading displayed above the carousel/grid.
     
     
2. Title Alignment (title_alignment)
   •    Left → Title aligns to the left.
   •    Center → Title centers.
   •    Right → Title aligns right.
     
     
3. Enable Slick Slider (use_slick)
   •    ON → Logos show in a carousel (slick slider) with scrolling.
   •    OFF → Logos show in a grid layout.
     
     
4. Autoplay (autoplay)
   •    ON → Logos scroll automatically in carousel mode.
   •    OFF → Logos only move when user swipes/clicks (no auto motion).
     
     
5. Color Scheme (color_scheme)
   •    Applies theme palette (background + text colors).
     
     
6. Spacing – Desktop
   •    Margin Top (margin_top_desktop) → Space above section (0–200px).
   •    Margin Bottom (margin_bottom_desktop) → Space below section (0–200px).
   •    Padding Top (padding_top_desktop) → Inside spacing top (0–200px).
   •    Padding Bottom (padding_bottom_desktop) → Inside spacing bottom (0–200px).
     
     
7. Spacing – Mobile
   •    Margin Top (margin_top_mobile) → Space above section (0–100px).
   •    Margin Bottom (margin_bottom_mobile) → Space below section (0–100px).
   •    Padding Top (padding_top_mobile) → Inside spacing top (0–100px).
   •    Padding Bottom (padding_bottom_mobile) → Inside spacing bottom (0–100px).

🧱 Block-level Settings (per Logo)

1. Logo Image (logo_image)
   •    The brand logo image (supports WebP, optimized).
     
     
2. Logo Link (logo_link)
   •    Optional URL.
   •    Added → Logo becomes clickable link.
   •    Empty → Logo shown as plain image.

Configuration:-

Output:-

⚙️ Section Settings

1. Color Scheme (color_scheme)
• Select a theme color scheme to style background, buttons, and text according to your store’s design.

Product Media Settings

1. Fit (media_fit)
• Original – show image in its original dimensions
• Fill – stretch/resize the image to fill the container
2. Layout (layout)
• Stacked – images appear vertically
• 2 Columns – two images side by side
• Thumbnail Slider – main image with clickable thumbnails
3. Gallery Position (gallery_position)
• Left – images on the left, details on the right
• Right – images on the right, details on the left
4. Product Image Zoom (zoom_mode)
• Open Lightbox – enlarge image in a popup
• Click and Hover Zoom – zoom on hover or click
• No Zoom – disable zoom

Mobile View Settings

1. Mobile View Layout (mobile_view_layout)
• 2 column with slider – two images per row with slider
• Show thumbnails – display small thumbnails
• Hide thumbnails – show only main image

Section Padding

1. Padding Top (Desktop) (padding_top_desktop) – space above the section on desktop
2. Padding Bottom (Desktop) (padding_bottom_desktop) – space below the section on desktop
3. Padding Top (Mobile) (padding_top_mobile) – space above the section on mobile
4. Padding Bottom (Mobile) (padding_bottom_mobile) – space below the section on mobile

Adjust padding to control spacing between sections for a balanced layout.

Section Blocks

1. Title
• Displays the product name.
2. Description
• Shows the product description or additional text content.
3. Price
• Displays the product price dynamically.
4. Add to Cart Button
• Allows users to select variants and add the product to their cart.
5. Variant Style (variant_style)
• Pills – visual buttons for each variant
• Dropdown – standard dropdown menu
6. Text Block
• Text Content (text_content) – add rich text content for the product (e.g., notes, highlights)
• Text Style (text_style) – style the text as Uppercase, Subtitle, or Body
7. Quantity Selector
• Show Quantity (show_quantity) – toggle the quantity selector for customers to choose how many items to purchase.
8. Share Button
• Button Text (share_text) – customize the text for social sharing, e.g., “Share this product”
9. @App Block
• Placeholder for app integrations (e.g., reviews, recommendations).

How This Section Works

• Displays the product images and gallery with configurable layout, zoom, and mobile settings.
• Shows product details: title, description, price, and customizable text blocks.
• Includes interactive features: add-to-cart button, quantity selector, and share button.
• Fully responsive: layout, padding, and gallery adjust automatically for mobile and desktop views.
• Supports theme color schemes for consistent styling.
• App blocks allow integration with third-party apps without editing code.
  
  
  

⚙️ Section Settings

          1. Product (product)

• • Select which product from your catalog will be featured.

          2. Show Quantity Selector (show_quantity_selector)

• • ON → Adds a quantity input before Add to Cart.
  • OFF → Only default quantity = 1. 

         3. Enable Dynamic Checkout (enable_dynamic_checkout)

• • ON → Shows Shopify’s “Buy It Now” / Express Checkout buttons (Apple Pay, Google Pay, Shop Pay). 
    
  • OFF → Only “Add to Cart” button shown.

         4. Show Vendor (show_vendor)

• • ON → Displays product vendor/brand.
  •  OFF → Hidden.
    

         5. Show Product Rating (show_rating)

• • ON → Shows star rating (requires product reviews app). 
  •  OFF → Hidden.
    

         6. Enable Media Zoom (enable_media_zoom)

• • ON → Hover over product image zooms in.
  • OFF → No zoom effect.

         7. Enable Media Carousel (enable_media_carousel)

• •  ON → Multiple images/videos are shown in a carousel/slider.
  •  OFF → Only main image visible.
    

        8. Color Scheme (color_scheme)

• • Controls background + text palette.
    

        9. Spacing (desktop & mobile)

• • Margin Top / Bottom → Space outside the section.
    

  • Padding Top / Bottom → Space inside the section.
    
    

🧱 Block Settings (optional extras per product card)

• • Text block → Add extra text/description.
    

  • Icon block → Add small icons (e.g., shipping, warranty).
    

Collapsible tabs → Add FAQs or details.

Output:-

⚙️ Section Settings

            1. Cart Heading (cart_heading)

• • The title displayed at the top of the cart (default: “Your Cart”).

            2. Spacing Controls

1. • Desktop & Mobile options for:
     • Margin Top
     • Margin Bottom
     • Padding Top
     • Padding Bottom

            3. Color Scheme (color_scheme)

• • Choose the background and text colors based on the theme’s color schemes.

             1. Cart Content & Features

• • Cart Header
    • Displays the cart title.
    • Includes a "Continue Shopping" link → redirects to all products.

             2. Cart Items Table

1. • Shows all products in the cart with:
     • Image (linked to product page).
     • Title + variant info (if not "Default Title").
     • Unit Price (final price, with discounts applied).
     • Quantity Controls (plus, minus, manual update disabled but managed via JS).
     • Remove Button (removes item instantly).
     • Line Total (price × quantity).

               3. Empty Cart State

• • If no items → shows a message + “Continue Shopping” button.

               4. Cart Extras

• • Order Notes
    • Textarea for customers to leave special instructions (stored as cart.note).

              5. Discount Code Input

• • Simple discount code field.
  • On submit → redirects to cart with discount applied (/cart?discount=CODE).

             6. Cart Totals

• • Estimated Total → displays cart.total_price.
  • Tax Note → displays theme translation string (cart.tax_note).
  • Checkout Button → proceeds to checkout.

Configuration:-

⚙️ Section Settings

1. Heading (heading)
   • Text that appears above the grid of collections.
   • Optional → If left blank, no heading is shown.
2. Sort Collections (sort)
   • Controls the display order of collections:
   • Alphabetical (A → Z)
   • Alphabetical (Z → A)
   • Newest first (date-desc)
   • Oldest first (date-asc)
   • Product Count (High → Low)
   • Product Count (Low → High)
3. Image Ratio (image_ratio)
   • Adjusts the aspect ratio of collection images:
   • Square (1:1)
   • Portrait (3:4)
   • Landscape (4:3)
4. Columns (columns)
   • Choose number of columns for desktop (2–6).
5. Mobile Columns (mobile_columns)
   • Choose number of columns for mobile (1 or 2).

Configuration:

Output:

🧱 Collection Blocks

1. Collection (collection)
   • Select the Shopify collection you want to feature in this block.
2. Image (image)
   • Optionally upload a custom image for this collection. If left blank, the collection's default image will be used.
3. Title (title)
   • Add a custom title for the collection (optional). If left blank, the collection name will be used.

Configuration:

Preview:

⚙️ Section Settings

1. Heading (heading)
   Enter a title for the section, e.g., "Shop by Category" or "Explore Collections".
2. Image Ratio (image_ratio)
   Choose the shape of the collection images:
   • Square – images are equal width and height
   • Portrait – taller images
   • Landscape – wider images
3. Heading Size (heading_size)
   Controls the size of the section heading:
   • Small, Medium, Normal (default), Large, XLarge, XXLarge
4. Columns (columns)
   Choose how many collection items appear per row on desktop:
   • Minimum: 2, Maximum: 6
   • Default: 4
5. View All Button (view_all_button)
   Toggle the "View All" button for the collections:
   • Checked → Display a "View All" button linking to the collections page
   • Unchecked → No button
6. Color Scheme (color_scheme)
   Set the color scheme for the section background and text according to your theme presets.
7. Mobile Layout
   Choose how many collections appear per row on mobile devices:
   • 1 or 2 columns

   This ensures your collections look clean and readable on smaller screens.

8. Section Padding
   Adjust the spacing around the section:
   • Padding Top (padding_top) – Control the space above the section. Default: 36px
   • Padding Bottom (padding_bottom) – Control the space below the section. Default: 36px

   Create breathing space between this and other sections.

🧱 Collection Blocks

You can add multiple collections in this section. Each block has the following settings:

1. Collection (collection) – Select the Shopify collection you want to feature in this block.
2. Image (image) – Optionally upload a custom image for this collection. If left blank, the collection's default image will be used.
3. Title (title) – Add a custom title for the collection (optional). If left blank, the collection name will be used.

Each block will display the collection image, title, and link automatically.

Configuration:

Preview:

⚙️ Section Settings

       1.Default Banner (default_banner)

• • Uploaded → Used as fallback when collection has no image.

  • Empty → No banner shown if collection has no image.

     2.Custom Title (custom_title)

• • Added → Custom title text replaces collection title.

  • Empty → Shows default collection.title.

     3.Color Scheme (color_scheme)

• • Controls background + text palette overlay.

     4.Banner Height – Desktop (banner_height_desktop)

• • Controls fixed height (200–800px).

     5.Banner Height – Mobile (banner_height_mobile)

• • Controls fixed height (150–600px).

      6.Spacing – Desktop

• • Margin Top / Bottom → Outside spacing (0–200px).

      7.Spacing – Mobile

• • Margin Top / Bottom → Outside spacing (0–100px)

Preview:

Configuration :

⚙️ Section Settings

            1. Title & Header

• • Title (title) → Main section heading.

  • Show View All (show_view_all) → Checkbox to toggle “View All” link.

  • View All Text (view_all_text) → Customizable label for the link.

            2. Collection & Products

• • Collection (collection) → Select which collection to feature.

  • Products Limit (products_limit) → Max number of products shown.

  • Products Per Row (products_per_row) → Number of products per row (grid or carousel visible items).

             3. Layout

• • Show Carousel (show_carousel)

  •  ON → Products display in a slick-style carousel (.carousel-slick).

  •  OFF → Products display in a static grid layout.

             4. Design & Colors

• • Color Scheme (color_scheme) → Select theme color scheme.

             5. Spacing – Desktop

• • Margin Top Desktop (margin_top_desktop)

  • Margin Bottom Desktop (margin_bottom_desktop)

  • Padding Top Desktop (padding_top_desktop)

  • Padding Bottom Desktop (padding_bottom_desktop)

             6. Spacing – Mobile

• • Margin Top Mobile (margin_top_mobile)

  • Margin Bottom Mobile (margin_bottom_mobile)

  • Padding Top Mobile (padding_top_mobile)

  • Padding Bottom Mobile (padding_bottom_mobile)

Preview:

Configuration :

⚙️ Section-Level Settings

         1. Heading (heading)

• • Title shown above the tab section.

         2. Title Alignment (title_alignment)

• • Aligns heading text → left, center, or right.

         3. Tab Alignment (tab_alignment)

• • Aligns the tabs row → left, center, or right.

         4. Products Limit (products_limit)

• • Number of products shown inside each tab.

  • Example: 8 → max 8 products per collection.

         5. Show “View All” (show_view_all)

• • ON → Shows a “View All” link below the products.

  • OFF → Hides it.

         6. View All Text (view_all_text)

• • Custom label for the “View All” link (e.g., Shop Now, Browse Collection).

         7. Spacing – Desktop

• • Margin Top Desktop (margin_top_desktop) → space above section.

  • Margin Bottom Desktop (margin_bottom_desktop) → space below section.

  • Padding Top Desktop (padding_top_desktop) → inside spacing at top.

  • Padding Bottom Desktop (padding_bottom_desktop) → inside spacing at bottom.

         8. Spacing – Mobile

• • Margin Top Mobile (margin_top_mobile)

  • Margin Bottom Mobile (margin_bottom_mobile)

  • Padding Top Mobile (padding_top_mobile)

  • Padding Bottom Mobile (padding_bottom_mobile)

  • Note: These work the same way as desktop spacing but apply only on mobile.

        9. Color Scheme (color_scheme)

• • Applies your theme’s background + text palette to this section.

🧱 Block-Level Settings (per tab)

Each tab is one block → collection_tab_item

          1. Tab Title (tab_title)

• • The text shown on the tab button.

           2. Collection (collection)

• • The Shopify collection linked to that tab.

  • Products from this collection are displayed inside the tab content.

Configuration :

Preview :

⚙️ Section Settings

          1.Heading (heading)

• • Controls the title above the category list.
    

  • Icon (menu.svg) is displayed before the heading.
    

          2.Color Scheme (color_scheme)

• • Controls text and background colors based on theme color schemes.
    

          3.Spacing – Desktop

• • Margin Top / Bottom → Outer space above/below section (0–200px).
    

  • Padding Top / Bottom → Inner space within section (0–200px).
    

         4.Spacing – Mobile

• • Margin Top / Bottom → Outer space above/below section (0–100px).
    

  • Padding Top / Bottom → Inner space within section (0–100px).
    

📦 Blocks – Categories

         1. Each block = one category link:

• • Collection → Select a collection to link to.
    

Custom Name → Override default collection title (optional).

Preview :

⚙️ Section Settings

1. Padding Top (padding_top)
   • Adjusts the top spacing inside the section (0–200px).
2. Padding Bottom (padding_bottom)
   • Adjusts the bottom spacing inside the section (0–200px).
3. Color Scheme (color_scheme)
   • Controls the background and text colors based on the theme’s available color schemes.

Preview:

⚙️ Section Settings

1. Heading
   • A customizable heading displayed at the top of the search page (e.g., "Search Results").
2. Color Scheme (color_scheme)
   • Applies theme-defined background and text colors.
3. Section Padding
   • Controls top and bottom spacing of the section.
   • Different values can be set (0–160px).

Preview:

⚙️ Section Settings

1. Color Scheme (color_scheme)
   • Controls background, text, button, and input colors using the theme’s color scheme system.
2. Heading (heading)
   • Main title displayed on the password page (e.g., “Opening Soon”).
3. Subtitle (subtitle)
   • Optional text below the heading (can describe store launch details, announcements, etc.).
4. Password Label (label)
   • Text label shown above the password input field (e.g., “Enter store password”).
5. Button Text (button_text)
   • Text inside the submit button (e.g., “Enter”, “Unlock”, “Submit”).

Preview:

1. Gift Card Balance
   • Displays the value of the gift card.
   • If Currency code setting is enabled, the balance is shown with currency (e.g., USD $50).
   • If the gift card is expired or disabled, an “Expired” badge is displayed.


2. Expiration Date
   • If the gift card has an expiration date, it is displayed in a readable format, e.g., “Expires on December 31, 2025”.


3. Custom Logo (settings.logo)
   • If a logo is uploaded, it will appear on the gift card.


4. Default Image
   • If no logo is uploaded, a default gift card image is displayed (card.svg).


5. Shop Name
   • Displays the store name associated with the gift card.


6. Gift Card Instructions
   • Shows text: “Use this gift card at checkout to redeem its balance.”


7. Gift Card Code (gift_card.code)
   • The unique code for redeeming the gift card is prominently displayed.


8. QR Code
   • Automatically generated QR code representing the gift card identifier for easy scanning.
   • Uses vendor/qrcode.js for QR code generation.
   • Accessible alt text is provided: “Gift card QR code”.


9. Pass URL (gift_card.pass_url)
   • If available, a button appears allowing customers to add the gift card to Apple Wallet.


10. Copy Code Button
    • Copies the gift card code to the clipboard.
    • Displays a success message with a check icon: “Code copied!”


11. Shop Now Button
    • Redirects the customer to the store’s homepage (shop.url) to start shopping.


12. Custom Fonts
    • Body Font – regular, bold, italic, bold-italic
    • Heading Font – family, style, weight


13. Color Variables
    • Used for background, text, buttons, shadows, badges, etc., ensuring consistency with your store’s theme.


14. ARIA attributes are used for buttons and messages.
15. Hidden span provides context for screen readers: “Opens in a new window”.
16. QR code includes accessible alt text.
17. Displays the gift card balance and expiration at the top.
18. Shows a logo or default image for the gift card.
19. Provides instructions and shop name for context.
20. Displays the unique gift card code along with a QR code for scanning.
21. Optional Apple Wallet integration is supported.
22. Provides buttons for copying the code or shopping immediately.
23. Fully responsive and styled according to theme settings for fonts, colors, and layout.

Preview:

⚙️ Section Settings

1. Layout (layout)
   • Choose how blog posts are displayed:
   • Grid → Articles appear in a structured grid.
   • Collage → Articles appear in a mixed layout with varied sizes.
2. Feature Image (feature_image)
   • Toggle on/off to show or hide featured images for blog posts.
   • If enabled, images display according to selected height.
3. Image Height (height)
   • Controls featured image display size. Options:
   • Adapt to image → Keeps original proportions.
   • Small / Medium / Large → Fixed heights.
4. Show Date (show_date)
   • Toggle on/off to display the article publish date.
5. Show Author (show_author)
   • Toggle on/off to display the article author name.
6. Spacing Controls
   • Desktop:
   • margin_top_desktop, margin_bottom_desktop, padding_top_desktop, padding_bottom_desktop
   • Mobile:
   • margin_top_mobile, margin_bottom_mobile, padding_top_mobile, padding_bottom_mobile
7. Color Scheme (color_scheme)
   • Choose a theme-defined color scheme for the section background and text.

Configuration:

Preview:

⚙️ Section Settings

1. Spacing Controls
   • Separate controls for desktop and mobile:
   • Margin Top & Bottom
   • Padding Top & Bottom
2. Color Scheme (color_scheme)
   • Applies theme-defined background, text, and button colors.

🧱 Block Settings (per Feature Item)

You can customize each block in the Theme Editor:

1. Image
   • Displays the feature image or icon.
   • Height options: adapt to image, small, medium, large.
2. Heading
   • Shows the feature title text.
   • Supports plain text (no HTML formatting).
3. Description
   • Displays a short description or supporting text below the heading.
   • Content is rendered in plain text (strip_html applied).
4. Link
   • Adds an optional link button under the feature item.
   • Clicking takes the user to a chosen URL or page.

Configuration:

Preview:

⚙️ Section Settings

          1. Main Menu (main_menu)

• • Choose the navigation menu that will display in the header.

  • The menu items are managed under Online Store → Navigation in your Shopify admin.

  • Desktop Logo (desktop_logo)
    Upload your store’s main logo for desktop devices
    

  • Alternate Logo (alternate_logo)
    Optional secondary logo (often used for transparent headers or sticky states).

            2. Layout & Behavior

• • Sticky Header (sticky_header)

    • ON → Header stays fixed at the top while scrolling.

    • OFF → Header scrolls away with the page.

                   1. Header Transparency (header_transparency)

• • • ON → Header background is transparent (useful for hero banners).

    • OFF → Header uses the color scheme background.
      

                    2. Menu Event (menu_event)

• • • Hover → Dropdowns open when hovering over a menu item.

    • Click → Dropdowns open only when clicked.

                     3. Logo Size (logo_size)

• • • Adjusts the size of your logo in pixels (between 50px–150px).

                     4. Header Bottom Margin (header_bottom_margin)

• • • Adds spacing below the header (0–100px).

    • Useful if you want space before the page content starts.

                     5. Padding (Top & Bottom)

• • • Padding Top (padding_top) → spacing above header content.

    • Padding Bottom (padding_bottom) → spacing below header content.

    • Both range from 0–100px.

                   3. Menu Display Style

• • • Menu Behavior (menu_behavior)

      • Dropdown → Standard dropdown menu.

      • Mega Menu → Wide menu layout with multiple columns (useful for larger catalogs).

                   4. Internationalization

• • • Show Country Selector (show_country_selector)

      • ON → Adds a country selector (for currency switching).

      • OFF → Hides it.

    • Show Language Selector (show_language_selector)

      • ON → Adds a language selector.

      • OFF → Hides it.

      (Requires multi-language setup in Shopify.)

                  5. Design Settings

• • • Color Scheme (color_scheme)
      Choose a predefined color scheme from your theme (e.g., dark, light, custom).

                  6. Blocks

• • • @app block → Placeholder for third-party app integrations (like search, cart drawer, announcement bars).

                  7. Presets

• • • Makes it easy to add the Header with default settings in the Shopify editor.

                   8. How This Section Works

• • • Displays your logo(s), navigation menu, and optional selectors.

    • Allows flexible control over positioning, spacing, and behavior (sticky, transparency, menu event).

    • Supports dropdowns or mega menus depending on your needs.

    • Lets customers switch country or language directly from the header.

⚙️ Section Settings

• Color Scheme (color_scheme)
  • Applies theme color palette (background + text).

• Background Style (section_background)
  • solid → solid color background.
  • gradient → gradient background (uses theme gradients).

• Auto Rotate (auto_rotate)
  • ON → slides auto-rotate like a slideshow.
  • OFF → user swipes/clicks manually.

• Change Every (slide_interval)
  • Time between slides (in seconds).
  • Example: 5 → slide changes every 5 seconds when auto-rotate is on.

• Slide Direction (slide_direction)
  • horizontal → swipes left ↔ right.
  • vertical → swipes up ↕ down.

• Desktop Height (desktop_display)
  • Controls banner height on desktop.
  • Options: fixed (250px → 750px) or fullscreen.

• Mobile Height (mobile_height)
  • Controls banner height on mobile.
  • Options: fixed (200px → 750px) or fullscreen.

• Spacing – Desktop (top_space_desktop, bottom_space_desktop)
  • Adds extra space above/below the hero on desktop.

• Spacing – Mobile (top_space_mobile, bottom_space_mobile)
  • Adds extra space above/below the hero on mobile.

🧱 Blocks (Slide Settings)

        Each slide block includes settings for media, text, layout, and buttons.

         1. Media

• • Desktop Image (desktop_image) – shown on desktop.
  • Mobile Image (mobile_image) – shown on mobile.
  • Overlay Opacity (overlay_opacity) – optional dark/light overlay (0% = none, 100% = fully covered).

         2. Text Content

• • Subheading (subheading) – small top text.
  • Subheading Size (subheading_size) – xsmall → xlarge.
  • Heading (heading) – main title (supports [ ] for highlighted text with stroke effect).
  • Heading Tag (heading_tag) – HTML tag (H1, H2, div, span, etc.).
  • Heading Font Family (heading_font_family) – choose theme font family.
  • Markers Font Family (markers_font_family) – font for highlighted markers [ ].
  • Description (description) – supporting paragraph text.
  • Description Size (description_size) – control font size.

          3. Layout

• • Content Width (content_width) – small, medium, large, full.
  • Content Position (content_position) – top/middle/bottom + left/center/right.
  • Content Alignment (content_alignment) – align text left, center, or right.

          4. Buttons

• • Primary Button – label, link, size, style (solid, outline, animated, link).

•   How This Section Works

1. 1. Choose color scheme and background style.
   2. Adjust rotation, slide interval, and direction.
   3. Set desktop & mobile height and spacing.
   4. Add slides with media, text, layout, and buttons.
   5. Reorder slides in the editor for your desired sequence.
   6. Save and preview — your hero slider/hero banner is ready.

Configuration:

Output: