How to make a product image sticky in Empire Theme?

Store Design
1

Hi!

Just want to ask since I can’t find the container of the product image to edit and make it sticky. Can you please help me with this?

Shopify store: https://irwinsmegastore.ie/collections/electric-cookers/products/zanussi-55cm-freestanding-electric-cooker-black-zcv46250ba

Appreciate the help for this :heart:

2

Hi @IXfrance ,

Please follow the following steps. This code only works on 750px screen since it change the layout on smaller screens.

  1. Go to your Admin store > Online store > Themes > Edit code.

  2. Open the theme.scss file under the Asset folder and add the code below.

@media only screen and (min-width: 750px) {
.product-gallery.click-to-zoom-enabled {
    position: sticky !important;
    top: 20px !important;
    height: 100% !important;
}
}
1 Like
3

Thanks! It works. I will just need to figure out on how to put it in the middle when I scroll. I really appreciate it :slightly_smiling_face:

1 Like
4

Hi @made4Uo !

I currently am also using Empire but this solution does not work for me. This is my store: www.pipe-decor.com can you take a look?

5

Hi @ihernandez ,

The reason it does not work with your current theme setting is because position: sticky needs a wrapper or a parent container.

To make this work in your current theme, it will require a little knowledge of HTML.

  1. Go to Admin page > Online store > themes > Actions > Edit code

  2. I am not familiar with the files in the pipeline theme but it should be the main product.liquid that you can find under the Section folder.

  3. Find the “product-gallery”, above the inline <div code. Add the code “

    ”.

  4. Find the closing tag for the “product-gallery”, then add the code “”

Please refer to the video below on how to find the opening and closing tag. Skip to 4:58

  1. Next, open the theme.css file under the Asset folder, and add the code below
.product-gallery  {
position: sticky !important;
top: 10px !important;
height: 100% !important;
}
6

Works great!

1 Like
7

Hi @made4Uo ,

We just updated our Empire theme to the latest version 8.0 and your sticky code is not longer working for us. Can you please let me know if you can see what the issue is? Thank you!

http://bit.ly/3ImYvsH

1 Like
8

Hey @made4Uo ,

I just tried out your code for my online shop C BDÍA (c bdia.eu).

We have the responsive theme. When I try to edit the code I noticed that we don’t have a theme.scss file under the assets folder. Is there another opportunity where I can put your code in?

Looking forward to your answer - thanks in advance!

Best Regards,

Hanni

9

I have the same issue with empire v8 - any resolution?