View Categories

Footer

4 min read

The main appearance of the footer #

Color scheme #

SettingsDescription
Enable full-width section on desktopTurn this option on if you want the section to span the entire width of the screen on desktop devices. By default, the content is aligned within the theme container for better readability. Enabling this setting will make the section stretch edge-to-edge across the screen.
Color schemeYou can change the color of the footer. Its color scheme is based on your main theme, “Color Settings.”

Country/Region Selector (Multi-Currency) #

SettingsDescription
Enable country/region selectorYou can enable/disable multi-currency from the footer.
NOTE: To add a country/region, go to your payment settings

How to setup Payments in your store #

Please follow the instructions-

  1. From your Shopify admin, go to Settings > Payments.
  2. In the Shopify Payments section, click Manage.

Go to the page to get more details, Learn more

How do you show Payment Icons on Shopify? #
SettingsDescription
Show payment iconsIf you enable it, the payment icon will appear in the footer.
Warning: You must need to set up payment methods in your store.

Language Selector (Multi-Language) #

SettingsDescription
Enable language selectorYou can enable/disable multi-language from the footer.
NOTE: To add a language, go to your language settings

How to setup Multi-language in your store #

  1. From your Shopify admin, go to Settings > Languages.
  2. Click Add Language.
  3. Choose a language from the drop-down menu, then click Add.
  4. Select an active market to add your language.

Go to the page to get more details, Learn more

Footer logo #

SettingsDescription
Footer logoUpload a custom logo to display in the footer. You can adjust its width, position, and spacing.
Logo linkAdd a link (e.g., homepage or any custom page) to make the footer logo clickable.
Logo widthControl the size of the footer logo by adjusting the width slider.
Distance from the topSet vertical spacing between the top of the footer and the logo.
Distance from the bottomSet vertical spacing between the bottom of the footer and the logo.
Logo positionChoose the vertical alignment of the footer logo: Top, Middle, or Bottom.

Footer Bottom Content Alignment #

SettingsDescription
Content alignmentCenter: Left and right side content will be positioned in the center.
Left to right: Left and right side content will be positioned left to right alignment.
Top to bottom: 2 Columns of content will be positioned top to bottom.

DIVIDER (Border at the top of the footer) #

SettingsDescription
Show divider on inner pagesYou can show a border on top of the footer section. It will show only for the inner pages, not the home page.
Show divider on home pageYou can show a border on top of the footer section. It will show only on the home page.
Show footer logo dividerYou can show a border on top of the footer section. It will only be displayed on the inner pages, not the home page.

Image and text block #

SettingsDescription
HeadingAdd a title for the block (e.g., About Us). This will be displayed as the section heading in the footer.
ImageUpload or select an image to display beside the text.
Image widthAdjust the size of the uploaded image by changing its width in pixels.
LinkAdd a link (optional). When the image or heading is clicked, it will redirect to the specified link.
TextEnter descriptive text about your brand, store, or other information. Rich text options (bold, italic, links, etc.) are supported.
Show divider column on desktopEnable this toggle to display a vertical divider line that separates this block from other footer columns (desktop view only).
Show social media iconEnable to display your social media icons below the text. The icons are linked from your theme’s Social media settings.
Icon foreground colorChoose the color of the social media icon symbol (e.g., Facebook “f”).
Icon background colorChoose the background color of the social media icon circle.

Section padding settings #

SettingsDescription
Desktop: Padding topThe section’s top inner space height is determined. From 0 to 150 px, will be incremented by 5px. It will affect the desktop.
Desktop: Padding bottomThe section’s bottom inner space height is determined. From 0 to 150 px, will be incremented by 5px. It will affect the desktop.
Mobile: Padding topThe section’s top inner space height is determined. From 0 to 150 px, will be incremented by 5px. It will affect the mobile.
Mobile: Padding bottomThe section’s bottom inner space height is determined. From 0 to 150 px, will be incremented by 5px. It will affect the desktop.

Powered by BetterDocs

Leave a Reply

Your email address will not be published. Required fields are marked *