Need help stacking image with impulse theme

Store Design
, , ,
1

Hello, I am looking for some help with stacking a second stationary image on top of a parallaxed hero image. I’m using the Impulse theme.

is there any way to do that?

hero slide edit.jpeg
hero slide edit.jpeg2550×1381 442 KB

2

Hello @PLP234509 ,

You can try to follow these steps:

Go to Online Store → Themes → Actions → Edit code

Find “section/hero.liquid” file → Look for the code that sets the parallax background image (it may look like this)

Right after the above code, add the following code to insert the second stationary image:

Go back to Assets folder → base. css file → add this following code at the bottom of page

.hero__image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1; /* Adjust the z-index value if necessary */
}

.hero__image-overlay img {
  max-width: 100%;
  height: auto;
}

Save and preview

Hope this can help. Let us know if you need any further support.

Ali Reviews team

3

Hello!

Thank you for the response! We are having issues executing the code you gave us. Assuming we did it correctly, it seems to not have had any effect at all. Is there a way you can take a look at the back end an implement it in case we are missing something? (we are new to shopify)

Also it’s listed as “Hero (optional slideshow)” by the way, not sure if that changes anything

Thanks!