Search the Community

Site URL: https://robin-impala-w8cj.squarespace.com/config/ Can I show pop up modal on a custom trigger? Please take a look at the custom code injection

Hello, I need some help regarding the website of my client. He requires that I insert a pop-up to social media accounts after subscribing in the newsletter? Is that possible? I've been searching solutions online and I can't find any answers. If it's possible, can you please provide me a code or instruction on how to do it? Thank you

Hi, Is there a code to center the text on the promotional pop up - on mobile I am currently using this code, but it only centres the body of the text and not the main title. .sqs-slice-body-content p { text-align: center; width: 100%; } .sqs-slide-wrapper[data-slide-type="popup-overlay"] [data-slice-type="body"] { max-width: 100%; }

Site URL: http://thelovedself.com Hello all! I am looking to customize the header font on my pop-up with my uploaded font. I found this CSS cod on a blog online and it seems to work in design on the backend but when I go to my URL it's showing this defaulted font. My template is Brine. The code I'm using is as follows, .sqs-slide-wrapper[data-slide-type="popup-overlay"] [data-slice-type="heading"]:not([data-compound-type]) h1#sqs-slash-page-header { font-family: 'NOIRetBLANC' !important; } Any suggestions or guidance is so deeply appreciated. Thank you in advance!

Site URL: https://hoodzpahdesign.com/ Hello, I am trying to create an effect similar to Hoodzpah Design's intro sentence, where you can hover over links and a gif pops up but goes away when you move the cursor. I have done some searching but can't seem to find the right combination of css to make it happen. Thanks! Kate katemelvin.com

Hopefully a simple question as I am building a website for an Alcohol selling website and one of the last few things to do is I need to do age confirmation when people go to the home page with simply 2 answers, Over 18 or Under 18. The first lets them into the site and the other goes to a single page explaining why they can't access the site. I just can't find anywhere to set up the pop up question?

Site URL: https://aradia.io Hi! Is there a way to have non-promotional pop ups come up? I'd like to design some educational pop ups for users that create more engagement with the site. Any ideas on how I can make this happen? Thanks!

Is it possible to change the promotional popup (specifically the style where it's a pop-up box in the lower right corner) to have rounded corners instead of square corners?

Hello all, new here and rusty on my coding skills. I was hoping someone would have javascript that will work in the additional info section on the product page to create a popup window that I can put my sizing information in?

Site URL: https://www.isabelleonjewelry.com Hello! I was wondering if there is any way to keep the picture in my Promotional PopUp on mobil as well? I would like to keep it the same instead of it just displaying text on mobil.

Site URL: https://crocodile-shark-4lez.squarespace.com/the-team Hey, I wanted to know how can i make buttons open popups, i sued the people template which allows for buttons to be placed under the cards, but i cant find how do you make them open up popups. Any help would be appreciated The PW is 123

On my home page There is a button called" Shop now. I need when people click on it , it' will show a "Disclaimer Popup When They click agree it will go to the shop page.. " I'm trying to link popup with my button, I already created popup using squarespace but don't know how to link . I'd really appreciate if you help me about this issue. Thanks

Hi there, I am creating a wine sales website and I need a pop up to come up every time a user clicks on the wines sales page. I have created an age restricting pop up using the promotional pop up in squarespace but the problem is the frequency. Once a user has clicked it once, then it doesn't come back again. I have found this code: <script> window.localStorage.setItem('test', '0'); window.localStorage.setItem('squarespace-popup-overlay', '0'); </script> from another forum but when I insert the code - the pop up doesn't go away after the agree button is selected. Could someone please help solve this? Cheers, Izzy

Promotional pop-ups are a great way to grab someone’s attention when they visit your website. You can let potential customers know about exciting sales or the launch of a new product. Pop-ups can also be used for more ‘housekeeping’ purposes like conducting surveys or asking visitors to verify their age for any age-restricted content you might have. On Squarespace you can tailor a variety of aspects of your pop-ups to maximize their impact. You can choose the layout, deciding between a subtle placement in the bottom right corner or going for a more dramatic, full page design. You can also customize the timing and frequency that they display. Learn more in creating a promotional pop-up. How have you used promotional pop-ups on your website? Which settings have been the most impactful for you? Share in the comments below!

Site URL: https://www.daancoaching.com/ Hi, I'm trying to create a promo pop-up but for some reason the image that shows on the web version disappears on the mobile version. Any code for this? I've been trying different things but nothing seems to work. See attached images.

Site URL: https://sapphire-poodle-5w36.squarespace.com/config/pages The following is the code we used for a testimonial; the pop-up works fine but when one closes it and the video is not paused, the background sound will keep playing. Please help us close the video pop-up without any background sound (aka stop the video on the background automatically ). The code is on the New Testimonial page https://sapphire-poodle-5w36.squarespace.com/config/pages password: hello97 Thank you for your time! <!DOCTYPE html> <head> <title>Creating a modal window with HTML5 &amp; CSS3</title> <style> .modalDialogH { position: fixed; font-family: Proxima Nova, sans-serif; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0,0.8); z-index: 99999; opacity:0; -webkit-transition: opacity 400ms ease-in; -moz-transition: opacity 400ms ease-in; transition: opacity 400ms ease-in; pointer-events: none; !important> } .modalDialogH:target { opacity:1; pointer-events: auto; } .modalDialogH > div { max-width: 80%; height: 70%; position: relative; margin: 10% auto; padding: 5px 20px 20px 20px; border-radius: 10px; background: #fff; background: -moz-linear-gradient(#fff, #999); background: -webkit-linear-gradient(#fff, #999); background: -o-linear-gradient(#fff, #999); } .closeH { background: #606061; color: #FFFFFF; line-height: 25px; position: absolute; right: 2%; text-align: center; top: 2%; width: 24px; text-decoration: none; font-weight: bold; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; -moz-box-shadow: 1px 1px 3px #000; -webkit-box-shadow: 1px 1px 3px #000; box-shadow: 1px 1px 3px #000; } .closeH:hover { background: #00d9ff; } h2 { text-align:center; } </style> </head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <body> <a href="#Haruka M., Phillips Exeter Academy (USA)"><img src="https://i.ibb.co/5L3Q0vL/Haruka-Image.png" alt="Haruka-Image" border="0"style="position:relative; display: block; margin-left: auto; margin-right: auto; width: 80%;"></a> <a href="#Haruka M., Phillips Exeter Academy (USA)">Haruka M., Phillips Exeter Academy (USA) [VIDEO]</a> <div id="Haruka M., Phillips Exeter Academy (USA)" class="modalDialogH"> <div> <a href="#closeH" title="Close" class="closeH">X</a> <h2 style="font-size:2.5vw;">Haruka M., Phillips Exeter Academy (USA)</h2> <h2></h2> <iframe width="100%" height="80%" src="https://www.youtube.com/embed/W27_K-9fpI8" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> </div> </div> </body>

Site URL: https://www.grapesodastudio.uk/ hello almighty and gracious squaremind, having an issue with a promotional popup on mobile where the pop-up appears without it's background image and unusually low on the phone screen. Images should show the desktop and mobile emulated (it does exactly the same thing on actual phones) situations Have tried using in the custom CSS .sqs-slide-wrapper[data-slide-type="popup-overlay"] .sqs-slide-container[data-slide-type="popup-overlay"].overlay-mobile-styles-enabled .group-copy { background: url("IMAGE URL"); } to force the image in (code snippet stolen from another pop up post) - but to no avail I've tried targeting various classes of .sqs-slide-wrapper to try and force the position to be at the top but can only make it behave by turning things off in dev tools in chrome If i turn off .sqs-popup-overlay - top:auto i can then use the dev tools to make it lookright but then can't work out how to make the same thing happen by adding css to the custom css Has anyone got a suggestion of how to make the bleeping thing behave as it should? Thanks

Site URL: http://www.observationkit.com Sorry it's a little long, trying to give info. I am trying to replicate the site setup I found here: observationkit.com – I want to have a grid of items, where you can click each and open a lightbox with an image and text (that can scroll and doesn't cut off). The hover effect that shows titles would be nice, but is less essential. I'm decently familiar with web design but less familiar with Squarespace, and I cannot figure out how they got it to work. Observation Kit uses the Universal Filter plugin, which is where I came across it – OK's one of their example sites. I've gotten the filter part working fine. What has gotten me the closest to what I want on the pop-ups is using Summary Blocks linked to Store items – this gets everything nearly correct, EXCEPT that there is a character limit to the product excerpt in the pop-up... and so I can't get the full copy to display, unlike how the pop-ups on Observation Kit have extra long copy that scrolls. For my other options, Summary Blocks with Blogs have no pop-up built into them, and Summary Blocks with Event Pages I haven't tried (but it doesn't make sense that they'd work). I've also done some forum searching, and it looks like people have said in the past that the product excerpts on the Store pop-ups can't be made longer – so I assume there must be some other way to go about it. I'm worried that the issue is I'm on 7.1 – I see that while on 7.0 Summary Blocks used to support Gallery and Project Pages, now they no longer do. So it's possible OK's site is using one of those to make it work... but I just don't know. Anyone have any clues how I can get the effect I want? I really appreciate the help.

Site URL: http://www.koievanston.com This link currently only appears at the bottom of mobile; it does not appear on iPad or web. I can't find how to edit it anywhere and it is currently a dead link. Please help?

Hi! I was wondering how to hide the close button on the promotional pop-up, and instead have the pop-up fadeout after 5 seconds? Thanks!

Site URL: https://www.magnetismsolutions.com/our-products/myconnect-for-xero Hello, I am trying to create a customised promotional pop up to drive free trials on each of my product pages. With the promotional pop up - you can have them surface on particular pages - but not on any of the specific product pages - only on the master product page itself. Is there a way to do this?

Site URL: https://www.woestijnroos.store/ Hi Squarespace collegues, I have a specific question. Is it possible to add a promotional pop-up at the first page, but to use your own customized design (for example image/video). And in this case, it would be a small .gif or .mp4 file. I don't know if that's possible with code and then to use this gif, video or image as an uploaded file in the css? Or do I need to use an external partner/extension for that? If so, can you point me in the right direction. Thank you for your help. WhatsApp Video 2021-08-04 at 09.38.31.mp4

Site URL: https://parrotfish-helix-nx86.squarespace.com/config/pages Hello, I found a way for SQ to accept a pop-up code without disrupting the layout. The only issue left is that it needs to be centred, insted it looks as in the picure. Not-linked page I am working on is: Testimonials EVE layout works (Copy) The pop-up code is the following: <!DOCTYPE html> <head> <title>Creating a modal window with HTML5 &amp; CSS3</title> <style> .modalDialog { position: fixed; font-family: Proxima Nova, sans-serif; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0,0.8); z-index: 99999; opacity:0; -webkit-transition: opacity 400ms ease-in; -moz-transition: opacity 400ms ease-in; transition: opacity 400ms ease-in; pointer-events: none; !important> } .modalDialog:target { opacity:1; pointer-events: auto; } .modalDialog > div { width: 560px; position: relative; margin: 10% auto; padding: 5px 20px 13px 20px; border-radius: 10px; background: #fff; background: -moz-linear-gradient(#fff, #999); background: -webkit-linear-gradient(#fff, #999); background: -o-linear-gradient(#fff, #999); } .close { background: #606061; color: #FFFFFF; line-height: 25px; position: absolute; right: -12px; text-align: center; top: -10px; width: 24px; text-decoration: none; font-weight: bold; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; -moz-box-shadow: 1px 1px 3px #000; -webkit-box-shadow: 1px 1px 3px #000; box-shadow: 1px 1px 3px #000; } .close:hover { background: #00d9ff; } h2 { text-align:center; } </style> </head> <body> <a href="#Jiro M., Dartmouth College (USA), Phillips Exeter Academy (USA) >">Jiro M., Dartmouth College (USA), Phillips Exeter Academy (USA) ></a> <div id="Jiro M., Dartmouth College (USA), Phillips Exeter Academy (USA) >" class="modalDialog"> <div> <a href="#close" title="fadeout" class="close">X</a> <h2>Jiro M., Dartmouth College (USA), Phillips Exeter Academy (USA)</h2> <h2><p style="font-family:Proxima Nova; font-weight:300; font-style:normal; font-size:16px; letter-spacing:0.02px; line-height:1.7em; color:hsl(0, 0%, 0%);" !important> “I spent about 3 months at the Chamber of Commerce in Japan, and that was a transformative time for me! I got to both experience doing business with diverse clients from both Japan and North America, and also organize the events we met them at! Having the opportunity to hear the stories of businessmen/women from overseas working hard in a foreign country was a unique experience I wouldn’t forget. This internship taught me both the intricacies of handling clients of all backgrounds and also the mechanics of organizing large events. I am extremely grateful for this opportunity offered to me and hope to keep on developing my skills that were nurtured during this internship.” </h2> <iframe width="560" height="315" src="https://www.youtube.com/embed/jbcwGBmfzdQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> </div> </div> </body>

Site URL: https://butterfly-magnolia-5ta9.squarespace.com/config/pages Can someone help me understand why this youtube video is not showing? what is wrong with the code? site passw: hello97 i.e. this is the code <div style="display:none;"> <div id="bio-alex"> <h3>Title</h3> <p style="font-family:Proxima Nova; font-weight:300; font-style:normal; font-size:16px; letter-spacing:0.02px; line-height:1.7em; color:hsl(0, 0%, 0%);" !important> "text goes here." </p> <!DOCTYPE html> <html> <head> <title>HTML Video embed</title> </head> <body> <p></p> <br /> <iframe width="560" height="315" src="https://youtu.be/NFyxml7idZA"0" allowfullscreen></iframe> </iframe> </body> </html>

Site URL: https://butterfly-magnolia-5ta9.squarespace.com/config/pages Hello, could you help me create a pop-up window when clicking or hovering over a picture or a text in this section please? No plugins that require payment please, since I need an affordable solution and would also like to learn the code for future reference. You can find the page section of the screenshot on the Home page. Thank you all for your time and insight.