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

All banner images are restricted 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, 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 2048px. 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 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

file:Simple-ecommerce-theme-slideshow-settings-banner-size.png|Slideshow settings

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 - Add the image to your page

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

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