Difference between revisions of "Bendigo ecommerce theme - editing your slideshow"

From Spiffy Stores Knowledge Base

 
Line 43: Line 43:
 
=== Slideshow image sizes ===
 
=== Slideshow image sizes ===
  
If you have <b>disabled the sidebar menu</b>, your slideshow will display at 875px wide on the largest device, and will scale on other devices. You will need to upload your slideshow images at a good resolution... at least '''875px''' wide.  The optimal size for your slideshow images is '''875px x 450px''', but you can also set whatever height you prefer.  You can create slideshow images using most image editing programs, but many people find [http://pixlr.com/editor/ Pixlr] useful.
+
If you have <b>enabled the sidebar menu</b>, your slideshow will display at 875px wide on the largest device, and will scale on other devices. You will need to upload your slideshow images at a good resolution... at least '''875px''' wide.  The optimal size for your slideshow images is '''875px x 450px''', but you can also set whatever height you prefer.  You can create slideshow images using most image editing programs, but many people find [http://pixlr.com/editor/ Pixlr] useful.
  
 
If you have <b>disabled the sidebar menu</b>, your slideshow will display at 1160px wide on the largest device, and will scale on other devices. You will need to upload your slideshow images at a good resolution... at least '''1160px''' wide.  The optimal size for your slideshow images is '''1160px x 450px''', but you can also set whatever height you prefer.  You can create slideshow images using most image editing programs, but many people find [http://pixlr.com/editor/ Pixlr] useful.
 
If you have <b>disabled the sidebar menu</b>, your slideshow will display at 1160px wide on the largest device, and will scale on other devices. You will need to upload your slideshow images at a good resolution... at least '''1160px''' wide.  The optimal size for your slideshow images is '''1160px x 450px''', but you can also set whatever height you prefer.  You can create slideshow images using most image editing programs, but many people find [http://pixlr.com/editor/ Pixlr] useful.

Latest revision as of 07:51, 4 January 2021

The Bendigo theme includes a responsive slideshow on the home page that resizes based on the size of the device your customer is using.

Your home page slideshow can have up to 5 images, with the option to modify the speed. You can also add a title, caption, and a button that links to other pages. The slideshow resizes for different devices, and looks gorgeous on tablets and phones.

Edit your slideshow in the Design & assets -> Theme editor section of your store's Toolbox. There you can upload new slideshow images, and enter captions and links, and select the position of your captions. This can be found in the Home Page - Slideshow section'.

Updating your slideshow

Edit your slideshow in the Design & assets -> Theme editor section of your store's Toolbox. Scroll down on this page until you find the section called Home page - Slideshow. Make sure you delete the demo images, captions, and links that are currently there before you start to upload your own images.

  • Display a slideshow - Enables or disables the slideshow.
  • Number of slideshow images - Set this to the number of images you have ready to upload.
  • Number of slideshow images - Your first option is to select the number of images to use in your slideshow. Set this to the number of images you have ready to upload.
  • Slideshow height - You can set the height of your slideshow to whatever you like... but bear in mind that you will need to upload images that are all the same size!


Underneath this section, there is a section for each individual slide;

  • Upload image - To upload an image to your slideshow, click the "Choose file" button, and select the image on your computer. Make sure your images are 875px wide x 450px high (or the Slideshow height you have set) or they will be blurry or stretched. There's a tutorial on this page with step by step instructions on getting your slideshow images the correct size.
  • Title - If you want title text to appear as an overlay on your slide, enter the text here. You should preview it to make sure you haven't written too much text. This field accepts text only. Entering HTML here may have unpredictable results. If you don't want a caption, or have included the text you want in your slide image, you should leave this field blank.
  • Caption - If you want text to appear as an overlay on your slide, enter the text here. You should preview it to make sure you haven't written too much text. This field accepts text only. Entering HTML here may have unpredictable results. If you don't want a caption, or have included the text you want in your slide image, you should leave this field blank.
  • Button text - If you want a button to appear as an overlay on your slide underneath the title and text, enter the text you want to appear on the button here. Generally you want is to be a short call to action like "See More" or "Buy Now". If you don't want a button, you should leave this field blank.
  • Button Link - If you want your button link somewhere, enter the page address that you want to link to. You should ALWAYS enter your links as relative URL's. To get the relative URL of a page on your store, view the page in your web browser, and copy the address of the page that's directly after your domain. e.g. if your page is at "joes-widgets.spiffystores.com/pages/blue-widgets", the relative url of this page is "/pages/blue-widgets".
  • Colour - If your image is dark, you should set this to "Light". If your image is light, you should set this to "Dark". You may need to adjust your image before uploading to get it to work nicely with the overlay text and button.

When you are done editing your slideshow, or want to save it to view it in your store, scroll down an click the Save Settings button.


Slideshow image sizes

If you have enabled the sidebar menu, your slideshow will display at 875px wide on the largest device, and will scale on other devices. You will need to upload your slideshow images at a good resolution... at least 875px wide. The optimal size for your slideshow images is 875px x 450px, but you can also set whatever height you prefer. You can create slideshow images using most image editing programs, but many people find Pixlr useful.

If you have disabled the sidebar menu, your slideshow will display at 1160px wide on the largest device, and will scale on other devices. You will need to upload your slideshow images at a good resolution... at least 1160px wide. The optimal size for your slideshow images is 1160px x 450px, but you can also set whatever height you prefer. You can create slideshow images using most image editing programs, but many people find Pixlr useful.

IMPORTANT!
Images in your slideshow display at different sizes on different devices. You should test your images on different devices when you've uploaded them. Keep any text you add to your image in the centre of the image. If you don't, then some of your text may be cut off on mobile devices.

Using Pixlr to create a slideshow image

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

  1. Go to the Pixlr editor
  2. Click "Create a new image"
  3. Set the size recommended above, and click OK
  4. You now have your canvas to work within. You will need to explore the various tools and options. You can add your own images in Pixlr in the bottom right by clicking the + symbol. This adds the image as a layer that can be moved around. You need to make sure when you're doing this, that you don't stretch your images. You can do this by holding down the shift key when re-sizing.
  5. When your slide is looking gorgeous, save it by choosing "Save" at the bottom of the page.
  6. Choose JPEG for your format, and set your quality to high
  7. When you've saved the file to your computer, upload it by following the instructions above.


HELP! - My slideshow photos are blurry!!!

If your slideshow images look blurry, they were either uploaded blurry, or aren't high enough quality to be used in your slideshow. You'll need to source higher quality images.

You will need to create your slideshow images at the correct size stated above so that they're not stretched or squashed. You can do this using most image editing programs, but many people find Pixlr useful. That's why we've included instructions above on this page on how to get your slideshow images the correct size :-)

You should ensure you source good quality photos for your slideshow, as this is the first thing your customers will see when they visit your site and set the tone of their shopping experience. Spend time to get your slideshow images looking gorgeous, as cheap looking, unprofessional or ugly images will will definitely have a negative effect on your sales.

You can also email us if you need help getting your slideshow images looking gorgeous! You will need to send your images to us attached to your email if you want any help with this.



« Updating your home page

« The Bendigo theme guide