Header/Footer Overlaps with Bundle Page

Sometimes you may notice that your bundle or products overlap with your header and footer. Not a problem - there is an easy fix!

Because there are so many themes out there, it's difficult to guarantee seamless integration with all of them. We've outlined some steps below to help solve this issue.

Header or Footer Overlapping

Go to your Shopify admin.
Head to Online Store > Themes > Edit Code
In the code editor, click through to theme.liquid on the left hand side. This will open the general liquid code for your theme.
Most themes will have all the code nestled within the <body></body> tags. Copy and paste the below code right before the closing </body> tag and Save Changes.

{% if request.path contains 'bundle-builder' %}
<style>
#bdlr__bundle-widget {
    padding-top: 15px;
    position: relative;
    z-index: 11111;
}
</style>
{%endif%}

If you are noticing only your bundle products appear to be overlapping, please follow the below steps instead:

Go to your Shopify admin.
Head to Online Store > Themes > Edit Code
In the code editor, click through to theme.liquid on the left hand side. This will open the general liquid code for your theme.
Most themes will have all the code nestled within the <body></body> tags. Copy and paste the below code right before the closing </body> tag and Save Changes.

{% if request.path contains 'bundle-builder' %}
<style>
.bdlr__products--inner{
      	position:relative !important;
      }
</style>
{%endif%}

If the above doesn't seem to fix the issue, please reach out to us at support@soviapps.com and we'd be happy to help!