Encyclopedia of Code
Start Here
Private Community
Resources
Categories
![Show a Specific Number of Related Products | Squarespace 7.1](https://images.squarespace-cdn.com/content/v1/5eb99ed4afe79e0fd4b6de69/1622049201613-PXE8STL49V125MJ2FA2C/Show+a+Specific+Number+of+Related+Products+%7C+Squarespace+7.1.jpg)
Show a Specific Number of Related Products | Squarespace 7.1
Squarespace’s Related Products feature will show up to five related products. This code snippet will allow you to show less than five related products.
![Slideshow with Text and Buttons | Squarespace 7.1](https://images.squarespace-cdn.com/content/v1/5eb99ed4afe79e0fd4b6de69/1621540654417-YJF51N1F84SJMT9HHR5H/Slideshow+with+Text+and+Buttons.jpg)
Slideshow with Text and Buttons | Squarespace 7.1
This code snippet will allow you to have a full width slideshow with text and buttons.
![Recipe Card Template](https://images.squarespace-cdn.com/content/v1/5eb99ed4afe79e0fd4b6de69/1621381730160-9CA2EWDBHJZPHKVNY6F4/Recipe+Card+Templates.jpg)
Recipe Card Template
This code snippet will allow you to add printable recipe cards to your Squarespace Website.
![Multiple Languages in Squarespace 7.0 (PopUp Design)](https://images.squarespace-cdn.com/content/v1/5eb99ed4afe79e0fd4b6de69/1620917730606-5P60593ERFDT9MA9QXE5/Multilingual+Site+in+Squarespace+7.0+Brine.jpg)
Multiple Languages in Squarespace 7.0 (PopUp Design)
This code snippet will allow you to switch between multiple languages on your Squarespace 7.0 Brine Family Site.
![Multiple Languages in Squarespace 7.1 (PopUp Design)](https://images.squarespace-cdn.com/content/v1/5eb99ed4afe79e0fd4b6de69/1623770935498-UC1FEABZ2UXCC36FOWG9/Multiple+Languages+in+Squarespace+7.1+%28PopUp+Design%29.jpg)
Multiple Languages in Squarespace 7.1 (PopUp Design)
This code snippet will allow you to switch between multiple languages on your Squarespace Site using a pop up.
![Text Selectors in Squarespace](https://images.squarespace-cdn.com/content/v1/5eb99ed4afe79e0fd4b6de69/1620158721129-R1Z6HFRHEFP5N7BA5UJO/Text+Selectors+in+Squarespace.jpg)
Text Selectors in Squarespace
These code snippets will allow you to target different text formats in order to change their style sitewide.
![Split Navigation in Squarespace 7.1](https://images.squarespace-cdn.com/content/v1/5eb99ed4afe79e0fd4b6de69/1670001306957-D4NFBXYAAT6Q21KEIGJ0/Split+Navigation+in+Squarespace+7.1.png)
Split Navigation in Squarespace 7.1
This code snippet will allow you to create the look of a secondary (or split) navigation in Squarespace 7.1 by placing your logo or site title in the centre with navigation items on each side.
![Resize Related Products | Squarespace 7.1](https://images.squarespace-cdn.com/content/v1/5eb99ed4afe79e0fd4b6de69/1619106167999-7YYFXB2GOIMFZ743RBNX/Resize+Related+Products+in+Squarespace+7.1.jpg)
Resize Related Products | Squarespace 7.1
This code snippet will allow you to resize the related products on product pages for multiple screen sizes in Squarespace 7.1.
![Add a Popup Text Bubble](https://images.squarespace-cdn.com/content/v1/5eb99ed4afe79e0fd4b6de69/1619101707784-WURB0XK1DWIS8ZGFQ8Q0/Add+a+Popup+Text+Bubble.jpg)
Add a Popup Text Bubble
This code snippet will allow you have text popup in a bubble on hover or when clicked.
![Show Contents of a Section on Hover | Squarespace 7.1](https://images.squarespace-cdn.com/content/v1/5eb99ed4afe79e0fd4b6de69/1618590040380-DMO3WTO16Z49V3O5ZIEN/Show+Contents+of+a+Section+on+Hover+%7C+Squarespace+7.1.jpg)
Show Contents of a Section on Hover | Squarespace 7.1
This code snippet will allow you to hide the contents of a section until the section is hovered over.
![Split Layout with a Slideshow Gallery | Squarespace 7.1](https://images.squarespace-cdn.com/content/v1/5eb99ed4afe79e0fd4b6de69/1617985646255-0WBW04P6QZ5R2AYWNJLK/Split+Layout+with+a+Slideshow+Gallery.jpg)
Split Layout with a Slideshow Gallery | Squarespace 7.1
This code snippet will create a split layout with a slideshow gallery so that the images are on one side and the captions and bullets are on the other.
![Scroll Down Arrow: Custom Image](https://images.squarespace-cdn.com/content/v1/5eb99ed4afe79e0fd4b6de69/1617978444300-1AIBIGPBEGGUMAEW6L48/Scroll+Down+Arrow%3A+Custom+Image.jpg)
Scroll Down Arrow: Custom Image
This code snippet will allow you to use a custom image as a scroll down arrow that when clicked scrolls the visitor down to a specific spot on the page.
![Scroll Down Arrow: Font Awesome Icon](https://images.squarespace-cdn.com/content/v1/5eb99ed4afe79e0fd4b6de69/1617977692251-CTC2TO4MSQEFAVN7HVT5/Scroll+Down+Arrow%3A+Font+Awesome+Icon.jpg)
Scroll Down Arrow: Font Awesome Icon
This code snippet will allow you to add a scroll down arrow that when clicked scrolls the visitor down to a specific spot on the page.
![Add a Border or Outline Around Images](https://images.squarespace-cdn.com/content/v1/5eb99ed4afe79e0fd4b6de69/1617917003446-P0UUIGHJVLRBB3N6SQH8/Add+a+Border+or+Outline+Around+Images.jpg)
Add a Border or Outline Around Images
This code snippet will allow you to add a border or outline around images.
![One Word in a Custom Font](https://images.squarespace-cdn.com/content/v1/5eb99ed4afe79e0fd4b6de69/1617915636726-05Z9RV3MGHXOZMP4QV2A/One+Word+in+a+Custom+Font.jpg)
One Word in a Custom Font
This code snippet will allow you to set one word (or a couple words) within a sentence to a custom font.
![Place an Icon Beside Text](https://images.squarespace-cdn.com/content/v1/5eb99ed4afe79e0fd4b6de69/1617912392081-LHFSLLOQ3CW22R5V51GI/Place+an+Icon+Beside+Text.jpg)
Place an Icon Beside Text
This code snippet will allow you to use Font Awesome to place an icon beside text.
![Change the Background Color of the Search Page](https://images.squarespace-cdn.com/content/v1/5eb99ed4afe79e0fd4b6de69/1616687860355-QZZ5NA1ZWY7EFO9SFRED/Change+the+Background+Color+of+the+Search+Page.jpg)
Change the Background Color of the Search Page
This code snippet will allow you to change the background color of the search results page.
![Autoplay Gallery Reel Sections](https://images.squarespace-cdn.com/content/v1/5eb99ed4afe79e0fd4b6de69/1617205687816-1IZ2D2VUMMTASWMQF00J/Autoplay+Gallery+Reel+Sections.jpg)
Autoplay Gallery Reel Sections
This code snippet will set your gallery reel section to automatically scroll through your content.
![Split Background Color](https://images.squarespace-cdn.com/content/v1/5eb99ed4afe79e0fd4b6de69/1616702981530-T7C9H7NX34Y2ZSDE9DPN/Split+Background+Color.jpg)
Split Background Color
This code snippet will allow you to have two colors in the background split vertically so that you have one color on the right and one color of the left.
![Slow Down the Fading Transition on a Slideshow Gallery Section | Squarespace 7.1](https://images.squarespace-cdn.com/content/v1/5eb99ed4afe79e0fd4b6de69/1616700861640-5Z0F16QU1FDDU6WQV5LZ/Slow+Down+the+Fading+Transition+on+a+Slideshow+Gallery+Section+%7C+Squarespace+7.1.jpg)
Slow Down the Fading Transition on a Slideshow Gallery Section | Squarespace 7.1
You may find that the Fading animation on your slideshow gallery section is quite abrupt. This code snippet will allow you to change the speed of the Fading transition animation so that it fades more smoothly.