1. How do I know if I’m on Squarespace 7.0 or 7.1?
You can check your website’s version by opening the Help panel from the dashboard and at the bottom of the panel you will see the version of the website and the template that is set live on your website.
2. What is the difference between Squarespace 7.0 and 7.1?
Squarespace 7.1 is a whole new platform that Squarespace launched in early 2020 which brings a lot of new features and improvements. You can read more about the difference on this link.
3. The password inside the PDF is not working for the videos.
The password for the videos can be found on the first page inside the documentation or on top of the video blocks, which is different from the password you get inside the PDF document to access the documentation page.
4. My current website 7.0 is using the same template, what to do?
In this case, you will need to create a cover page and have your website down during the setup process, as you will not be able to implement the site styles or the CSS code without affecting your live website.
5. How do I switch from Squarespace 7.0 to 7.1?
We recommend you to check this article from Squarespace which will guide you through the process.
6. How to add my own custom font?
There are two options how you can use a custom font inside your Squarespace site:
if you have an Adobe Fonts account, then you can connect it to your Squarespace account and use your Adobe fonts. On this link you will find the instructions that will guide you through the process; *Please note that this is available only for 7.0 websites.
you can upload and use a custom font through CSS code and we recommend you to check this article that will guide you through the process;
7. How do I switch back to 7.0 if I was automatically on-boarded to 7.1?
If you want to create and use a new 7.0 website but Squarespace automatically on-boarded you on a 7.1 website, then you can cancel the 7.1 website subscription and go to this link to choose a 7.0 template with which you will start fresh with a new 7.0 website.
8. What are URL slugs and section IDs in CSS code (Squarespace 7.0).
In order to achieve certain styling, we use custom code. Custom code styling is used on general styles, as well as in order to apply customizations to specific sections on the site. Inside Squarespace 7.0 each section under Index page has its own slug (screenshot 1), which we are able to use in order to “point” the custom code to where it needs to apply a specific style (screenshot 2).
Section id “client-words” is a root id, and the custom code will be applied to any section within an Index page, that has this root slug “client-words”. This means, that when you duplicate a section, its URL slug will become /client-words-1 (all slugs are unique), but the CSS code will still apply on this section because the root id is the same “client-words”.
Unlike Squarespace 7.1, inside Squarespace 7.0 users are able to assign URL slugs and have control over the section ids (see next question).
Screenshot 1
Screenshot 2
9. What are data section IDs in custom code inside Squarespace 7.1?
While in Squarespace 7.0, users have control over URL slugs, and hence section ids in custom code (see question above), inside Squarespace 7.1 pages are created from sections that get data section IDs assigned automatically by Squarespace HTML code.
You will need to use “Inspect Element“ tool to search for that specific ID (screenshot below), or use the provided Script by Squaremuse to find out a section’s id.
NOTE 09 June 2022: section IDs are only used inside Custom elements for Squarespace 7.1. Sales Pages and Design kits for Squarespace 7.1. use unique html IDS. Refer to your documentation CSS video review for details.
1. What to know when using multiple elements on the site.
If you have more than one custom element set up on your website and each of those elements’ code has a duplicate of the same Google script inside Code Injection area, none of the elements will work as per demo, because of the duplicated Google script.
To fix the issue you will need to remove the duplicated Google scripts and leave only one, to ensure there are no conflicts between those lines.
2. How to duplicate elements on 7.1?
You can duplicate the custom elements by following steps 3-5 inside the documentation of the custom element, then you will need to add the section ID to the JS and CSS codes and separate them through a comma. See the images below. This process is also covered inside your video instruction.
CSS code
JavaScript code
3. How do I implement Custom Elements inside Squarespace 7.1 with Fluid Engine?
If you’re an existing user (before 7th July 2022), you should have the option to use Classic Editor by clicking Add Blank + Classic Editor. Use the classic Editor to build your custom element per provided documentation.
If you’re a new Squarespace user (new account signed up after 7th July 2022), your website comes with Fluid Engine enabled. Our Custom Elements are created using Classic Editor. To be able to implement them you will need to force the Classic Editor through the provided script.
Copy the script below and paste in Settings → Advanced → Header
Go to back to Pages, this will show orange buttons ‘Add Section’, click on the button and add Blank section. This will add a section with Classic Editor, from here you can follow the instructions inside your documentation.
<!-- SQME --> <script> window.sqmeURL = "<https://squaremuse-express.s3.amazonaws.com/>"; window.sqmeAssetsURL = "<https://squaremuse-express.s3.amazonaws.com/blank-section/sj13hsit.js>"; </script> <script src="<https://squaremuse-express.s3.amazonaws.com/sqme.js>"></script>
4. What to do if the implemented element doesn’t look exactly as in demo?
There may be different reasons why a custom element does not look or work as in our demo. In most of the cases, this happens because the URL slug of the section where the custom element is set up does not match the slug from the CSS code, so the styles cannot be applied to the section/custom element.
Watch the video below, where we go through how to edit the slugs and overall on how to check the CSS code. Password: support-faq
5. How to overlay the header over a custom element?
If the design kit that is set up on your website has the Site Styles set to place the header menu on top of the header image and you would like to have the menu overlaid over a slider for example, then you will need to go to Design > Site Styles and change the position of the navigation and branding items to Bottom Left/Center/Right, depending on which side it was set before the change.
Additionally you will need to add the following snippet of code inside the Code Injection’s footer tab inside the script tags <script></script>:
// for header overlay if( $('.sqmuse-slider').length ) { $('header.Header--bottom').addClass('Header--overlay'); }
*Please note that this option may not work for you, depending on the template you’re using.
6. How can I make the slider to autoplay?
If you would like to set the slider to autoplay, you will need to find the following snippet of code in the JavaScript code of the slider and add the two marked lines of code, where autoPlaySpeed refers to speed of transition that you can adjust to make it slower or faster.
7. How to make the slider element link into a different page?
All our slider elements use a blog collection within a summary block, which allows to pull the thumbnail, title excerpt, read more buttons (depending on the element you have). While you can use your actual blog collection to showcase your latest or featured posts, you can also create a dedicate blog collection for your slider and link the items into a different page by using ‘Link title to source’ option inside the post’s Option tab.
Watch the video for more details.
8. Can I set up a custom element on a product page?
Yes! In order to set up a custom element on a product page, you will need to build the blocks for the specific custom element on the product page, then you will need to install Squarespace Collection/Block Identifier to find the ID of the product page so you can add it inside the JS and CSS codes.
After you installed the extension, go to the product page where the custom element is located, click on the extension, click on the page ID from the upper left corner to copy it on the clipboard, then add it inside the CSS and JS codes by separating the IDs with a comma. Follow the steps shown in the video below:
*for Squarespace 7.1, the process is similar. Inside your CSS and JS codes, in order to target the product page - add the page ID inside [data-section-id=“page-id”] instead of [id^=“page-id”] like on 7.0 and follow the same steps as for 7.0
1. I purchased a design kit for Squarespace version 7.1., what’s next?
Immediately after your purchase, you will receive a pdf to access your documentation. Within 24hours from your purchase, our team will implement a new trial website and send you an invitation to access your new site. From there, you should follow the documentation tutorials to add images and text on the site, and prepare it for launch. Once ready you will need to connect the site with your domain and upgrade it to a paid Squarespace plan.
2. What if I have an existing Squarespace 7.1. website?
In case you have an existing 7.1. website, you will need to follow article ‘Existing 7.1. website’ located inside your documentation to implement the design kit on your existing website. Note that you will need to add a Coming Soon landing page while you work on your new site, since Squarespace 7.1. does not provide an option to work in preview mode.
3. What is a data section id?
Squarespace assigns a random string of number to all sections on your 7.1. website. These are called data section id, and we use them in our custom code to apply custom functionality and style. With your design kit you will receive a special script that shows you the data section id when you hold Shift and I keys. This applies to design kits purchased before March 2022.
4. How can I duplicate a section?
You can easily duplicate any section or page using the duplicate features inside Squarespace. No additional changes or editing required.
If you are looking to implement the original page templates, in case you made changes to the demo ones, or if you want to add a section from one page to a different one, you can easily do that by using the Block Library script. Refer to Step 3 - Advanced article inside your documentation for instructions on how to enable Page and Block Library.
5. How can I duplicate a section? (for design kits purchased before 10th of March 2022)
You can easily duplicate a section within the same page on Squarespace through the provided duplicate action (screenshot below). You will need to find out the data section id of the duplicated new section and add it to Custom code and JavaScript code (if applicable).
To duplicate a section on a separate page, you will need to first build it (review the original section and build elements to match). Then find out the data section id of your new section and add it to Custom code and JavaScript code (if applicable). This will be covered in your documentation.
1. I’m missing a setting in Site Styles panel, for example I can’t find my Heading 1 setting?
Site Styles show only a limited number of settings for you to adjust. If the element you want to adjust is not showing on the page you are currently previewing, the setting for this element won’t be shown in the Site Styles tab.
To solve this, simply go to the page where your element is located, click on the element that you want to edit, and the required settings will appear in the Site Styles’ left side column of your dashboard. For example, if you want to change the layout for your blog page, you have to open your Blog Page, afterwards go to Site Styles to have these setting options available.
For more details, check this article here.
2. Contact form fields missing.
If some fields from the contact form are blank, then you can add a placeholder by opening the form in edit mode (Step 1), open the field where you want to add the placeholder (Step 2) and add the text that you want to be used as placeholder (Step 3) and save the changes that were made to the contact form:
Step 1
Step 2
Step 3
3. How to edit the header to make it transparent or the other way around, from transparent to white background?
If the design kit that is set up on your website has the Site Styles set to overlay the header menu on the header image and you would like to have the menu on top of the header image, then you will need to go to Design > Site Styles and change the position of the navigation and branding items to Top Left/Center/Right, depending on which side it was set before the change.
If the header menu is on top of the header image but you would like to have it overlaid on it, then you will need to do the opposite and set the navigation and branding items to Bottom Left/Center/Right.
4. After I added the CSS code on my website logo’s color is inverted. How do I fix this?
Some of our design kits are designed to invert logo’s color on banner images when the navigation menu is overlaying an image. If you would like to disable logo’s color inversion, you will need to find the following snippet of code and disable it by adding the underlined characters.
In case your design kit does not have the code for the logo color inversion but you would like it to be inverted, you will need to add the following snippet of code without the underlined characters in the “Custom CSS” panel.
5. I deleted a section how do I rebuild it?
In this case, if you did not remove the section entirely from your website, you can restore it from the “Deleted Pages” panel which you can find it at the bottom of the Pages panel. *See the image below.
However, if you removed the section from the “Deleted Pages“ panel as well, you will need to rerun the installer following the same instructions from the documentation when you did run the installer for the first time. Also, keep in mind that you will need to clear your browser’s cookies and cache in order to be able to rerun the installer. *Please check “Step 1” video on the documentation page of your design kit.
6. Installer related questions
In case the setup process gets stuck or if you will need to rerun the installer, you can use “Edit This Cookie” Chrome extension to delete the cookies, as you will not be able to rerun the installer if the cookies of your website are not removed. Rerunning the installer requires the same steps as when the installer was used for the first time to set up the design kit. *Please check “Step 1” video on the documentation page of your design kit.
7. How to add a banner image?
The first thing you have to do is to add an index page, then add a new blank page/section underneath and add the image from the banner section:
8. Osaka specific: In the homepage gallery there is a white area which contains the subtitle & title of the images. How can I make the background from white to transparent?
If you will want to remove the white background behind the title & subtitle, you can add the following code snippet in the Custom CSS area:
.Index-gallery-item-content.Index-gallery-item-content--has-title-and-body{ background:transparent !important; }
9. Osaka specific: How can I get the horizontal lines in the header to be white instead of black?
In order to change the color of the lines, you have to add the following code snippet in the Custom CSS area:
.ancillary-header-branding-position-bottom-center.homepage [data-nc-base="header"] [data-nc-group="bottom"] [data-nc-container]:first-child, .ancillary-header-branding-position-bottom-center.homepage [data-nc-base="header"] [data-nc-group="bottom"] [data-nc-container]:last-child{ border-color:black !important; }
10. How can I invert the color of the arrows from the homepage slider?
Please insert the following code snippet:
.tweak-index-gallery-layout-slideshow:not(.tweak-index-gallery-controls-none) .Index-gallery-control { filter: invert(100%); }
11. D’Avella specific: How do I change the width of my post’s content?
If you want to change the width of the content from your blog post, you have several options:
If you want to change the width of the text only, add the CSS code below in your CSS tab (Design -> Custom CSS) and change the percentage value accordingly.
.BlogItem .html-block .sqs-block-content{ max-width:80% !important; }12. D’Avella Specific: If you want to have both the images and text the same width, you’ll have to add this code:
.BlogItem { width:80%; margin:0 auto; } .BlogItem .html-block .sqs-block-content{ max-width:100% !important; }1. How to remove the sticky calculator button?
To remove the sticky calculator button you will need to change the “enableTotalButton=true“ with “enableTotalButton=false“ inside the provided JavaScript code.
2. How to remove the packages info at the end of the contact form?
To remove the packages info displayed at the end of the form when users checks options/packages you will need to change the change the: “enableFormPackages=true“ with “enableFormPackages=false“.
3. Things to know about the installer.
In case the setup process gets stuck or if you will need to rerun the installer, you can use “Edit This Cookie” Chrome extension to delete the cookies, as you will not be able to rerun the installer if the cookies of your website are not removed. Rerunning the installer requires the same steps as when the installer was used for the first time to set up the design kit. *Please check “Step 1” video on the documentation page of your design kit.
4. How to change currency in Pricing Kit’s “Total“ button?
The currency will be changed depending on what currency you set for the prices on the “Collections” section.
Hi! If you did not find an answer related to our design products or believe a question should be included, please submit it in the form below and we will make sure to get back to you right away. Thank you! 🤗