Online Gallery Snippet – Squarespace

Online Gallery Snippet for Squarespace Websites

Seamlessly display your collection on your Squarespace website through this Online Gallery Snippet. Easily show your customers your Rental Items with the images, descriptions, tags, and all of the other important details you’ve included in your RW Elephant account. When you update your inventory in RW, it will automatically update on your website as well. 

See an example of a customized Squarespace site for our fake rental company Musical Chairs here

This Snippet allows you to display your Gallery on your website as well as the ability for various styling customizations. Although, since Squarespace is a limited access platform this does not include a Wishlist functionality. Check out Customizing Your Online Gallery for a break down between our multiple integration options. 

REQUIREMENTS

  1. The Online Gallery feature is only available for RW Users on the Pachyderm or Herd Leader Plans.
  2. You’ll need a Squarespace plan that includes “Premium Integrations & Blocks” (Included with Business, Basic Commerce and Advance Commerce plans). This will give you access to “Code” blocks, and allow you to add blocks of code to any page on your Squarespace site.
  3. To use the Online Gallery Snippet you’ll need to request a Public API Key. Important Note: Do NOT use the Private API Key available from within the RW Elephant Application. Please contact us at help@rwelephant.com and we will generate and provide a Public Key for use with the Snippet.
  4. Currently the Snippet is usable with, but not fully compatible with some Ajax based Squarespace Themes. If your Theme uses Ajax loading, this will need to be disabled in order for the Snippet to work correctly. Disabling Ajax Loading.

INSTALLATION

Step 1:

Create a new page on your Squarespace website that will hold the Inventory Gallery. You can use an existing page if you’ve already planned ahead. We recommend using a page with minimal content to display the Inventory Gallery on, using a more complex page with lots of extra content could lead to slower load times.

Step 2:

Enter “Edit mode” on your page, and add a “Code” block. Move the new “Code” block into the position that you would like to display the Inventory Gallery.

Note: You may need to add “Spacer” blocks around the new code block to adjust the design depending on the theme that you use. We found spacers useful for setting margins on either side of the Inventory Gallery for example (This does depend entirely on the chosen theme layout that you are using for your website).

Step 3:

Edit the “Code” block that you added to your new page, and enter the following HTML:

<!-- RWE Inventory Component -->
<div class="rwe-inventory"></div>

Note: Make sure that “Display Source” is unticked and “HTML” is selected as the Language.

Apply the changes and Save the page. You won’t see anything new appear on your page just yet, first we’ll need to add the script snippet that will generate the Inventory Gallery.

Step 4:

Saving the page should have exited “Edit” mode. Open the Page settings by clicking on the “Gear” icon next to the Page name.

Click on the “Advanced” tab inside the Settings modal, and enter the following Snippet in the “Page Header Code Injection” text box.

<!-- RWE Tenant Configuration -->
<script>
  var rwe_config = {
    // Tenant Information
    tenant_id: 'your_tenant_ID_here',
    public_api_key: 'your_public_API_key_here',
  };
</script>

<!-- RWE Scripts -->
<script src="https://code.rwelephant.com/online-gallery-snippet/inventory.min.js"></script>

Replace the your_tenant_ID_here and your_public_API_key_here values with your RW Elephant Tenant ID and Public API Key.

Important Note: Please do not use your RW Elephant Private API Key, get in touch and we can provide a Public Key!

Save the changes and you should be able to view the Inventory Gallery on the Live version of your new page.

Note:
 Squarespace can sometimes block injected code from running inside the Editor as this can slow down the editing experience, always test on a live version of the page. This may mean that you will need to switch the page or site to “Public” ( or “Password Protected” if you don’t yet have a paid subscription with Squarespace) in the Site Settings Menu.

Note: If at this point, you aren’t able to see the Inventory Gallery displaying on your page, it may mean that you are using an Ajax enabled theme. You can Disable Ajax loading by following the advice in “Requirement (3)” at the start of this document. If after you have disabled Ajax you are still experiencing problems, contact us at help@rwelephant.com.

ADDITIONAL CONFIGURATION OPTIONS

There are some additional configuration options available that can be activated or updated by adding the relevant value to the rwe_config object. Below is an example of all currently available options:

var rwe_config = {

    // Tenant Information
    tenant_id: 'your_tenant_ID_here',
    public_api_key: 'your_public_API_key_here',

    // Activate cropped thumbnails for listings (Default is false)
    cropped_thumbnails: true,

    // Set a custom "no image" thumbnail and gallery
    no_img_url: 'https://some-url.com/no-image-found.png',
    no_thumbnail_img: 'https://some-url.com/no-image-found_thumb.png',

    // Set a Currency symbol (Defaults is "$")
    currency_symbol: '£',

    // Styles
    styles: {
        // Search
        search: {
            // Search Button colors
            btn_text_color: '#FDF4FA',
            btn_bg_color: '#BD4A97',
            btn_bghover_color: '#A93984',
        },
    },

    // Set a custom CSS file
    custom_css_url: 'https://some-url.com/styles.css',

    // Print debug info to the browser console (Default is false)
    config_debug: true,

};

Cropped or Padded Thumbnails

cropped_thumbnails: true,

When you upload an image to the RW Elephant application we generate a 320px square cropped image that is used for Item listing views within the plugin. “Padded” thumbnails are shown by default (no need to activate this by including anything extra) or you can switch to “Cropped” thumbnails by adding cropped_thumbnails: true,

Padded Thumbnail example:

Cropped Thumbnail example:

Custom Default Images (Image Unavailable)

no_img_url: 'https://some-url.com/no-image-found.png',
no_thumbnail_img: 'https://some-url.com/no-image-found_thumb.png',

The default images for “Image Unavailable” (shown when an Item doesn’t have an image assigned in the RW Elephant application) can be replaced for both Thumbnail and Item images.

Thumbnail example (recommended size – 320px x 320px):

Item example (recommended size – 600px x 420px):

Currency Symbol

currency_symbol: '£',

The currency symbol used throughout the Online Gallery Snippet can be changed to any currency symbol using the above option.

Styling – Search Button Color

styles: {
    
    search: {
        btn_text_color: '#FDF4FA',
        btn_bg_color: '#BD4A97',
        btn_bghover_color: '#A93984',
    },

},

You can change the color of the “Search” button background and text using the above option:

  • btn_text_color sets the button text color.
  • btn_bg_color sets the default button background color.
  • btn_bghover_color sets the button hover background color

We recommend using a standard hexadecimal color code, however you can add any value that works for CSS rules.

Note: We hope to add further customization options for lighter styling, however a skilled developer could potentially rewrite styling for the whole Gallery styling using the Custom CSS Stylesheet option below.

Custom CSS Stylesheet

custom_css_url: 'https://some-url.com/styles.css',

If you are a skilled developer, you can write a custom stylesheet that replaces the Online Gallery Snippet stylesheet. Replace the default stylesheet with your custom stylesheet by adding custom_css_url: 'https://some-url.com/styles.css', (don’t forget to change the url to match the location of your own stylesheet).

If you’d prefer not to start from scratch you could build your customizations on top of the already existing stylesheet. Download either the expanded or minified source file, and use that as a starting point. We highly recommend re-minifying your newly created stylesheet once your updates are complete to help keep file sizes to a minimum and help the snippet run as fast as possible.

Debug

config_debug: true,

If you’re experiencing issues with the Online Gallery Snippet or having problems during installation, we may ask you to activate debug by adding the config_debug: true, option. Activating debug can provide useful information about your setup, and may help us with a resolution.