How can I stack the footer for mobile view only in Craft theme?

Store Design
,
1

I would like to stack my footer for mobile view only. So quick links underneath brand info where it sits currently, then newsletter heading and details under that followed by sign up box. www.paperlove.com.au.

Can anybody help please? Thank you

2

Hello @paperlove ,

You can try to follow these steps:

  • Go to Online Store → Themes → Actions → Edit code
  • Go to Sections → footer.liquid file → find the code similar to this one
Brand Name

Quick Links

Newsletter Heading

Details

Sign Up Box
  • Rearrange the HTML code to match the desired order for mobile view:
Brand Name

Quick Links

Details

Newsletter Heading

Sign Up Box
  • Go back to your Assets folder → base.css file → add the following code at the bottom of page
@media (max-width: 767px) {
  .footer-newsletter-heading {
    order: 3;
  }
  .footer-details {
    order: 4;
  }
  .footer-signup-box {
    order: 5;
  }
}
  • Save and preview

Hope this can help. Let us know if you need any further support.

Ali Reviews team.

3

To stack your footer for mobile view only on your website, you can follow these steps:

  1. Go to your Shopify admin and navigate to “Online Store” > “Themes.”

  2. Find the theme you’re currently using and click on “Customize” to access the theme editor.

  3. In the theme editor, look for the section that corresponds to your footer. This might be named “Footer” or “Footer Section.”

  4. Within the footer section, locate the content blocks for your quick links, newsletter heading, details, and sign-up box.

  5. Rearrange the content blocks by dragging and dropping them in the desired order. For example, you can move the quick links block above the newsletter heading block.

  6. Preview your changes by switching to mobile view within the theme editor. Ensure that the footer elements are stacked as intended.

  7. Once you’re satisfied with the changes, click on “Save” and then “Publish” to make the changes live on your website.

By stacking the footer elements in the desired order for mobile view, your quick links will appear first, followed by the newsletter heading, details, and sign-up box.

Remember to check the appearance on different mobile devices to ensure the layout looks as expected.

If you need further assistance or encounter any issues, don’t hesitate to reach out to Shopify support or consult with a web developer familiar with Shopify themes.

4

Thank you but I can’t find those div codes at all…

5

thank you but this isn’t quite what I was looking for. I have it in 2 columns for desktop view and then for mobile view it isn’t showing the full 3 columns across so was hoping to stack it so it would all appear on mobile view… but thank you