Sticky Position Issue In EasyStore Single Page (SP Page Builder Pro) - Question | JoomShaper
šŸŽƒ Halloween Sale is Live! Get 35% OFF on all plans. Sale ends soon!Ā Get Offer

Sticky Position Issue In EasyStore Single Page (SP Page Builder Pro)

V

Vojkan Okičić

EasyStore 6 months ago

Hi JoomShaper Team,

I am currently working on a project using SP Page Builder Pro + EasyStore and I'm trying to apply a position: sticky effect to the product gallery on the Single product page (EasyStore > Single), but the sticky behavior is not working as expected.

Here's what I have tried:

Applied sticky to the row containing the image gallery using position: sticky + top values. I added ID/class to the row itself and tested various z-index values.

Tried adding overflow settings (overflow: visible !important) to all parent containers including .sppb-section, .sppb-container-inner, .sppb-row, .sppb-column, .sppb-column-addons, and even to wrappers.

Verified that sticky works on my other Joomla site, built also with SP Page Builder, which uses similar row and column structure – sticky behaves fine there.

Attempted to override potential JavaScript behavior using custom JS that explicitly sets position = sticky, also tested inside the Custom Code block in the template.

Tried moving the gallery into a new duplicated section, row, and div to isolate the problem – sticky still does not work.

Identified that the structure seems to apply overflow or resets positioning via JavaScript on scroll or re-render.

Targeted specific wrappers using addon IDs (e.g. #sppb-addon-wrapper-XXXX) as I successfully did on another SP Page Builder site.

Suspicion: There may be a hidden script or behavior specific to the addon-root-easystore-single-gallery that resets or conflicts with sticky positioning. This component appears to behave differently compared to standard SP Page Builder addons.

Question:

Is there any built-in behavior in EasyStore > Single page layout or in the addon-root-easystore-single-gallery that disables or overrides position: sticky?

Is there a recommended method or hook for customizing layout behavior of the gallery block (or surrounding section) in EasyStore templates?

Any guidance or workaround would be very much appreciated!

Thank you in advance,Vojkan

0
9 Answers
Atick Eashrak Shuvo
Atick Eashrak Shuvo
Accepted Answer
Support Agent 6 months ago #189622

Hello Vojkan,

Apologies for the inconvenience. Could you please share a visual reference of what you are trying to achieve? Additionally, if possible, kindly provide the administrator access to your website so I can check your progress. Before sharing access, please make sure to take a full backup of your site.

Looking forward to your response.

Best regards

0
V
Vojkan Okičić
Accepted Answer
6 months ago #189678

Hello Atick!

Thank you for your response and willingness to help.

Here’s a quick summary of what I’m trying to achieve and what I’ve tested so far: https://pinocchiomoebel.de/tmp/sticky.jpg Goal: I want the image gallery on the Single Product Page (in EasyStore) to stay fixed (sticky) only on desktop devices, so it remains visible while the user scrolls through the rest of the page (I’ve placed the description next to the gallery, right below the title), buttons, and price.

What I’ve done so far:

Assigned id="sticky" to the wrapper containing the gallery.

Applied position: sticky in the CSS.

Since it didn’t work, I added overflow: visible !important to all parent containers:

.sppb-section, .sppb-container-inner, .sppb-row, .sppb-nested-row, .sppb-column, .sppb-column-addons

On another website I’ve built using SP Page Builder, sticky works perfectly using the .sppb-addon-wrapper – which makes me believe that something in the structure or the EasyStore gallery addon is blocking sticky behavior here.

I’ve attached three screenshots with clear annotations showing what I’m trying to achieve: https://pinocchiomoebel.de/tmp/sticky.jpg

The gallery should remain fixed on the left while scrolling.

The rest of the page should scroll normally.

The goal is to avoid the empty space below the gallery – the sticky element should follow the height of the right-side content.

I would greatly appreciate any advice or insight – this feature would make a big difference in our product presentation design. https://pinocchiomoebel.de/tmp/sticky.jpg https://pinocchiomoebel.de/tmp/Screenshot%202025-04-09%20at%2001-08-43%20Helix%20Ultimate%20Framework.png https://pinocchiomoebel.de/tmp/kod...jpg

0
Atick Eashrak Shuvo
Atick Eashrak Shuvo
Accepted Answer
Support Agent 6 months ago #189758

I have make some changes in your Single product page. Please check

0
V
Vojkan Okičić
Accepted Answer
6 months ago #189764

Hello Atick,

Thank you for your quick intervention and support.

I noticed that the gallery is now fixed – which is great. However, it seems that some parts of the gallery are now overlapping the rest of the content. I believe I can easily fix this with some additional adjustments to the z-index, top margin, and element boundaries.

Could you please clarify exactly what changes you made? Did you use any JavaScript or additional CSS, and where exactly were those changes applied?

Thank you once again for your help and effort.

0
Atick Eashrak Shuvo
Atick Eashrak Shuvo
Accepted Answer
Support Agent 6 months ago #189766

Thank you for your message.

I’m glad to hear the gallery is now displaying correctly. Regarding your question — I didn’t use any custom JavaScript or CSS to implement the changes. Instead, I used the Interaction feature built into SP Page Builder.

This powerful feature allows for various design enhancements, including animations and dynamic effects, without the need for custom code. You can learn more about how it works by reviewing the official documentation here: šŸ”— SP Page Builder Interaction Documentation

Additionally, for inspiration and to explore what's possible with Interactions, you can view this demo page showcasing different use cases: šŸ”— SP Page Builder Interaction Showcase

If the current layout is causing content overlap, I recommend fine-tuning the z-index, margin, or padding settings directly within the SP Page Builder interface. These minor adjustments should help align everything properly.

Please don’t hesitate to reach out if you need further assistance.

Best regards

0
V
Vojkan Okičić
Accepted Answer
6 months ago #189830

Hello Atick,

Thank you again for your effort and previous suggestions.

I have to admit that implementing a sticky effect in SP Page Builder has been challenging for quite some time. I’ve noticed that many users on the forum face similar issues – especially when trying to make an element remain fixed while the rest of the page scrolls. In my case, it’s the product image gallery on the EasyStore Single Product page.

I appreciate that you tried using the Interaction options, but it still doesn’t produce the expected result that a classic sticky effect would (like in this example I’ve successfully implemented: šŸ”— Example of working sticky effect on my site).

You can also view the current version of the page here: šŸ”— Product page where I’m trying to apply sticky

I’d like to ask – is there any known or recommended method within SP Page Builder to enable a true position: sticky effect, without conflicts from parent container structures?

If there’s a way we can find a solution together, I’d be happy to follow your guidance and provide any additional info or access you may need.

Thank you in advance for your time and support.

0
Atick Eashrak Shuvo
Atick Eashrak Shuvo
Accepted Answer
Support Agent 6 months ago #190026

Thank you for your detailed message and for sharing your experience with SP Page Builder. I truly appreciate the time you've taken to explain the issue and the examples you’ve provided.

First of all, I sincerely apologize for the inconvenience you've faced. I understand how important it is to achieve the desired sticky behavior, especially for key elements like the product image gallery on your EasyStore product page.

Unfortunately, this specific request falls outside the scope of our official support, as it involves advanced customization. While SP Page Builder offers many powerful layout tools, achieving a precise position: sticky effect often depends on the overall structure of the site and may require deeper front-end development knowledge to avoid conflicts with parent containers or template overrides.

I recommend reaching out to a developer with strong front-end experience who can help implement a tailored solution that meets your needs.

Thank you again for your understanding, and please don’t hesitate to reach out if you have any other questions within the scope of our support.

Best regard

0
V
Vojkan Okičić
Accepted Answer
6 months ago #190031

Hello,

Thank you for your response, but honestly – I’m disappointed with the outcome.

My experience in front-end development predates the existence of JoomShaper as a company. So this isn’t about needing an ā€œadvanced developerā€ – it’s about the fact that sticky simply does not work within the SP Page Builder + EasyStore combination. The reality is that implementing sticky requires just two lines of CSS, and every modern page builder – including Joomla-based ones – supports it as a default feature. So this is clearly not a user-side issue or a matter of user knowledge.

I expected a clear answer to a very simple question – what exactly is preventing sticky behavior, or what exactly was changed during your intervention. Instead, I’ve received yet another generic reply that avoids the core issue.

I’ve even offered collaboration, shared full access and complete code, yet it seems there is neither the will nor the knowledge to solve something that many users have been asking about for months – not just in my case, but across your forum.

In any case, thank you once again for confirming that paid support for your product is essentially limited to shifting responsibility.

Best regards, Vojkan

0
Atick Eashrak Shuvo
Atick Eashrak Shuvo
Accepted Answer
Support Agent 6 months ago #190039

Hello Vojkan,

Thank you for your candid feedback, and I truly appreciate the time you’ve taken to share your concerns.

You're absolutely right that implementing a position: sticky effect typically requires minimal CSS, and we fully acknowledge your expertise in front-end development. I understand your frustration, especially when the expected behavior is not achieved despite the simplicity of the concept.

To clarify from a technical standpoint: position: sticky requires certain structural conditions to work correctly. One of the most common limitations is that the sticky element must reside within a parent container that is tall enough to allow the sticky behavior to take effect. If the parent container is shorter than the height required for scrolling, the sticky positioning will not behave as expected.

In the example you shared where sticky works correctly, the parent container is likely tall enough to accommodate the sticky effect. On the current product page you're working on, the parent wrapper may not provide the necessary vertical space, which prevents the effect from being triggered properly.

While SP Page Builder doesn’t explicitly prevent the use of sticky positioning, its layout system (combined with template constraints or row structures) can sometimes result in container behaviors that inadvertently block sticky effects.

That said, I genuinely value your feedback and agree that improvements can be made—especially when it comes to clarity and documentation on such features. I will make sure to pass along your comments to the development team so they can take this into account for future updates.

Thank you again for your patience and understanding.

Best regards

0