Solved

Adding accordions to mobile footer

Zatura
Tourist
15 0 5

Hello Experts,

 

This is my website zatura.in

I would like to display the footer as Accordions for the mobile versions and the regular one for the desktop version. Please help me achieve this. Can any app solve the problem? If so please share the app details.

I want something similar to this store >> https://nobero.com/

Zatura_0-1704967187434.png

 

Zatura_1-1704967193665.png

 

 

Accepted Solution (1)

BSS-Commerce
Shopify Expert
3376 447 495

This is an accepted solution.

I try to make accordions tob mobile footer but Theme Custoze doesn't support. Therefor, you have to make it by adding code to your theme.

Step 1: Go to Themes => Edit Code

view - 2024-01-15T181246.728.png

Step 2: Find footer.liquid file

view - 2024-01-15T181334.942.png

Step 3: Add the flowing code at the end of file:

<style>
    @media (max-width: 749px) {
    .footer__content-top .footer-block .footer-block__heading {
        position: relative;
        margin: 0;
        padding: 1.5rem 0;
        cursor: pointer;
    }
    .footer__content-top .footer-block .footer-block__heading::after {
        content: url("data&colon;image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M11 1.5L6 6.5L1 1.5' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3C/svg%3E");
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 20px;
        text-align: center;
      }
    .footer__content-top .footer-block .footer-block__heading:not(.block-collapsed)::after {
        content: url("data&colon;image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M11 1.5L6 6.5L1 1.5' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3C/svg%3E");
        transform: translateY(-50%) rotate(180deg);
    }
    .footer__content-top .footer-block .footer-block__heading.block-collapsed + .footer-block__details-content {
        visibility: hidden;
        opacity: 0;
        height: 0;
        margin: 0;
        padding: 0;
        transition: all .2s ease-out;
        overflow: hidden;
    }
    .footer__content-top .footer-block .footer-block__heading + .footer-block__details-content{
        visibility: visible;
        opacity: 1;
        height: auto;
        transition: all .2s ease-out;
        overflow: hidden;
        margin-bottom: 3rem;
    }
}
</style>

<script>
    window.addEventListener('DOMContentLoaded', () => {
      if (window.matchMedia('(min-width: 750px)').matches) {
        return
      }
    
      const handleCollapse = (heading) => {
        if (heading.classList.contains('block-collapsed')) {
          heading.classList.remove('block-collapsed')
          heading.setAttribute('aria-expanded', 'true')
        } else {
          heading.classList.add('block-collapsed')
          heading.setAttribute('aria-expanded', 'false')
        }
      }
      
      document.querySelectorAll('.footer__content-top .footer-block .footer-block__heading').forEach((heading, index) => {
        heading.classList.add('block-collapsed_new')
        heading.classList.add('block-collapsed')
        heading.setAttribute('role', 'button')
        heading.setAttribute('aria-expanded', 'false')
        heading.setAttribute('tabindex', '1')
    
        heading.nextElementSibling.setAttribute('id', `footer-block-index-${index}`)
        heading.setAttribute('aria-controls', `footer-block-index-${index}`)
    
        heading.addEventListener('click', () => { handleCollapse(heading) })
        heading.addEventListener('keypress',  () => { handleCollapse(heading) })
      })
    
    })
</script>

This is the result:

view - 2024-01-15T181405.138.png

Hope it helps @Zatura 

 

 

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

View solution in original post

Replies 2 (2)

gr_trading
Shopify Partner
1589 138 170

Hi @Zatura,

 

For this you have to edit the footer code, please refer to the below video to implement the same.

 

 

Hope this will helps...

For any custom development WhatsApp or connect at Email ID: gr.trading15@gmail.com for quick consultation. | YouTube Videos
To support Buy Me a Coffee

BSS-Commerce
Shopify Expert
3376 447 495

This is an accepted solution.

I try to make accordions tob mobile footer but Theme Custoze doesn't support. Therefor, you have to make it by adding code to your theme.

Step 1: Go to Themes => Edit Code

view - 2024-01-15T181246.728.png

Step 2: Find footer.liquid file

view - 2024-01-15T181334.942.png

Step 3: Add the flowing code at the end of file:

<style>
    @media (max-width: 749px) {
    .footer__content-top .footer-block .footer-block__heading {
        position: relative;
        margin: 0;
        padding: 1.5rem 0;
        cursor: pointer;
    }
    .footer__content-top .footer-block .footer-block__heading::after {
        content: url("data&colon;image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M11 1.5L6 6.5L1 1.5' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3C/svg%3E");
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 20px;
        text-align: center;
      }
    .footer__content-top .footer-block .footer-block__heading:not(.block-collapsed)::after {
        content: url("data&colon;image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M11 1.5L6 6.5L1 1.5' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3C/svg%3E");
        transform: translateY(-50%) rotate(180deg);
    }
    .footer__content-top .footer-block .footer-block__heading.block-collapsed + .footer-block__details-content {
        visibility: hidden;
        opacity: 0;
        height: 0;
        margin: 0;
        padding: 0;
        transition: all .2s ease-out;
        overflow: hidden;
    }
    .footer__content-top .footer-block .footer-block__heading + .footer-block__details-content{
        visibility: visible;
        opacity: 1;
        height: auto;
        transition: all .2s ease-out;
        overflow: hidden;
        margin-bottom: 3rem;
    }
}
</style>

<script>
    window.addEventListener('DOMContentLoaded', () => {
      if (window.matchMedia('(min-width: 750px)').matches) {
        return
      }
    
      const handleCollapse = (heading) => {
        if (heading.classList.contains('block-collapsed')) {
          heading.classList.remove('block-collapsed')
          heading.setAttribute('aria-expanded', 'true')
        } else {
          heading.classList.add('block-collapsed')
          heading.setAttribute('aria-expanded', 'false')
        }
      }
      
      document.querySelectorAll('.footer__content-top .footer-block .footer-block__heading').forEach((heading, index) => {
        heading.classList.add('block-collapsed_new')
        heading.classList.add('block-collapsed')
        heading.setAttribute('role', 'button')
        heading.setAttribute('aria-expanded', 'false')
        heading.setAttribute('tabindex', '1')
    
        heading.nextElementSibling.setAttribute('id', `footer-block-index-${index}`)
        heading.setAttribute('aria-controls', `footer-block-index-${index}`)
    
        heading.addEventListener('click', () => { handleCollapse(heading) })
        heading.addEventListener('keypress',  () => { handleCollapse(heading) })
      })
    
    })
</script>

This is the result:

view - 2024-01-15T181405.138.png

Hope it helps @Zatura 

 

 

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development