How to create a one-time popup notification on Shopify,

[Yashika21]

Hey, 

I want to add a pop up notification on my store of giving information about my 'buy one get one' offer. 

But I want that it should be shown once whenever a client is landing on my website. Like it should be once per session. 

Please let me know how to go about it. 

[B2Bridge]

Hi @Yashika21, to do this, please follow our instruction below:

Step 1: Open Online Store -> Themes -> Edit code

Step 2: Find theme.liquid file

Step 3: Paste this CSS code before the close </head> tag (You can custom its if you want):

 <style>
      .popup {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 1000;
        justify-content: center;
        align-items: center;
      }
      
      .popup-content {
        background-color: #fff;
        padding: 20px;
        border-radius: 10px;
        text-align: center;
        width: 400px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
      }
      
      .popup h2 {
        color: #28a745;
        font-size: 24px;
        margin-bottom: 15px;
      }
      
      .popup p {
        font-size: 16px;
        margin-bottom: 20px;
      }
      
      .cta-btn {
        background-color: #28a745;
        color: #fff;
        border: none;
        padding: 10px 20px;
        font-size: 16px;
        cursor: pointer;
        border-radius: 5px;
        transition: background-color 0.3s ease;
      }
      
      .cta-btn:hover {
        background-color: #218838;
      }
      
      .close-btn {
        position: absolute;
        top: 10px;
        right: 10px;
        font-size: 30px;
        color: #aaa;
        cursor: pointer;
      }
      
      .close-btn:hover {
        color: #333;
      }
    </style>

  Step 4: Paste the following code before close </body> tag:

 <div class="popup" id="popup">
    <div class="popup-content">
      <span class="close-btn" id="close-btn">&times;</span>
      <h2>Buy One Get One Free!</h2>
      <p>Hurry up! Don't miss this amazing offer on selected items. Buy one and get another free!</p>
      <button class="cta-btn">Shop Now</button>
    </div>
  </div>
    <script>
      // Show popup when page is load
      window.onload = () => {
  setTimeout(() => {
    document.getElementById('popup').style.display = 'flex';
  }, 2000);
};

// Close the popup when the close button is clicked
document.getElementById('close-btn').addEventListener('click', () => {
  document.getElementById('popup').style.display = 'none';
});
    </script>

[PageFly-Richard]

This is Richard from PageFly - Shopify Page Builder App
Hi @Yashika21 
Please add code here to do that:

1. Go to your Shopify Admin > Online Store > Themes.
2. Click "Edit Code" in the theme you are using (e.g., Dawn Theme).
3. Open the theme.liquid file.
4. Before </body>, add the following HTML and CSS:

<!-- Pop-up Notification -->
<div id="bogo-popup" class="bogo-popup">
    <div class="bogo-popup-content">
        <span id="bogo-close" class="bogo-close">&times;</span>
        <h2>Special Offer!</h2>
        <p>Buy One, Get One Free! Limited Time Offer.</p>
        <a href="/collections/all" class="bogo-btn">Shop Now</a>
    </div>
</div>

<style>
/* Pop-up Styling */
.bogo-popup {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.bogo-popup-content {
    background: white;
    padding: 20px;
    border-radius: 8px;
    text-align: center;
    width: 300px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}

.bogo-close {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 20px;
    cursor: pointer;
}

.bogo-btn {
    display: inline-block;
    padding: 10px 20px;
    margin-top: 10px;
    background: #ff6600;
    color: white;
    text-decoration: none;
    border-radius: 5px;
}

.bogo-btn:hover {
    background: #e65c00;
}
</style>
​
<script>
document.addEventListener("DOMContentLoaded", function () {
    // Check if the pop-up has already been shown in this session
    if (!sessionStorage.getItem("bogoPopupShown")) {
        document.getElementById("bogo-popup").style.display = "flex";
        
        // Set session storage to prevent it from showing again
        sessionStorage.setItem("bogoPopupShown", "true");
    }

    // Close the pop-up when clicking the close button
    document.getElementById("bogo-close").addEventListener("click", function () {
        document.getElementById("bogo-popup").style.display = "none";
    });

    // Close the pop-up when clicking outside the box
    window.addEventListener("click", function (event) {
        let popup = document.getElementById("bogo-popup");
        if (event.target === popup) {
            popup.style.display = "none";
        }
    });
});
</script>

And here is result

Hope my solution will help you resolve the issue.Best regards,
Richard | PageFly

[Christinebeauty]

Hi, same question. Is there any free shopify app that can enable this?

[PageFly-Richard]

Hi,

You can use the Klaviyo app to create a form for this purpose. It also allows you to set up a popup form for various needs.

If you need custom code to implement this, please share more details about your requirements, and I'd be happy to help!

Richard | PageFly

[Ellie-BOGOS]

Hi @Yashika21 and @Christinebeauty 😊

You can try out this TOTALLY FREE pop up app (which is trending this February):

It also integrates seamlessly with BOGOS to create engaging gift offers, smart discounts, and effective bundles. You can get 7-free days started with BOGOS today - the app makes it super easy to create and manage all your promotional offers while working seamlessly with your popup strategy.

[Stacy_Zhuk]

Hello @Yashika21,

Some custom coding is needed to add this pop-up. You can also consider apps like Privy, Sale Kit by Qikify, and so on.

Please, get in touch if you need any consultation or assistance.

Best regards,
Anastasia

[LizHoang]

Hi @Yashika21, thanks for reaching out.

In this case, you can consider the Avada Email Marketing app to create forms and popups. 

Liz