Customizing the Footer Mega Menu Section

Customizing the Footer Mega Menu Section

For any website, the menu does more than just list pages — it guides shoppers, shapes their journey, and helps turn visits into purchases.
That’s why a clear, well-structured menu is essential to both user experience and store performance.

Tapita Sticky Footer Mega Menu Section is a modern, fixed-position navigation tool that anchors to the bottom of the screen. Designed with mobile-first stores in mind, it allows you to display a clean, scroll-free menu packed with customizable content blocks — including product links, blog posts, social icons, image galleries, and more. This section helps streamline user journeys by keeping essential navigation always within thumb’s reach.

Footer Mega Menu Section Customization
​
For instructions on how to add a Footer Mega Menu Section to your store, please refer to the Getting Started guide for Tapita Theme Sections Builder.
After adding your desired Footer Mega Menu Section to your store, you can customize its content as follows within the Shopify Theme Editor:

1. Menu Settings Configuration

Step 1: Container Styling Configuration
  1. Background Color
    1. Set the background of the entire footer menu.
    2. Enter HEX or RGBA color code (e.g., #FFFFFF for white).
  2. Border Radius
    1. Adjust the roundness of the container's corners.
    2. Enter a pixel value. Use 0 for square corners or values like 12 for soft rounded edges.
  3. Vertical Padding / Horizontal Padding
    1. Add internal spacing above/below and left/right of the footer container.
    2. Enter values in pixels (e.g., 12). More padding gives more space inside the section.
  4. Space Between Items
    1. Control the gap between each menu item inside the footer.
    2. Enter pixel value (e.g., 20) to space items evenly.


Step 2: Menu Item Styling
  1. Text Color / Hover Text Color / Active Text Color
    1. Define the color of menu item labels in normal, hover, and active states.
    2. Enter HEX values like #333333 (default), #3D4D43 (hover), #FFFFFF (active).
  2. Background Color / Hover Background Color / Active Background Color
    1. Set the background behind each menu item. Use transparent or solid colors for different states.
    2. Use HEX (e.g., #58CC001A) or RGBA for hover/active effects.
  3. Border Radius: Round the corners of individual menu items.
  4. Vertical Padding / Horizontal Padding
    1. Control the spacing inside each menu item for better clickability.
    2. Enter pixel values such as 8 for vertical and 12 for horizontal.
  5. Font Size / Font Weight
    1. Adjust how large and bold the text appears.
    2. Font size (e.g., 12) in pixels; font weight (e.g., Medium or Bold).



Step 3: Icon Styling
  1. Icon Width / Height
    1. Set the size of icons inside menu items.
    2. Enter values in pixels.
  2. Icon Background Color / Hover / Active
    1. Define background color for icons across all states.
    2. Use transparent for minimal design or add solid/soft colors.
  3. Icon Border Radius / Padding / Margin
    1. Customize spacing and shape of each icon container.
    2. Enter pixel values. Use 0 for square or add padding/margin for spacing.
  4. Icon Filter / Hover Filter / Active Filter: Apply visual CSS filters to icons like brightness or color shifts.
  5. Icon Hover Transform / Active Transform: Add scale or rotation effects to icons on hover and active states.


Step 4: “See More” Button Styling
  1. Text Color / Hover Text Color
    1. Set the color of the “See More” label and its hover state.
    2. Use brand-matching HEX colors (e.g., #0066CC → #0052A3).
  2. Background Color / Hover Background Color: Adjust background of the button to match your theme’s tone.
  3. Font Size / Font Weight: Set the size and thickness of the button’s text.
  4. Container Padding / Border Radius: Define internal spacing and border rounding for the entire button area.
  5. Button Padding (Vertical / Horizontal): Control spacing within the “See More” clickable area.
  6. Button Background Color / Hover Background Color


Step 5: Mobile Settings Configuration
Mobile Modal Direction: Choose how the expanded modal appears when a user taps the menu on mobile.



2. Menu Block Configuration

Each block represents one clickable menu item (e.g., Home, Shop, Collections). You can customize each block independently in terms of appearance, layout, and content.
General Block Settings
  1. Block Label: Displays as the main text label for the menu item.
  2. Block Icon: Upload an image icon to appear next to the label. Optional but helpful for visual navigation.
  3. Icon Width / Icon Height: Set the size of the icon for this block specifically (in pixels), overriding global settings.
  4. Background Color: Set the background color of this individual menu item. Enter a hex code (e.g., #FFFFFF) or use the color picker.
  5. Vertical Padding: Add top and bottom spacing inside the menu item. Enter pixel values (e.g., 12px) to increase the clickable area.
  6. Horizontal Padding: Add left and right spacing inside the menu item. More padding increases spacing between text/icon and edges.



Blog Block Configuration: Showcase recent posts from your store’s blog to educate, inspire, or promote new ideas and content.
  1. Block Title: Add a main heading and optional subtitle to introduce this blog section.
  2. Select Blog: Choose which blog (from your Shopify blog list) to pull posts from.
  3. Total Number of Posts to Display: Set how many blog posts appear in this block.
  4. Position of Highlighted Post: Select which blog post should be emphasized visually (e.g., 1 = first post).
  5. Blog Layout: Choose how posts are displayed:
    1. Row: horizontal scroll layout
    2. Column: stacked vertical layout
  6. Width of Highlighted Post: Adjust how much space the highlighted post takes relative to others (percentage value).
  7. See More Button:
    1. Optionally display a button linking to your full blog or specific articles.
    2. Customize the text and destination link.




Information Block: Great for presenting services, brand features, or store highlights with supporting visuals and descriptions.
  1. Block Title: Set a heading and optional subtitle for this information group.
  2. Desktop / Mobile Layout: Choose how many info items to show per row on desktop and mobile (e.g., 3 on desktop, 2 on mobile).
  3. Image Aspect Ratio (Desktop / Mobile): Define how tall or wide the images should be:
  4. Information Items 1–6. Each item contains:
    1. Image – Upload an icon or image to visually represent the content.
    2. Title – Main heading for the item.
    3. Short Description – Supporting text below the title.
    4. URL – Link to any internal or external page; the whole item is clickable.
  5. See More Button: Optionally include a button at the bottom of the block with custom text and link.




Navigation Block: Add grouped navigation links, each with an icon and label. Ideal for categories, landing pages, or customer service links.
  1. Block Title & Subtitle: Introduce the group of navigation links with a heading and optional description.
  2. Navigation Items 1–8. Each item includes:
    1. Icon – Optional; upload a custom image to act as a visual cue.
    2. Label – Main text, like "Shop T-Shirts."
    3. Short Description – Additional info under the label (optional).
    4. URL – Set the destination link.
  3. See More Button: Option to add a CTA with custom link and label.



Image Gallery Block: Display high-impact visuals like brand imagery, promo banners, or seasonal graphics in a scrollable or grid format.
  1. Block Title & Subtitle: Optional section heading and description.
  2. Desktop / Mobile Layout: Define how many images are shown per row depending on device type.
  3. Image Aspect Ratio (Desktop / Mobile). Customize image proportions:
  4. Image Fit: Choose how images scale to their containers:
    1. Cover – Fill container, may crop image
    2. Contain – Fit entirely within container
    3. Fill – Stretch image to fill container
  5. Banners 1–6: Upload up to 6 images. Each can be linked to any URL, such as a product, collection, or landing page.
  6. See More Button: Optional CTA that directs customers to related content or a dedicated landing page.



Product Block: Display Shopify products pulled directly from one of your collections, right inside your footer menu.
  1. Block Title & Subtitle: Optional heading and description to introduce the featured products.
  2. Collection: Select the Shopify collection you want to showcase products from.
  3. Number of Products to Display: Set how many items from the collection to show.
  4. Desktop / Mobile Layout: Define how many product cards appear per row on different device types.
  5. See More Button: Optional button to direct users to the full collection page or a product landing page. Customizable text and link.



Social Block: Add clickable icons that link to your store’s social media channels.
  1. Block Title & Subtitle: Introduce the social section with a title like “Follow Us” or “Connect.”
  2. Desktop / Mobile Layout: Specify the number of social icons per row for each device type.
  3. Icon Size Settings (Desktop / Mobile): Adjust how large the icons appear, measured in pixels.
  4. Social Items 1–6. Each item includes:
    1. Icon – Upload your own or use pre-designed icons.
    2. Label – Platform name (e.g., Facebook, TikTok).
    3. URL – Link to your profile or channel.
  5. See More Button: Optional CTA that links users to a full social hub, newsletter sign-up, or community page.



After completing your block configurations, your Footer Mega Menu will offer a rich, branded, and intuitive user experience — keeping your key navigation elements just a tap away, especially on mobile.
If you have any questions or need additional support, don’t hesitate to reach out to the Tapita team.

    • Related Articles

    • Customizing the Mega Menu Section

      For any website, the menu does more than just list pages — it guides shoppers, shapes their journey, and helps turn visits into purchases. That’s why a clear, well-structured menu is essential to both user experience and store performance. Tapita ...

    • Customizing the Testimonial Section

      Testimonial Section Overview In Shopify stores, displaying customer testimonials is essential for building trust and social proof. Tapita's Testimonial Section provides a modern and visually appealing way to highlight these testimonials, enhancing ...

    • Customizing the FAQ Section

      FAQ Section Overview In Shopify stores, FAQ sections are commonly used to address customer inquiries, reduce support requests, and improve the overall customer experience by providing quick access to answers for frequently asked questions. Tapita's ...

    • Customizing the Video Section

      Video Section Overview In Shopify stores, video sections are powerful tools for showcasing products, tutorials, testimonials, and more. Tapita's Video Section provides a dynamic hub for this multimedia content, offering users a rich and engaging ...

    • Customizing the Badges Section

      Badges Section Overview In Shopify stores, badge sections are often used to highlight key product attributes, promotions, or trust signals to potential customers. These visual cues can draw attention to specific products and ultimately contribute to ...