how to make footer under collapsible on desktop?

Store Design
, ,
1

on mobile everyting already under collapsible rows. how can i do on desktop as well? please help. my store link

2

Hi @SinghSells ,

This is Amelia from PageFly - a Landing Page Builder App

Here’s a step-by-step guide to help you achieve this:

Step 1: Modify the HTML Structure1. Access the Theme Editor:

  • Go to your Shopify admin panel.

  • Navigate to Online Store > Themes.

  • Click on Actions > Edit code next to your theme.

  1. Locate the Product Template:

    • In the Sections folder, find the template file that renders the product page. This might be product-template.liquid or a similar file.

  2. Add Collapsible Sections:

    • Modify the HTML structure to include collapsible sections. For example:

  
  

    

{{ product.description }}

  

  
  

    

{{ product.metafields.custom.specifications }}

  

  
  

    

{{ product.metafields.custom.shipping_info }}

Step 2: Add CSS for Styling1. Open the CSS File:

  • In the Assets folder, open the theme.css or base.css file.
  1. Add the Following CSS Code:
.collapsible {
  background-color: #f1f1f1;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

.active, .collapsible:hover {
  background-color: #ccc;
}

.content {
  padding: 0 18px;
  display: none;
  overflow: hidden;
  background-color: #f9f9f9;
}

Step 3: Add JavaScript for Functionality1. Create a New JavaScript File:

  • In the Assets folder, click Add a new asset and create a new JavaScript file (e.g., collapsible.js).
  1. Add the Following JavaScript Code:
document.addEventListener('DOMContentLoaded', function() {
  var coll = document.getElementsByClassName("collapsible");
  for (var i = 0; i < coll.length; i++) {
    coll[i].addEventListener("click", function() {
      this.classList.toggle("active");
      var content = this.nextElementSibling;
      if (content.style.display === "block") {
        content.style.display = "none";
      } else {
        content.style.display = "block";
      }
    });
  }
});

Step 4: Include the JavaScript File in Your Theme1. Include the JavaScript File:

  • In the Layout folder, open theme.liquid.

  • Add the following line before the closing tag:

I hope that my solution works for you.

Best regards,

Amelia | PageFly

3

HI Thanks for this, Just one more question before I implement this code. Mobile version will be the same right? Because on mobile everything is perfect I don’t want to change any thing on the Mobile.