footer in a accordion (mobile) prestige theme

Store Design

Topic summary

A user seeks help implementing an accordion-style footer for mobile devices on a Shopify Prestige theme for their site (45keys.com).

Solution Provided:

Another user offers step-by-step instructions:

  • Access Shopify Admin → Online Store → Themes → Edit code
  • Add JavaScript code to theme.liquid before the closing </body> tag
  • Insert CSS styling into theme.css at the top of the file

The CSS includes styling for .footer__block--links summary.h6 with properties for positioning, rotation transforms, borders, and padding to create the accordion effect.

Status: The discussion appears resolved with a technical solution provided, though the original post and code snippets contain some garbled/reversed text that may indicate formatting issues in the source material.

Summarized with AI on November 7. AI used: claude-sonnet-4-5-20250929.
1

Hello,

i want to have the footer in a accordion (mobile) prestige theme

www.45keys.com

Can anyone help me ?

Screenshot at Jul 24 12-54-11.png
Screenshot at Jul 24 12-54-11.png424×715 10.7 KB

2

Hi @MS2333 ,

I am happy to help you.
Please follow the below instructions to achieve your desired results:

  1. Log in to your Shopify Admin panel.
  2. Go to Online Store > Theme > Edit code.
  3. Go to theme.liquid file and add the below code just before the ending tag.
  • Go to theme.css and paste the below code at the top of the file.
.footer__block--links summary.h6 {
  position: relative;
}

.footer__block--links summary.h6::after {
    content: '';
    position: absolute;
    right: -24px;
    padding: 2px;
    border-top: 1px solid;
    border-right: 1px solid;
    top: 50%;
    transform: translateY(-50%);
    rotate: 45deg;
}

details[open] summary.h6::after {
    rotate: 135deg;
    top: 20%;
}​