Questions? Feedback? powered by Olark live chat software

NOTE : Code links require updating. This guide is duplicated here

Simple Plugins

MAGNIFYING GLASS NAV ICON

Add this code to "code injection"

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

Add a "link" page to the main navigation with the link

<i class=" fa fa-search"></i>


SHOW MORE/SHOW LESS BUTTON

Add this code to the individual page code injection (page settings > advanced > header code injection)

Add a "button" block and add a click through link "#expand-n" where 'n' represents the number of blocks you would like to show/hide. 


HIDING A PAGE BANNER

Copy this code into the individual page code injection 

<style>#banner-area-wrapper {display: none}</style>


ADDING A FILE UPLOAD FIELD TO FORMS

Add this code to the site wide page header code injection

<script src="//uploader.squarespacewebsites.com/sqs-form-upload.min.js"></script>

Add a text field to your form and use the bolded tags separated by a ";" to change attributes. 

  • add FileField parameter to enable this field as File upload field - required;

  • set MaxSize  of file in KB, otherwise default value is 1024KB(1MB). The max file size we support at the time is 10MB per file;

  • add Multiple parameter for multiple files uploading;

  • set addText parameter to change button text, use underscore for spaces ex.  addText=Add_your_Files;

  • set UploadUrl parameter to use your own server (ex. UploadUrl=http://my-own-server.com;) or add nothing to use our own service.

(ex. FileField; MaxSize=1000KB; Multiple)

Following this setup, create an account here and link to your website and google drive. 


ADDING SOCIAL ICONS UNLINKED TO SITE

Using this code in a code block, one can add social icons without linking the social media accounts to their site. This is code pulled off of the page source and altered. Simply edit the sections highlighted in blue, or delete entire social icons altogether. 

Purchased Plugins

Image Slider

Add this code to the footer code section of the page code injection. 

Add a stacked gallery block and two images. 


Timeline

Add this html to a code block within a page 

Add this CSS to the main CSS editor under the design tab. 

Edit the headers by editing the placeholder text under the <h> html brackets, and the paragraphs under the <p> sections. 


Accordion Tabs

Add this code to the site wide footer code injection

<script>
$(document).ready(function(){
$('.sqs-block-markdown h2').css('cursor','pointer');
$(".sqs-block-markdown h2").nextUntil("h2").slideToggle();
$(".sqs-block-markdown h2").click(function() {$(this).nextUntil("h2").slideToggle();});
});
</script>

Add this code to your sites custom CSS

On any page, add a "markdown" block and add text. Learn more about markdown rules here. 

The title of the accordion is altered by placing text in this format at the beginning of the markdown block. 

## Sample Title Here **. . .** 

Additional headers are added by adding text like this:

### subtitle

* denotes a bullet point.


Top of Page Tabs

Add this code to the page header code injection. 

Add this code to a code block at the top of the section to be organized into tabs.

<div class="tabs-start"></div>

Add this code to denote each section header. Edit the "Tab Name" text to change the title.

<div class="tab-section">Tab Name</div>

Add this code to a code block at the end of the section to be organized into tabs. 

<div class="tabs-end"></div>


Countdown Timer

Add this CSS to the site wide CSS editor

Add this HTML to a code block 

<a href="http://theu.ca/xring">
<div id="timer"> 
    <div id="days"></div>
    <div id="hours"></div>
    <div id="minutes"></div>
    <div id="seconds"></div>
</div>
</a>

Add this code to the page specific code injection

Icon Assets

These image files are used with Apple's "add to homescreen" feature, to create app thumbnails across iOS devices. 

Receipt Assets
Swish Logo Small-01.png
Swish Logo Small - Receipt-01.png
Swish Logo Receipt 2-01.png
Web Assets