How can I remove the parallax effect on my website's hero image?

Store Design
,
1

Hey guys!

So I’m trying to remove the parallax effect on the hero image at the top of my website right beneath the header. I’ve tried using AI to get help removing the lines that indicated that the parallax effect should be active on the image, but unfortunately it didn’t help. Can anybody tell me what to do?

Website: https://migraenehjaelp.myshopify.com/
Password: skeuro

Currently the code is looking like this, but I’m not sure if i need to change something elsewhere?

{%- if section.settings.image != blank -%}
{%- assign img_url = section.settings.image | img_url: ‘1x1’ | replace: ‘1x1.', '{width}x.’ -%}
{{ section.settings.image.alt | escape }}

{{ section.settings.image.alt }}

{%- endif -%}

2

Hi @ogendahlwebsite

To remove the Effect, you cannot edit the code you provided.

The effect of the image is handled by Javascript, at even “scroll”.

If you want to remove it, go to your theme’s javascript page. (Find the file ending in “.js”).

Find this code:

onScroll: function() {
        if (!this.isVisible) {
          return;
        }
  
        // If a scroll event finds Shopify's review app,
        // update parallax scroll positions because of page reflows
        if (window.SPR && !reset) {
          this.setSizes();
          reset = true;
        }
  
        requestAnimationFrame(this.scrollHandler.bind(this));
      }

Add "return;" on this place

view (30).png
view (30).png593×521 24.4 KB

Save the file and check the results.

We’re happy to support you. Can you give us a like? This can greatly motivate us to contribute to our community.

3

Hey @BSS-Commerce

Thanks so much for your help. It worked!