how to make footer under collapsible on desktop?

[SinghSells]

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

[PageFly-Amelia]

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 Structure

1. Access the Theme Editor:

   • Go to your Shopify admin panel.

   • Navigate to Online Store > Themes.

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

2. 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.

3. Add Collapsible Sections:

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

<div class="collapsible-section">
  <button class="collapsible">Product Description</button>
  <div class="content">
    <p>{{ product.description }}</p>
  </div>
</div>

<div class="collapsible-section">
  <button class="collapsible">Product Specifications</button>
  <div class="content">
    <p>{{ product.metafields.custom.specifications }}</p>
  </div>
</div>

<div class="collapsible-section">
  <button class="collapsible">Shipping Information</button>
  <div class="content">
    <p>{{ product.metafields.custom.shipping_info }}</p>
  </div>
</div>

Step 2: Add CSS for Styling

1. Open the CSS File:

   • In the Assets folder, open the theme.css or base.css file.

2. 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 Functionality

1. Create a New JavaScript File:

   • In the Assets folder, click Add a new asset and create a new JavaScript file (e.g., collapsible.js).

2. 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 Theme

1. Include the JavaScript File:

   • In the Layout folder, open theme.liquid.

   • Add the following line before the closing </body> tag:

<script src="{{ 'collapsible.js' | asset_url }}"></script>

I hope that my solution works for you.

Best regards,

Amelia | PageFly

[SinghSells]

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.