How are you preparing your website for the holiday season?

Jo_SQSP · November 18, 2020

Whether you’re prepping for Black Friday and Cyber Monday or getting ready for Boxing Day sales, the holiday season has arrived.

There are so many ways to prepare your website and business for the holidays: give your website a holiday themed makeover, have special sales, update your product offerings, etc.

How are you preparing your website for the holiday season? What is your go-to strategy? Share in the comments below!

RobPegurri · November 25, 2020

We've implemented a free gift wrapping option in the checkout with the possibility to write a custom message. We did it because many people won't have the possibility to give presents in person this year (in Italy at least).

We said our gift options were free for the occasion, but to tell the truth it is the only way to do that as in Squarespace it's impossible to implement paid add-ons in the checkout.

We changed our "Sale" label to "Black Friday" for the black friday sale week and we colored it black. That's mainly it, all with some Mailchimp newsletters

debbieknight · November 26, 2020

I'm reading the forum for adding pop ups for discounts. Seems like Squarespace is a bit more cumbersome than other platforms.

Vino · December 2, 2020

Spending it grumbling that tax variants and tax overrides are STILL not an option so we are missing an enormous online sale opportunity because Commerce still will not support multiple tax rates. Unfortunately starting to look at leaving Squarespace due to this critical commerce flaw.

Tiny_Coast · December 11, 2020

I created a holiday theme page full of resources for clients and small business owners ☃️

https://tinycoastdigital.com/digital-marketing-resources

Edited November 22, 2022 by Tiny_Coast

derricksrandomviews · December 11, 2020

Mine snows, and I have some Christmas stories on my blog.

My Random Views

Edited December 15, 2020 by derricksrandomviews

Beyondspace · December 16, 2020

Christmas is coming and this little code snippet can bring snowflakes to your site

<style>
/* customizable snowflake styling */
.snowflake {
  color: #fff;
  font-size: 1em;
  font-family: Arial, sans-serif;
  text-shadow: 0 0 5px #000;
}

@-webkit-keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@-webkit-keyframes snowflakes-shake{0%,100%{-webkit-transform:translateX(0);transform:translateX(0)}50%{-webkit-transform:translateX(80px);transform:translateX(80px)}}@keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@keyframes snowflakes-shake{0%,100%{transform:translateX(0)}50%{transform:translateX(80px)}}.snowflake{position:fixed;top:-10%;z-index:9999;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default;-webkit-animation-name:snowflakes-fall,snowflakes-shake;-webkit-animation-duration:10s,3s;-webkit-animation-timing-function:linear,ease-in-out;-webkit-animation-iteration-count:infinite,infinite;-webkit-animation-play-state:running,running;animation-name:snowflakes-fall,snowflakes-shake;animation-duration:10s,3s;animation-timing-function:linear,ease-in-out;animation-iteration-count:infinite,infinite;animation-play-state:running,running}.snowflake:nth-of-type(0){left:1%;-webkit-animation-delay:0s,0s;animation-delay:0s,0s}.snowflake:nth-of-type(1){left:10%;-webkit-animation-delay:1s,1s;animation-delay:1s,1s}.snowflake:nth-of-type(2){left:20%;-webkit-animation-delay:6s,.5s;animation-delay:6s,.5s}.snowflake:nth-of-type(3){left:30%;-webkit-animation-delay:4s,2s;animation-delay:4s,2s}.snowflake:nth-of-type(4){left:40%;-webkit-animation-delay:2s,2s;animation-delay:2s,2s}.snowflake:nth-of-type(5){left:50%;-webkit-animation-delay:8s,3s;animation-delay:8s,3s}.snowflake:nth-of-type(6){left:60%;-webkit-animation-delay:6s,2s;animation-delay:6s,2s}.snowflake:nth-of-type(7){left:70%;-webkit-animation-delay:2.5s,1s;animation-delay:2.5s,1s}.snowflake:nth-of-type(8){left:80%;-webkit-animation-delay:1s,0s;animation-delay:1s,0s}.snowflake:nth-of-type(9){left:90%;-webkit-animation-delay:3s,1.5s;animation-delay:3s,1.5s}.snowflake:nth-of-type(10){left:25%;-webkit-animation-delay:2s,0s;animation-delay:2s,0s}.snowflake:nth-of-type(11){left:65%;-webkit-animation-delay:4s,2.5s;animation-delay:4s,2.5s}
</style>
<div class="snowflakes" aria-hidden="true">
  <div class="snowflake">
  ❅
  </div>
  <div class="snowflake">
  ❆
  </div>
  <div class="snowflake">
  ❅
  </div>
  <div class="snowflake">
  ❆
  </div>
  <div class="snowflake">
  ❅
  </div>
  <div class="snowflake">
  ❆
  </div>
  <div class="snowflake">
    ❅
  </div>
  <div class="snowflake">
    ❆
  </div>
  <div class="snowflake">
    ❅
  </div>
  <div class="snowflake">
    ❆
  </div>
  <div class="snowflake">
    ❅
  </div>
  <div class="snowflake">
    ❆
  </div>
</div>

Add it into Code injection header

Source CSSnowflakes! (pajasevi.github.io)

Beyondspace · December 17, 2020

I got another trick for Squarespace website, you can place Christmas balls on top of the page, kindly follow these steps

1. Download the assets in zip format and uncompress them

https://drive.google.com/file/d/1HFIkJn5EoYx8GLOzLV9_jgYrHFOgn2lK/view?usp=sharing

2. Upload them to the site by using a link editor.

You can head to Pages->New Page (Link)->On new window, click on File and upload

3. In Settings->Advanced->Code Injection , place this snippet in header

<script src="https://code.jquery.com/jquery-3.4.1.js"></script>

<!-- Xmas balls on header - provided by beyondspace -->
<link rel="stylesheet" href="/s/beyondspace-xmasballs.css">
<script src="/s/beyondspace-xmasballs.js"></script>
<script type="text/javascript">
	jQuery(document).ready(function($) {
		/* There are 4 style supported: 1, 2, 3, 4 */
		$(".header-announcement-bar-wrapper").xmasBells({
			style: 3
		});	
	})
</script>
<!-- Xmas balls on header -->

Note that there is 4 style to choose, kindly change the "style" number in the code

Edited December 17, 2020 by bangank36

derricksrandomviews · December 17, 2020

Its missing something or conflicting with, snow or my back to top button in Avenue, the snippet would not run, didn't hurt anything just no effect. The snow effect you posted works great.

Edited December 17, 2020 by derricksrandomviews

Beyondspace · December 17, 2020

9 minutes ago, derricksrandomviews said:

Its missing something or conflicting with, snow or my back to top button in Avenue, the snippet would not run, didn't hurt anything just no effect. The snow effec you posted works great.

The beads buttons? I can have a look if you share your site url tomorrow. So far i work on my client squarespace website as you see

derricksrandomviews · December 17, 2020

The Christmas balls did not show up at the top of any page. I uploaded uncompressed files thru link manager, placed code in settings/advanced header. I tried it for an individual page as well, and just for the heck of it, stuck it in a code block, none had any effect good or bad. Other than the style number should the code be modified? I suspect that this is just a template thing.

Beyondspace · December 17, 2020

Just now, derricksrandomviews said:

The Christmas balls did not show up at the top of any page. I uploaded uncompressed files thru link manager, placed code in settings/advanced header. I tried it for an individual page as well, and just for the heck of it, stuck it in a code block, none had any effect good or bad. Other than the style number should the code be modified? I suspect that this is just a template thing.

Style number can 1 2 3 or 4, i guess issue is your site has not an annoucement bar element, could you try to edit the code

Header-annoucementbar-waraper to text like "header" instead?

derricksrandomviews · December 17, 2020

If the announcement has to be enabled mine was not, I will try that.

Beyondspace · December 17, 2020

6 hours ago, derricksrandomviews said:

If the announcement has to be enabled mine was not, I will try that.

Since you used the snowflakes snippet, change your code into this

jQuery(document).ready(function($) {
    /* There are 4 style supported: 1, 2, 3, 4 */
    $(".snowflakes").xmasBells({
      style: 3
    });	
})

Beyondspace · December 18, 2020

HI Guys,

Today is a fairylights in header, hope you guys find it useful

1. Download the files at

https://drive.google.com/file/d/10dcac4HZhELT82WWbagacUn5xEQXuDQr/view?usp=sharing

2. Upload and init the plugin via this code injection snippet

<script src="https://code.jquery.com/jquery-3.4.1.js"></script>

<!-- Xmas lights on header - provided by beyondspace -->
<link rel="stylesheet" href="/s/beyondspace-xmaslights.css">
<script src="/s/beyondspace-xmaslights.js"></script>
<script type="text/javascript">
	jQuery(document).ready(function($) {
		/* There are 4 style supported: 1, 2, 3, 4 */
		$(".header-announcement-bar-wrapper").xmasFairylights({
			style: 1
		});	
	})
</script>
<!-- Xmas lights on header -->

GerDevCole · November 10, 2021

On 12/16/2020 at 2:26 PM, bangank36 said:

Christmas is coming and this little code snippet can bring snowflakes to your site

<style>
/* customizable snowflake styling */
.snowflake {
  color: #fff;
  font-size: 1em;
  font-family: Arial, sans-serif;
  text-shadow: 0 0 5px #000;
}

@-webkit-keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@-webkit-keyframes snowflakes-shake{0%,100%{-webkit-transform:translateX(0);transform:translateX(0)}50%{-webkit-transform:translateX(80px);transform:translateX(80px)}}@keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@keyframes snowflakes-shake{0%,100%{transform:translateX(0)}50%{transform:translateX(80px)}}.snowflake{position:fixed;top:-10%;z-index:9999;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default;-webkit-animation-name:snowflakes-fall,snowflakes-shake;-webkit-animation-duration:10s,3s;-webkit-animation-timing-function:linear,ease-in-out;-webkit-animation-iteration-count:infinite,infinite;-webkit-animation-play-state:running,running;animation-name:snowflakes-fall,snowflakes-shake;animation-duration:10s,3s;animation-timing-function:linear,ease-in-out;animation-iteration-count:infinite,infinite;animation-play-state:running,running}.snowflake:nth-of-type(0){left:1%;-webkit-animation-delay:0s,0s;animation-delay:0s,0s}.snowflake:nth-of-type(1){left:10%;-webkit-animation-delay:1s,1s;animation-delay:1s,1s}.snowflake:nth-of-type(2){left:20%;-webkit-animation-delay:6s,.5s;animation-delay:6s,.5s}.snowflake:nth-of-type(3){left:30%;-webkit-animation-delay:4s,2s;animation-delay:4s,2s}.snowflake:nth-of-type(4){left:40%;-webkit-animation-delay:2s,2s;animation-delay:2s,2s}.snowflake:nth-of-type(5){left:50%;-webkit-animation-delay:8s,3s;animation-delay:8s,3s}.snowflake:nth-of-type(6){left:60%;-webkit-animation-delay:6s,2s;animation-delay:6s,2s}.snowflake:nth-of-type(7){left:70%;-webkit-animation-delay:2.5s,1s;animation-delay:2.5s,1s}.snowflake:nth-of-type(8){left:80%;-webkit-animation-delay:1s,0s;animation-delay:1s,0s}.snowflake:nth-of-type(9){left:90%;-webkit-animation-delay:3s,1.5s;animation-delay:3s,1.5s}.snowflake:nth-of-type(10){left:25%;-webkit-animation-delay:2s,0s;animation-delay:2s,0s}.snowflake:nth-of-type(11){left:65%;-webkit-animation-delay:4s,2.5s;animation-delay:4s,2.5s}
</style>
<div class="snowflakes" aria-hidden="true">
  <div class="snowflake">
  ❅
  </div>
  <div class="snowflake">
  ❆
  </div>
  <div class="snowflake">
  ❅
  </div>
  <div class="snowflake">
  ❆
  </div>
  <div class="snowflake">
  ❅
  </div>
  <div class="snowflake">
  ❆
  </div>
  <div class="snowflake">
    ❅
  </div>
  <div class="snowflake">
    ❆
  </div>
  <div class="snowflake">
    ❅
  </div>
  <div class="snowflake">
    ❆
  </div>
  <div class="snowflake">
    ❅
  </div>
  <div class="snowflake">
    ❆
  </div>
</div>

Add it into Code injection header

Source CSSnowflakes! (pajasevi.github.io)

Thank you so much. I have just used this and it looks great. Really appreciate you sharing it.

Edited November 10, 2021 by GerDevCole

vivokeke · December 2, 2021

Hi, I unpacked the zip, even implemented the code as well, but all I got was the green background, no Christmas balls. What should I do?

Beyondspace · December 3, 2021

On 12/3/2021 at 12:51 AM, vivokeke said:

Hi, I unpacked the zip, even implemented the code as well, but all I got was the green background, no Christmas balls. What should I do?

Can you share your site with the protected password so we can take a look?

Edited December 3, 2021 by bangank36

vivokeke · December 5, 2021

sure, thanks.

https://duck-goldfish-eyhs.squarespace.com/

password: password

ParcelStory · December 9, 2021

Thanks for the uploads @bangank36, however I had the same issue as @vivokeke with just the green garland background and no hanging ornaments.

Is there a fix for this?

Beyondspace · December 10, 2021

17 hours ago, ParcelStory said:

Thanks for the uploads @bangank36, however I had the same issue as @vivokeke with just the green garland background and no hanging ornaments.

Is there a fix for this?

Hi,

Kindly use the following file and set style 1 first

https://drive.google.com/file/d/1GNzaXo15lqsHco6BcF0gLHB4el5B_3Th/view?usp=sharing

3 another style i'm checking them and response to you asap

Edited December 10, 2021 by bangank36

Leopard · November 18, 2022

On 12/17/2020 at 3:43 PM, Beyondspace said:
I got another trick for Squarespace website, you can place Christmas balls on top of the page, kindly follow these steps

1. Download the assets in zip format and uncompress them

https://drive.google.com/file/d/1HFIkJn5EoYx8GLOzLV9_jgYrHFOgn2lK/view?usp=sharing

2. Upload them to the site by using a link editor.

You can head to Pages->New Page (Link)->On new window, click on File and upload

3. In Settings->Advanced->Code Injection , place this snippet in header
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>


<link rel="stylesheet" href="/s/beyondspace-xmasballs.css">
<script src="/s/beyondspace-xmasballs.js"></script>
<script type="text/javascript">
	jQuery(document).ready(function($) {
		/* There are 4 style supported: 1, 2, 3, 4 */
		$(".header-announcement-bar-wrapper").xmasBells({
			style: 3
		});	
	})
</script>

Note that there is 4 style to choose, kindly change the "style" number in the code

Im a bit stuck as it asks for a link and name for it

Beyondspace · November 18, 2022

18 minutes ago, Leopard said:

Im a bit stuck as it asks for a link and name for it

What is your issue? Can you share your site for checking?

How are you preparing your website for the holiday season?

Recommended Posts

Link to comment

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

Beyondspace

Jo_SQSP

RobPegurri

Posted Images

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Create an account or sign in to comment

News

Squarespace Webinars

Hire a Designer

Support

Community

Developers

Resources