In this article you will learn how to replace, add, hide, delete, link and rearrange slide show images (also known as banners). Slide shows can be useful in displaying lifestyle, vendor and/or promotional banner graphics. Slide shows are most commonly used on the homepage, but can be used on many other types of pages as well. To get started login to your site's Admin.


If you're looking to learn more about general imagery usage and editing, please review this article: Add/Edit Images and Using Thinkspace Stock Imagery

In This Article:

Edit Slideshow Options

  1. Navigate to Content > Slide Shows
  2. Click on the slide show you wish to edit (most likely Home for your main homepage images)
  3. Under Change Slide Show you will see some options for controlling the entire slide show (as opposed to individual slides). Many of these will likely not be used so in most cases you will only be using Status, Name and Type. The other options are optional and would only be used in particular cases.
    • You can set the Status of a slide show by marking the ENTIRE slide show as Active or Inactive (active shows on the site, inactive hides it from the site)
    • You can Name your slide show - if you are using multiples then we recommend being as specific as possible regarding what images are within that slide show and possibly where it will be used (ie, Home for the main homepage banner and maybe Custom Designs for one that showcases your custom design images).
    • You can choose by Type of banner you want it to be. Banner Slider is an advanced set of slides or banners with options for mobile and captions. Typically used for a home page banner or featured area on the page. Image Carousel  is a simple set of slides, good for a quick carousel or gallery of images
    • You can set a Start Date and End Date but keep in mind that that will effect the ENTIRE slide show, not just one individual slide. So for instance, if you made a separate slide show for just your holiday specials and you want this one slide show to take over for just the holiday time period then you can set a start date and end date for when you want this slideshow to automatically show on the site for the holidays and then when you want it to be automatically taken down when the holidays are over. Make sure that the slide show is set to Active otherwise the start and end times will not take effect for inactive slide shows. Note: All days and times on the site are set in Pacific time. 
    • If you decide to use Start and End Dates then you will need to choose a Fallback Slide Show. That fallback slide show is the slide show that will take over when this slide show is automatically disabled at the specified end date. So for instance, if you created a slide show called "Holiday Specials" and set it to time out on January 2nd, then you would want to set the Fallback Slide Show to the original Home slide show so that your typical (non-holiday) images come back seamlessly.

Add/Replace Slides

  • To Replace an existing image, scroll to the slide you want to replace and click on the Name to expand for options. (in the example below you would click on Slide: Sale to edit the Sale slide)
    To Add a new image, scroll to the first Add New Slide underneath all your other existing slide show images and click to expand for options.
  • Once you click on a slide to expand for options (whether you're replacing an image or adding one), you will see 5 sections of options to edit. There are detailed explanations below for each section.


VERY IMPORTANT:

In a single slide show, each image should be the exact same dimensions as one another. The reason this is so important is because if you have some images that are taller than others, the shorter images will show a ton of white space below them in order to accommodate for your tallest image elsewhere in the slide show. 

You can learn what size your images need to be before uploading by using the following instructions:

  • Right click on an image that you know is the right size (images you got from Thinkspace are typically your best bet for what the image size should be)
  • Select Open image in new tab
  • Hover your mouse over the tab that opens - in parenthesis you will see the image dimensions (below image is 500 x 670 pixels)
  • We also recommend that you compress the images for website use and you can use this link to help you: https://compressor.io/compress


Slide Details

  • From the Status dropdown select Active or Inactive for this one individual slide (active shows on the site, inactive hides it from the site). 
  • In the Order field, place a number to choose what order you'd like to this slide to sit in compared to your other slides. For example, the first slide can be set to Order 1 and the second slide can be set to Order 2. (Note: Lower numbers show up higher in the list, you can also use 0 and negative numbers).
  • In the Name field, place a name for the slide to help you find it more easily in the future.
  • In the Page Link field, copy and paste the link associated with the page that you want the customer to be taken to when they click on the slide. If the link is on your site then only place the piece of the link that comes AFTER the .com so in the screenshot below you see /catalog/engagement-ring/. If the link is off of your site then you'll want to use the entire link starting with the http section. This link section will make the ENTIRE slide clickable, alternatively you can use a link in the caption section (instructions below) and make only one particular button clickable as opposed to the entire slide.
  • If your Page Link goes to a page on your site then you can leave the Page Link Target set to Opens in Same Window. If your Page Link goes to a page off of your site then change the Page Link Target to Opens in New Window.

Desktop Slides

Desktop slides are used for larger screen sizes like laptops, desktops and large external monitors. We usually recommend a desktop image size of 1500 x 500 pixels. 

  • There are 2 options for Uploading images to your slide show. You can either Upload an Image from your Computer or you can Select an Image from you Media Manager on your site. Note: Please do not upload your image to both spots - this will cause the image to show blank on the site.
  • If you Upload an Image from your Computer, click Choose File and then browse your computer files to find the image you want to upload. You can also drag and drop the image into the "no file selected" field.
  • If you Select an Image from you Media Manager, click the Blue Folder icon to open your Media Manager to browse images you uploaded directly to the site and double-click the image you want to use.
  • You can also add a Caption to your image which will sit over the top of the image. If you use a Caption, please make sure to also include a link because the Caption option will override the Page Link you established in the Details section.
  • You can add a link to the Caption by using the following instructions: 
    • Highlight the text you want linked
    • Click on the link icon in the toolbar
    • On the Link Info page, place a link in the URL field
    • To make the link look like a button, click on Advanced and place btn btn-primary into the Stylesheet Classes section. Click OK to save the link/button options.
  • The resulting Caption and button will look like the image below on the slide show (your primary website color will be used in place of the blue on the button below). Note: You can choose the alignment of the caption text (Left, Center or Right) using the Design section noted in the instructions below.

Mobile Slides

Mobile slides are used for smaller screen sizes like tablets, phones and other mobile devices. We recommend using a mobile image as well as a desktop image because the desktop images look very small on mobile devices. We usually recommend a mobile image size of 480 x 540 pixels. 

  • There are 2 options for Uploading images to your slide show. You can either Upload an Image from your Computer or you can Select an Image from you Media Manager on your site. Note: Please do not upload your image to both spots - this will cause the image to show blank on the site.
  • If you Upload an Image from your Computer, click Choose File and then browse your computer files to find the image you want to upload. You can also drag and drop the image into the "no file selected" field.
  • If you Select an Image from you Media Manager, click the Blue Folder icon to open your Media Manager to browse images you uploaded directly to the site and double-click the image you want to use.
  • You can also add a Caption to your image which will sit over the top of the image. If you use a Caption, please make sure to also include a link because the Caption option will override the Page Link you established in the Details section.
  • You can add a link to the Caption by using the following instructions: 
    • Highlight the text you want linked
    • Click on the link icon in the toolbar
    • On the Link Info page, place a link in the URL field
    • To make the link look like a button, click on Advanced and place btn btn-primary into the Stylesheet Classes section. Click OK to save the link/button options.
  • The resulting Caption and button will look like the image below on the slide show (your primary website color will be used in place of the blue on the button below). Note: You are not able to choose the alignment of the caption text - it will always sit Center so we recommend either only using a button as opposed to a full caption or just leaving the Mobile Caption section blank if the image is self-explanatory enough for the customer to know where they will end up when the click.

Slide Designs

  • You can choose to enable an overlay which will show a somewhat transparent color over the top of your Slide image. An overlay can be useful if your slide image has a  lightly colored background and the caption text is in a light  color as well and you need the caption to show a little more clearly over the top of the image.
  • Check the box next to Enable Overlay to get a transparent color over the top of your Desktop image.
  • Check the box next to Enable Overlay Mobile to get a transparent color over the top of your Mobile image
  • You can choose the Color of the Overlay by using the color picker that appears when you click the arrow next to swatch in the Overlay Color section.
  • Choose the Alignment of the Caption on your Desktop image selecting Left, Center or Right in the Caption Alignment dropdown menu.
  • An example of a Desktop image using a slight transparent brown Overlay is below. In this case, it helps the customers see the white text better over what would have been a light yellow-ish background.

Advanced Slide Options

In the Advanced section of the slide show options you'll find a few extra pieces you can use but are often left blank. Please feel free to leave these sections alone unless you find that they are necessary for your specific slide use.

  • Alternative Image Text is used in the coding of the site so that if there was ever an issue with loading up an image, the site would still know what is supposed to be displayed. For instance, you may write something like "Bridal Couple" or "Engagement Ring" as an aid to show what should be there if for any reason the image doesn't load.
  • Video Embed Code is where you can insert a link to a YouTube video in order to incorporate a video into your slideshow of images. Videos added to this section will not auto-play. Note: You will also need to make sure you are using mobile sized images in your slideshow in order for the video to adjust to that same height. If only desktop images are use then the video will not adjust and will be cut off in mobile. 
  • You can set a Start Date and End Date for individual slides which will make them automatically show up on the site at a particular start day and time and then automatically come down on the particular end day at time. So for instance, if you have a particular slide made just for an event you're holding in store and you only want it to show for a few days before the event and then come down the day after the event, then you can set particular start and end dates for this slide so that you don't have to come back and manually edit it. Make sure that the slide is set to Active otherwise the start and end times will not take effect for inactive slides. Note: All days and times on the site are set in Pacific time. 

Hide Slides

  • To Hide an existing slide that you may want to use again in the future, scroll to the slide you want to hide and click on the Name to expand for options. 
  • From the Status dropdown select Inactive to hide it from the site.
  • Then scroll to the bottom or top of the page of Slides and click Save.

Delete Slides

  • To Delete an existing slide that you don't want to use again in the future, scroll to the slide you want to delete and click on the Name to expand for options. 
  • To the right of the Name of the Slide, check the Delete box to hide it from the site.
  • Then scroll to the bottom or top of the page of Slides and click Save.

To Add/Replace Slides Using Thinkspace Stock Imagery

  • To Replace an existing image, scroll to the slide you want to replace and click on the Name to expand for options. (in the example below you would click on Slide: Sale to edit the Sale slide)
    To Add a new image, scroll to the first Add New Slide underneath all your other existing slide show images and click to expand for options.
  • Click the folder icon next to Desktop Image URL (or Mobile Image URL).
  • In the popup window you'll see your Media Manager. Navigate to Library and then double-click the folder called Stock.
  • Next you'll see various folders for categories of images. If you double click any of those folders you'll see each image cropped for several of size variations. (Typically, desktop images are 1500 x 500 and mobile images are 480 x 540 - note that the 1500 x 500 size may not be right for your website so please note what your specific banner size is first before using this size).
  • Double click the image you want to use and the URL linking to the media files will fill in on its own.
  • Then scroll to the bottom or top of the page of Slides and click Save.