Solved

Change Subscribe Form position from last to first in Footer List on mobile

Giftay
Tourist
10 0 2

Hi, I've been looking all over the code (and the web) and couldn't find a solution for this. If there's anyone out there willing and able to help I'll be so thankful.

 

We have a subscribe form in our footer, and on desktop, it's the element on the top:

 

Screenshot 2024-01-08 at 00.50.34.png

 

However, when on mobile, that section goes to the bottom, below the navigation links and other blocks:

 

Screenshot 2024-01-08 at 00.50.17.png

 

I have changed the code so the collapsable list item is always open, so it's at least shown, but we would like to bring it up to the top so it shows right after the page content, just like on desktop.

 

This is the only piece of code I've found (in footer-template.liquid) that has all those items in one place:

 

<footer class=" {% if template == 'index' %} {{ item.top_offset }}{% else %} {{ item.top_offset_normal }}{% endif %}">
  
  {%- include "footer_subscribe" -%}
  {%- if flp < flp2 -%}
  {%- include "footer_links" -%}
  {%- include "footer_links_des2" -%}
  {%- else -%}
  {%- include "footer_links_des2" -%}
  {%- include "footer_links" -%}
  {%- endif -%}
  {%- include "footer_copyright" -%}

</footer>

 

Any ideas how to do that? Where in the files would that be? We are using the Wokiee theme and the site in question is https://giftay.eu – thanks for any help!

Accepted Solution (1)

iffikhan30
Shopify Partner
246 35 44

This is an accepted solution.

Hello @Giftay ,

 

You can remove the order list code, you problem will be solved.

Custom theme and app [remix] expert.
Buy me a Coffee
Email: irfan.sarwar.khan30@gmail.com
Chat on WhatsApp

View solution in original post

Replies 4 (4)

Prashant-Patel
Shopify Partner
8 1 4

Hi @Giftay 

 

I will give you a piece of code you need to add to the theme.css file.

Go to assets then find the theme.css file.

Add this code last in the file.

@media (max-width: 789px) {
    .tt-footer-custom.tt-color-scheme-04 {
        order: 3 !important;
    }
    .tt-footer-custom.tt-color-scheme-02 {
        order: 1 !important;
    }
    .tt-footer-col.tt-color-scheme-03 {
        order: 2 !important;
    }
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
Contact me on aradeshanaprashant12@gmail.com regarding any help | Figma to Shopify
Shopify Theme Developer | Skype : live:apd12121998
Giftay
Tourist
10 0 2

Thank you for your help. I managed to remove already existing CSS for ordering, which I find to be a better practice, but good direction otherwise.

iffikhan30
Shopify Partner
246 35 44

This is an accepted solution.

Hello @Giftay ,

 

You can remove the order list code, you problem will be solved.

Custom theme and app [remix] expert.
Buy me a Coffee
Email: irfan.sarwar.khan30@gmail.com
Chat on WhatsApp
Giftay
Tourist
10 0 2

Thank you for your help, Irfan. I have removed the following code from the theme.css file and it works:

  footer .tt-footer-custom:not(:last-child){
    -webkit-order: 3;
    -ms-flex-order: 3;
    order: 3;
  }