Cacher is the code snippet organizer for pro developers

Theme: Narrative

Last version(s) tested: 6.0.5

Recommended design time: 15 minutes

---

What you have

What you want

---

What you do

Step 1: Open product-template.liquid and change

<div class="page-width page-width--no-gutter">

to

<div class="page-width page-width--no-gutter" style="display: none;">

Step 2: Just above the div we just edited add this:

  <div id="appendSlideshow"></div>

It should now look like this:

Step 3: In the same file, add this code to the bottom of the file, just before the schema starts

<style>
  .product-slideshow {
    height: 700px !important;
    position: inherit !important;
  }
</style>

<script>
  window.onload = function(e){ 
    let appendElement = document.getElementById("appendSlideshow")
    let slideshow = document.getElementsByClassName("product-slideshow")[0]
    appendElement.appendChild(slideshow); 
    document.getElementsByClassName("product-slideshow__open")[0].click();
  }
</script>

Step 4: Find and comment out the utils.disableScrollBody() and trapfocus in theme.js (around line 5630 in Narrative 6.0.5) like so:

---

Additional notes:

If it doesn’t work you might need to remove the .min from the theme.liquids theme.min.js import to make sure the theme isn't loading the minified unmodified js file