SquareSpace

Overview

• Has a 14-day free trial

• Location services integrated well into website builder 

• Ability to easily import content from other platforms when switching web hosting (no need to manually copy and paste content) 
  
  

Pros

• • Custom code options are limited:

• • • CSS and Javascript can be implemented 

    • There are not element IDs or names if attempting to use HTML DOM 

    • Content CANNOT be created with code, only modified slightly 

• • Forms are limited 

    • Cannot restrict field input

    • Cannot use HTML DOM on form fields due to no element IDs 

    • Form entries are disposed of after submission:

      • You cannot use form input in any custom code to display content based on user input

      • Must connect form to email or google drive to store submissions 

• Documentation is a bit misleading/incomplete – don’t assume Squarespace can perform certain functionality even if the documentation says it is able to

  • A lot of times, you need to purchase an additional plugin  

How to import content from other platforms when changing web hosting platforms

Step 1: Navigate to Advanced Settings and click Import/Export (Settings > Advanced > Import/Export) 

Step 2: Click Import and select the platform you would like to import content from (Wordpress, Shopify, Blogger, .csv file, etc.)  

Step 3: You will be directed to enter different information depending on the platform you chose (uploading a file, entering a url, etc.) 

How to Export web content to WordPress or a .csv file.  

Step 1: Navigate to Advanced Settings and click Import/Export (Settings > Advanced > Import/Export) 

Step 2: Click Export 

Step 3: Select whether you’d like to export to WordPress or to a .csv file 

Step 4: Confirm the page that is being exported 

Click here for more information 

How to create a background video and get its URL

Step 1: Login to your YouTube channel

Step 2: Upload the video (make sure the settings for the video are set as Public)

Step 3: Click on your video

Step 4: Click Share and copy the link

How to add a background video

Step 1: In the Home Menu click pages

Step 2: Click on your landing page

Step 3: Click on Media on the left side

Step 4: Click on Video

Step 5: Paste the Video URL into the space

Optional: Please reference this video for live instructions 

Stripe Payment Platform Integration (simple to integrate and use for small businesses)

Step 1: In the Home Menu click Commerce then click Payments

Step 2: Click Connect Stripe and a pop-up window should open

Step 3: Log in to your Stripe Account

Step 4: You will receive a confirmation email which you need to confirm

Testing Orders on Stripe (enables you to go through the checkout process as a “customer”)

Option 1: Place an order and refund yourself

            Step 1: Place an order (Checkout > Payment > Credit Card)

            Step 2: Cancel and refund the order (Home> Commerce > Orders > Cancel Order)

Option 2: Use test mode

            Step 1: Enable test mode (Home > Commerce > Payments > Test Mode > ON > Save)

            Step 2: Place and order (Checkout > Payment > Credit Card)

            Step 3: Review & clear the test order (Home > Commerce > Order > Delete Test Order)

            Step 4: Disable test mode (Home > Commerce > Payments > Test Mode > OFF > Save) 

Capturing Client Emails/Sending Campaigns through Mailchimp

Set up a pop-up that will allow/ask the client to input their email

            Step 1: Go into SquareSpace > Marketing > Promotional Pop up

    Step 2: Turn on the pop up & choose a layout that suits your website

    Step 3: Go to the Action Tab > Storage > and set up Mailchimp for connecting accounts

    Step 4: Log on to Mailchimp & ensure that the correct account is linked & run your tests

    Step 5: Create your campaigns and test those as well

Note: You should be able to set tags in Mailchimp to select and categorize clients for personalized market groups.

Adding and Configuring Summary Blocks

1. Log onto the Squarespace website (https://www.squarespace.com/) using user credentials
2. After the page loads the dashboard, click on the icon for your client’s website
3. Click to “Pages” and then scroll to the page that you are editing.
   1. We recommend creating a page and keeping it “not linked” so that you can make any edits and changes without affecting the appearance of the live website (i.e. this is the development stage).
4. Hover over the main page and click “Edit” on the Page Section option.
5. Click the “+” button to add a new block to the page.
6. Scroll to the “Summary” section and click on the type of summary block (Carousel, Grid, Stack, and Slideshow) to add it to the page.
   1. You are able to change the display type later on if you would like to switch from Grid to Carousel, for example.

Once you add a new summary block or edit an existing summary block, a settings panel will display with three tabs titled “Content”, “Layout”, and “Display”

7. Under the Content, click to reference the blog, product, or gallery page to connect the summary block to the resource list. The linked page serves as the database from which the summary block pulls information (for reference, this would be your SQL Server backend in 333K)

8. Under Layout, you can change the appearance of the summary block if desired.

9. Rename “Header Text” to the desired header text

10. Change the Aspect Ratio to optimize display of different resource types

11. Change Items Per Row to optimize display

12. Change text size and alignment as desired.

13. Select categories and tags appropriate for the resources you are going to display

14. Apply changes and review the display. Make any edits necessary to optimize display.

Managing Share Buttons

Squarespace has a Social Sharing block that you can use. However, the links that you put in this block will be the same across any time you use the block in the website. If you would like to create share buttons that share to unique social media links, this option is for you.

Facebook Share Button

1. Use this Facebook Developer page to create the Facebook share button (since there is code to be copied, it is better to directly obtain it from this page in case there are any changes made)
2. Add the code as a Code block on the respective page
3. Resize as necessary

Twitter Share Button*

1. Follow the instructions on this Twitter developer page to create a share link with the Twitter Button option (since there is code to be copied, it is better to directly obtain it from this page in case there are any changes made)
2. Add the resulting code as a Code block on the respective page
3. Resize as necessary

*Note that when the Twitter share code is added to the page, the following warning will sometimes display. This is normal, and the button as it appears live can be previewed in Safe Mode or viewed in the live page.

Reference Links for additional aid:

Summary Blocks - https://support.squarespace.com/hc/en-us/articles/206543337-Summary-Blocks

Adding Filter Blocks for Blog Archive Page

One way to add a filter function to a page is to set your blog to be an archive page and adding archive blocks to search through the posts. This is a built-in Squarespace functionality that avoids needing to purchase external plugins or develop code to search.

1. Navigate to the page to which you want to add the filter block and click on “Edit” near the top left to add an Archive block to the page.
2. Click the “+” on the right side of the page and type in “Archive”. 
3. Select the blog from which you want to pull posts from (i.e., the backend/server for the page).
4. Click to the “Display” tab and change Layout to “Dropdown” to create a filter function. 
5. You can change the title of the dropdown to match the filter criteria that you are using. 
6. If you would like to show the # of items within the filter, enable “Show Group Count” which will tally the number of items to the right of the tag. 

Adding Filter Blocks – Universal Filter

As archive blog filter functionality is sometimes limited in certain aspects that may be desired for some projects (i.e., you are unable to sort based on $$$ and it is limited in where it is placed), you can also create a separate filter box. However, this is an external plugin and is developed by SquareWebsites that you will have to purchase for $70 in order to obtain the source code for Squarespace blocks and additional support. The link for the plugin that we found to be useful is Universal Filter.

1. In order to add code to the page, you will first need to determine what the reference ID is for the summary block. You will need an extension titled “Squarespace Collection/Block Identifier”.
2. Click on this link to download the extension (https://chrome.google.com/webstore/detail/squarespace-collectionblo/bggpdfnccodbnmcndckmeehdjkjojkde?hl=en) or search for the extension on the Chrome Web Store (https://chrome.google.com/webstore/category/extensions?hl=en). 
3. Log onto the Squarespace website (https://www.squarespace.com/) using user credentials
4. After the page loads the dashboard, click on the icon for the Restoring Justice website 
5. Click to “Pages” and then scroll to the page that you will be adding the filter block too.
6. Depending upon what Squarespace block you are attempting to add the filter functionality to, you will add different code. For this example, we are using summary blocks.
7. On the page, click on the installed Squarespace extension. Upon activation, the page will display new text boxes with the reference ID for each summary block.
8. Copy the “#block-yui” for the summary block that you want to add the filter to. The filter box will be added to the defined resource ID in the code injection (more below). 
   1. Copy this reference ID into a separate document as you will need to copy more code first.
9. Hover over “Page Content” close to the top of the page and click “Edit”. 
10. Click the “+” icon near the top right of the page to add a new resource. 
11. Click to add a Markdown block and add the code to this block.
12. Edit the code for summary blocks and replace the summary block ID with the reference ID that was found above.
13. Add this code to the Markdown block that was created and click save at the top of the page. Hit refresh on the page to have the filter take effect.

Click here for details on how to build a non-profit site on SquareSpace 

SEO (Search Engine Optimization) in SquareSpace

SEO factors that can be improved on SquareSpace’s platform:

1. SEO Description for each page -- add title and page descriptions
1. Include keywords that are related to page contents
2. Unique descriptions for each page to increase scope of traffic
3. Consistent description updates to help generate/direct traffic to website
2. Image Description
1. Readable file names
2. Make sure images are nimble (under 500KB)
3. Verify site with Google Search Console
1. Check URL slugs of each page on the site

Finding Solutions to Squarespace Problems

Squarespace can be finnicky at times, and sometimes its interface is not immediately intuitive. For this reason, we found ourselves often scrambling to the internet to find solutions to the problems that arose. Over the course of the semester, we slowly developer the following “escalation ladder” for Squarespace issues.

1. Squarespace Help Center - https://support.squarespace.com/hc/en-us - This is full of content made by Squarespace about how to accomplish various tasks. The search bar makes it very easy to find what you’re looking for.
2. Squarespace Forum - https://forum.squarespace.com/ - This content is not made directly by Squarespace, but instead by contributors. It is still extremely helpful. If you can’t find your answer in the Help Center, you can likely find it here.
3. r/squarespace - https://www.reddit.com/r/squarespace/ - This reddit forum is similar to the Squarespace Forum, but is a little more disorganized, and is not directly controlled by Squarespace. You can find more unconventional and niche solutions on here.
4. Google Search - https://www.google.com/ - This one is obvious, but this is the last step you should take before contacting Squarespace support directly. Plenty of people have created websites solely to explain how to do stuff in Squarespace. We have found a number of random helpful articles just by Googling the problem we were facing.
5. Squarespace Customer Support - https://support.squarespace.com/hc/en-us/requests/new - This is the last resort. As a paying Squarespace customer, you can do a live chat to discuss whatever issues you’re facing. However, they don’t make this a very painless process, so we do recommend exhausting Resources 1-4 before attempting this.