We're teaming up with Circle member Becca Harpain ( @inside_the_square) to bring you a new series on the Squarespace Forum dedicated to empowering you with the knowledge and insights needed to build industry-specific websites on Squarespace. Whether you’re a seasoned Squarespace user, a budding entrepreneur exploring website creation, or someone keen on maximizing the potential of this versatile platform, this series is for you. 

What to expect
In an era where every business, big or small, needs a compelling online presence, understanding the nuances of different industries can make all the difference. Each sector comes with its own set of challenges, opportunities, and unique characteristics that should be reflected in its online representation.

Becca will be providing her insights on how to make the most of your Squarespace website for specific industries over the next few months. 

Who is Becca Harpain?
A Squarespace designer turned educator, Becca Harpain is the creator of the world's largest collection of Squarespace CSS tutorials - InsideTheSquare.co. Every week, you can tune into her YouTube channel to discover new ways to make your Squarespace website unique. When she's not creating content for the Squarespace community, you can find her running, hiking, and backpacking her way across the trails in the Pacific Northwest.

How to participate
Please reply to this topic with any industry suggestions! If you see any suggestions in the comments you want to see addressed, simply like the comment. We’ll be selecting 5 suggestions to address in this series.

CSS is a code language that tells a browser how to display content. What fonts to use, what color things should be, and other visual parts of making your website look the way you want it to.

Squarespace creates a CSS file for you based on what you select in the program in your site style menu and other design options.

We have the ability to add our own custom code at the end of that file. That gives us Squarespacers a chance to make Squarespace do even more unique things, pushing our creativity past the limits of the design menu.

This leads me to one of my favorite questions from the Q&A:

Any favourite properties etc in the current CSS spec? Or any you're looking forward to?
What a fun question! 🤩I always love a good gradient code and I think box shadows are game changers for adding depth to a design, especially creating subtle layers. 

There were a few questions about accessibility. Custom CSS plays an important role in making the content of your website easy for everyone to access. 

Squarespace is a lot of fun to customise with CSS, but you can run into a lot of accessibility issues if you're not also using JS/just "hacking" the platform to make cool effects. How do you handle this and how often do you find yourself saying to clients "I can make that but it won't be accessible"?
I like to ask people why that needs to change; shrinking fonts and hiding things is not a good idea, but using CSS to add visual elements to make a website easier to use & understand is a great idea. I like to focus on borders, color changes, and things that make Squarespace more accessible & easy for everyone to use.

Some of the questions in this Q&A were about advanced CSS features like nesting and using LESS.js in your code. These are completely unnecessary for most Squarespace users and I want to make sure anyone new to code isn’t deterred by complicated concepts like this! Here are a few thoughts on creating complicated code for Squarespace:

LESS, SASS or vanilla CSS? And why? (I'm guessing LESS)
You only need to use CSS to change things you can’t edit using the design features in Squarespace, so using anything advanced is unnecessary. On the 100+ Squarespace sites I have worked on, I have only used LESS twice on enterprise level sites. Simple (”vanilla”) CSS is plenty for the simple changes that we Squarespacers need to make. 

Do you limit the number of lines of custom CSS you use/split some into individual pages/code blocks?Interesting question! I have never found a need to limit my code, but I do have a rule I follow when it comes to adding code to a Squarespace site.

If it is a site-wide change, like a custom font or a global element, I’ll add that to my site-wide CSS (website → website tools → custom CSS), but if I am only changing content on a single page, then I will use page header code injection.
That way a browser won’t have to process unnecessary code for every page load - it gets the info it needs to showcase my unique design.

Pro tip: you can leave yourself notes in your code so you know what line does what! Check out this YouTube short all about it: https://youtube.com/shorts/2FGfbJijhFY

There were a few technical questions that I wanted to highlight. One of them can be solved without CSS!

How do I remove the footer on just one page of my Squarespace site. I want the footer on all the other pages. 
You can add CSS to an individual page using page header code injection, or a code block if you’re on a personal plan. Adding code this way means it will only load on one page, so your change will only happen there. For a 7.1 site, your code would be this: <style> #footer-sections {display: none} </style>

Pro tip: You can use more than one type of code in those spots, so you’ll need to tell a computer this is a style code, with HTML style brackets like the example above.

I have a gallery slideshow full of images of differing sizes and aspect ratios. I want them all scaled to fit the width of the pane, so I click "Automatically Crop Images". Now I want to choose the height of the slideshow, and have the images cropped so that they fit the height of the slideshow that I chose (not cropped any shorter than that). How do I do this? Very willing to use code if need be. 
You don’t need code at all! Create a canvas using a program like Adobe Express or Canva, and add your images so they all have the same height and stay in proportion to the canvas you created. Export as a PNG with a transparent background and the physical size of the image will be the same, but your images themselves will be in proportion. 

I'd like the background of my site outside the body content of the site (ie: the margin area) to be a background image or a gradient, instead of the white space it currently is. I tried using a border, but sadly it covers up my site banner when I don't want it to. Also, it only seems to work with solid color, not gradient nor image. What are my options for this?
For a modification like this, you can go all the way down to the base layers of your site. Using CSS, you can give the body of any page a specific margin, and add a background image that is an actual image or a gradient code. The code you need will change based on the version and theme you are using, but most will respond to a code similar to this; use it as a starting point for your project:

body{margin:5vw; background: linear-gradient(45deg, pink, blue)}

You’ll find the full Q&A below, but here is a quick recap:

1 - only use CSS for things you can’t change using the design menus built into Squarespace.

2 - use CSS to make your site more accessible by adding contrast that makes it easier to understand your website content & interact with it.

3 - CSS does not need to be complicated; focus on making visual changes that improve your site beyond what you can do with your design menu.

4 - make notes for yourself in case you need to edit your code

5 - add code where you need it. Site wide CSS is great for things like installing fonts, or making button hover effects on every page. Individual content changes, like adjusting the size of a line of text should be added on the individual page with page header code injection or a code block.

To watch a brand new video about customizing Squarespace with CSS, be sure to subscribe to my YouTube channel at https://www.youtube.com/insidethesquare?sub_confirmation=1

I hope you found this article informative and inspirational! If you have any questions about custom code, DM me here on the forum anytime @inside_the_square

Most importantly, have fun with your Squarespace website.

ALL my best - Becca

Questions

• How are you handling the lack of forward compatability of old versions of Safari? And following on from that, how much browser compatibility do you tend to factor in to your code?
  I wouldn’t recommend changing anything that would dramatically impact a site's usability with CSS, but if a design code won't loads; it can still look unique! For any CSS that isn’t compatible with older browsers, like some gradient codes, I encourage my students to use high-contrast backup colors. Some older browsers also struggle with animations, but I consider those nice-to-have styles, not need-to-have functionality. 😉
• Any favourite properties etc in the current CSS spec? Or any you're looking forward to?
  What a fun question! 🤩I always love a good gradient code and I think box shadows are game changers for adding depth to a design, especially creating subtle layers. 
• LESS, SASS or vanilla CSS? And why? (I'm guessing LESS)
  You only need to use CSS to change things you can’t edit using the design features in Squarespace, so using anything advanced is unnecessary. On the 100+ Squarespace sites I have worked on, I have only used LESS twice. Simple (”vanilla”) CSS is plenty for the simple changes that we Squarespacers need to make. 
• Thoughts on the updated Nesting spec?
  I love using nesting for my media queries, making sure that all the changes for a specific screen size happen at once. But beyond that, I’ve never written so much CSS for a single site that nesting was necessary. It will be interesting to see it develop and how this shorthand version of code can potentially improve load time as more browsers adapt to process it! To learn more about nesting, check out this article from Google: https://developer.chrome.com/docs/css-ui/css-nesting
• Do you use Stylish/any similar extensions for styling your Squarespace dashboard?
  With Squarespace making constant changes to the platform these days, I’ve decided to move away from any plugins that edit the program and change how I interact with it. 😬 It’s the core reason for my love of CSS - all I code is something that changes the style of a site, not the way it works. If the site style menu can't handle my creative ideas or I need to apply a creative concept to multiple things, I like adding my own codes line by line.
  Pro tip: you can leave yourself notes in your code so you know what line does what! Check out this YouTube short all about it: https://youtube.com/shorts/2FGfbJijhFY
• Do you limit the number of lines of custom CSS you use/split some into individual pages/code blocks?Interesting question! I have never found a need to limit my code, but I do have a rule I follow when it comes to adding code to a Squarespace site. If it is a site-wide change, like a custom font or a global element, I’ll add that to my site-wide CSS (website → website tools → custom CSS), but if I am only changing content on a single page, then I will use page header code injection. That way a browser won’t have to process unnecessary code for every page load - it gets the info it needs to showcase my unique design. 
• Squarespace is a lot of fun to customise with CSS, but you can run into a lot of accessibility issues if you're not also using JS/just "hacking" the platform to make cool effects. How do you handle this and how often do you find yourself saying to clients "I can make that but it won't be accessible"?
  Sometimes I do! I like to ask people why that needs to change; shrinking fonts and hiding things is not a good idea, but using CSS to add brand styles to a site to make it easier to use is a great idea. I like to focus on borders, color changes, and things that make Squarespace more accessible. Ultimately, it’s the website creator's responsibility to make sure their site is easy for everyone to use, and CSS is a fun way to add more style to a site, making it unique and even more accessible. 
• Hello, I am trying to edit the limited availability feature. I want it to show a custom message(which is currently possible), but I want the custom message to be linked to my inventory. Essentially, I want it to show " X Number of Orders Until Item is Unlocked", and this would update in real time as people place pre orders. Do you know how I could do this/if it is possible? I think a code injection would be necessary 
  CSS can change the style of a site, but not the way it works. It can’t generate content based on a user action; that’s usually reserved for Javascript. To pull a number from the product/store information inside a Squarespace site, you’ll need to use more advanced type of code. But when you’re ready to customize the font family or text color for that alert, CSS will make it display exactly how you want it to!
• Hello- a full screen landscape gallery block is the first thing a user sees upon landing on my website. The orientation and screen extents look good on desktop but not so much on mobile where the landscape image is cropped to a portrait format. Is it possible, using custom code, to create an alternate. - or sub - portrait gallery that specifically shows on mobile? So what I am asking is: can a gallery block be split in two - with certain landscape images designated to display on desktop only and portrait images designated to only display on mobile?
  Showing an alternative layout for mobile is one of my most popular tutorials to date! When there are a lot of changes that you’ll need to make to keep a page section accessible on mobile, you can design two page sections in your Squarespace site, and use CSS to show one on desktop & the other on mobile. Here is a link to my tutorial that will teach you how to create this with code step by step: https://www.youtube.com/watch?v=AQnwhitEqnI
• How do I remove the footer on just one page of my Squarespace site. I want the footer on all the other pages. 
  You can add CSS to an individual page using page header code injection, or a code block if you’re on a personal plan. Adding code this way means it will only load on one page, so your change will only happen there. For a 7.1 site, your code would be this: <style> #footer-sections {display: none} </style>
  Pro tip: You can use more than one type of code in those spots, so you’ll need to tell a computer this is a style code, with HTML style brackets like the example above.
  
  All of these questions are for a Bedford 7.0 site:
• I have a gallery slideshow full of images of differing sizes and aspect ratios. I want them all scaled to fit the width of the pane, so I click "Automatically Crop Images". Now I want to choose the height of the slideshow, and have the images cropped so that they fit the height of the slideshow that I chose (not cropped any shorter than that). How do I do this? Very willing to use code if need be. (If you'd like to have a look at the gallery slideshow in question, it's here: https://www.geothermalcanada.org/corporate-members )
  You don’t need code at all! Create a canvas using a program like Adobe Express or Canva, and add your images so they all have the same height and stay in proportion to the canvas you created. Export as a PNG with a transparent background and the physical size of the image will be the same, but your images themselves will be in proportion. 
• I'd like the background of my site outside the body content of the site (ie: the margin area) to be a background image or a gradient, instead of the white space it currently is. I tried using a border, but sadly it covers up my site banner when I don't want it to. Also, it only seems to work with solid color, not gradient nor image. What are my options for this?
  You can go all the way down to the base layers; the body of your website. Using CSS, you can give it a margin, and add a background image that is an actual image or a gradient code. The code you need will change based on the version and theme you are using, but most will respond to a code similar to this; use it as a starting point for your project:body{margin:5vw; background: linear-gradient(45deg, pink, blue)}
• I'd like to be able to put a "flexible" summary block on my site. That is, a summary block that generates in response to user input. For example, someone visiting my site selects a blog category from one of my blogs, and a summary block automatically generates right there on the page to show posts from that category. Is this possible with code?
  That is possible with code, but not CSS alone. CSS changes the style of a website but not the way that it works. You can use CSS to change the style of the summary block; spacing, borders, colors, fonts and more!

Are you ready to take your website design to the next level? Do you have any burning questions about using CSS on Squarespace? We are excited to announce Becca Harpain (@inside_the_square), a seasoned expert in leveraging the full potential of CSS on the Squarespace platform, will be answering your biggest questions about CSS.

Why CSS on Squarespace matters

While Squarespace provides an intuitive and user-friendly interface for creating stunning websites, understanding and harnessing the power of CSS can elevate your design game even further. CSS is a versatile language that allows you to customize the look and feel of your Squarespace site beyond the standard templates.

Whether you're a seasoned web designer or a Squarespace novice, this AMA session with Becca Harpain promises to be an invaluable opportunity to gain insights into using CSS effectively, troubleshoot common issues, and discover tips and tricks to make your website uniquely yours.

Who is Becca Harpain?

A Squarespace designer turned educator, Becca Harpain is the creator of the world's largest collection of Squarespace CSS tutorials - InsideTheSquare.co. Every week, you can tune into her YouTube channel to discover new ways to make your Squarespace website unique. When she's not creating content for the Squarespace community, you can find her running, hiking, and backpacking her way across the trails in the Pacific Northwest.

How to participate

Please reply to this topic with any questions you have by Monday January 15th! If you see any questions you want to see answered, simply like the question. Becca will answer the top 10 most liked questions.

Thanks for being part of our Circle beta test for the version update tool, which updates your website from version 7.0 to 7.1 without affecting your data. Site structure and information like SEO, orders, sales, customer data, members, domains, and subscriptions will remain intact. This tool is in beta, meaning it’s still being developed by our team.

This guide covers what to consider before you update your site, how to use the version update tool, and the feature differences between version 7.0 and 7.1.

Note: Please keep this guide confidential.

Before you begin

There are a few important things to know before you use the version update tool.

• This is a permanent update - After completing the steps in this guide, you can’t revert to version 7.0. Take your time previewing and ensure that you’re happy with your updated site before you click Publish. Keep in mind that you can cancel the preview at any time.
• Your site might look different after updating - Not all version 7.0 pages and features exist in version 7.1. Carefully review the differences between the two versions in this guide.
• You should set time aside to preview the changes - Before you update your site, you can preview how it will appear in version 7.1 and make design changes. If your website has many pages, this may take a significant amount of time.

Should I update from version 7.0 to 7.1?

Squarespace version 7.1 is the most recent version of Squarespace. It has powerful new features and added flexibility such as site-wide animations, auto-layouts that arrange sets of content, and Fluid Engine, our latest content editing experience.

Any site on version 7.0 site can update to version 7.1, but the update tool is especially helpful for sites that have a lot of content, orders, settings, or domains. For sites without a lot of content or inactive sites, it might be faster to start over with a new site.

Not all version 7.0 pages and features exist in version 7.1. Before you update your site, review the differences between the two versions.

Step 1 - Prepare for the update

Before you start the update:

• Ensure your site is using a template in the Brine or Bedford family. You can switch to either of those templates from any of other version 7.0 templates. If you're unsure which template you're using, visit What's my site's version and template?

• Disable developer mode by opening the Settings panel, then clicking Developer Tools, clicking Developer Mode, and switching the toggle off. Note that any changes you've made on the Developer Platform will disappear. We recommend saving your site files and your Developer Platform code locally on your computer before you disable developer mode.

• We recommend duplicating your version 7.0 site in case you want a visual reference of your original design.
• Cover pages and album pages aren’t supported in version 7.1 and will disappear after the update. To keep the content on these pages, ensure you have images, text, and audio files saved locally to your computer. You can re-add audio to your version 7.1 site using audio blocks. If you use either page type as your homepage, set a new homepage.

Step 2 - Start the update process

You'll start the update process to version 7.1 with a preview that can be canceled at any time. To start:

1. In the Home menu, click Website, then click Design, and then click Update to Version 7.1.
2. If you don't see the option to update, this means you're using an unsupported template or developer mode is still active.
3. Click Get Started and read through the information provided about the update. If your current homepage isn't supported in version 7.1, you'll be asked to select a new homepage.
4. Click Preview site in 7.1 to start your preview.

Step 3 - Preview your version 7.0 site in version 7.1

While previewing, you can only add content and make style changes to your website. All other site functions are disabled until you publish or end the preview.

To compare your version 7.1 and version 7.0 sites, click 7.0 site in the top-right corner. This opens your live site in a new window. To cancel the preview and discard your design changes, click Cancel update.

To make most style changes in version 7.1, you'll use site styles rather than specific template styles. As you're trying out design changes, visit Making style changes to learn more about the differences.

Note: Keep in mind that while you're in preview mode, all contributors to the site will see the preview content and editing restrictions while logged in. You can cancel the preview and discard your design changes at any time by clicking Cancel update.

Step 4 - Permanently update your site to version 7.1

When you’re ready to update your site to version 7.1, click Publish update. This can’t be undone.

Note: By clicking Publish update, you acknowledge and understand that Squarespace will update your site from version 7.0 to 7.1 and that you’ll no longer have access to the version of your site on 7.0.

Check your custom CSS

Custom CSS may be commented out after the update. To add it back in, remove the comment tags in the CSS editor:

1. Open the Design panel and click Custom CSS. 
2. If comment tags display, remove them. 
3. Click Save. 

Keep in mind, if the custom CSS applies to elements that only exist in version 7.0, they won’t affect your version 7.1 site.

Step 5 - Start using version 7.1

After you update your site, try out these version 7.1 exclusive features:

• Page sections - You'll build your site's pages and footers with customizable sections stacked vertically. You can add, delete, and move sections to arrange your content.
• Fluid Engine - Use our latest content editing experience, which offers more flexibility for placing blocks in page sections on your site.
• Auto layouts - Use these layouts to automatically arrange sets of content in columns and rows, carousels, or slideshows.
• Site-wide animations - Try out new styling effects for images.
• Section background images - Add background images to most page sections, and choose from a handful of image effects to create a visually striking website. 
• More powerful Commerce features - Add product waitlists, nested categories, and up to 10,000 products. Display Afterpay on product details pages and choose from several new product detail page layouts. Customize your store page with sections to create a visually striking store.
• Digital Products - Generate passive income by selling access to content like classes and seminars, audio or visual media, or community pages. Your visitors sign up for exclusive access to your gated content by creating an account and purchasing a pricing plan.
• Portfolio pages - Create stylized landing pages that link visitors to sub-pages. This is a great way to organize and showcase galleries, projects, portfolio highlights, and other content in one place.
• Create a multilingual site - Translate your site into multiple languages via our Weglot integration.

Review these guides to learn how to use version 7.1: 

• Make style changes
• Find features

• Find information in the help center
• Contact Squarepsace Customer Support

Differences between version 7.0 and 7.1

Some version 7.0 blocks, pages, and features don’t exist in version 7.1. Wherever possible, the update tool creates a similar design by moving your site content to version 7.1 equivalent content areas. Review this section carefully before completing the update.

Commerce

These commerce features have differences between versions.

• Store pages - In version 7.1, product collections have:
  • Nested categories
  • New product detail page layouts
  • The option to add content blocks to the product details page
  • The option to place an Add to Cart button on the store page
• Products - In version 7.1, products have:
  • A limit of 10000 per page  (vs. 200 on version 7.0)
  • A limit of 250 variants (vs. 100 on version 7.0)
  • The ability to import product tags and categories
• Waitlists - In version 7.1, waitlists are available on all sites. In version 7.0, they were only available on some templates.
• Afterpay - In version 7.1, Afterpay is shown on the product details page as well as checkout (vs. only at checkout in version 7.0).

Store pages

These store page features have design differences between versions.

• Category navigation - In version 7.1, the category navigation: 
  • Can’t be hidden.
  • Always displays vertical lines between categories.
  • Doesn’t display breadcrumb links.
  • Doesn’t automatically include an “all” link. Instead, you can add a category called All to all products.
  • Scrolls horizontally on mobile devices when the text is too long, instead of appearing in a drop-down menu.
• On sale and sold out labels - In version 7.1, these display as text beneath the product’s price. There’s no way to change their shape.
• Product hover effects - The fade and product info overlay hover effects aren’t supported in version 7.1. Review store page special features by version here.
• Share buttons - These aren’t supported in version 7.1.

Blogs

These blog page features have design differences between versions.

• Share buttons - These aren’t supported in version 7.1.

• Sidebar navigation - Some version 7.0 sites support a sidebar navigation. This isn’t supported in version 7.1.
• Some engagement features - In version 7.0, visitors can like, share, and comment while authenticated. In version 7.1, visitors can only comment anonymously. You can add Disqus comments to your site for more flexibility.

Website headers

The website header has design differences between versions. To learn more about version 7.1 headers, visit Building a site header.

• Taglines - Header taglines aren’t supported in version 7.1 and will disappear after the update.
• Call to action - If you have a header CTA, you may ned to recreate it by adding a button in version 7.1.
• Search bar - Header search bars aren’t supported in version 7.1 You can add search blocks to other areas of your site instead.
• Fixed headers - Fixed headers and other template-specific features aren’t supported in version 7.1.
• Page banners - Version 7.1 doesn’t have page banners. Images from version 7.0 banners will display in a gallery section at the top of the page in version 7.1. If you had a slideshow banner, the gallery section will use the Slideshow: Full layout. You can also make the version 7.1 header transparent so it displays over the image at the top of the page.

Navigation

The secondary navigation isn’t supported in version 7.1. Pages in the secondary navigation will display at the end of the main navigation after the update. You can turn them into a drop-down menu by moving them into a folder.

Pages and blocks that aren’t supported in version 7.1

These version 7.0 pages and blocks aren’t supported in version 7.1. Wherever possible, your content will display in version 7.1 equivalent content areas after the update. However, content from album pages and cover pages will disappear during the update and you’ll need to take steps to rebuild them. Review the table for more details.

Other feature differences between versions

These features aren’t supported in version 7.1. Wherever possible, we’ve noted similar options you can use in version 7.1.

FAQ

Do I have to move to version 7.1?

No. Updating your site from version 7.0 to 7.1 is optional, and you can stop at any time before you click Publish update. After you click Publish update, you can’t undo your changes or revert to version 7.0.

Can I undo the update?

No. After you click Publish update, your site will update to version 7.1 permanently.

Can I back up my version 7.0 site?

Before you start this process, we recommend duplicating your version 7.0 site. This creates a new version 7.0 website with the same site content and an identical design, which you can reference as you preview how your site will display in version 7.1.

Keep in mind, the duplicated site is a new Squarespace trial site. It won’t have any order data or analytics, and it won’t have the same domain. For more details about what doesn’t duplicate, visit Duplicating a site.  After you complete the update, you should delete the duplicated site.

Do I have to complete the update in a certain amount of time?

There's no time limit to the preview, but we recommend completing the update in one sitting so that you can access the site functions that are disabled while previewing version 7.1. If you cancel the preview without updating, any design changes you made during the preview will be discarded.

Will my commerce business be affected?

No. All SEO, products, subscriptions, settings, orders, analytics, and customer accounts will remain intact. Updating your site to version 7.1 using this tool won’t disrupt your business. While you edit your version 7.1 preview in the version update tool, your version 7.0 site remains live and can continue to accept orders. After you click Publish update, your version 7.1 site is immediately live. There’s no downtime.

With Squarespace Payments as your payment processor, you can centralize your finances in one easy-to-use dashboard. In this guide, you'll learn about eligibility, important information about your existing accounts, and how to sign up.

To be eligible for Squarespace Payments, you need to:

• Be located in the United States.
• Have a Squarespace trial site or a paid Squarespace site with a business plan or higher.
• Have Site Owner or Administrator permissions on the site. 

You can accept the following payment methods with Squarespace Payments:

• Visa
• Mastercard
• AMEX
• Discover
• Apple Pay
• Afterpay

Afterpay and Clearpay are alternative payment methods available through Squarespace Payments that give your customers the option to pay for products in installments, with zero percent interest. In the United Kingdom, Afterpay is called Clearpay.

Afterpay and Clearpay act as lenders. When a customer pays, you receive the full amount upfront, and your customer is reimbursed by Afterpay or Clearpay in four installments over the next eight weeks. To learn more about eligibility, fees, and requirements, visit Accepting Afterpay or Clearpay. 

For the online seller, creating an engaging and user-friendly online store is essential to attract customers and boost sales. There are a variety of built-in tools you can use to captivate and convert your audience, but let’s focus on how product detail pages can showcase your products effectively and convert visitors into loyal customers. These pages are your opportunity to share more details, dimensions, images, and variants with your customers. Here are some tips to make the most of your product detail pages:

• Use high quality images that showcase your products from various angles. Having multiple images per product allows your customers to get a complete understanding of what they’re purchasing. 
• Include compelling product descriptions that provide detailed information about the product’s features, benefits, and usage. Keeping these descriptions concise and scannable will make them easier for your customers to understand. Be sure to be mindful of SEO best practices!
• Enhance the user experience by suggesting related products or cross-selling items that complement the one being viewed. You can do this by switching on the Related Products toggle in the Commerce panel. These related products may increase the amount of time a customer spends on your site and give more visibility into your product range.
• Leverage customer experience to instill confidence in potential buyers by including product reviews. 

What do you find most impactful to include in your product details page? Do you like to style it in any particular way? Share in the comments below! 

Check out our free webinar Design tips to increase your store sales for more ideas to make your store a success. 

Life comes with many twists and turns, and we often don’t end up where we think we would have. When it comes to starting a business, some folks know they want to start a business and others discover this along the way through a hobby that took off or a moment of serendipity.  

Did you always want to start a business or did you discover something that made you want to start a business? Share your story in the comments.

Sometimes, you can’t avoid creating a text-heavy web page, but you don’t want folks to skim and miss valuable information. Accordion or collapsible menus are considered one of the workhorses of web design because they can help to solve that problem. They’re a versatile tool for text heavy pages on a website, like those showcasing a list of Frequently Asked Questions (FAQ) or product offerings. They can solve potential design problems, like too much content or too little real estate on the page, and they can empower users to explore the information that they need and collapse the information that they don’t. 

If you’re interested in adding an accordion menu to your site, you can do so with an accordion block. Accordion blocks have their own customizable styling options so you can get the look and feel you want for your site. 

Are you planning on using the accordion block? Do you already use one on your site? What are your best practices for the effective use of an accordion menu? Share your thoughts with us in the comments below!

Starting your own business is a huge accomplishment and certainly one to celebrate. That said, it’s not easy, and you can encounter many unforeseen challenges on the road. Most of us would probably jump at the opportunity to go back in time and give ourselves advice to eliminate some of that uncertainty. 

While that’s not (yet) possible, we can learn from each others’ experiences. What were some things that you didn’t see coming? Let us know what you wish you’d known before you launched your online store in the comments. 

It wasn’t long ago that film photography was on its way to become a relic of the past and be overtaken by digital photography. The last decade however has seen the resurgence of this timeless medium and it’s become quite clear that film photography is nowhere near obsoletion. 

For beginners, many photographers recommend that you start off with one or two film stocks and stick with them. That’ll help you understand how the film performs in different environments and lighting settings. Also, you should consider starting with 35mm film as it’s often cheaper and leaves you with plenty of camera options. 

Do you use film in your work? If so, share some tips you wish you knew when you were starting out in the comments!

When creating content for your brand, you’ve likely grappled with the question, “What is the voice of my brand?”. It’s a great question and an important place to start when you begin thinking about branding. Your brand’s voice will likely depend on what you do and how you’d like to present it to your audience. 

That said, we’d love to know in the comments! Fill in the blank: My brand’s voice is __ because __. 

Tell us what you love about your industry in the comments below!

Tell us about why it's your favorite in the comments below!

A key aspect of marketing your business is (of course) building an audience and keeping that audience engaged. Email marketing can be a highly effective growth and conversion driving tool to help you achieve those goals. In fact, the Data & Marketing Association found that the email marketers enjoy a return on investment (ROI) of $36 for every dollar spent on email marketing. 

What makes an effective email? Well, effective emails are generally short, focused on one thing, and they include a call-to-action (like a “Shop Now” button). Subject lines are also highly influential; a study done by SuperOffice found that 33% of subscribers will open an email based on the subject line. You may consider using merge tags in your subject lines to personalize them and make them more compelling. 

There are many strategies to try with your own campaigns so we want to hear from you. Do you use email marketing? If so, tell us about some of the challenges and successes you’ve experienced in the comments.

Did you know that you could add a password to any of your Squarespace site’s pages? That can come in handy if you’re a photographer and need to share a set of photos with your clients. 

Let’s say you’re a wedding photographer and have a bunch of photos to share. You can create a page on your site, add all of the photos, and style it how you’d like. Then you can password protect the page and share the URL along with the password to your clients. They can then log themselves in to enjoy and download their photos. Here’s some more information about adding page passwords. 

Have you tried this or something else to share photos with your clients? Let us know in the comments! 

As a business owner, you know that your logo is so much more than an image file; it’s a part of your brand’s identity, and you likely spent a considerable amount of time getting it just right. Why don’t you show it off? 

Tell us about your logo and how it came about in the comments!

Where do you make your magic happen? Maybe it’s your laptop or it’s a photography studio or something in between— drop some images in the comments to show off your workspace.

An “about us” page is a mainstay of nearly every professional website and for good reason— it tells potential customers who you are, what you do, and maybe even why you do it. It’s a clear window to flex your brand’s ethos, but you can also use it to meet your business objectives. When creating your about page, think about who you’re trying to reach and the message you’re trying to leave them with. 

If your brand’s poignant origin story is a powerful conversion tool, you may want to share it. If being personable is central to your brand’s identity, you may consider sharing photos of your team. If you have a strong social media presence, you may want to include social links on this page. In this way, an about us page can be a valuable tool in your kit. And if you need, we have some more information on the nuts and bolts of creating an about us page on Squarespace.  

Do you have a strategy for your “about us” page? If so, tell us about it and let us know what’s worked for you in the comments! 

When it comes to sharing your visual work with the world, you may have a very particular idea of how you’d like to showcase it or you may be cycling through several ideas. Would you like your work displayed in a clean, geometric grid or do you want to add an interactive element to it with a carousel? There’s no one right way to create a portfolio, but it should hold true to you and your preferences. 

At Squarespace, our designers have created templates specifically for portfolios, and portfolio pages can be added to any 7.1 template to show off your projects, but your creativity can take these to the next level.  

We’re curious— how have you built your portfolio on Squarespace? Which template did you use and how did you modify it to make it you? What do you want to share with others in the community building their own portfolios? Tell us in the comments below!

(By the way, we have some guidance on building a portfolio if you’re just getting started.) 

We’ve added two brand new clubs to the Squarespace Forum: Artists and Photographers and Online Sellers. Clubs are like social groups, and you can join them to connect with others who are also interested in the club’s topic. 

You can join the clubs to introduce yourself or your business, share your work, get advice, and get to know others in the Squarespace community. 

Everyone’s welcome to join! Click the links below to join a club and introduce yourself: 

• Artists and Photographers
• Online Sellers 

Welcome to the Online Sellers club, a space for business owners in the Squarespace community! We’re glad to have you here. We’d love to get to know you better so take a second to introduce yourself in the comments. If you’re not sure of what to say, you can use the following questions for some inspiration: 

1. What’s your name and where are you from? 
2. Tell us a bit about your business? 
3. What’s one tip you would share with others looking to start a business online? 

After you introduce yourself, you can react and comment on other members’ introductions!

Hello Squarespace Community!

Over the last several years, our community has turned the Squarespace Forum into a welcoming resource for website owners to receive support and constructive feedback from their peers. 

We’re excited to celebrate your contributions to the Squarespace Forum by releasing our new Forum Achievements program. Over the next few days, you’ll start to see badges appear for your forum activity. Qualifications for each badge will be calculated retroactively, meaning that you’ll be credited for your forum contributions throughout your entire Squarespace journey. 

A variety of actions—posts, comments, feedback, reactions, and more— will be represented across different badges to reward all forms of forum participation. You’ll also receive a rank designation based on your forum contributions. Both your badges and rank designation will be visible in your forum profile.

We look forward to the evolution of this program through your feedback and participation. Comment below to let us know if you have any questions about Forum Achievements!

Cheers,

The Squarespace Community team

Hello Squarespace community!

Are you interested in learning about Acuity Scheduling, or recently added Scheduling to your site and would like guidance on tailoring it to your needs?

The Squarespace Community team invites you to join us for our expert-led webinars in the Squarespace Scheduling series. In Acuity Scheduling Fundamentals you’ll learn the basics of the tool and get comfortable with actions such as setting availability and appointment types and creating intake forms. In Acuity Scheduling: Next Steps you’ll go deeper into the tool and learn about creating appointment add-ons, syncing third-party calendars, and more. 

During the webinar, you'll also have the opportunity to ask questions you may have with our team standing by to assist!

The webinar is free for current and prospective Acuity Scheduling customers. Register now for a live or on demand session:

Sign me up

We'll see you there!

Hi @MorganePianet, We have recently launched the Accordion Block which could be helpful to you going forward. This Block makes it possible to add an accordion menu without using custom code. You can find out more about it in our Accordion Block guide.

Hi @FlyingPig,

We have recently launched the Accordion Block, making it possible to add an accordion menu without using custom code. You can find out more about it in our Accordion Block guide.