Viewing entries in
Branding & Web Design

Comment

How to Optimize your Squarespace Ecommerce Website

Bold & Pop : How to Optimize your Squarespace Ecommerce Website

It’s no secret we’re HUGE fans of Squarespace and we’ve shared everything from how to choose a template, why the Brine family is our favorite template, various coding for customization andddd how to set your SEO up properly. The one big piece of Squarespace we haven’t talked too much about is their ecommerce functionality but Squarespace has been upping their game when it comes to this. Along with having a secure and easy checkout with a great shop design, there are a few lesser known features that you’ll want to make the most of if you have an ecommerce site. These are focused on helping you increase conversions in an easy way (literally you just have to enable a few things!).

Bold & Pop : How to Optimize your Squarespace Ecommerce Website

Image Zoom

Pretty standard on most ecommerce platforms but you definitely want to have this enabled! It allows customers to get a closer view of the product they’re interested in which can be the difference in making a sale or them walking away. If you enable this, make sure you have high quality images so they’re crisp and clean on zoom.

If you don’t have this enabled, head to the Design > Site Styles > Products: Image Zoom and make sure you enable it. You can also adjust how much it zooms in to fit your preferences!

Alternate Image

You can also enable an alternate image to show on your main shop page. This is great if you have a product that comes in different colors or has details on different sides you’d like the show off. Basically if a customer comes to your shop and they hover over a product, the main image will switch out with the alternate so they get to see both! This encourages them to click through to the product listing to learn more (and hopefully purchase!).

To enable this, go to your Site Styles. It may simply be clicking to enable the alternate image option or it might be under Item Hover Behavior which you’d then change to Show Alternate Image.

Quick View

Enabling quick view is an awesome way to provide customers with more product info without having to fulling click into the product listing. This also allows them to purchase right from the main shop page!

You can enable this in Site Styles as well!

Free Shipping

A lot of our ecommerce clients provide free shipping (customers do love to have free anything!) but it can get a tad tricky on Squarespace. They do allow an easy to enable automatic free shipping option but only on their advanced commerce plan (this plan also provides abandoned cart notifications too!).

The problem is this plan doesn’t always make sense for everyone so if you want to provide free shipping for customers on the basic commerce plan, you can either provide customers with a coupon code or our recommendation would be to set up a flat rate shipping option in the backend of Squarespace and simply make it $0. #SquarespaceHack FTW

Add a carousel summary block to Additional Info

Related Products

Unfortunately this is one area that is still lacking a bit for Squarespace, BUT we have a hack to help you still add related products!

Choose your shop page in the Content tab to popular with products

Chances are you’ll add products and use categories in your product listing to sort them for customers (and if not, you definitely need to categorize your products for this). What you need to do is, go to the backend of your shop page and click into a product to edit. Click the tab on the product page that says Additional Info. Once you’re in that section, you’ll want to insert a summary block (we recommend a carousel layout). Once inserted, you’ll have to choose the content you want to populate the summary block with. Choose your shop page and then you can change the layout to your liking (we suggest changing the Header from “Featured” to “Products You May Also Like” or something along those lines).

You can save as is here or you can go to the Display tab and sort the products shown by category or even tags. It will really depend on your product but if you sell shirts, you might not want to display all shirts as related products. You might want to help customers complete their outfit so maybe you sort by tags instead. For example, if you have a summer collection, you might want the related products to be sorted by the tag Summer Collection.

Along with these awesome features…

Squarespace also offers some really amazing other ecommerce features you’ll want to know about including:

  • Inventory management with notifications on when you’re running low on an item (you can set what level you want this reminder at!)

  • Subscription option available so you can sell a monthly, yearly, etc. subscription

  • Variants so you can add different colors, sizes, etc. all under one product listing

  • Easy drag and drop merchandising so you can have your product listed in the exact order you want

  • Abandoned cart recovery with automatic emails sent to customers to remind them they left something behind

  • Multiple payment options so you can enable them all and give customers a choice or you can choose which one works best for your store

  • Built-in analytics so you can track your sales and any other important pieces of information to make the most of your shop and marketing efforts

And there you have it, some lesser known features you can use to really amp up your ecommerce site to help boost those conversions!

P.S. Exciting news! We launched the free #GoingBold Facebook Group and would love for you to join us! Come on over!

Comment

1 Comment

SEO Setup Guide for Your Squarespace Website

Bold & Pop : SEO Setup Guide for Your Squarespace Website

One common misconception of Squarespace is that it’s not good for SEO (search engine optimization). That’s a big ol’ lie. You just have to know how to optimize your site properly, just like with any platform! We know SEO can be a complicated topic and really confusing so we’re giving you a step-by-step guide to help you optimize your site so you can rank higher and higher on search engines pre- and post-launch!

Backend Setup

There are several things to update in the settings area on the backend of your Squarespace website prior to launching (if you've launched and haven't done this, don't worry! You can still go in and update now). This includes:

  • Your Business Name

  • Site Description

  • Search Engine Description

  • SSL Certificate

  • Page Titles and SEO Descriptions

Business Name: Chances are you have a logo that you’ll be using on your website but you also want to fill out your Business Name under the business information. If you do have a logo, you’ll want to also consider adding some keywords after your business name. Because you have a logo, these won’t show up on the actual website but it still gives search engines some keywords to crawl right in your website name.

You can edit your business name by going to Settings > Business Information > Business Name

Example: Bold & Pop | Social Media, PR, Branding and Website Design

Site Description: Depending on your template, this may or may not show up on the website but this is a great place to give a succinct overview of what your brand offers. Make sure you include the essential keywords in this section.

You can edit this by going to Settings > Basic Information > Site Description

Search Engine Description: This description is what is used in the search results of search engines like Google. In one or two short sentences, describe your business here. (You can also use the same description as the site description to make life a little easier.) Again, make sure to include essential keywords so these are front and center for search engines to crawl. 

You can edit this by going to Settings > SEO > Search Engine Description

SSL Certificate: Google has announced that SSL-secured websites may receive a minor ranking boost so you want to make sure you have this enabled. Luckily, Squarespace makes this insanely easy and offers free SSL certificates for all Squarespace domains and third-party domains connected to a site.

To make sure this is enabled, go to Settings > Security & SSL > Choose Secure option

Page/SEO Titles and SEO Descriptions: Every single page on your site now allows you to update the SEO titles, page titles, navigation titles and page descriptions. Here’s how these break down:

Bold & Pop : SEO Setup Guide for Your Squarespace Website
  • SEO titles: These appear in search results and are indexed by search engines.

  • Page titles: These are only available on some templates but these can be longer than navigation titles. If there's no SEO title, the page title displays in search results instead.

  • Navigation titles: These are the titles that show up in your navigation. It's best to keep these short, like "About" or "Contact."

  • SEO Descriptions: Similar to your overall site description and search engine description but these are specific for each page on your site. These will display under the corresponding page in search results so make sure to keep these short, relevant, and descriptive.

You can find page titles and descriptions under each page’s settings (pictured above).

Headers

If you didn’t know, Squarespace produces pages with clean HTML markup that is indexable by search engines. This means there’s no need to add <h1> and <h2> tags in HTML. All you have to do is select a Heading style, and those tags are created for you.

Most of the time you’re going to use these Heading styles to highlight your key points on your website and these should include keywords. These headers are prioritized as important pieces of information (in order of Header 1, Header 2, Header 3, and then body text) when search engines crawl your website so you can see why having keywords in these is so important.

Pro tip: If you have a blog, your blog titles are categorized as Header 1 so make sure those are descriptive and include keywords!

Bold & Pop : SEO Setup Guide for Your Squarespace Website

Image Filenames

In Squarespace, images contain proper <alt> and <title> tags, improving search engine indexing. All meta tags for pages and <link> tags for RSS feeds are automatically generated in Squarespace and image descriptions are converted to <alt> tags. Because of this, you need to make sure you give every image on your website a filename.

You can find this right under where you upload the image. It says it’s an option which means it’s often overlooked but SO important for SEO. As with everything else, you want to make sure you include keywords but make sure the filename also provides an accurate description of what the image is (this pops up if the images doesn’t load).

We like to structure our filenames as Company Name :: Keywords/Description

Unlike most of these other SEO tips, this is something you may need to continue to do on a regular basis. If you decide to change an image or add a new one, you need to rename or name those images each time. This is especially important if you have a blog or shop that you update regularly.

Pro tip: This is also the text that is pulled if someone pins an image or graphic from your website to Pinterest! 

Connect to Google Analytics

So how in the world do you know which keywords to optimize? Good news is you can connect your site to Google Analytics and it will pull in the search terms people actually use to find your website!

This will be really important for your ongoing SEO strategy so we highly recommend doing this and checking the keywords on a monthly basis in your Squarespace Analytics.

If you need help connecting your Google Analytics, here’s a guide.

Submit Sitemap to Google

The great news on this piece is Squarespace automatically generates and links a proper sitemap.xml, which enumerates every URL and image metadata on your site with proper priority for perfect indexing even if you use a Javascript-heavy template.

So while Squarespace does this automatically for you, you still need to submit your sitemap and verify your website with Google. Luckily, this is also super easy and Squarespace provides a step-by-step guide.

  • How to verify your site with Google Search Console

  • Once you verify your site, you can click the option to submit a sitemap. Basically your sitemap can be found at http://www.yourdomain.com/sitemap.xml. So just enter the sitemap.xml into the space provided and submit!

And there you have it! A lot of little steps but all very easy and doable to help boost your SEO. If you want to learn more about the other built-in SEO features Squarespace offers, check out their overview.

Pro tip for ongoing SEO:

While taking care of all of these backend SEO pieces prior to launch is always a top priority for us, we also always suggest adding a blog and updating it regularly. This gives search engines fresh content to crawl on a regular basis. Trust us, this is not an opportunity you want to miss out on. Consistently blogging has probably been one of the biggest pieces to boosting our SEO.

If you decide to add a blog or if you already have one, there are plenty of steps to take to make sure your blog post is in tiptop shape before you hit publish. Luckily, we have a whole checklist for you in our content upgrade library! Sign up here or below to get access with our super duper top secret password.

P.S. Exciting news! We launched a free #GoingBold Facebook Group and would love for you to join us! Come on over!

1 Comment

Comment

2019 Website Trends: Micro Animations and How to Do Them

Bold & Pop : 2019 Website Trends: Micro Animations and How to Do Them

If you haven’t noticed having an interactive element to your website has become increasingly more popular over the last few years. And we’re here to tell you this trend isn’t going anywhere anytime soon!

Luckily, you don’t have to go crazy when it comes to adding these interactive elements. Think banner slideshows, rotating testimonials, hover animations, and our new favorite… micro-scroll animations! This is where an element appears on your screen (slides in, floats up, bounces in, etc.) as you scroll through the site. Having an interactive element like this on your website keeps the user engaged and actually helps improve their user experience as well!

Keeps the User Engaged:

Our eyes are naturally drawn to movement meaning that elements appearing upon scrolling is more visually interesting than static text and images. This means your website visitor’s interest will be held longer as they continue to scroll further down your page.

Improves User Experience:

Along with keeping users’ engaged, scrolling animations can help direct your website visitors around your website. These animations can help draw attention to specific sections or key content on the page. It’s almost like giving your visitors a map of where they should go next while on your site, but in a fun and interactive way! For example, you may have static text and the animation piece is when a “Read More” button appears as users begin to scroll. Their scrolling indicates that they have finished reading and are now ready for the next action on the site (the “Read More” button). This helps provide them with easy navigation throughout the site and ultimately, a positive user experience.

So what do micro-scroll animations look like?

There are a lot of options out there but here are a few examples:

Fade In

Slide Up

tada



Cool! How do I add this to my site?

First thing you need to do is add the below code to your sitewide code injection. To find this, go to Settings > Advanced > Code Injection and then copy and paste this into the header code injection.

<!--Micrco-Scroll Animation Code Injection-->

<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

Next up, you need to add a code block to the page you’d like the animation on. (Pro tip: Make sure this block is below what you’re animating or it won’t work. We typically add it to the bottom of the page!)

Once you add the code block, copy and paste the below code into the block. You then need to change the spot where it says #block-name and className. Block name is the block ID so you can target that specific content block to animate. If you don’t know how to find this and you use Chrome for your browser, add this extension.

Then to change the className, you want to head over to this site. Here you can see the different types of animation options available. Once you choose, the className is literally just the name in the dropdown you chose (case sensitive!).

So you’ll simply add the #block-name and className to the code in the code block then hit save!

<!--Code Block-->

<script>
$('#block-name').addClass('wow className');
$('#block-name').addClass('wow className');
$('#block-name').addClass('wow className');
$('#block-name').addClass('wow className');
$('#block-name').addClass('wow className');
</script>


<!-- Duration -->
<script> $('#block-name').attr({'data-wow-duration':'1s','data-wow-delay':'0.4s'}); </script>


<!-- Init. script -->
<script>
       new WOW().init();
</script>

If you want to add more lines than the 5 provided (or you have less than 5), just add another (or delete the remaining):

$('#block-name').addClass('wow className');

at the end before </script>.

If you want to have the same animation for all, you can just add the #block-names all in the same section. For example, it would look like:

$('#block-name, #block-name, #block-name').addClass('wow className');

in that particular section of the code.

And last but not least, if you want to change the timing of your animations, go to the section that says <!-- Duration -->. You’ll add the #block-name again and then you can adjust 'data-wow-delay':'0.4s'. For example, it would look something like:

<script>
$('#block-name').attr({'data-wow-duration':'1s','data-wow-delay':'0.4s'});
$('#block-name').attr({'data-wow-duration':'1s','data-wow-delay':'0.5s'});
$('#block-name').attr({'data-wow-duration':'1s','data-wow-delay':'0.6s'});
</script>

This will change the timing of when your animations float onto the page (like the examples we provided above).

And there you have it! Simple animations to make a BIG impact on your Squarespace site!

If you add this to your site, we’d love to see! Drop a link to your site in the comments!

P.S. Exciting news! We launched the free #GoingBold Facebook Group and would love for you to join us! Come on over!

Comment