How to build testimonial carousels in Squarespace 7.1

As a Squarespace designer, you've probably know the feeling of adding content block by block. While this gives you a lot of freedom within the website builder, sometimes it can get a bit tedious having to manually arrange the elements for more complex layouts.

Good thing there's a new Squarespace 7.1 feature on the block—the auto-layout sections. This means that we're now able to arrange text and media automatically based on a specified setting.

There are three auto-layout categories to choose from: list, people, and headlines. Now it's easier than ever to showcase testimonials, banners, galleries, and many more.

Wondering how to make the most out of this new feature? Let's deep dive into customizing testimonial carousels using CSS.

If you're interested in learning more about how to code unexpected websites, you can check out my signature course Standout Squarespace. It's where I teach you everything you need to know to become a web designer & developer.

Section properties

To start, add a section and go to Headlines > Banner Slideshow, then click Edit Content > Design to switch to the carousel layout.

Under the Elements tab, make sure that the image, title, and body are all shown. You can leave the button turned off for this use case.

Add all the testimonials—photo, title, and description—you want to feature under the Content tab.

Back to the Design tab, we need to make sure to set the alignment to center and the max columns to 1. Image crop is set to 1:1 ratio so we could round the corners later. Don't forget to turn off "show adjacent slides" but enable infinite scroll.

Let's go to Size & Space under the Design tab to configure more details for the slider. Toggle media width to around 10%, though this could vary depending on your design. Content width can be set to medium, while media placement should be centered.

The space between elements can be set to 1-2%. Note that the space between sliders would not matter when we have a max column of 1.

Set the vertical padding to large, with the position being either top or center—I personally prefer the top alignment.

Click on the Style tab under Design and activate the card and add background color to the testimonials.

Main CSS codes

If you sign up to access the codes, you'll see in the Notion document that I added snippets to customize the carousel.

All you need to do is to replace the placeholders in these snippets with the correct Section ID using the Squarespace ID Finder extension.

You probably notice that the navigation arrows are hidden, and that's because we made the image thumbnail small. We'll need to use CSS to reposition the arrows and make them visible again.

The next one is what creates the rounded image thumbnails for this carousel. Removing the border-radius property will turn your photo back into a square. If you need a border outline, just specify its width, type, and color (using hex code) in the values.

The card border & background snippet will allow you to tweak the border outline, type, and color in the same manner. You can define the background-color of the card using any hex code.

Last but not least, the content maximum width will manage the size of your cards depending on your design. Adjust your navigation offset via Edit Content > Design > Style depending on this value.

Optional CSS codes

To keep your testimonial cards of uniform size, you can add a code snippet for equal height items. Make sure that you add this at the very bottom of the code snippets you just added.

This will be handy if you'd like to feature several testimonial cards per slide. Just don't forget to add some space in between slides by going back to Edit Content > Design > Size & Space.

Mobile View

Look 👀at how the mobile view should look like.

---

Want your site to automatically play through your auto-layout testimonials?

Check out my mini-course to learn how with the help of JavaScript. Hope this quick tutorial helps!

---

PIN THIS POST

Add Multilingual Translator to Squarespace: Powered by Google Translate

In this blog post, I will share how to easily add a free language translator powered by Google Translate to any Squarespace website.

There are quite a few options to create a multilingual Squarespace website.

If you need more control over the translations, I recommend checking out Weglot. They have a smart technology to create an SEO-friendly version of your website on any language. They provide automatic translations per language but you also have controls to edit the translations.

However, if you are looking for a free option - I created a tutorial based on this codepen entry.

Please note that the translations are machine-generated using Google Translate’s technology. The beauty of this is it’s simple, easy-to-install and supports multiple languages.

Kindly watch the video below for a walkthrough.

To access the codes mentioned on the video, please click the button below

---

Want to add stylish and unexpected features in your Squarespace site?

Easily Create this stylish vertical tab feature.

Showcase a Scrollable Website page

How can you best feature your website design portfolio? Here’s a great option using CSS. Create a scrollable page by just using an image block and a couple of CSS Codes. Please watch the video below to view the guided tutorial.

Kindly watch the video below for a walkthrough.

Please refer to the codes below as mentioned in the video above.

Paste the code below toDesign > Custom CSS

#PASTE-BLOCK-ID {
  height: 500px;
  max-width: 80%;
  margin:auto;
  width: 100%;
  overflow-y:scroll;
  overflow-x:hidden;
  filter: drop-shadow(2px 22px 40px rgba(0,0,0,.3));
  
  @media screen and (max-width:767px) {
   height:200px;
  }
}

To customize the scrollbar

::-webkit-scrollbar {
    width: 3px; /* Scrollbar Thickness */
    height:15px;
}
::-webkit-scrollbar-thumb {
    background: #22514A; 
}
::-webkit-scrollbar-track {
    background: white; /* Background Color */
}

---

Want to add stylish and unexpected features in your Squarespace site?

Easily Create this stylish vertical tab feature.

Easy Workarounds for Squarespace Member Area

This is the Part Two of my series on the brand new Member Areas in Squarespace. Click here to read Part One, which is all about its features and setup.

In the previous blog post, we talked about how the Squarespace Member Areas and its basic features. It's a good match for you if you're looking for a simpler option to handle your exclusive content within your very own site.

While this add-on isn't as robust as other LMS like Teachable or Kajabi, it doesn't have to be. Let's talk about these limitations, along with some of my secret hacks for (1) transaction fees, (2) affiliate marketing and bundling, and (3) sidebar navigation.

Kindly watch the video below for a STEP bY STEP walkthrough ON

HOW TO Address known member area limitations.

What are the limitations of Squarespace Member Areas?

1. Fewer LMS functions

Admittedly, this first item on our list is the one thing that doesn't have a workaround for now. All users, regardless of plan, would be limited to 10 member areas at most. That means if you're offering a lot more courses than that, then this might not be the option for you.

It also has no video hosting feature, so your videos would have to be hosted elsewhere. I recommend Vimeo, which allows for high-quality videos and various embed options, but that comes with an additional cost of $20 per month.

Squarespace doesn't provide a progress tracker and other similar analytics, either. Then again, this won't be too much of a letdown if your focus is on community-building.

To hide the join button, add the snippet below to Settings> Code Injection > Footer

2. Less flexible checkout options

Using the native Squarespace checkout has its downsides as well.

For one, each transaction made through this checkout comes with a 1% commission fee on top of the Stripe and PayPal fees, even if we subscribe to the Pro plan. If you're offering a high-ticket program or expecting a lot of transactions soon, this could be a significant chunk of your income.

We can't offer installment payment plans via Squarespace checkout, either. Customers would only be able to choose between one-time payment and subscription.

Bundling is not yet possible here, since each member area corresponds to only one fee structure. And while discounts are available, then can only be applied site-wide.

Not to worry, though—we'll discuss how to work around these limitations later.

3. Limited workflow automation

The Squarespace API is not yet publicly available as of now, so it's not yet possible to create automations using Zapier. We'd have to manually upload members to our email extension, unless we're using Squarespace Email Campaigns.

The affiliate system is also not built-in, so there's no way to automate this using the Squarespace checkout. But again, there's a way to bypass these limitations.

4. Default navigation styles

Though we did discuss how we'd have a lot of control over the branding of Member Areas, this unfortunately doesn't extend to our navigation. The only styles available for this purpose are automatically generated by Squarespace.

However, using CSS and JavaScript could help us create and customize a custom side navigation if we want to make our design stand out.

Payment gateway workaround

Majority of the limitations of Member Areas center around the lack of functions in their native checkout feature. That means we can effectively overcome these problems by working with a third-party payment gateway.

To set up your third-party payment gateway, here are the simple steps you can follow:

1. Set up a free member area... and hide the join button

If you're going to use the Squarespace Member Areas, it's best to set up a free membership space so that you won't have to use its native checkout feature. Still, we'd have to work on safeguarding your premium content by adjusting the settings.

Whenever a person clicks on your member area without an account, they'll be redirected to an Access Denied screen, where they'd be prompted to join if they haven't yet. You'd have to hide this default member sign-up block using CSS and JavaScript so they can't bypass the payment gateway.

All you have to do is add the snippet below to Settings> Code Injection > Footer.

<!--Squarestylist Snippet to Hide Join Button-->
<script>

var sqelem= document.querySelector('#sqs-member-access-page-root .sqs-editable-button');
sqelem.remove();

</script>
<!--END SQSTYLIST JOIN BUTTON-->

Also, don't forget add this code snippet to Custom CSS. Press Cmd+Ctrl + ↓ to immediately get to the very end of your panel.

#sqs-member-access-page-root .sqs-editable-button {
display:none;
}

2. Create a post-purchase page

Next, we need to build out a post-purchase page where we could place the member sign-up block for new members. Just add a blank page under the Not Linked section of your Squarespace site.

You can briefly thank the user for purchasing your course before adding your member sign-up block below it. "Create a new account" could be a good call to action for the button.

Head to Page Settings > SEO to hide this page from search results. This is very important.

In addition, make sure that your URL slug is complicated enough so that people won't be able to guess your post-purchase page. You can insert a random string of alphanumeric characters for this purpose.

3. Set up a third-party payment gateway

You can use Samcart or Dubsado for this step, but I do recommend Thrivecart, which is what I use for my own digital products. I've been using their product for months now, and I really love how powerful and promising its features are.

• Split payments

• More recurring fee options

• No transaction fees

• Integrated with Authorize.net

• Great affiliate program

• Upsell/downsell options

• Bundling option available

Most importantly, their customer support is truly superb. If you're interested, you can start using Thrivecart after making a one-time payment through my affiliate link.

Once you're in, you can create a new digital product (a.k.a. your course or membership), choose pricing options (even calculate sales tax), add a bump offer to upsell, then set up your affiliate system. Make sure you add your support email and send them to your post-purchase page via URL.

Please note that membership cancellations won't be automatically processed. Inform your customers that they'd have to email you to cancel their membership.

Watch the video above if you'd like to see a more comprehensive walkthrough of this process.

---

Navigation style workaround

Want to learn how to create the custom sidebar per member area?

To elevate your membership site, you have the option to recreate this custom side navigation, which your members can open or close anytime. Click the button below to check out this stylish section designed for Squarespace Member Areas.

---

Pin this post