7 Ways to Spice Up Your Website for Halloween

7 Ways to Spice Up Your Website for Halloween

7 Ways to Spice Up You Website for HalloweenIt’s almost the end of October, and you can see decorations and sweet treats everywhere you look.

Halloween has become a widely celebrated holiday, with a projected $8.4 billion in spending this year in America, which averages to $82.93 per shopper. With those numbers in mind, it’s clear why retailers take the time to decorate, and spend marketing dollars on the fall holiday. So why not bring the spirit of the season online?

Reap the benefits of the spookiest time of year with these seven easy ways to spice up your clients’ websites.

1) Add Halloween scare to your logo

A logo can be a way to playfully interact with customers during the Halloween season. Google does an amazing job creating doodles for different holidays — it’s something people share and talk about when it’s done well, too.

Updating a logo for different holidays is a great way to be playful, offer up a small surprise to customers, and build excitement on social media. I created a simple CSS animation that works with any logo, which is easy to implement or remix. Try switching out the ghosts for monsters, or pumpkins!

See the Pen SVG flying ghost logo animation for Halloween by Shopify Partners (@ShopifyPartners) on CodePen.

Add the following CSS to your stylesheet:

Then add the animation to your logo by including the class name on your logo link or logo container:

<a class="halloween-animation" href= "#">
  <img src="companylogo.svg" alt="Company logo" >
</a>

2) Serve up some spooky font pairings

Changing up the fonts on your client’s website is another quick way of leveling up the Halloween charm.

Change the heading fonts or the fonts of another element, as long as that element is not the main body text. This way, the majority of the text on the site is still easy to read — it would be a pretty scary situation if customers couldn’t understand your website content.

I’ve included some beautifully spooky typographic pairings from Google Fonts that you can use on your client’s website, leading up to October 31.

Creepster and Open Sans 

7 Ways to Spice Up Your Website for Halloween: Creepster

Amatica SC Bold and Alegreya Sans 

7 Ways to Spice Up Your Website for Halloween: Amatica

Eater and Roboto Light

7 Ways to Spice Up Your Website for Halloween: Eater

You might also like: How to Use Web Fonts in Your Shopify Store.

3) Highlight line breaks with an SVG spider web

Creating visual hierarchy is important online. We do this using design techniques such as contrast, color, size, and space.

You can add some extra focus on your line breaks with an SVG spider web for Halloween. After working with a few different techniques, I found the best way to do this, is to use an inline SVG background image.

If not set to a larger height, a pure CSS spider web will result in uneven stroke widths when scaled down, due to the use of the skew property. The technique I’ve used here doesn’t require an extra http request, which is better for performance, because the SVG code is inline. The spider web alternates left and right between elements, is supported in Chrome, Firefox and Safari, as well as being fully responsive.

See the Pen SVG spider web horizontal rule by Shopify Partners (@ShopifyPartners) on CodePen.

To add the spider web, include the following CSS in your stylesheet:

Then add the class name to an empty element you want the spider web to appear underneath.

<hr class=”spider-web”>

You can also switch out the class names in the CSS for an element selector, such as an <hr> to have the spider web appear on every <hr> element of your website.

You might also like: 10 Things You Can (and Should) Do With SVG with Chris Coyier.

4) Create and customize Halloween-specific promotions

A great way of engaging customers is by offering holiday-specific promotions, such as free shipping or discounts. Data suggests that 88 per cent of people are more likely to shop online, if they are promised free shipping. There is a great app called Free Shipping Bar by Hextom,which easily customizes a shipping bar with various discounts and logic on Shopify stores.

7 Ways to Spice Up Your Website for Halloween: Promotions
Some of the templates available with the premium version of Free Shipping Bar by Hextom.

The app offers templates to customize the look and feel of the shipping bar, and even allows for emojis in the shipping bar message. The premium version of the app lets you choose a background pattern, upload your own background image, or create even more elaborate customizations. 

7 Ways to Spice Up Your Website for Halloween: Pumpkin Kit
Low Poly Crafts Pumpkin Kit.

Halloween-specific products are another great way to engage customers. Low Poly Crafts offer a specialized DIY kit to create a paper Jack-O-Lantern. Their website currently uses a customized version of the Free Shipping Bar.

5) Take advantage of Halloween email templates

Most email marketing software, like Campaign Monitor, Constant Contact, or MailChimp, offer free holiday email templates. These templates can be easily customized, and offer an inviting way of changing up your email campaigns.

Utilize the time leading up to Halloween to showcase holiday-specific products and services to customers. Many companies will curate existing products into creative collections, making the process of buying those creepy crawly items quick and easy.

Email template examples

6) Get festive with your social media

Social media is a great way to turn marketing into a conversation with your client’s customers, and Halloween can be a perfect catalyst for that. Consider running Halloween-related social media campaigns, whether it’s a photo contest, staff costumes, or participating in popular #hashtags.

Instagram contest images from i25kia
Instagram photo contest by i25Kia

Update cover photos to include seasonal imagery, colours, or patterns. If you are looking to do something more involved on your client’s website, you could even dress up social media icons.

See the Pen Pure CSS glowing pumpkin social media buttons by Shopify Partners (@ShopifyPartners) on CodePen.

7) Concoct some Halloween inspired content (like this blog post)

Creating seasonal content can drive traffic to your client’s website, especially if that content is engaging and useful. As people search for topics related to Halloween, you can appeal to similar creative minds by publishing content that is relevant and specific for the holiday.

The trick to any themed content is to make sure it still relates to the core business, whether that is front end development and design — to running a clothing store. For example, if your client sells clothing online, it might make sense to curate a list of costumes that use existing products already on sale in their store.

Many businesses don’t realize that minor holidays like Halloween, can be huge opportunities to attract new customers.

Have you thought of some interesting ways to spruce up websites for Halloween? Share them in the comments section below!

About the Author

Tiffany is a Partner Education & Front End Developer Advocate at Shopify. She specializes in front end development, user experience design, and accessibility. She is passionate about inspiring young designers and developers, and is the Ottawa chapter co-lead for Ladies Learning Code.

Grow your business with the Shopify Partner Program

Learn more