Custom Popup not showing in Prestige theme

Online Store and Theme Development
1

I’ve created a custom popup for my client. The popup was working perfectly in Crave theme, but now that I have transferred the files into Prestige theme, the popup is not displaying at all, no matter what I try.

The website is farm2fire.com using prestige theme. All files are live
An affiliate link for popup is
Farm 2 Fire
and should show popup.

In the Chrome developer tools, the modal has an inline styling for display:block and is working properly, but not showing as a fixed position above all the main content.

You can see all the files in Chrome Developer Tools.

A little more context:
I used 3 different files to make the popup.

  1. Theme.liquid – popup HTML within body tag

  2. Popup.css – linked in the head section of theme.liquid file
    {{ ‘popup.css’ | asset_url | stylesheet_tag: preload: true -}} above the theme.css asset link

  3. Popup.js – linked in the head section of theme.liquid file

The popup is displayed only if the document.location.href matches an affiliate link. In popup.js, I have an array of objects that store the affiliate links for partner resorts. If the resort.affiliateURL == document.location.href, then I run a function called enableModalFn(), that changes the CSS for modal-wrapper from none to block to display the popup in theme.liquid.

In theme.liquid, I have tried moving the popup HTML:

  • above/below/within the main tag
  • directly below the body tag
  • last element in the body tag and outside of the main tag
  • pasted the HTML popup including linking the css and script tag within a section tag and rendering in theme.liquid
  • I’ve tried a snippet tag too and no luck.

Thanks for the help!

2

There’s a style rule in theme were the display is set to none from within the theme that already exists if you haven’t touched the theme.css file.

The below rule is coming from theme.css so you could experiment with more specific class names and re-write some of your JS, or re-write some of the rules within the theme (not recommended).

:where(.modal, .drawer, .popover, .header-search) {
  z-index: 999;
  display: none;
  position: relative;
}
2 Likes
3

Thanks for taking a look Taylor. That fixed the problem!

1 Like
4

Sure thing! Any time you’re using code from one theme and it just doesn’t work in a new environment, CSS specificity rules/clashing is usually the issue.

Or at least checkdown is CSS and then check your JS (make sure it’s being initialized and not clashing with something else).

Glad you got it fixed.

3 Likes
5

@taylor thanks for sharing the solution and @wildMtnAgency welcome to the community forums!

2 Likes
6

Yup, looks like it’s working as expected. Nice job! The popup shows up on desktop, tablet, and phones.
Suggestion: for mobile devices I would make the position fixed with an offset from the top because the only way to see the popup on devices is by scrolling down quite a bit. (my $0.02)