How do I set a one-time pop up on the home page?

Solved

How do I set a one-time pop up on the home page?

megawdyaaaa
Excursionist
43 2 0

hallo guys, i really need a help . i wanna ask about pop up, How to set the pop up so that it appears only once on the home page, because the current situation is that when you enter or click on another menu the pop up appears again? i need really fast respond

Accepted Solution (1)
Dan-From-Ryviu
Shopify Partner
9534 1914 1949

This is an accepted solution.

You can try this 

// Function to set a cookie
function setCookie(cname, cvalue, exdays) {
    var d = new Date();
    d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
    var expires = "expires="+d.toUTCString();
    document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

// Function to check if a cookie exists
function getCookie(cname) {
    var name = cname + "=";
    var decodedCookie = decodeURIComponent(document.cookie);
    var ca = decodedCookie.split(';');
    for(var i = 0; i < ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ') {
            c = c.substring(1);
        }
        if (c.indexOf(name) == 0) {
            return true;
        }
    }
    return false;
}

// Function to display the popup
function displayPopup() {
    if (!getCookie('visitedHomePage')) {
        // Show your popup code here
        setCookie('visitedHomePage', true, 30); // Set the cookie to expire after 30 days
    }
}

// Call the displayPopup function when the page loads
window.onload = function() {
    displayPopup();
};

- Helpful? Like and Accept solution! or Buy me coffee
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

View solution in original post

Replies 11 (11)

Dan-From-Ryviu
Shopify Partner
9534 1914 1949

Hi @megawdyaaaa 

Dan here from Ryviu: Product Reviews & QA app.

 

Could you share your store URL to check? 

 

- Helpful? Like and Accept solution! or Buy me coffee
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

megawdyaaaa
Excursionist
43 2 0

the url https://www.laicaactive.com/

now I have succeeded in editing the theme.js code. The pop only appears on the home page before appearing on every menu. but the problem is now. If we go back to the home page from another menu, even though it has previously been closed, it still appears again. I don't know why

Dan-From-Ryviu
Shopify Partner
9534 1914 1949

You must use JavaScript to set a cookie when the popup is closed or when the user signs up for the newsletter or check for the presence of this cookie when the user visits the homepage, if the cookie is not present, trigger the popup to appear.

- Helpful? Like and Accept solution! or Buy me coffee
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

Dan-From-Ryviu
Shopify Partner
9534 1914 1949

I recommend you check settings of your newsletter from your theme customize or you can contact support of that theme and ask for your request. 

- Helpful? Like and Accept solution! or Buy me coffee
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

megawdyaaaa
Excursionist
43 2 0

Thank you for your response, but is it possible on the home page when the pop up appears only once and when closed it doesn't appear again when we go to another menu and return to the home page. Is there any coding that I need to add? because I don't understand how to set cookies
this file code theme. js , Am I missing something or is there coding that needs to be added?

ss.png

Dan-From-Ryviu
Shopify Partner
9534 1914 1949

This condition ends here, you may need to add else if condition and add modal newsletter popup into Screenshot 2024-03-06 at 10.39.03.png

- Helpful? Like and Accept solution! or Buy me coffee
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

megawdyaaaa
Excursionist
43 2 0

thanks for the tips, can you tell me what coding to add if you want the output to be like what I explained above?

Dan-From-Ryviu
Shopify Partner
9534 1914 1949

Add this code right after end of if condition of your code 

else {
add open modal cod ehere
}

 

 

 Screenshot 2024-03-06 at 10.39.03.png

- Helpful? Like and Accept solution! or Buy me coffee
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

megawdyaaaa
Excursionist
43 2 0

Can you help me to create the if condition? because I'm very confused, I hope you can help

conditions where:
1. The pop up appears once on the home page
2. When you go to another menu and return to the home page, the pop up doesn't appear

megawdyaaaa
Excursionist
43 2 0

because I've tried to create an if condition but it failed and searching on AI also failed

Dan-From-Ryviu
Shopify Partner
9534 1914 1949

This is an accepted solution.

You can try this 

// Function to set a cookie
function setCookie(cname, cvalue, exdays) {
    var d = new Date();
    d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
    var expires = "expires="+d.toUTCString();
    document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

// Function to check if a cookie exists
function getCookie(cname) {
    var name = cname + "=";
    var decodedCookie = decodeURIComponent(document.cookie);
    var ca = decodedCookie.split(';');
    for(var i = 0; i < ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ') {
            c = c.substring(1);
        }
        if (c.indexOf(name) == 0) {
            return true;
        }
    }
    return false;
}

// Function to display the popup
function displayPopup() {
    if (!getCookie('visitedHomePage')) {
        // Show your popup code here
        setCookie('visitedHomePage', true, 30); // Set the cookie to expire after 30 days
    }
}

// Call the displayPopup function when the page loads
window.onload = function() {
    displayPopup();
};

- Helpful? Like and Accept solution! or Buy me coffee
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.