Difference between revisions of "Simple Theme - updating your home page"

From Spiffy Stores Knowledge Base

Line 68: Line 68:
 
With version 1.1 of the theme, we have added an option to display a video instead of your slideshow.  When enabled, the slideshow uses the settings for Slide 1 only, and other slides are disabled.  
 
With version 1.1 of the theme, we have added an option to display a video instead of your slideshow.  When enabled, the slideshow uses the settings for Slide 1 only, and other slides are disabled.  
  
The easiest way to get video to display nicely is to use Vimeo, by uploading your video to Vimeo, and entering the ID of your video.
+
The easiest way to get video to display nicely is to use Vimeo, by uploading your video to Vimeo, and entering the ID of your video.  You will need a high quality video, otherwise it won't look great on larger screens.
  
 
<span style="color: #ff6b00;">USING VIDEO FROM VIMEO</span><br>
 
<span style="color: #ff6b00;">USING VIDEO FROM VIMEO</span><br>
 +
Using Vimeo is the best option, as you can hide all branding and controls with the options provided in your '''Theme Editor'''.
 
# Upload your video to [https://vimeo.com Vimeo]
 
# Upload your video to [https://vimeo.com Vimeo]
 
# When viewing your video on Vimeo, copy the ID of the video from the URL.  The URL usually contains a number.  This is the ID of your video<br>e.g. <pre>https://vimeo.com/12345678</pre>, so from this example the ID would be <pre>12345678</pre>
 
# When viewing your video on Vimeo, copy the ID of the video from the URL.  The URL usually contains a number.  This is the ID of your video<br>e.g. <pre>https://vimeo.com/12345678</pre>, so from this example the ID would be <pre>12345678</pre>

Revision as of 13:46, 13 August 2020

Your home page consists of 6 major sections... your slideshow, welcome text, featured products, featured collections, latest articles from your blog, and finally an Instagram feed. Each section can be enabled/disabled or edited the Theme Editor section of your store's admin area.

If you would like to add extra sections, or have the design customised so it looks exactly the way you want, please email us about our custom design service. As we've built all of our themes, we can usually add extra features and completely change the look for much less than you'd expect to pay a designer.

Below you will find detailed information on each of the sections.


There's a lot to each section, which is why some are disabled when you first apply the theme. These sections can all be enabled in the Theme Editor section of your store's admin area.


Editing your slideshow

The Simple 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, size, transition, text colours, and button colours. 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 admin area. Scroll down on this page until you find the section called Home page - Slideshow. Make sure you delete the captions and links that are currently there before you start to upload your own images.

  • Display a slideshow - Enables or disables the slideshow.
  • Enable widescreen mode - The slideshow can be either the fill width of the browser window, or can be restricted to the width of the site. In all cases, it should scale to fit nicely on whichever device your store is being viewed on.
  • Enable parallax mode - The slideshow can be displayed with a rather cool Parallax effect. If in doubt, enable this option and preview your store. The parallax effect is only displayed when widescreen mode is enabled..
  • Number of slideshow images - Set this to the number of images you have ready to upload.
  • Slideshow transition - Options are fade or slide. This is pretty self explanatory.
  • Slideshow speed - Options are slow, medium or fast. We suggest just keeping this on medium.
  • 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!


Settings 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 high enough quality, and meet the size requirements listed below, or they will not look great. 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 caption, enter the text you want to appear on the button here. Generally you want this 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. If you want your entire slide to be a link, leave this field blank, and add a link in the Button Link field below.
  • Slide Link - If you want your 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".
  • Display text colour - If your image is dark, you should set this to light colour. If your image is light, you should set this to a dark colour. You may need to adjust your image before uploading to get it to work nicely with the overlay text and button.
  • Button text colour - The background of your button will be the same as the Display text colour above. Choose a colour for the text inside the button that will show up nicely.
  • Button background colour - The text in your button will be the Button text colour above. Choose a colour for the text inside the button that will show up nicely.

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.

Using video in your slideshow

With version 1.1 of the theme, we have added an option to display a video instead of your slideshow. When enabled, the slideshow uses the settings for Slide 1 only, and other slides are disabled.

The easiest way to get video to display nicely is to use Vimeo, by uploading your video to Vimeo, and entering the ID of your video. You will need a high quality video, otherwise it won't look great on larger screens.

USING VIDEO FROM VIMEO
Using Vimeo is the best option, as you can hide all branding and controls with the options provided in your Theme Editor.

  1. Upload your video to Vimeo
  2. When viewing your video on Vimeo, copy the ID of the video from the URL. The URL usually contains a number. This is the ID of your video
    e.g.
    https://vimeo.com/12345678
    , so from this example the ID would be
    12345678
  3. In your theme editor under Home Page - Slideshow, tick Enable Banner Video?
  4. For Video Source, Choose Vimeo
  5. In the YouTube or Vimeo Video ID field, paste the video ID
  6. Scroll down and click Save Settings. You should now be able to preview the video in your slideshow area.


USING VIDEO FROM YOUTUBE

  1. Upload your video to YouTube
  2. When viewing your video on YouTube, copy the ID of the video from the URL. The URL usually contains a string that is a combination of letters and numbers. This is the ID of your video e.g.
    https://www.youtube.com/watch?v=bTqVqk7FSmY
    , so from this example the ID would be
    bTqVqk7FSmY
  3. In your theme editor under Home Page - Slideshow, tick Enable Banner Video?
  4. For Video Source, Choose YouTube
  5. In the YouTube or Vimeo Video ID field, paste the video ID
  6. Scroll down and click Save Settings. You should now be able to preview the video in your slideshow area.


USING HTML5 VIDEO
Vimeo and YouTube create different versions of your video for viewing on different devices. If you want to host your own video, you will need to create an MP4 and a WEBM version of your video using your own conversion software.

  1. Upload your videos to a website. You can upload to any website that is accessible using SSL. You can also upload your video in the Design & Assets -> Uploaded Files section of your store's admin, but there is a limit of 8mb on uploaded files.
  2. If you upload your video into your Spiffy Store, they can be accessed at the URL
    /files/your-video-name.mp4

Adding to your slideshow

  1. In your theme editor under Home Page - Slideshow, tick Enable Banner Video?
  2. For Video Source, Choose HTML5
  3. Enter the URL of your MP4 video file in the HTML5 MP4 File URL
  4. Enter the URL of your WEBM video file in the HTML5 WEBM File URL
  5. Scroll down and click Save Settings. You should now be able to preview the video in your slideshow area.


Slideshow image sizes

The height of the images you upload should match the height that has been set in the Slideshow height (px) field unless Parallax is enabled.

If Widescreen mode is enabled, your slideshow will display at the full width of the device it is viewed on. You will need to upload your slideshow images at a good resolution... at least 2048px wide, as the images are stretched out on very large screens.

If Parallax is enabled, the optimal size for your slideshow images is 2048px x 2048px.

If Widescreen mode is disabled, you should upload images that are 1200px wide x 550px high (or the height of the slideshow you have set).

You can upload images that are any size, but they won't look as good as if you follow our size guidelines. You can create slideshow images using most image editing programs, but many people find Pixlr useful. If they are blurry, they aren't high enough quality.

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

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.



Displaying featured collections on your home page

Select your featured collections in the Design & assets -> Theme editor section of your store's admin area. Scroll down on this page until you find the section called Home Page - Sections.

You will find the following options in the Featured collections section...

  • Display featured Collections- The first ten collections will be displayed in the order that they were created
  • Menu Called "Featured Collections" - Control exactly which collections are displayed by creating a menu called "Featured Collections", and adding links to the collections you want to display.
  • Hide this section - Hides the section altogether

Select your option, scroll down and click the Save Settings button.

Uploading a collection image to display instead of a product image

You can also upload images to display for your collection, rather than the first products in your collection.

  1. Go to the "Collections" section of your Toolbox
  2. Click on the collection name that you want to upload an image for
  3. Upload your image/s in the "Collection Images" section. It's better if you upload 2 images, as the second image is displayed when you mouse over the image.



Displaying featured products on your home page

Select your featured products in the Design & assets -> Theme editor section of your store's admin area. Scroll down on this page until you find the section called Home Page - Sections.

You will find the following options...

  • Collection to display - Your options are either "None", or you can select a collection that you have added in the Collections section of your store's admin.
  • Collection title - The title that appears above your featured products. If you don't want a title there, leave this field blank.
  • Number of items to display per row - How many products per row you want to show. We have set the options to be between 3 per row and 6. When set to 3, the images are quite large. When set to 6, they are quite small.
  • Maximum number of products to display - You can limit the number of products shown. By default, this is set to 8 products, but you can alter it to show less or more.

Select your options, scroll down and click the Save Settings button.



Displaying blog articles on your home page

The Simple theme allows you to display your three most recent blog posts on your home page. If you don't have 3 blog posts, or you have blog posts that don't have images in them, you should not enable this feature.

Select the blog you'd like to display in the Design & assets -> Theme editor section of your store's admin area. This can be found in the Home Page - Sections section.

You will find only two options...

  • Blog to display? - Select None to hide this section, or select the blog you'd like to display, scroll down and click the Save Settings button.

    NOTE: If your blog doesn't have 3 blog posts, or you have blog posts that don't have images in them, you should disable this feature by selecting None.

  • Blog title - The title that appears above the blog section. Leave blank if you don't want to display a title.




Displaying an Instagram feed on your home page

Enter your Instagram username in the Design & assets -> Theme editor section of your store's admin area. This can be found in the Home Page - Sections section.

  1. Go to the Design & Assets -> Theme editor section, and scroll down to the Home Page - Sections section
  2. Enter your Instagram username. It's important to only enter your Instagram username without any special characters. Please do not include the @ symbol with your username or the URL to your Instagram profile.
  3. Number of Images sets the number of images to show. By default it's 12. It should be 2 or 3 times whatever number you set in the Number of Images to display per row field.
  4. Number of Images to display per row is how you can make your Instagram images bigger or smaller. The higher the number, the smaller the images are, and the more that are displayed in the row.





« The Simple Theme Guide