If you’d like to add an “Accept Cookies and Privacy Policy” pop up to your page, follow the steps below:
Step 1: Click “Edit” on the Funnel/Website page you’d like to add the pop up to
Step 2: Select “Add Element” > Scroll down to Custom and select “Custom JS/HTML” > Drag and drop element to the TOP of the Funnel/Website page
Step 3: Navigate to the Settings menu on the left side > Select “Open Code Editor > Paste the following code:
<script>
window.hlptcb = {};/*
* Editable Options
*/
window.hlptcb.popup_title = ‘Accept Cookies & Privacy Policy?’; //Title/Heading Optional
window.hlptcb.popup_message = ‘This website uses cookies to improve your user experience. By accepting and closing the cookie information banner when first visiting the page you consent to our use of cookies when scrolling the front page, clicking on a link or continuing to navigate in other ways…. ‘;
window.hlptcb.popup_more_title = ‘More information’;
window.hlptcb.popup_more_link_url = ‘#’;
window.hlptcb.popup_accept_button_title = ‘Accept Cookies’;
window.hlptcb.popup_style_width = ‘50%’;
window.hlptcb.popup_style_mobile_width = ‘100%’;
window.hlptcb.popup_style_z_index = ‘100’;
window.hlptcb.popup_style_bgcolor = ‘#333333’;
window.hlptcb.popup_style_title_color = ‘#1571a8’;
window.hlptcb.popup_style_more_link_color = ‘#1571a8’;
window.hlptcb.popup_style_button_color = ‘#FFFFFF’;
window.hlptcb.popup_style_button_bgcolor = ‘#1571a8’;
/////Editable options end here. Please don’t change the code below.
function hlpt_cb_docReady(fn) { if (document.readyState === “complete” || document.readyState === “interactive”) { setTimeout(fn, 1); } else { document.addEventListener(“DOMContentLoaded”, fn); } }
hlpt_cb_docReady(function() { console.log(‘Screen Width: ‘ + screen.availWidth); hlpt_display_cookie_banner();
});
window.hlptcb.popup_title = window.hlptcb.popup_title || ”;
window.hlptcb.popup_message = window.hlptcb.popup_message || ”;
window.hlptcb.popup_more_title = window.hlptcb.popup_more_title || ”;
window.hlptcb.popup_more_link_url = window.hlptcb.popup_more_link_url || ”;
window.hlptcb.popup_accept_button_title = window.hlptcb.popup_accept_button_title || ‘Accept Cookies’;
window.hlptcb.popup_style_width = window.hlptcb.popup_style_width || ‘50%’;
window.hlptcb.popup_style_mobile_width = window.hlptcb.popup_style_mobile_width || ‘100%’;
window.hlptcb.popup_style_z_index = window.hlptcb.popup_style_z_index || ‘100’;
window.hlptcb.popup_style_bgcolor = window.hlptcb.popup_style_bgcolor || ‘#3D384A’;
window.hlptcb.popup_style_title_color = window.hlptcb.popup_style_title_color || ‘#F04C5B’;
window.hlptcb.popup_style_more_link_color = window.hlptcb.popup_style_more_link_color || ‘#F04C5B’;
window.hlptcb.popup_style_button_color = window.hlptcb.popup_style_button_color || ‘#FFFFFF’;
window.hlptcb.popup_style_button_bgcolor = window.hlptcb.popup_style_button_bgcolor || ‘#F14D5C’;
window.hlptcb.popup_html = ”;
if(window.hlptcb.popup_message) { window.hlptcb.popup_html += ‘<div class=”hlpt_cb_wrapper”>’; if(window.hlptcb.popup_title) window.hlptcb.popup_html += ‘<p class=”hlpt_cb_title”><strong>’+window.hlptcb.popup_title+'</strong></p>’; window.hlptcb.popup_html += ‘<p>’+window.hlptcb.popup_message; if( window.hlptcb.popup_more_title && window.hlptcb.popup_more_link_url ) window.hlptcb.popup_html += ‘ <a href=”‘+window.hlptcb.popup_more_link_url+'”>’+window.hlptcb.popup_more_title+'</a>’; window.hlptcb.popup_html += ‘<div class=”hlpt_cb_btn_wrapper”><button id=”hlpt_cb_bclose” class=”close” type=”button” style=”border:0px; padding:5px 15px;border-radius: 5px;”>’+window.hlptcb.popup_accept_button_title+'</button></div>’; window.hlptcb.popup_html += ‘</p>’; window.hlptcb.popup_html += ‘</div>’ }
function hlpt_display_cookie_banner() { const hlpt_cb_div = document.createElement(“div”); hlpt_cb_div.innerHTML = window.hlptcb.popup_html; hlpt_cb_div.setAttribute(“id”, “hlpt_cb”); hlpt_cb_div.setAttribute(“class”, “cookie-banner”); hlpt_cb_div.style.setProperty(“display”, “none”);
if(screen.availWidth < 500) hlpt_cb_div.classList.add(“cookie-banner-mobile”);
document.body.append(hlpt_cb_div); hlpt_cb_update_styles();
console.log(‘Is cookie shown? – ‘ + localStorage.getItem(“hlpt_cb_closed”));
if (localStorage.getItem(“hlpt_cb_closed”) != “accepted”) { document.getElementById(‘hlpt_cb’).classList.add(“cookie-banner-opened”); hlpt_cb_div.style.setProperty(“display”, “block”); }; var close_buttons = document.getElementsByClassName(“close”); for (var i = 0; i < close_buttons.length; i++) { close_buttons[i].addEventListener(‘click’, hlpt_cb_close_banner, false); }
}
function hlpt_cb_close_banner() { document.getElementById(‘hlpt_cb’).classList.add(“cookie-banner-closed”); document.getElementById(‘hlpt_cb’).style.setProperty(“display”, “none”); localStorage.setItem(“hlpt_cb_closed”,”accepted”);
};
function hlpt_cb_update_styles() { document.querySelector(“.cookie-banner”).style.setProperty( “width”, window.hlptcb.popup_style_width ); if(document.querySelector(“.cookie-banner-mobile”) !== null) document.querySelector(“.cookie-banner-mobile”).style.setProperty( “width”, window.hlptcb.popup_style_mobile_width ); document.querySelector(“.cookie-banner”).style.setProperty( “position”, “fixed” ); document.querySelector(“.cookie-banner”).style.setProperty( “z-index”, window.hlptcb.popup_style_z_index ); document.querySelector(“.cookie-banner”).style.setProperty( “bottom”, “30px” ); document.querySelector(“.cookie-banner”).style.setProperty( “max-width”, “315px” ); document.querySelector(“.cookie-banner”).style.setProperty( “margin-left”, “30px” ); document.querySelector(“.cookie-banner”).style.setProperty( “right”, “30px” ); document.querySelector(“.cookie-banner”).style.setProperty( “padding”, “20px” ); document.querySelector(“.cookie-banner”).style.setProperty( “display”, “none” ); document.querySelector(“.cookie-banner”).style.setProperty( “align-items”, “center” ); document.querySelector(“.cookie-banner”).style.setProperty( “justify-content”, “space-between” ); document.querySelector(“.cookie-banner”).style.setProperty( “background-color”, window.hlptcb.popup_style_bgcolor ); document.querySelector(“.cookie-banner”).style.setProperty( “color”, “#FFFFFF” ); document.querySelector(“.cookie-banner”).style.setProperty( “border-radius”, “5px” ); document.querySelector(“.cookie-banner”).style.setProperty( “box-shadow”, “0 6px 6px rgba(0,0,0,0.25)” ); document.querySelector(“.cookie-banner”).style.setProperty( “font-family”, “system-ui” ); document.querySelector(“.hlpt_cb_btn_wrapper”).style.setProperty( “margin-top”, “20px” ); document.querySelector(“.hlpt_cb_wrapper”).style.setProperty( “position”, “relative” ); if(document.querySelector(“.hlpt_cb_wrapper .hlpt_cb_title”) !== null) document.querySelector(“.hlpt_cb_wrapper .hlpt_cb_title”).style.setProperty( “color”, window.hlptcb.popup_style_title_color ); if(document.querySelector(“.hlpt_cb_wrapper .hlpt_cb_title”) !== null) document.querySelector(“.hlpt_cb_wrapper .hlpt_cb_title”).style.setProperty( “margin-bottom”, “15px” ); if(document.querySelector(“.hlpt_cb_wrapper a”) !== null) document.querySelector(“.hlpt_cb_wrapper a”).style.setProperty( “color”, window.hlptcb.popup_style_more_link_color ); document.querySelector(“#hlpt_cb_bclose”).style.setProperty( “background-color”, window.hlptcb.popup_style_button_bgcolor ); document.querySelector(“#hlpt_cb_bclose”).style.setProperty( “color”, window.hlptcb.popup_style_button_color ); document.querySelector(“#hlpt_cb_bclose”).style.setProperty( “cursor”, “pointer” );
}
</script>
Step 4: Edit the “Editable Options” section within the code as you wish. You can edit the popup title, message, “More Information” and “Accept” button titles, colors, and more. Only edit information within the ‘ ‘ as shown below for the title (yellow underlined example). The 2nd Editable Option is circled in red below – this line is where you can edit the message that is displayed. You can also add the URL where the # is in the 4th editable option.
Step 5: Click “Save”
NOTE: This article is intended as a “how-to” showing you the steps to create a popup. Check with your compliance team, HR, or other legal expert regarding specific verbiage required for compliance in your region.
To create an email notification for abandoned carts, store owners can set it up by following these steps: Step 1: Create a New Email Template This can be accessed in: Marketing > Emails > Email Templates > “New” CTA. You can create from a Blank template or from an existing Template. Step 2: Add Shopping […]
Store owners can now enhance product discovery by adding SEO details to their listings, improving the overall shopping experience. How to use SEO for products can be added from Payments -> Products (Product Create/Edit Page) The SEO title, Description and custom slug can be configured on this page. Notes: Images: Search Engine Listing section: Handle […]
About Store owners can now provide manual payment options, like Cash on Delivery (COD) or Custom Payment Methods, enabling buyers to choose their preferred payment method at the time of pickup or delivery. This feature offers greater flexibility in payment choices for store transactions. How to Use Manual Payment Method Setup: Setting Up Manual Payment […]
Step 1: Create Live token in Shippo Access the live token in Shippo by generating it at: Settings > Advanced > API > Live Token Step 2: Setting up Package template & Shipping options in Shippo Setting up Package Template in Shippo: Setting up Shipping origin in Shippo: Setting up Shipping options in Shippo: Step […]
Store owners now have the ability to feature related products directly on their product details pages. Many store owners have expressed a desire to highlight recommended or similar items to users who view a specific product. By suggesting relevant products, they can enhance the overall discovery of additional items in their stores. How to use […]
Store owners now have the option to provide additional details for their products, including Weight, Dimensions, and SKU (Stock Keeping Unit). These fields are crucial for upcoming shipping integration features. We’ve introduced a new page dedicated to variants and pricing, allowing users to specify product weights, dimensions, and SKU details, along with the capability to […]
The organization of products on the Product List page posed a challenge, making it difficult for buyers to easily find what they were looking for, which became a significant hurdle for store owners. To address this issue, store owners now have the ability to add sorting and filtering options on the Product List page, enhancing […]
Store owners now have the ability to feature specific collections on any page within their store by placing a configurable element. Additionally, they can enhance their collections by adding images and SEO details, thereby improving the overall user experience. How to use: Some key aspects:
What is an Abandoned Cart? An abandoned cart happens when a shopper places items into their online cart but fails to finalize the purchase. This situation can arise from a range of factors, including interruptions, technical glitches, or hesitations regarding the transaction. Why are Abandoned Checkout Notifications Important? Automatic notifications for abandoned checkouts are essential […]