Online Gallery Snippet – Shopify

Online Gallery Snippet for Shopify Websites

Seamlessly display your collection on your Shopify 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. 

This Snippet allows you to display your Gallery on your website as well as the ability for various styling customizations. Although, since Shopify 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. Installing the Online Gallery Snippet requires editing your Shopify Theme Template (*.liquid) files. We highly recommend that installation is carried out by an experienced Shopify developer, as mistakes could potentially lead to changes to your 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.

INSTALLATION

Step 1:

Create a new page on your Shopify 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.

Give your new page a Title, and “Save” the changes.

Note: You can Title the page anything you like, but make a note of what Title you’ve chosen as we will need this later. For this guide, we’ve titled the page “Inventory”.

Next, add the new page to your main navigation. We’ll need to do this so that we can access the page.

Do this by clicking on the “Navigation” tab, navigate to the main menu and add the new Inventory page to the menu.

You should now be able to access your new page using the main site navigation.

Step 2:

Now that the page is setup and we can access it, we’ll go back to the Page settings and begin the first stage of the Online Gallery Snippet installation.

Reopen the “Pages” menu and select the page you set up earlier to hold the Inventory Gallery (“Inventory” in our case). We’ll need to add a snippet of HTML code within the “Content” area.

Click the “Show HTML” button.

Enter the snippet below:

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

“Save” the changes.

Step 3:

For the final step, we’ll need to add the script that allows the Inventory Gallery to run on your page. Click on the “Themes” tab.

Note: We’re using the “Brooklyn” theme for the purposes of this guide, so you may see a different Theme listed on your site. Click on the “Actions” button, and select “Edit Code”.

On the Edit page, you’ll see a list of all the individual template parts that make up your current theme. The template parts are usually divided into folders, navigate to the “Layout” folder, and select the “theme.liquid” file.

We’ll need to add the final snippet in a specific location within the “theme.liquid” file. With the file selected, press Command + f on Mac (Ctrl + f on Windows) to search the document, and enter closing head tag formatted like the example below. Press return, and you should see the closing head tag within the theme.liquid file.

Immediately before the closing head tag, add the Snippet below.

{% if page.title == "your_page_title_here" %}

  <!-- 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>

{% endif %}

You’ll need to replace the values for each of the placeholders within the script code, with your own values.

  1. your_page_title_here – will be the Title of your newly created page (“Inventory” in our example).
  2. your_tenant_ID_here – will be you RW Elephant Tenant ID.
  3. your_public_API_key_here – will be you RW Elephant Public Tenant API Key.

Note: Be careful not to copy over extra characters or spaces when copy/pasting the values.

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

Once you’re finished replacing the placeholders, click on the “Save” button and exit the Editor and you should be able to view the Inventory Gallery on the Live version of your new page.

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.