Header & Footer

Header & Footer


Header

Layout

Aries has 5 layouts of header:
  • Header 01: Logo left, menu right
  • Header 02: Logo center, split menu
  • Header 03: Logo center, menu below
  • Header 04: Logo left, menu center
  • Header 05: vertical menu (fixed sidebar)

Header container: adjust the width of header's content.

Header's minimum height: header's height is affected by logo's height; so:
  • if logo's height is shorter than header's min-height, it will take header's min-height.
  • if logo's height is higher than header's min-height, it will take logo's height.

Mobile menu

Select a menu in your Shopify navigation to show on mobile and on header 05.
Read this article to know how to create nested menu.

Announcement bar

Aries has a top bar for you to show Announcements, social media, currency and login account.


Note: to show Account icon, please enable Customer accounts in your Shopify admin > Settings > Checkout > Customer accounts > select Accounts are optional or Accounts are required.

Mega menu content

For detailed instruction of Mega menu, please refer to this article:


Color

You can change background color and text color of header in Theme settings > Colors > Header.

Make transparent header



First, go to Slideshow section > check "Behind the header" option to pull the slideshow up, under header.

Then, navigate to Theme settings > Colors > Header > Header Opacity: input a number from 0 - 100 to change header's opacity (0 = completely transparent; 100 = completely solid).

NOTE: you need to click "Save" to see the change in header opacity.

You can laso reduce the opacity of Sticky Header in Theme settings > Colors > Header Sticky > Header sticky opacity.


Footer

Supported content

Aries has 8 types of footer content to choose:
  • Footer menu: choose a menu in your Shopify navigation to show in Footer
  • Get in touch (brand info): put logo and brand info
  • Social connected: show social media icons (links are set in Theme settings > Social media) 
  • Payment methods: auto appear all payment methods you set in your admin Settings > Payments.
  • Newsletter signup: auto appear signup form (see how to set your Mailchimp action url here). 
  • Custom image: upload an image (you can upload an image of your accepted payment methods to replace Payment Methods block)
  • Custom HTML: add custom HTML
  • Google Map: all options to show Google maps (generate your Google map here). 

Container width

After adding new content, you need to enter Container width for each block.
If a block is set Auto,
If all blocks are set Auto, it'll divide the width of all blocks equally.

Enable masonry

If checked, blocks will be placed in optimal position based on available vertical space.

Color

You can change background color and text color of footer in Theme settings > Colors > Footer.

Bottom bar

You can add a small note like Copyright on the left of the bottom bar. 
On the right, you can add:
  • Bottom bar menu: select a menu in your Shopify navigation (recommend to use a short menu)
  • Social connected: show social media icons (links are set in Theme settings > Social media) 
  • Custom image: you can upload an image of your accepted payment methods here
To change color of bottom bar, navigate to Theme settings > Color > Bottom bar.






    • Related Articles

    • FAQ

      I'm getting an error when uploading theme to my store After downloading theme from Themeforest, you need to extract the zip file. Then open the "aries" folder, you will find all templates inside it, select a template to upload. For detailed ...

    • Header & Footer settings

      1. Header Online Store > Themes > Customize Theme > Sections tab > Header Virgo has 5 header layouts. http://take.ms/8RM95 Virgo also has Topbar for you to show Announcements, social media, currency and login account. http://take.ms/F5JL9 ...

    • Header & Footer Settings

      Header Online Store > Themes > Customize Theme > Sections tab > Header Gemini has 5 header layouts. http://take.ms/8RM95   Gemini also has Topbar for you to show Announcements, social media, currency and login account. http://take.ms/F5JL9   ...

    • Aries - Changelog

      To save all modifications from the old version to the new one, please follow our instruction here: Install & Update theme Version 1.0.6 – Jan 14th, 2019 Fix URL to get Instagram access token Fix minor bug when option value contains special characters ...

    • Product badges (labels)

      Badge appears on the top left corner of a product item, based on some conditions. Aries supports these badges: Sold out: auto appear on a sold-out product (product inventory = 0) Sale percentage (auto calculated %): appear on a product having ...