Footer
In the Footer, you can find the list of dynamic sections and static section to change the look and feel of the Footer to complement your store with the value content.
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:
Dynamic sections:
Mobile sticky navigation
Provides quick access to main site areas on mobile devices.
Text with icons type 2
Used to present key service highlights with accompanying icons, arranged horizontally.
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.
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.
You can look at such footer type, for example, on Demo 1.
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.
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.
Overview
A full-width dark-background footer with three main columns (left, center, right) inside a constrained inner container, plus an upper newsletter/sign-up strip and a low-contrast legal/payment bar at the very bottom.
Purpose: present store contact information and brand mark, site navigation, a long collections list, promotional media with caption/call-to-action, newsletter capture, and small-print links (privacy, terms, payments).
Structure (top → bottom)
Newsletter / Signup strip (full width, above main columns)
Contains a heading (promotional copy: “JOIN OUR EXCLUSIVE COMMUNITY”), short subtext, and an email input form aligned to the right.
Includes small consent notice and social icons below the form.
Visual: prominent heading, thin divider under the strip separating it from the main footer.
Main footer inner container (three columns)
Layout: three-column responsive grid within a centered container. On small screens columns stack vertically.
Columns (left → center → right):
Left — Brand/Contact column (Menu type: single item group)
Logo or brand mark at top.
Primary phone number (large), opening hours, street address, city/state/zip.
Optional small social icons or legal note.
Center — Site navigation / Collections (Menu)
Two stacked menu blocks:
“Company” menu: links such as About, Blog, Shipping & Returns, Payment, Warranty, Location, Contacts.
“Collections” menu: long multi-item list (Cordless Tools, Power Tools, Welding Equipment, etc.). This column may use vertical scrolling or wrap onto multiple columns if list is long.
Right — Media with text (Media block)
A media card (image thumbnail) with a title (“Build Your Perfect Store with Wokiee!”), short description/caption, and a primary CTA button (e.g., “BUY THEME!”).
Visual: image aligned left or top of the card, caption and CTA below/right. Use a card background slightly lighter than footer to draw attention.
Bottom legal/payment bar (full width, low contrast)
Small text left: country/currency selector + copyright and links (Privacy policy, Refund policy, Terms of Service, Shipping policy, Contact information, Legal notice).
Payment icons aligned right (Visa, Mastercard, PayPal, etc.).
Very small font, muted color.
Content blocks & settings (for theme editor)
Newsletter block
Show/Hide heading and subtext
Placeholder text for email field
Submit button label
Consent text and link targets for Privacy & Terms
Social icon selection and URLs
Layout: text left, form right (stacked on mobile)
Menu block (reusable)
Title (e.g., “Company”, “Collections”)
Menu source (select a Shopify navigation)
Max link count or show “see more” behavior
Column width control (e.g., 25%–50%)
Brand/Contact block
Logo upload
Phone number (click-to-call)
Hours (plain text)
Address (optional map link)
Social icons
Media with text block
Image upload (recommended size and ratio)
Eyebrow/title, heading, descriptive text
CTA button text, URL, and style (primary)
Card background toggle (on/off)
Image alignment options (left / top / right)
Legal/payment bar block
Text field (rich text for links)
Payment icons toggle and order
Country/currency selector toggles
Styling & Accessibility
Colors: dark background (e.g., charcoal), headings in large white, links and phone in high-contrast accent color (e.g., red), body text muted light gray.
Typography: large bold heading for newsletter; medium headings for column titles; readable body font size (14–16px) for links.
Spacing: generous padding around main container; clear visual separation with thin divider lines.
Dynamic sections: Mobile sticky navigation, Text with icons type 2, Newsletter signup.
Footer inner sections: Menu, Media with text.
You can look at such footer type, for example, on Tools store.
Overview
Full-width footer with a dark-green background and a centered inner container. The design uses four distinct column areas (Menu, Info, Contacts, Media-with-text + Newsletter) with a legal/payment strip at the bottom.
Purpose: provide quick navigation (menu), basic store information, contact details, email capture / promotional media, and social links — all while reinforcing brand identity using a large brand mark below the footer area.
Structure (top → bottom)
Main footer inner container (four columns on desktop)
Layout: centered inner container with a four-column grid on wide screens; columns stack vertically on small screens.
Columns (left → right):
Column 1 — Menu
Title: “Menu”
Vertical list of navigation links (example items: Noodles-Rice, Noodles WOK, Soup, Dish of the Day).
Small icon or bullet to the left of each item can be used for visual emphasis (as shown).
Behavior: links point to collections or pages; allow a maximum visible count with optional “See all” if the list grows long.
Column 2 — Info (secondary menu)
Title: “Info”
Links to site pages such as About, Blog, Shipping & Returns, Payment, Warranty, Location, Contacts.
Purpose: helpful utility links and site policies.
Column 3 — Contacts
Prominent phone number (large font, click-to-call on mobile).
Short hours text (“Open daily from 9:00 AM – 7:00 PM”).
Physical address (street, city, postal code).
This column functions as a brand trust/quick-contact area.
Column 4 — Media with text + Newsletter + Social
Media card: small image (or icon/illustration) with short heading and descriptive caption (for example promotional message or callout).
Newsletter signup embedded underneath or next to the media card: heading “Sign Up for Our Emails and Get Exclusive Offers First!”, an email input and submit button.
Small consent line below the form linking to Privacy Policy and Terms.
Social icons row (TikTok, Instagram, YouTube etc.) placed near the form or below the consent text for easy follow/access.
CTA button inside the media card (optional) for theme/product promotion.
Bottom legal / payment bar (thin, full width)
Left side: country/currency selector, copyright line, and small links (Privacy policy, Refund policy, Terms of service).
Right side: small payment method icons (Visa, Mastercard, PayPal, etc.).
Very low contrast text and reduced font size so it doesn’t compete with main footer content.
Content blocks & editor settings
Menu block
Title (editable)
Link source (select Shopify navigation)
Icon toggle (on/off) and icon selection for each menu item
Max visible items and “show more” behavior
Info/Menu block (same schema as Menu block)
Contact block
Phone (editable, tel: link)
Hours (plain text)
Address (editable with optional map link)
Option to show/hide each field
Media with text block
Image upload (recommended aspect: wide thumbnail)
Heading and short description
CTA button text and URL
Card background toggle (slightly lighter/darker than footer)
Image alignment options (left/top)
Newsletter block (can be inside Media column or separate)
Heading and subheading
Email field placeholder and submit button label
Consent text with editable privacy/terms links
Integration options (Shopify customer list, third-party provider)
Social block
Icons to show and their URLs
Icon shape (circle/square), color (accent or white), and spacing
Legal/payment bar block
Rich text for small-print links
Payment icons toggle and ordering
Country/currency selector toggle
Styling, layout & spacing
Colors:
Background: deep green
Headings: white or near-white for contrast
Body links/text: light green/cream or pale white for readability
Accent elements (buttons, phone number): slightly brighter green or contrasting accent (white on green background, or light accent)
Typography:
Column titles: medium-large, bold or semi-bold
Phone number: prominent large weight to draw attention to contact
Body links and small text: 14–16px for readability
Spacing:
Generous vertical padding inside the footer (top and bottom) so content breathes
Columns spaced evenly, with consistent gutter widths
Visuals:
Use icons next to menu items for cuisine categories
Media card should use an image that complements brand colors; the newsletter input should be a narrow inline field with a clear submit arrow/button
Dynamic sections: Mobile sticky navigation, Scrolling text and images, Logo.
Footer inner sections: Menu, Media with text, Social.
You can look at such footer design in the demo skin layout: Delivery - only: Restaurant 2
Dynamic sections
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").
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
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).
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.
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").
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.
You can look at such footer type, for example, on Demo 15.
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 SectionsThe upper area of the footer is divided into three main sections: Menu, Recent Posts, and Sign-up/Social.1. Menu SectionThis 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: 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
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
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.You can look at such footer type, for example, on Demo 17.
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).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.
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.
Dynamic Sections
This design leverages two dynamic sections for promotions and mobile user experience: Announcement Bar and an implied Mobile Sticky Navigation.
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.
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.
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 ArrivalsMenu 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
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.
You can look at such footer type, for example, on Demo 19.
Dynamic section — Text with icons (type 2)
Purpose: Surface quick value propositions or service highlights (e.g., Free shipping, Easy returns) using a compact row of icon + short text blocks.
Content: 2–4 items across the width. Each item contains:
Small round/contained icon (24–36px) left or above the text.
Short title (one line) — e.g., “Free Shipping on Orders Over $50”.
Supporting subtitle (one short sentence or phrase) — e.g., “Enjoy free standard shipping when you spend $50 or more.”
Layout/Styling: Full-width bar above the footer columns with generous horizontal spacing between items; light muted background (slightly different from main footer) and subtle divider below; icons in brand accent color, text in dark/neutral color; use compact font sizes (title ~14–15px, subtitle ~12px).
Accessibility: Icons must have aria-hidden if decorative, and titles should be real text (not images); ensure sufficient color contrast and responsive stacking for narrow screens (wrap items to multiple rows).
Interaction/performance: No heavy animations; keep SVG icons inline or optimized for fast load.
Footer inner sections:
General layout notes:
Desktop: Four columns in this order — Menu | Empty column | Media with text | Social.
Mobile: Stack vertically in logical order — Menu → Media with text → Social → (Empty column — usually omitted or remains as spacing).
Use a muted background (slightly darker than page body) with a top border or divider to separate from main content. Maintain consistent padding (24–32px) and a small bottom bar for legal/currency/language details.
Menu (left-most column)
Purpose: Primary site navigation for product categories or key pages.
Content:
Column heading (optional) like “Shop” or “Menu”.
Unordered list of 6–8 links (e.g., Women, Men, Shoes, Accessories, Clearance, New Arrivals).
Layout/Styling: Left-aligned; compact vertical spacing; link font ~14px; muted heading slightly bolder; hover state (color change or underline).
Accessibility: Use clear link text, proper semantic lists (<nav> or <ul>), keyboard focus styles, and contrast.
Empty column (second column)
Purpose: Visual balance and reserved space for later additions (e.g., newsletter, badges).
Content: Intentionally empty — consider a tiny editorial comment in source: <!-- Reserved for future use -->.
Layout/Styling: Match column width of neighboring columns so grid remains balanced; maintain same top padding; allow this column to collapse on very small screens (or hide it so layout order remains sensible).
Accessibility: Avoid empty interactive elements; ensure screen readers skip the empty column (no live region or focusable elements).Media with text (third column)
Purpose: Highlight brand, location/contact, or a featured item — like the screenshot’s contact block (phone, hours, address) or a logo + short CTA.
Content:
Optional small logo or thumbnail (e.g., brand logo or image ~48–120px).
Short bold line (e.g., phone number or title).
1–3 lines of supporting text (opening hours, address), plus a small link (e.g., support@yourstore.com).
Layout/Styling: Center-left aligned within the column (as in screenshot); spacing between media and text; phone/email as prominent link styles; text sizes: heading ~15–16px, body ~13px.
Accessibility: Provide alt text for images; make phone/email clickable links with proper tel: and mailto:; ensure readable contrast.
Social (right-most column)
Purpose: Collect email signups and provide social links — like the screenshot’s newsletter sign-up and social icons.
Content:
Brand logo or short heading (e.g., store name).
Short sign-up blurb: “Sign up for our e-mail and be the first who know our special offers!”
Simple email input and submit button (labelled and keyboard-accessible).
Small privacy/terms notice under the form (link to Privacy Policy and Terms & Conditions).
Row of social icons (TikTok, Instagram, YouTube, etc.) sized ~20–28px.
Layout/Styling: Right-aligned block; input and CTA compact (input width ~140–220px on desktop); social icons spaced horizontally underneath; keep icons in brand color or monotone with hover states.
Accessibility: Form must have a label (visually hidden if necessary); ensure aria-live or polite confirmation after subscribe; links open in same tab by default unless external; include accessible names for social icons (aria-label="Instagram — opens in new tab").
Bottom bar (below columns)
Purpose: Legal
, settings, and payment method cues.
Content:
Small left area: country/currency selector and language.
Center: copyright and credits (e.g., “© 2025, wokiee - currency Powered by Shopify”).
Right area: quick links (Refund policy, Privacy policy, Terms of service, Shipping policy) and payment icons (Visa, Mastercard, PayPal).
Layout/Styling: Very small font (11–12px), muted text color; keep a single-row layout on desktop and stacked/condensed on mobile.
Accessibility: Ensure links are keyboard-focusable, and selectors are properly labeled.
Dynamic sections: Text with icons type 2.
Footer inner sections: Menu, Empty column, Media with text, Social.
You can look at such footer type, for example, on Demo 8.
Dynamic sections
Mobile sticky navigation
Not shown here (desktop layout). Ensure on mobile you add a bottom-sticky bar with primary actions (Home, Search/Menu, Cart, Account). On this site, the footer has important links, so sticky nav would help mobile users jump to store, cart, or contact quickly.
Newsletter signup
Not present in the visible footer. Recommendation: add a compact newsletter block above the legal row (left or center) with a short line like “Subscribe for 10% off” + email field and CTA. Keep it subtle so it doesn’t compete with contact info.
Text with icons type 2
Not visible. Consider adding a small horizontal trust-row (e.g., Free shipping, Secure payments, 24/7 support) placed between the contact/menu area and the legal row. Use small SVG icons and short copy to boost trust without clutter.
Footer inner sections
Menu
Present as the vertical link list at top-center/right. This is fine but feels sparse — consider adding a second or third column for customer service, shop categories, and company info so users can find deeper links without scrolling.
Banners
The large WokiEE wordmark could act as a brand banner. If you want to use banners for promotions, add a compact promotional banner above the legal row or replace part of the large graphic with a seasonal banner that links to the promotion.
Media with text
The contact block functions like media + text (though no thumbnail). The large wordmark is media. If you want to showcase a store image, featured product, or blog, add a small thumbnail + short blurb in a footer column.
Social
I don’t see social icons in this crop. Add a discrete social block (icons with aria-labels) near the contact block or next to the legal links. Avoid embedding feeds in the footer; simple profile links are sufficient.
Dynamic sections: Mobile sticky navigation, Newsletter signup, Text with icons type 2.
Footer inner sections: Menu, Banners, Media with text, Social.
You can look at such footer type, for example, on Demo 1.
Menu (left column)
Purpose: Primary footer navigation — quick links to important pages (e.g., About, Services, Pricing, Contact, FAQ).
Content: A heading (e.g., “Menu” or “Quick links”) plus an unordered list of 5–8 links.
Layout/Styling: Left-aligned; compact vertical spacing; small readable font (e.g., 14px); link hover state (underline or color change). Keep link order prioritized by importance.
Accessibility: Use clear link text (no “click here”); ensure sufficient contrast and keyboard focus styles.
Media with text (middle column)
Purpose: Highlighted visual/media item with short descriptive text — could be a logo, featured image, podcast episode, or small video thumbnail.
Content: A square or landscape thumbnail (64–200px wide) at the top or left, plus a short title and 1–2 lines of supporting text or a CTA (e.g., “Watch our story”, “Latest episode: …”).
Layout/Styling: Center or top-aligned within the column; image should have alt text; text uses slightly smaller font than headings; optional small CTA button or link below the text.
Accessibility: Provide meaningful alt text, ensure media is responsive, and captions or transcripts if it’s audio/video.
Empty column (right column)
Purpose: Reserved space for future content, visual balance, or to keep the footer airy.
Content: Intentionally empty — may include subtle background texture or remain blank. Optionally keep a small comment in source (for editors) like “Reserved for future use.”
Layout/Styling: Maintain the same column width as others to preserve grid alignment; ensure enough padding so empty space looks intentional; avoid keyboard-focusable empty elements.
Accessibility: No interactive elements; ensure screen readers skip it (or include an accessible label if you plan to add content later).
Dynamic sections: Newsletter signup.
Footer inner sections: Menu, Media with text, Empty column.
You can look at such footer type, for example, on skin Cookware Store.
Location: Sections -> Footer
How to use the dynamic sections in the Footer:
Drag and drop sections to order them in the needed sequence.
Last updated