Instructions and Tips & Tricks

OK, so you've installed the app, started a free trial. Here are answers to common questions:

Where do I paste the code?

Where you paste the code depends on where you want the gallery to display on your Shopify Web site.

For example, if you wanted it to display on a Page called 'Gallery', you would:

1. Create a new page called Gallery
2. Click the View HTML button to change into code view
3. Copy the Easy Galleries snippet, and paste it into your new page
4. Save

Before you paste the Easy Galleries snippet, make sure you click the small Show HTML button (with an icon that looks like <>) that appears at the right hand side of the editing window:

Alternatively, if you have experience with editing HTML, you could add the code to a Shopify template.

How do I centre the gallery on the page (horizontally)?

Because Easy Galleries uses CSS, you’re able to modify that to adjust the way your galleries show on your site.

For example, you could change your code from this:

	<div class="sg-placeholder" data-gallery="1234567"></div>

To this:

	 <div class="sg-placeholder" style="margin: 20px auto;" data-gallery="1234567"></div> 

The ‘20px’ part controls the space above and below the gallery (you could make this greater or smaller) and the ‘auto’ part puts it in the centre. (Remember to change 1234567 to the actual ID of your gallery, from the code snippet we provide!)

Alternatively, if you have experience modifying Shopify theme code (or have access to a Shopify Expert), you can put your CSS rules into your theme’s CSS file. This would look like:

	 .sg-placeholder { margin: 20px auto; } 

How do I “reserve” space in my theme for the gallery?

If you’re using a fixed–width theme, you might like to hard–code the space available for the Easy Gallery.

For example, if you had a gallery that was 900px wide and 400px high, you could change your code from this:

	 <div class="sg-placeholder" data-gallery="1234567"></div> 

To this:

	 <div class="sg-placeholder" style="width: 900px; height: 400px;" data-gallery="1234567"></div> 

Alternatively, if you have experience modifying Shopify theme code (or have access to a Shopify Expert), you can put your CSS rules into your theme’s CSS file. This would look like:

	 .sg-placeholder { width: 900px; height: 400px; } 

Adding a loading indicator (or throbber)

If you’ve reserved space for the gallery, you might also like to display a loading indicator to show the user that images are loading.

Step 1: Download a loading indicator gif from a site like http://www.ajaxload.info or create your own

Step 2: Upload the indicator to your theme’s assets directory, and remember the file name

Step 3: Edit your theme’s CSS file, like this:

	 .sg-placeholder { background: url({{ 'loader.gif' | asset_url  }}) center no-repeat; } 

(please make sure that your theme CSS is using Liquid. TO check, make sure it’s named something like style.css.liquid)