Customizing the links in the handheld footer bar is fairly straightforward and handled via the
Removing a link
Using the following snippet would remove all links. Pick and choose according to which you want to keep.
Removing all links ↑ Back to top
To remove the feature altogether you can use something like this:
Adding a link ↑ Back to top
Adding a link is more involved. We use the same filter but also need to declare a callback function to display the link itself. This snippet will add a ‘home’ link:
The layout automatically arranges itself based on the number of links in the navigation bar. After adding this snippet, you’d see something like this:
Now the link is in place, but it’s missing an icon.
We need to add some CSS. Since FontAwesome is bundled in Storefront, pick and use an icon from that set.
- Find the icon you want to use on the FontAwesome site and locate its unicode value. In this case we’ll use the home icon which has a unicode value of
- Here’s the CSS you need for the home link we created.
Note that the class name applied to the list item is based on your code in the snippet, which adds the link. If you’re using something other than ‘home,’ you need to change it.
Here’s the finished result: