**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