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.

Google Chrome_2020-05-28 17-40-17@2x.png

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

Teampaper Snap_2020-06-12 17-05-19@2x.png

JavaScript code

Teampaper Snap_2020-06-12 17-31-26@2x.png

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