# Footer

The theme provides one footer type, but the section contains numerous blocks, elements, and common sections. You can combine them—add, remove, or reposition elements—to create completely different footer appearances. Here are some examples of footer looks you can achieve by adding general dynamic footer sections and own inner footer sections:

{% tabs %}
{% tab title="#1" %}

<figure><img src="https://1734026102-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKXAimBJFhRJImV3lJL36%2Fuploads%2FxSBiBsGzoGCQlo2HIji6%2Ff1.png?alt=media&#x26;token=710ae8e0-a634-4477-916d-6f304ab43d57" alt=""><figcaption></figcaption></figure>

To create such a footer, use the following **common dynamic sections**:

1. **Mobile sticky navigation**

* Provides quick access to main site areas on mobile devices.

2. **Text with icons type 2**

* Used to present key service highlights with accompanying icons, arranged horizontally.&#x20;

3. **Newsletter signup**

* A block encouraging users to subscribe, typically with a heading like "Join the Style Circle," a short description, an email input field, and a submit button. This section also includes user agreement text about the privacy policy and terms.

4. **Footer inner sections:**

* **Menu**: Lists primary site navigation links by category (e.g., Women, Men, Shoes, Accessories, Clearance, New Arrivals) and company links (About Us, Blog, Shipping & Returns, Payment, Warranty, Location, Contacts).
* **Banners**: Visual promotional images with text overlays linking to collections or new arrivals, for example, "New In Weekly" and "Style Starts Here."
* **Media with text:** Images paired with text content embedded within the footer, blending aesthetics and functional call-to-action.
* **Social**: Small icons linking to social media channels such as TikTok, Instagram, and YouTube, located around the newsletter signup area.

Additional footer details include currency and language selection, copyright with the current year and platform info, smaller navigational links like refund and privacy policies, and payment method icons at the bottom right corner.

Dynamic sections:  Mobile sticky navigation, Newsletter signup, Text with icons type 2.

Footer inner sections:  Menu, Banners, Media with text, Social.&#x20;

You can look at such footer type, for example, on Demo 1.
{% endtab %}

{% tab title="#2" %}

<figure><img src="https://1734026102-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKXAimBJFhRJImV3lJL36%2Fuploads%2FUxqL8IjFXNzfoXNfBBTq%2Ff2.png?alt=media&#x26;token=ecbe315f-09e0-4155-9d35-e3479f45da38" alt=""><figcaption></figcaption></figure>

#### Dynamic Sections

* **Mobile Sticky Navigation:**\
  The top part contains a horizontally scrollable navigation menu styled as outlined buttons with category tags, meant to stay visible ("sticky") on mobile devices for easy category access.
* **Tags:**\
  These are the clickable category buttons serving as quick filters or navigational tags on the website, each enclosed in a blue-outlined rounded rectangle.
* **Text with Icons Type 2:**\
  Below the navigation is a two-column horizontal section with icons and explanatory text.
* **Logo:**\
  At the bottom, the large text "wokiee" in bold, bright blue is prominently displayed, serving as the brand or site logo.

#### Footer Inner Sections

* **Menu:**\
  A footer menu with three vertical columns of links:
  * Collections (Women, Men, Shoes, Accessories, Clearance, New Arrivals)
  * Populars (Dresses, Jeans, Skirts, Bodysuits, Jackets, Swimwear, Footwear, Accessories)
  * Company info (About Us, Blog, Shipping & Returns, Payment, Warranty, Location, Contacts)
* **Media with Text:**\
  A contact information block featuring:
  * Phone number with an icon, open hours, address, and an email link.
  * A newsletter signup form with email input and a submission arrow button.
  * Privacy and terms notice under the signup.
* **Social:**\
  Social media icons are shown as black and white round icons.
* **Footer Bottom Bar:**\
  A narrow strip showing currency and language dropdowns, copyright notice, and multiple policies and legal links.\
  Payment method icons for some payment services - at the bottom right.

This organization clearly separates navigation, informational highlights, and full footer detail while emphasizing accessibility and user engagement points.

Dynamic sections: Mobile sticky navigation, Tags, Text with icons type 2, Logo.

Footer inner sections: Menu, Media with text, Social.

You can look at such footer type, for example, on Demo 3.
{% endtab %}

{% tab title="#3" %}

<figure><img src="https://1734026102-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKXAimBJFhRJImV3lJL36%2Fuploads%2FfLwlHNHI3ouvISxVOTsz%2Ff_d5.png?alt=media&#x26;token=c52a2a80-27cd-431f-8716-ab56d5595ca9" alt=""><figcaption></figcaption></figure>

#### Footer Inner Sections

**Media with Text**

* The left section contains the site logo followed by media/text elements, such as a contact phone number, working hours, and a physical address.
* This block provides essential business information and encourages direct contact, improving trust and accessibility.

**Menu**

* The center section displays two vertical navigation menus.
  * The first menu lists shop categories
  * The second menu lists informational links from store pages.
* These menus help users quickly access product categories and key informational pages from the footer area.

**Social**

* The right section contains a newsletter signup form with an email input, encouraging visitors to subscribe for updates and special offers.
* Beneath the subscription form are social media icons linking to modern platforms, promoting the shop's social presence.

This footer also features standard elements such as language and currency selectors, legal and policy links, and payment method icons.

Footer inner sections: Media with text, Menu, Social.

You can look at such footer type, for example, on Demo 5.
{% endtab %}

{% tab title="#4" %}

<figure><img src="https://1734026102-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKXAimBJFhRJImV3lJL36%2Fuploads%2FunQHjJ4PeZNNhd96jl51%2Ff_d11.png?alt=media&#x26;token=a4dd53a3-64c3-4bf7-8ddc-68c3d903b7e0" alt=""><figcaption></figcaption></figure>

This image shows a minimalist footer section, typically found at the bottom of a website, providing essential information and settings. It is designed to be a static part of the page (no inner or common dynamic sections), focusing purely on core links and configuration.

#### Inner Settings of the Footer

The footer can be broken down into the following key sections and elements:

* Localization/Currency Settings:
  * United States (US$): A dropdown menu allowing users to select their country/region and corresponding currency. \* English: A dropdown menu for selecting the website's language.
* Copyright and Platform:
  * 2025, unique-currency Powered by Shopify: Displays the copyright year, the store name (unique-currency), and the e-commerce platform it is hosted on, which is Shopify.
* Policy and Information Links: A series of mandatory or essential legal and customer service links:
  * Refund policy
  * Privacy policy
  * Terms of service
  * Shipping policy
  * Contact information
  * Legal notice
* Accepted Payment Methods: An array of logos/icons indicating the different forms of payment accepted by the store:
  * Visa
  * Mastercard
  * American Express (Amex)
  * Shop Pay (Shopify's payment method)
  * PayPal
  * Discover

The simplicity of this footer keeps the focus on functional links and essential business information.

You can look at such footer type, for example, on Demo 11.
{% endtab %}

{% tab title="#5" %}

<figure><img src="https://1734026102-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKXAimBJFhRJImV3lJL36%2Fuploads%2Fvi1tvILIKEahdarjgtvi%2Ff_d13.png?alt=media&#x26;token=094d9e0e-cf37-4c04-a1ab-4846d2e158aa" alt=""><figcaption></figcaption></figure>

This footer is characterized by its minimalist design, primarily relying on the section's inner settings for content and style, rather than utilizing common dynamic sections. It often features essential legal, policy, and functional links, along with currency/language selectors and payment method icons.

#### Footer Type: Minimalist Settings-Based Footer

Idea/Concept: The footer is intentionally basic, focusing solely on critical information and site functionality selectors. It minimizes visual clutter and relies on simple text links and icons. While it contains no dynamic "inner" or "common" sections (like menu blocks, social media blocks, etc., which are common in more complex footers), its presence is highlighted by utilizing a distinct `background color` setting in the section's configuration to ensure it stands out on the store, as suggested by the dark background in the image.

Description of Blocks (Content Elements):

1. Country/Region and Currency Selector:
   * Function: Allows the user to select their desired country/region (often implying currency) from a dropdown menu.
   * Content Example: "United States (USD) "
2. Language Selector:
   * Function: Allows the user to select the site's display language from a dropdown menu.
   * Content Example: "English "
3. Copyright and Power Information:
   * Function: Displays the current year, store name, and the platform the store is powered by.
   * Content Example: "2025, *\[store-name]* Powered by Shopify"
4. Policy and Informational Links (Inline Menu):
   * Function: A row of text links leading to crucial legal and customer service pages. This is typically configured as a single inline menu or individual text/link settings within the footer section.
   * Content Examples: "Refund policy," "Privacy policy," "Terms of service," "Shipping policy," "Contact Information," "Legal notice."
5. Accepted Payment Methods Icons:
   * Function: Visually displays the credit cards and payment gateways accepted by the store, building customer trust.
   * Content Examples: Icons for "VISA," "Mastercard," "American Express," "PayPal," "Discover," etc.
     {% endtab %}

{% tab title="#6" %}

<figure><img src="https://1734026102-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKXAimBJFhRJImV3lJL36%2Fuploads%2FFVnPgk8PnAGBdXoXqRLS%2Ff_d15.png?alt=media&#x26;token=144caf8e-e27d-4734-ba42-75bfadaafa94" alt=""><figcaption></figcaption></figure>

This footer design utilizes a classic e-commerce layout, prioritizing trust signals, email capture, and comprehensive navigation.

#### Dynamic sections

1. Text with icons type 1
   * Description: A set of promotional blocks used to highlight key store policies, benefits, and trust signals. Each block features an icon, a clear title, and a brief supporting description. This section is highly effective for reducing customer friction and conveying value.
   * Location: Positioned at the very top of the footer area, above all other main content sections.
   * Content:
     * Left Block: Focus on shipping (e.g., "Free Shipping on Orders Over $50").
     * Right Block: Focus on returns/guarantees (e.g., "Easy 30-day Returns").
2. Newsletter signup
   * Description: A prominent, dedicated section for capturing customer emails. It features a compelling title, a sub-header, a brief value proposition, and an email input field with a submission button.
   * Location: Located in the upper-left of the main footer body, serving as the first main content block below the text-with-icons section.
   * Content: Title ("Join the Style Circle"), Subtitle ("Newsletter Signup"), description ("Get exclusive offers, early access, and style inspiration."), and the email sign-up field.

#### Footer inner sections

1. Menu
   * Description: Multiple columns of navigational links, organized under relevant headings, designed to help users quickly access important store pages and information.
   * Location: Occupies the left-to-middle columns of the main footer body, situated below the newsletter signup.
   * Content: The design includes two distinct menu blocks:
     * Block 1 (Shop Categories): Links grouped by product category (e.g., Women, Men, Shoes, Accessories, Clearance, New Arrivals).
     * Block 2 (Information/Support): Links to essential store pages (e.g., About Us, Blog, Shipping & Returns, Payment, Warranty, Location, Contacts).
2. Grid of products
   * Description: A section showcasing a curated list of specific products, often bestsellers or new arrivals, to drive product discovery and impulse purchases directly from the footer.
   * Location: Positioned in the center-right of the main footer body, directly to the right of the navigation menus.
   * Content: A section title (e.g., "Bestsellers") followed by product previews that include an image, product name, and price, often with a link to view all items in that collection.
3. Banner
   * Description: A large, visually impactful advertisement used for major promotions, clearance events, or seasonal campaigns. It utilizes a high-impact image and clear overlaid text/discounts.
   * Location: Occupies the far right-hand column of the main footer body, acting as a strong visual element to conclude the content section.
   * Content: A full-height promotional image featuring a clear call-to-action and discount (e.g., "Massive Clearance," "70% OFF").
4. Social

   * Description: Icons that provide direct links to the store's social media platforms, encouraging customer engagement outside of the website.
   * Location: Placed in the upper-right area of the main footer, immediately adjacent to the Newsletter Signup input field.
   * Content: Icons for various platforms such as TikTok, Instagram, and a third social platform.

Dynamic sections:  Text with icons type 1, Newsletter signup.

Footer inner sections:  Menu, Grid of products, Banner, Social.&#x20;

You can look at such footer type, for example, on Demo 15.
{% endtab %}

{% tab title="#7" %}

<figure><img src="https://1734026102-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKXAimBJFhRJImV3lJL36%2Fuploads%2FYEH53vm3dNa44291lmu9%2Ff_d17.png?alt=media&#x26;token=61e68a56-75a7-4d70-b1b5-33e989dab3fa" alt=""><figcaption></figcaption></figure>

This footer has a solid black background, providing a strong, high-contrast base for the content.

The footer is structured into two main horizontal areas. The upper area contains the informational and engagement sections, and the lower area contains utility links, copyright, and payment methods.

#### Footer Inner Sections

The upper area of the footer is divided into three main sections: Menu, Recent Posts, and Sign-up/Social.

**1. Menu Section**

This section is located on the far left of the footer. It organizes key store information and navigation links into two columns of vertical lists.

* Left Column (Collections): Lists product categories or collection types.
  * Collections
  * Women
  * Men
  * Shoes
  * Accessories
  * Clearence (likely "Clearance")
  * New Arrivals
* Right Column (Company): Lists essential company and transactional pages.
  * Company
  * About Us
  * Blog
  * Shipping & Returns
  * Payment
  * Warranty
  * Location
  * Contacts

**2. Recent Posts Section**

This section is located in the center of the footer, to the right of the Menu section. It highlights the store's latest blog content.

* Displays the date and a title for the two most recent blog posts.
* Each post is accompanied by a small, relevant thumbnail image for visual appeal.
* Example posts shown:
  * July 08, 2025: How to Style One Piece in 5 Different Ways
  * July 07, 2025: How to Build a Timeless Wardrobe: Essentials for Every Season

**3. Sign-up / Social Section**

This section is located on the far right of the footer, dedicated to customer engagement.

* Sign-up: A prominent headline encourages e-mail subscription: "Sign up for our e-mail and be the first who know our special offers!".
  * An input field with an arrow button is provided for users to enter their email address.
  * A line of text clarifies consent: "By clicking the button you agree to the Privacy Policy and Terms and Conditions."
* Social: An area with icons linking to the store's social media profiles.
  * Includes icons for TikTok, Instagram, and YouTube.

#### Main Footer Utility Bar

The lower-most strip of the footer, running across the entire width, contains utility information.

* Currency/Language Selector: Dropdowns for users to select their preferred "United States (USD)" and "English."
* Copyright and Store Engine: Text indicating the copyright year and that the store is "Powered by Shopify."
* Utility Links: A horizontal list of essential legal and service links.
  * Refund policy
  * Privacy policy
  * Terms of service
  * Shipping policy
  * Contact information
  * Legal notice
* Payment Icons: A display of accepted payment methods, including Visa, Mastercard, American Express, PayPal, Discover, and others.

Footer inner sections:  Menu, Recent post, Social.&#x20;

You can look at such footer type, for example, on Demo 17.
{% endtab %}

{% tab title="#8" %}

<figure><img src="https://1734026102-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKXAimBJFhRJImV3lJL36%2Fuploads%2FeBCTNLKC7OoKZuC94JvV%2Ffd_18.png?alt=media&#x26;token=ec251778-4d3d-40ea-9305-53c632104bdc" alt=""><figcaption></figcaption></figure>

This footer uses a solid black background and focuses primarily on a central call-to-action (Newsletter Signup) and essential utility information.

#### Dynamic Sections

This footer design highlights two dynamic sections: Newsletter Signup (the main content block) and an implied Mobile Sticky Navigation (though not visible, its functionality is common with this layout style).

**1. Newsletter Signup Section**

This section dominates the center of the footer and is dedicated entirely to e-mail subscription.

* Location: Center-aligned in the large black space above the utility bar.
* Design Note: To achieve this distinct, centered design, developers should:
  * To achieve multiple distinct designs using the same block, enable the centering content option in the Newsletter block and apply a background color in the inner Footer settings (though in this case, the background is black).
* Content Description:
  * A smaller introductory title: "Newsletter Signup".
  * A prominent, large headline: "Join the Style Circle".
  * A central input field with an arrow button is provided for users to enter their email address. The field itself is a high-contrast dark gray against the black background.
  * A line of text below the input clarifies consent: "By clicking the button you agree to the Privacy Policy and Terms and Conditions."
  * Social Icons: Below the consent text, a small row of social media icons (TikTok, Instagram, and YouTube) is displayed, also center-aligned.

**2. Mobile Sticky Navigation (Implied)**

While not explicitly visible in this desktop view, a "Mobile Sticky Navigation":

* Functionality: This feature is a fixed bar that appears at the bottom of the screen on mobile devices.
* Purpose: It ensures quick access to key store functions (like Search, Cart, Account, or Home) without scrolling, significantly improving mobile user experience.

#### Main Footer Utility Bar

The lower-most strip of the footer, running across the entire width, contains essential utility information.

* Left Side Elements:
  * Currency/Language Selector: Dropdowns for users to select their preferred "United States (USD)" and "English."
  * Copyright and Store Engine: Text indicating the copyright year and that the store is "Powered by Shopify."
* Center/Right Side Elements (Utility Links & Payments):

  * Utility Links: A horizontal list of essential legal and service links.
    * Refund policy
    * Privacy policy
    * Terms of service
    * Shipping policy
    * Contact information
    * Legal notice
  * Payment Icons: A display of accepted payment methods on the far right, including Visa, Mastercard, American Express, PayPal, Discover, and others.

Dynamic sections:  Mobile sticky navigation, Newsletter signup.

You can look at such footer type, for example, on Demo 18.
{% endtab %}

{% tab title="#9" %}

<figure><img src="https://1734026102-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKXAimBJFhRJImV3lJL36%2Fuploads%2FUEyBou34I4GXv2k5KfqX%2Ff_d19.png?alt=media&#x26;token=1cb1b5bc-e844-466d-b4f7-47f6a7110ef7" alt=""><figcaption></figcaption></figure>

This footer is visually distinct, featuring a strong, colored Announcement Bar above a main footer area that utilizes a light gray/off-white background.

#### Dynamic Sections

This design leverages two dynamic sections for promotions and mobile user experience: Announcement Bar and an implied Mobile Sticky Navigation.

**1. Announcement Bar Section**

This section is a prominent strip located at the very top of the footer area, above all other content.

* Design Note: To enhance the block, incorporate the color palette directly within it. For instance, you may apply a bright orange background to the Announcement bar to ensure it immediately captures attention.
* Content Description:
  * It features a clear promotional message: "Free Shipping on Orders Over $50."
  * The message is supported by an icon (a truck or delivery symbol).
  * Subtext provides additional details: "Enjoy free standard shipping when you spend $50 or more. No hidden fees—just more value with every order."
  * It includes left and right arrow icons, suggesting it is a dynamic slider or carousel that can display multiple announcements.

**2. Mobile Sticky Navigation (Implied)**

While not explicitly visible, a "Mobile Sticky Navigation" feature is a best practice often paired with high-quality Shopify themes utilizing this layout.

* Functionality: This is a fixed navigation bar that remains visible at the bottom of the screen on mobile devices.
* Purpose: It provides persistent, quick access to essential features like the Home page, Search, Cart, or Account, significantly improving mobile navigation and conversion rates.

#### Footer Inner Sections

The main footer content is divided into three logical columns: Collections/Menu, Company Menu, and Sign-up/Social.

**1. Menu Section (Collections)**

This section is the far left column. It is a simple, vertical list focused on the store's product categories.

* Women
* Men
* Shoes
* Accessories
* Clearence (likely "Clearance")
* New Arrivals

**2. Menu Section (Company)**

This section is the center column. It lists essential company, transactional, and informational pages.

* About Us
* Blog
* Shipping & Returns
* Payment
* Warranty
* Location
* Contacts

**3. Sign-up / Social Section**

This section occupies the far right column and is dedicated to brand engagement and marketing.

* Branding: The store logo/name "WOKIEE" is prominently displayed at the top.
* Sign-up: A strong headline encourages e-mail subscription: "Sign up for our e-mail and be the first who know our special offers!".
  * An input field is provided for email entry.
  * Consent text follows: "By clicking the button you agree to the Privacy Policy and Terms and Conditions."
* Social: A row of social media icons is located below the sign-up form.
  * Includes icons for TikTok, Instagram, and YouTube.

#### Main Footer Utility Bar

The narrow strip at the very bottom of the footer contains utility and legal information.

* Currency/Language Selector: Dropdowns for "United States (USD)" and "English."
* Copyright and Store Engine: Text indicating the copyright year and that the store is "Powered by Shopify."
* Utility Links: A horizontal list of essential legal and service links.
  * Refund policy
  * Privacy policy
  * Terms of service
  * Shipping policy
  * Contact information
  * Legal notice
* Payment Icons: A display of accepted payment methods on the far right, including Visa, Mastercard, American Express, PayPal, Discover, and others.

Dynamic sections:  Mobile sticky navigation, Announcement bar.

Footer inner sections:  Menu, Social.&#x20;

You can look at such footer type, for example, on Demo 19.
{% endtab %}
{% endtabs %}

{% hint style="info" %}
**Sections -> Footer**
{% endhint %}

***

## How to use the dynamic sections in the Footer:

{% hint style="info" %}
The Footer can be added with the following sections: Back to top, Mobile sticky navigation, Forms: Newsletter signup, Storytelling: Announcement bar, Logo, Scrolling text and images, Tags, Text with icons type 1, Text with icons type 2. Press the **Add section** and choose one from the suggested list.
{% endhint %}

<figure><img src="https://1734026102-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKXAimBJFhRJImV3lJL36%2Fuploads%2F1XsLQ8TIHG4kwEyimE38%2Ffoot_common_s.png?alt=media&#x26;token=539f12b9-cdba-4ee8-82e5-bf7875305cc8" alt=""><figcaption></figcaption></figure>

Drag and drop sections to order them in the needed sequence.

<figure><img src="https://1734026102-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKXAimBJFhRJImV3lJL36%2Fuploads%2FMDiPtlsRbl5RiiZwOh11%2Ff_move.png?alt=media&#x26;token=142e53c2-874f-4fb4-91a2-6e51f1f2f344" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
Press an eye icon to hide or activate a section.
{% endhint %}

<figure><img src="https://1734026102-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKXAimBJFhRJImV3lJL36%2Fuploads%2FyA5mHWcyGFdibXVy1CVD%2Ff_hide.png?alt=media&#x26;token=51a8e48c-b5b1-485e-95b6-9084323827c4" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
If you need to remove a section, choose the one and press the **Remove section**.
{% endhint %}

<figure><img src="https://1734026102-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKXAimBJFhRJImV3lJL36%2Fuploads%2Fe9e1G6hIS6UyV6FE3QW0%2Ff_remove.png?alt=media&#x26;token=0ca16483-e330-4204-a32e-9afd4151bc69" alt=""><figcaption></figcaption></figure>
