Footer Design

[Ab52]

Hi, I would like a footer like this from Spotify. Thank you very much in advance.

https://www.spotify.com/nl/premium/ 

[sahilsharma9515]

Hi @Ab52 This is achievable, but you need to mention where you want this type of footer? Which theme you are using? 

Please Note: this can be done through custom coding.

If you will unable to implement the same then I'm happy to do this for you, let me know. I can implement the code changes so that this will work well for you.

Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!

Best Regards

Sahil

[Ab52]

I’m using dawn, I’m able to implement the code. If you can tell me where to implement, It must work.

[sahilsharma9515]

Hi @Ab52 without looking into the theme code file no one will be able to provide you the exact and full code that will work well for your store, I need to access your theme files so that I can edit the footer according to your needs.

Best Regards

Sahil

[Ab52]

Check your pm

[Xipirons]

Hi @Ab52 

Here's an approach to create a footer similar to Spotify's using HTML and CSS in the Shopify Dawn theme:

1. In your Shopify admin, go to Online Store > Themes and click "Actions" then "Edit Code" for the Dawn theme.

2. In the "Sections" folder, open the "footer.liquid" file. Delete all the existing code in this file.

3. Paste the complete Spotify footer HTML code into the "footer.liquid" file.

4. In Spotify, the code uses custom CSS classes like "svelte-s3s7s". You'll need to add the corresponding CSS styles:
- In the "Assets" folder, open the "theme.css.liquid" file (or base.css)
- At the end of this file, paste the CSS styles for the Spotify footer
- You may need to adjust some selectors to avoid conflicts with Dawn's existing styles

5. In the HTML code, replace all links (href) pointing to spotify.com with the appropriate links for your Shopify store.

6. Customize the text in the code according to your store's needs, such as the headings "Company," "Communities," "Useful Links," etc.

7. The language/region selector and payment icons will need to be handled separately:
- In the theme customizer, go to Footer and configure the settings for the language selector and payment icons
- Remove the corresponding parts from the Spotify HTML code

8. To remove the "Powered by Shopify" text:
- In the "footer.liquid" file, find and remove the line of code that displays this text

9. Save all modified files.

10. Back in the theme customizer, adjust the footer layout settings (width, margins, padding) to best integrate it with the rest of your Dawn theme.

Here is an example of HTML Code inspired by Spotify's footer:

<footer class="footer">
    <div class="footer-container page-width">
        <div class="footer-top">
            <div class="footer-block">
                <h2 class="footer-heading">About Us</h2>
                <ul class="footer-menu">
                    <li><a href="/pages/about-us">Our Story</a></li>
                    <li><a href="/pages/contact-us">Contact Us</a></li>
                    <li><a href="/pages/careers">Careers</a></li>
                </ul>
            </div>
            <div class="footer-block">
                <h2 class="footer-heading">Customer Care</h2>
                <ul class="footer-menu">
                    <li><a href="/pages/shipping-policy">Shipping Policy</a></li>
                    <li><a href="/pages/returns">Returns & Exchanges</a></li>
                    <li><a href="/pages/faq">FAQ</a></li>
                </ul>
            </div>
            <div class="footer-block">
                <h2 class="footer-heading">Follow Us</h2>
                <ul class="footer-social-icons">
                    <li>
                        <a href="#" aria-label="Facebook"><i class="fab fa-facebook-f"></i></a>
                    </li>
                    <li>
                        <a href="#" aria-label="Instagram"><i class="fab fa-instagram"></i></a>
                    </li>
                    <li>
                        <a href="#" aria-label="Twitter"><i class="fab fa-twitter"></i></a>
                    </li>
                </ul>
            </div>
            <div class="footer-block">
                <h2 class="footer-heading">Newsletter</h2>
                <div class="footer-newsletter">
                    {% form 'customer', id: 'ContactFooter' %} <input type="hidden" name="contact[tags]" value="newsletter" />
                    <div class="newsletter-input-wrap"><input type="email" name="contact[email]" placeholder="Email address" /> <button type="submit">Subscribe</button></div>
                    {% endform %}
                </div>
            </div>
        </div>
        <div class="footer-bottom">
            <div class="footer-copyright">&copy; {{ 'now' | date: "%Y" }} {{ shop.name }}</div>
            <div class="footer-payment-icons">{% for type in shop.enabled_payment_types %} <span class="payment-icon">{{ type | payment_type_svg_tag }}</span> {% endfor %}</div>
        </div>
    </div>
</footer>

CSS Code:

.footer {
background-color: #000;
color: #fff;
padding: 40px 0;
} 
.footer-container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
} 
.footer-top {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 100%;
margin-bottom: 40px;
} 
.footer-block {
width: 25%;
padding: 0 20px;
} 
.footer-heading {
font-size: 18px;
margin-bottom: 20px;
} .footer-menu li {
margin-bottom: 10px;
} .footer-menu a {
color: #fff;
text-decoration: none;
} 
.footer-social-icons {
display: flex;
} 
.footer-social-icons li {
margin-right: 15px;
} 
.footer-social-icons a {
color: #fff;
font-size: 20px;
} 
.footer-newsletter .newsletter-input-wrap {
display: flex;
} 
.footer-newsletter input[type="email"] {
flex: 1;
padding: 10px;
border: none;
border-radius: 4px 0 0 4px;
} 
.footer-newsletter button {
padding: 10px 20px;
background-color: #1db954;
color: #fff;
border: none;
border-radius: 0 4px 4px 0;
cursor: pointer;
} 
.footer-bottom {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
} 
.footer-payment-icons .payment-icon {
margin-left: 10px;
}

The biggest challenge will be to accurately reproduce the CSS styles and integrate them properly with the existing Dawn theme styles. You may need to make some trial-and-error adjustments.

Feel free to preview your changes frequently to ensure the footer displays correctly on desktop and mobile. You can use Chrome's developer tools to debug if needed.

With some patience and code adjustments, you should be able to achieve a footer very similar to Spotify's in the Shopify Dawn theme.

[Ab52]

Can I send you a link so you can check if it would work out?