Direct image slider on narrative theme product page

New Member
4 0 0

Hi all!

I'm trying to get my image slider on the "narrative theme" to work without "overlaying pop-up screen". 

There's a perfect image slider on the home page and I'm confused why it's so bad on the product page. I could manually add the slider to each page but I want the product images to keep transfering automatically, saving a lot of time in the long run.

Am I right in thinking it shouldn't be too hard to get rid of the "pop-up mechanism" and just have it be there straight away when you open a product page?

This is a quick grab from the theme.scss.liquid that seems relevant to me but I might be wrong!

// Product Slideshow

.product-slideshow {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 0;
background-color: $color-main-bg;
opacity: 0;
pointer-events: none;
z-index: $z-index-medium;
overflow: hidden;
transition: opacity 0.25s ease-out;
.product-slideshow--show {
height: auto;
opacity: 1;
overflow: auto;
pointer-events: auto;

.product-slideshow__close {
position: absolute;
right: $gutter;
top: 5px;

.icon {
fill: $color-primary;

@include media-query($medium-up) {
top: $gutter;

.product-slideshow__content {
height: 100%;
padding: ($gutter * 3) 0 ($gutter * 7);

@include media-query($medium-up) {
padding: ($gutter * 4) 0 ($gutter * 7);

.product-slideshow__slide {
.product-slideshow--single & {
cursor: default;

Thank you,


New Member
1 0 0


Have you tried it? Did it work for you? I am searching for a solution for the Product Page as well, anything that helps the customers to view the product variants and pictures at first sight (not having to scroll down, and even know that there are images down there!!!).



New Member
4 0 0

Sorry for my very late reply!

I ended up hiring Jasoliya for this job. Very quick turnaround (1 day) for $50.

Highly recommended!