Place footer image above menu, newsletter and social media icons

[Louver]

Hi there, I am on spotlight theme, how do I change it so that the image in my footer is placed above the menu, newsletter and social media icons right in the middle. I want those to be next to each other underneath the image.

Or at least I want the image at the top of the footer and the rest just underneath it and that it isn't packed together

Please take the website of PAL sporting goods as a reference but then the image above the menu instead of other way around.

https://0ke0pt-uy.myshopify.com/collections/apparel-winter-24-25

[PageFly-Amelia]

Hi @Louver ,

This is Amelia from PageFly - a Landing Page Builder App,

Here's how you can adjust the footer in your Spotlight theme to place the image above the menu, newsletter, and social media icons:

Step 1: Access the Theme Editor

1. Go to your Shopify admin panel.

2. Navigate to Online Store > Themes.

3. Click on Actions > Edit code next to your Spotlight theme.

Step 2: Modify the Footer Section

1. In the left sidebar, find and click on the Sections folder.

2. Open the footer.liquid file.

Step 3: Adjust the HTML Structure

1. Locate the section where the footer content is defined. It might look something like this:

<div class="footer-content">
  <!-- Menu, Newsletter, Social Media Icons -->
</div>

       2. Move the image code above the footer content. For example:

<div class="footer-image">
  <img src="{{ 'your-image-url.jpg' | asset_url }}" alt="Footer Image">
</div>
<div class="footer-content">
  <!-- Menu, Newsletter, Social Media Icons -->
</div>

Step 4: Add CSS for Styling

1. In the Assets folder, open the theme.css or base.css file.

2. Add the following CSS code to style the footer:

.footer-image {
  text-align: center;
  margin-bottom: 20px;
}

.footer-content {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}

.footer-content > div {
  margin: 10px;
}

I hope that my solution works for you.

Best regards,

Amelia | PageFly