Setting Up a Footer for an Online Store

Setting Up a Footer for an Online Store

Setting Up a Footer for an Online Store

The footer section of an e-commerce site (online store) is essential for providing additional information, navigation links, and customer contact details. FTx Commerce provides the features to let the business owner/store admin personalize the footer section by managing CMS pages, in-built app pages, menus, and social media links.

Figure 1 - Footer Menu of Online Store
In this KB article, we have covered how to personalize the footer for your e-commerce site in a custom way so the retailers can share some informative content or additional policies as CMS pages.

1. Customize/Personalize Footer Section

As retailers/store admin, you can customize the footer section through the store admin backend. The placement of the footer section setup will vary depending on whether multi-brand is disabled or enabled.

Figure 1.1 - Reaching Footer Menu - Standalone Store or Multi-Brand Store Inside a Specific Brand

1.1 For Standalone Online Store

When the multi-brand option is disabled in Control Center, you have only a single online store/site for your business. Follow the below steps to customize the footer menu:
  1. Step 1: Log into Store Admin
  2. Step 2: Click Settings -> Store Appearance
  3. Step 3: Click Manage Footer Menu

1.2 For Multiple Online Brand Stores

When the multi-brand option is enabled from the Control Center side, the Footer Menu can be set up individually for each online brand store.
Follow the below steps to customize the footer menu for the individual brand store:
  1. Step 1: Log into Store Admin
  2. Step 2: Click Online Brand Stores
  3. Step 3: Click the Settings icon for the Online Brand Store
  4. Step 4: When you open the specific store, find the Store Appearance menu in the header.
  5. Step 5: Click Manage Footer Menu
Note: Whether multi-brand is enabled or disabled, the steps for customizing and personalizing the Footer Menu will be the same.


Figure 1.2 - Footer Menu Settings

The three options — Manage CMS Page, Manage Footer Menu, and Social Platforms — work together to help you complete the full setup of your online store's footer.
To build a fully functional footer, you’ll need to configure your custom CMS pages, define the footer menu links, and add your social platform URLs.

2. Manage CMS Pages

You can customize and manage the CMS pages that appear in the footer section of your online store. These pages can be grouped under specific footer menus.
By clicking “Pages Management,” you will be redirected to the CMS Pages listing screen. Some default pages will already be available.

Figure 2.1 - CMS Pages

Creating a CMS Page
  1. Click “ADD PAGE.”
  2. A panel titled “Add Page” will open, where you can enter all necessary details for your CMS page.
  3. A content formatter is also provided to help you format the page content properly.
  4. After entering the details, click "Save."

Figure 2.2 - Adding a CMS Page

The newly created page will appear in the listing, where you can edit or delete it anytime.

Figure 2.3 - Manage CMS Page
    Once your CMS pages are created, they can be used while setting up the Menus for the footer.

    3. Manage Footer Menu

    By clicking “Manage Footer Menu,” you will be redirected to the Menus page. This page includes two main sections: Menus | Footer Menu.
    To configure the footer:
    1. First, create menus with menu items.
    2. Then, assign these menus to footer columns under the Footer Menu section.

    Figure 3.1 - Manage Footer Menu

    3.1 Menus

    A Menu acts as a menu title, and the items you add under it will appear below that title in the footer.

    3.1.1 Adding a Menu with Menu Items

    To add a new menu:
    1. Click “ADD MENU.” A slider panel will open.
    2. Enter the Menu Title.
    3. Click “Add Item” to add menu items (each item is a row under the menu).
    4. Add the Menu Title that will be the main title, and the menu items will be listed row-wise.

    Figure 3.1.1.1 - Add a New Menu for Footer

    -> For each item, enter:
    1. Title – The actionable label shown to customers.
    2. Type – The action triggered when customers click the title. Available types:
      1. Text – Enter a short description.
      2. CMS Page – Select from the CMS pages created in Manage CMS Pages.
      3. Link – Add any external URL.
      4. App Page – Choose from the built-in app pages: Cart, Find Store, Account, Favorites, and Home.
      5. Legal – Select from legal policies added under Legal: Review Policy, Refund Policy, Privacy Policy, and Terms of Service.
    -> If you select "CMS Page" as the type, choose the desired page. Customers will be redirected to that page in a new tab.

    Figure 3.1.1.2 - Menu Item Selection

    3.1.2 Mobile UI - Custom Menu Items

    Custom Menu Items allow retailers to choose which footer links customers can see when using the online store on a mobile device.

    Show a Custom Menu Item on Mobile

    1. Open the Footer Menu settings.
    2. Locate the required custom Menu Item.
    3. Click Edit Menus.
    4. Tick the "Enable for Mobile UI" checkbox.
    5. Click "Save."

    Figure 3.1.2.1 - Enable for Mobile UI


    The Custom Menu Item is now available and can be displayed to the customers on the mobile device by opening the Hamburger menu icon located on the left side in the Mobile App (PWA).
    Custom Menu Items appear in the mobile footer according to their configured order.
    To stop a Custom Menu Item from appearing on mobile, untick the "Enable for Mobile UI" checkbox. Unticking the checkbox, the menu item is no longer displayed on the Mobile UI.

    Note: "Enable for Mobile UI" is applicable only to Mobile devices, while it won't impact the Web UI.

    Two types of columns are available for configuring the footer:
    1. Predefined Columns | 2. Customized Columns

    3.2.1 Manage Predefined Columns

    The predefined columns include Business Details and Get In Touch.


    Figure 3.2.1.1 - Predefined Columns

    The following information is available by default:

    Column 1: Business Details

    1. Business Logo
    1. Business Phone
    1. Business Email
    1. Store Locator
    1. Loyalty Program
    1. Get In Touch
    Column 2: Get In Touch (Customer Support Info)
    1. Customer Support
    2. Customer Support Phone
    3. Customer Support Email
    4. Gift Cards
    5. Connect With Us
    1. Note for the “Business Details” Column:
    1. Business Details: The values displayed in this column are fetched directly from the Control Center.
    1. Logos: Store logos used in these sections are fetched from Store Admin → Theme Settings.
    1. Loyalty Program: If white-labelled LNS is enabled and configured for FTx Commerce, the loyalty program can be found.

    2. Note for the "Get In Touch" Column:

    1. Customer Support: Customer Support Page, Phone, and Email are displayed in a group, so whichever is in the first position, an entire group will be displayed in that position.
    1. Gift Cards: If gift cards are enabled and set up from Control Center, the customer can access the gift card section.
    1. Connect With Us: This section brings the enabled & configured social media platforms for quick access from the footer menu. If an entire social platform is disabled, the social media icons will be hidden in the footer menu.
    Predefined Columns Actions
    1. Information Record Selection

    "Adding information that needs to be displayed"

    Retailers can choose which information to display, remove information that is not needed, and change the display order. Once an item has been selected, it cannot be selected again in the same column. After five items are selected, the + (Add) option is disabled.


    2. Remove Information Record
    1. Click the X (remove) icon to clear the selection
    2. Click Delete to remove the item - an entire record section

    The item is removed from the footer and becomes available to select again. Any remaining items automatically move up to fill the empty position.


    3. Change Display Order

    You can change the order in which information appears in the footer.

    1. Click Drag Handle (Reorder Handler)
    2. Drag any record to the required position
    3. Drop it in the new position

    Figure 3.2.1.2 - Managing Information Records

    Click Save to save the predefined column. It will appear in the online store footer within a few minutes.

    3.2.2 Manage Customized Columns

    You can add up to four customized columns to define the menu structure for your footer.
    These columns will appear after the predefined columns and can be used to organize menus created under the Menus section.
    3. Now, you must assign created Menus under Customized Columns.
    1. Click “ADD COLUMN” to add a new footer column.
    2. Click “ADD Menu Items” to add a new menu for a column.
    3. Select the menu from the drop-down list you want to display in that column. You will see all menus created under the Menus section.
    4. Click the + icon inside the column to add more menus.
    Once completed, click "Save."
    4. Button Actions
    1. Reset To Default: Clears all menus and configurations applied in the Customized Columns, allowing you to rebuild the footer setup from scratch.
    2. Preview Footer: Displays a preview of how the footer will appear to customers on the online store.
    3. Reset: Reverts the footer configuration back to the last saved setup, removing only the unsaved changes.
    After clicking "Save," the footer will be displayed to customers exactly as configured for your online store.

    4. Social Media Platforms

    You can enable and display links to your active social media pages in the footer.

    Supported platforms: Facebook | Instagram | Pinterest | Twitter | YouTube

    Enter the respective page/account links and save the changes. These icons will then appear in the store footer.


    Figure 4.1 - Store Appearance -> Social Platforms

    5. Online Store View

    The Footer Menu provides customers with quick access to store information, support links, policies, social media, and other configured pages on the online store.

    1. Web UI – Footer Menu

    The Footer Menu displays the following information based on Store Admin configuration:

    • Predefined Columns: Displays standard information based on the selected predefined menu options.
    • Custom Columns: Displays custom menu items configured under Manage CMS Page and Manage Footer Menu.
    • Social Media: Displays enabled social media icons configured under Social Platforms and selected for the Footer Menu.
    • Accepted Payment Methods: Displays payment gateway and card icons based on the enabled Payment Gateway Configuration.
    • Legal & Store Information: Displays configured Disclaimer, Privacy Policy, Powered by, and copyright information.
    • The Disclaimer content is managed through the "Disclaimer" module in Store Admin.

    Figure 5.1 - Footer Section

    2. Mobile UI (PWA) - Main Menu Access

    Most of the customer-facing information configured for the Web UI Footer Menu can also be made available through the Mobile UI Main menu. However, the Mobile UI presents these options as menu sections and expandable columns to provide a mobile-friendly navigation experience.

    Custom menu items are displayed under the relevant menu section, such as Store Info & Support, when "Enable for Mobile UI" is selected for the menu item.

    Figure 5.2 - Mobile View (PWA)
    Quote
    So, customizing the footer to reflect the business/store's brand identity and helpful details can enhance the user experience and build trust for your ecommerce site.