Simple Theme - Creating banner images on collection pages

The Simple Theme allows you to have individual banner images on every collection, product, page, blog, and blog article. The process to add these in is very straightforward, and is unique to this theme. This tutorial will not work in other themes.

Step 1 - Creating your image

For consistency throughout the site, all banner images are set to be the same height and width as you have set the slideshow on your home page. If you have modified the size of the slideshow on your home page, you will need to ensure that your image sizes match those of your home page for consistent display.

The banner images are all in landscape format, but if you have parallax enabled the best format to use is square images. If you use a portrait image, or an image that is not high enough quality, you'll be slowing down your site for an image that will likely look awful.

• 

  Slideshow settings

If widescreen slideshow is enabled...

1. Create your banner image at 2048px x 1200px. This is so the banner can scale on all devices.
2. Give your banner image a descriptive name, so you'll know what it is later on.

If Parallax is enabled and widescreen slideshow is enabled...

1. Create your banner image at 2048px x 2048px. This is so the banner can scale on all devices, and there is enough height in the image for scrolling effects.
2. Give your banner image a descriptive name, so you'll know what it is later on.

If widescreen slideshow is not enabled...

1. Create your banner image at 1200px x 550px. As widescreen is not enabled, the size will dynamically shrink to fit all devices.
2. Give your banner image a descriptive name, so you'll know what it is later on

If Parallax is enabled and widescreen slideshow is not enabled...

1. Create your banner image at 1200px x 1200px. This is so the banner can scale on all devices, and there is enough height in the image for scrolling effects.
2. Give your banner image a descriptive name, so you'll know what it is later on.

Using Pixlr to create a banner image

Pixlr is a free online image editing program, where you can edit your images in your web browser.

• 

  Pixlr editor

1. Go to the Pixlr editor
2. Click "Open image" to open an image from your computer
3. Click the CROP icon
4. Enable "Select Aspect"
5. Select "Size
6. Set the size recommended above
7. Drag the crop area around until you're happy with the cropping
8. Click the "Apply" button
9. Make any other adjustments you like and then save your image, ensuring you name it something that you'll easily be able to refer to later.
10. Choose JPEG for your format, and set your quality to 80
11. When you've saved the file to your computer, upload it by following the instructions below.

Step 2 - Uploading your image

1. Go to the "Design & assets -> Uploaded files" section in your store's admin
   
   
   
   
   
2. Upload the image there
   
   

Step 3 - Add the image to your page

The process to add a banner image is very straightforward, and is unique to this theme. Simply edit the collection, and add the following code anywhere in the collection description field...

Note: You need to insert the code in code view in our new editor

<!--banner="your-banner-filename.jpg"-->

Replace "your-banner-filename.jpg" with the name of your actual image.

« The Simple Ecommerce Theme Guide