Features Breakdown: Collections Banner (Icon Slider)

This section functions as a hybrid Hero Banner and Collection Navigator. It features a main background image with a "Story-style" horizontal scroll of collection icons floating above or within the banner area, designed to drive traffic to specific categories immediately.

1. Media & Height Control

• Dual Image Support: Dedicated image uploads for Desktop and Mobile to ensure proper art direction and cropping on all devices.

• Advanced Height Modes: Three distinct methods to control section height, adjustable independently for Mobile and Desktop:

  • Aspect Ratio: Lock dimensions to standard formats (21:9, 16:9, 4:3, 1:1, 9:16, etc.).

  • Custom Pixel: Set a fixed height (e.g., 600px).

  • Auto: Allow the section to adapt naturally to the image's intrinsic height.

• Overlay: Adjustable black overlay opacity (0-100%) to ensure text and icons remain visible against bright backgrounds.

2. Collection Icon Slider (Bubble Navigation)

• Smart Layout: A horizontal list of circular icons (bubbles) that links to collections.

• Smart Alignment Logic: Automatically centers the icons if they fit on the screen, or left-aligns them to enable horizontal scrolling if they overflow.

• Visual Customization:

  • Sizes: Independent control over icon diameter for Desktop and Mobile.

  • Positioning: Adjust the vertical offset (distance from the top) to float the icons exactly where needed.

  • Borders & Gradients: Add a border ring around the bubbles. Supports solid colors or Custom Gradients(Dual color + Angle).

  • Labels: Customizable text labels with independent font size controls for mobile and desktop.

3. Typography & Content

• Responsive Sizing: Granular pixel-level control for Heading and Subheading sizes, separate for Mobile and Desktop.

• Alignment & Positioning:

  • Text Align: Left, Center, or Right.

  • Vertical Offset: A percentage slider (0-100%) to position the text block vertically without using spacers.

• Font Source: Option to inherit the Theme's global font or enforce a specific custom font family for this section.

4. Call-to-Action (Button)

• Styles: Choose between Solid (Fill), Outline, or Ghost styles.

• Gradient Support: The solid button background supports linear gradients with customizable start/end colors and angles.

• Layout:

  • Alignment: Independent alignment controls (Left/Center/Right) for Mobile and Desktop.

  • Width: Option to make the button "Full Width" on Mobile or Desktop.

• Design Details: Adjustable Border Radius, Border Width, Uppercase Text toggle, and Spacing (margin top).

5. Block Configuration

• Icon Blocks: Each block represents one collection bubble.

• Content: Image Picker (for the bubble), Collection Link (auto-fills URL), Custom URL override, and Custom Label text.

• Capacity: Supports up to 20 collection icons.