Test Out
In this blog post, we’ll walk you through how to change your Shopify mobile footer layout from vertical to horizontal. By doing so, you can create a cleaner, more compact design, enhancing the user experience on mobile devices.
However, the default layout for mobile is typically vertical, which can make the footer appear long and take up valuable space.
Of course, it ultimately becomes a matter of personal preference, so feel free to try it out and revert to the original if it doesn’t achieve the desired outcome. Be sure to make a backup of all code files before making any changes.
Why Change the Footer Layout on Mobile?
- Improved Aesthetic: A horizontal footer can look cleaner and more professional.
- Space Efficiency: By keeping the footer compact, you can reduce scrolling and create more focus on the main content.
- Better Usability: Grouping footer items horizontally can make it easier for users to find what they need without too much navigation.
Steps to Change Mobile Footer from Vertical to Horizontal in Shopify
Let’s get started with a simple step-by-step process that includes HTML, CSS, and Shopify Liquid code adjustments to achieve a horizontal layout for your mobile footer.
Step 1: Access Your Shopify Theme Files
- In your Shopify admin, go to Online Store > Themes.
- Click on the Actions dropdown next to your live theme and select Edit code.
- Look for the
footer.liquidfile in the Sections folder or Snippets folder. This is where the footer is typically located.
Step 2: Update the Footer HTML Structure (If Necessary)
First, you need to ensure the footer has the right structure for horizontal alignment. Typically, Shopify uses <ul> and <li> for footer links, which are stacked vertically by default.
In your footer.liquid, locate the section where your footer links are rendered. It should look something like this:
Liquid Code
<footer>
<div class="footer-links">
<ul>
<li><a href="/collections/all">Shop</a></li>
<li><a href="/pages/about-us">About Us</a></li>
<li><a href="/pages/contact-us">Contact</a></li>
</ul>
</div>
</footer>
This code structure uses a vertical list, so we’ll use CSS to adjust it for a horizontal display on mobile.
Step 3: Modify the CSS for Mobile Devices
Next, we’ll update the CSS to ensure that the footer items display horizontally on mobile devices.
- In the Assets folder of your theme, find the
theme.scss.liquidortheme.cssfile, depending on your theme. - Add the following CSS code at the bottom of the file to apply the horizontal layout specifically for mobile screens (typically screens smaller than 768px):
CSS
@media only screen and (max-width: 768px) {
.footer-links ul {
display: flex;
flex-direction: row;
justify-content: space-around; /* Distribute links evenly */
padding: 0;
margin: 0;
list-style: none; /* Remove bullets */
}margin: 0 10px; /* Add space between links */
}
text-decoration: none;
font-size: 14px;
color: #333; /* Adjust the color and font size if necessary */
}
}
Explanation of CSS:
@media only screen and (max-width: 768px): This ensures that the following CSS will only be applied on screens 768px wide or smaller (i.e., mobile devices).display: flex;: This turns the list (<ul>) into a flexbox container, making it easier to align items horizontally.flex-direction: row;: This arranges the list items (<li>) in a horizontal row instead of stacking them vertically.justify-content: space-around;: This spaces the items evenly within the container, leaving equal space on either side of each link.list-style: none;: Removes the default bullet points.margin: 0 10px;: Adds horizontal space between the list items to ensure they don’t touch each other.
Step 4: Adjust Footer for Specific Elements
If your footer includes additional elements like social media icons, newsletters, or legal links, you’ll need to apply similar adjustments. Here’s how to update social icons, for example:
Liquid
<div class="footer-social">
<ul>
<li><a href="#"><i class="fa fa-facebook"></i></a></li>
<li><a href="#"><i class="fa fa-twitter"></i></a></li>
<li><a href="#"><i class="fa fa-instagram"></i></a></li>
</ul>
</div>
Add this CSS to ensure social icons align horizontally:
css
@media only screen and (max-width: 768px) {
.footer-social ul {
display: flex;
flex-direction: row;
justify-content: center;
list-style: none;
padding: 0;
}margin: 0 15px;
}
font-size: 20px; /* Adjust size of the social icons */
color: #333;
}
}
Step 5: Test Your Changes
- Save the changes in both the
footer.liquidandtheme.cssfiles. - Go to the Preview option in your Shopify theme editor to check how the changes look on mobile.
- Use your browser’s developer tools to simulate a mobile device and ensure the footer links are now arranged horizontally.
Step 6: Fine-Tune the Design (Optional)
Depending on your theme, you might need to adjust padding, font sizes, or colors to match the rest of your website’s design. For example, if you notice the footer feels too cramped, you can increase the margins between items:
CSS
.footer-links ul li {
margin: 0 20px; /* Increase the space between items */
}
Feel free to tweak the code to suit your store’s design needs, and always test your changes thoroughly on multiple devices to ensure everything looks great!