Minimal theme: Creating images for your slideshow - Revision history

Shawn at 00:23, 29 November 2013

2013-11-29T00:23:17Z

Shawn at 00:22, 29 November 2013

2013-11-29T00:22:39Z

Shawn: Created page with " Image:Vintage-theme-slideshow.jpg|Home page slideshow The Minimal theme includes a responsive slideshow on th..."

2013-11-29T00:20:28Z

Created page with "<gallery heights="200px" widths="200px" class="right"> Image:Vintage-theme-slideshow.jpg|Home page slideshow </gallery> The Minimal theme includes a responsive slideshow on th..."

New page

<gallery heights="200px" widths="200px" class="right">
Image:Vintage-theme-slideshow.jpg|Home page slideshow
</gallery>
The Minimal 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 a choice of 3 different transitions. You can also add links to other pages, and a caption to each slide as well. 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, delete images, enter captions and links in the "Home page slideshow" section.

You will need to upload your slideshow images at the correct size of '''960px x 400px''' so that they're not stretched or squashed. You can do this using most image editing programs, but many people find [http://pixlr.com/editor/ Pixlr] useful.

== Using [http://pixlr.com/editor/ Pixlr] to create a slideshow image ==
<gallery heights="200px" widths="200px" class="right">
Image:Vintage-theme-pixlr.png|Pixlr editor
</gallery>

#Go to the [http://pixlr.com/editor/ Pixlr] editor
#Click "Create a new image"
#Set the width to 960 and the height to 400, and click OK
#You now have your canvas to work within. You will need to explore the various tools and options. You can open your own images in Pixlr using "File -> Open image" in the Pixlr menu. You can then copy and paste your images into your slide.
#When your slide is looking gorgeous, save it by choosing "File -> Save" from the Pixlr top menu.
#Choose JPEG for your format, and set your quality to 80
#When you've saved the file to your computer, upload it by following the instructions below.

== Updating your slideshow ==
<gallery heights="300px" widths="200px" class="right">
Image:Vintage-theme-slideshow.png|Home page slideshow
</gallery>
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.

* '''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 transition''' - by default we've chosen the fade transition, as it's not too distracting. If you're after somehting a little more dynamic, choose one of the slide transitions.

* '''Slideshow speed''' - If you have only 2 images, set this to slow. If you have 3 or 4 images, set this to medium. If you have 5 images, set this to fast. If you're using captions on your images, you should view your store and make sure the slideshow isn't too fast for your customers to read the captions!

<br>

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 960px wide x 400px high or they will be stretched. There's a tutorial on this page with step by step instructions on getting your slideshow images the correct size.

* '''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.

* '''Link''' - If you want to slide to 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".<br><br>If you don't want your slide to link somewhere, leave this field blank.

== HELP! - My slideshow photos are stretched!!! ==
<gallery heights="250px" widths="200px" class="right">
Image:Vintage-theme-slideshow-stretched.jpg|Ugly or stretched images don't look too great! Make sure you source good quality photos for your slideshow, and upload them at the correct size!</gallery>If your slideshow images look stretched, they were either uploaded stretched, or aren't the size that's required by the theme.

You will need to create your slideshow images at the correct size of '''960px x 400px''' so that they're not stretched or squashed. You can do this using most image editing programs, but many people find [http://pixlr.com/editor/ 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 also 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!

=== Related pages ===

* [[The Vintage theme guide]]
* [[Vintage theme features|Vintage theme features]]
* [[Vintage theme FAQ|Frequently asked questions]]
* [[Vintage theme - uploading your logo|Uploading your logo]]
* [[Vintage theme - selecting & modifying your colour scheme|Selecting & modifying your colour scheme]]
* [[Vintage theme - selecting your title font|Selecting your title font]]
* [[Vintage theme - editing your menus|Editing your store's menus]]
* [[Vintage theme - updating your home page|Updating your home page]]
* [[Vintage theme - editing your slideshow|Editing your slideshow]]
* [[Vintage theme - Adding featured collections to your home page|Adding featured collections to your home page]]
* [[Vintage theme - Adding featured collections on other pages|Adding featured collections on other pages]]
* [[Vintage theme - connecting your email subscriber form|Connecting your email subscriber form]]
* [[Vintage theme - enabling Facebook comments|Enabling Facebook comments]]
* [[Vintage theme - connecting to your social media accounts|Connecting to your social media accounts (Facebook, Twitter, Google + etc.)]]
* [[Vintage theme - Displaying icons for your accepted payment methods|Displaying icons for your accepted payment methods]]

@@ Line 1: / Line 1: @@
-<gallery heights="200px" widths="200px" class="right">
+[[Image:Minimal-recolour-captures 03.gif]]
-Image:Vintage-theme-slideshow.jpg|Home page slideshow
 The Minimal theme includes a simple slideshow on the home page that can have up to 5 images, with a choice of 3 different transitions.

@@ Line 2: / Line 2: @@
 Image:Vintage-theme-slideshow.jpg|Home page slideshow
 </gallery>
-The Minimal theme includes a responsive slideshow on the home page that resizes based on the size of the device your customer is using.
+The Minimal theme includes a simple slideshow on the home page that can have up to 5 images, with a choice of 3 different transitions.
 Edit your slideshow in the "Design &amp; assets -&gt; theme editor" section of your store's Toolbox. &nbsp;There you can upload new slideshow images, delete images, enter captions and links in the "Home page slideshow" section.
-You will need to upload your slideshow images at the correct size of '''960px x 400px''' so that they're not stretched or squashed.  You can do this using most image editing programs, but many people find [http://pixlr.com/editor/ Pixlr] useful.
+You will need to upload your slideshow images at the correct size of '''960px x 300px''' so that they're not stretched or squashed.  You can do this using most image editing programs, but many people find [http://pixlr.com/editor/ Pixlr] useful.
 == Using [http://pixlr.com/editor/ Pixlr] to create a slideshow image ==
@@ Line 17: / Line 15: @@
 #Go to the [http://pixlr.com/editor/ Pixlr] editor
 #Click "Create a new image"
-#Set the width to 960 and the height to 400, and click OK
+#Set the width to 960 and the height to 300, and click OK
 #You now have your canvas to work within.  You will need to explore the various tools and options. You can open your own images in Pixlr using "File -> Open image" in the Pixlr menu. You can then copy and paste your images into your slide.
 #When your slide is looking gorgeous, save it by choosing "File -> Save" from the Pixlr top menu.
@@ Line 25: / Line 23: @@
 == 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.
 * '''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 transition''' - by default we've chosen the fade transition, as it's not too distracting.  If you're after somehting a little more dynamic, choose one of the slide transitions.
+* '''Slideshow transition''' - by default we've chosen the fade transition, as it's not too distracting.  If you're after something a little more dynamic, choose one of the slide transitions.
 * '''Slideshow speed''' - If you have only 2 images, set this to slow.  If you have 3 or 4 images, set this to medium.  If you have 5 images, set this to fast.  If you're using captions on your images, you should view your store and make sure the slideshow isn't too fast for your customers to read the captions!
@@ Line 40: / Line 35: @@
 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 960px wide x 400px high or they will be stretched.  There's a tutorial on this page with step by step instructions on getting your slideshow images the correct size.
+* '''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 960px wide x 300px high or they will be stretched.  There's a tutorial on this page with step by step instructions on getting your slideshow images the correct size.
 == HELP! - My slideshow photos are stretched!!! ==
@@ Line 50: / Line 41: @@
 Image:Vintage-theme-slideshow-stretched.jpg|Ugly or stretched images don't look too great! Make sure you source good quality photos for your slideshow, and upload them at the correct size!</gallery>If your slideshow images look stretched, they were either uploaded stretched, or aren't the size that's required by the theme.
-You will need to create your slideshow images at the correct size of '''960px x 400px''' so that they're not stretched or squashed.  You can do this using most image editing programs, but many people find [http://pixlr.com/editor/ Pixlr] useful.  That's why we've included instructions above on this page on how to get your slideshow images the correct size :-)
+You will need to create your slideshow images at the correct size of '''960px x 300px''' so that they're not stretched or squashed.  You can do this using most image editing programs, but many people find [http://pixlr.com/editor/ 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 also 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!