Features Breakdown: Footer (Smart) This section is a highly configurable, grid-based footer that supports menus, custom links, logos, and newsletters. It offers a clean layout system where blocks automatically stack or align based on available space, with specific options to force line breaks for complex designs.

1. Block Content Types

• Menu Block: Displays a standard Shopify navigation menu.

• Custom Links Block: Create a manual list of up to 5 links directly in the editor (Text + URL) without creating a Shopify navigation menu.

• Text / Logo Block: Displays a Logo (with adjustable width) or a Heading, followed by a Description and optional Social Media Icons. Supports internal linking for the logo/title.

• Newsletter Block: A signup form with a Heading, Description, Email input, and Subscribe button.

2. Grid & Layout Logic

• Flex Layout: Blocks naturally arrange themselves side-by-side.

• Line Breaks: Every block has a "Force Line Break" checkbox.

  • Usage: If checked, that block will span 100% width on Desktop, pushing subsequent blocks to a new row. This is perfect for creating multi-row footers (e.g., Logo on top row, Menus on second row).

• Alignment: Global control to align all content to the Left, Center, or Right.

3. Styling & Colors

• Section Colors: Custom pickers for the Background, Text, Links, and Borders.

• Typography:

  • Fonts: Use the global Theme Font or force specific Custom Fonts for Headings and Body text.

  • Sizes: Independent sliders for Desktop and Mobile font sizes for every element (Headings, Links, Text, Newsletter, Copyright).

• Newsletter Design: Full control over Input Field styling (Background, Text, Border) and Button styling (Colors, Radius).

4. Bottom Bar (Copyright)

• Copyright Text: A customizable text field (e.g., "All rights reserved").

• Payment Icons: Automatic display of payment methods enabled in your store settings.

• Layout: Stacks vertically on Mobile, aligns horizontally on Desktop.

5. Spacing & Visibility

• Padding Matrix: Precise control over Top/Bottom padding and Side margins with separate values for Mobile and Desktop.

• Grid Gaps: Adjust the spacing between columns/blocks.

• Device Targeting: Options to hide the entire footer on Mobile Only or Desktop Only (useful if you have separate mobile/desktop footer sections).