All of our themes come with a highly customizable page footer that you can configure using theme settings. You can change the overall color scheme, layout and add custom links without having to edit the code. Alternatively, you can use an existing pattern as a starting point to create a custom footer layout.
The following settings, found within the Footer elements setting group, are available in the to use in every theme when customizing the page footer:
Setting | Description |
---|---|
Footer layout | The layout to apply to links within the default page footer. |
Footer shape divider | The optional shape divider to display above the default page footer. |
Footer link color | The color to use for links in the page footer. |
Footer background color | The background color to use for the page footer. |
Footer link 1 text | The text to display for the first footer link. |
Footer link 1 URL | The URL of the first footer link. |
Footer link 2 text | The text to display for the second footer link. |
Footer link 2 URL | The URL of the second footer link. |
Footer link 3 text | The text to display for the third footer link. |
Footer link 3 URL | The URL of the third footer link. |
Footer link 4 text | The text to display for the fourth footer link. |
Footer link 4 URL | The URL of the fourth footer link. |
Facebook URL | The URL of your Facebook page (if applicable). |
Twitter URL | The URL of your Twitter page (if applicable). |
LinkedIn URL | The URL of your LinkedIn page (if applicable). |
Instagram URL | The URL of your Instagram page (if applicable). |
Pinterest URL | The URL of your Pinterest page (if applicable). |
YouTube URL | The URL of your YouTube page (if applicable). |
Credit link | An optional (and greatly appreciated) link to the designer’s website. |
To create a completely custom footer layout to match a design or existing website you can copy-and-paste one of our footer patterns into your theme’s footer.hbs
template, replacing just the <footer>
element and its contents. Each pattern provides a starting point from which you can build a footer to match your company brand.
<footer class="footer ..." id="footer">
...
</footer>
You should leave the rest of the footer.hbs
template intact as it contains important scripts and micro-templates used throughout the theme.