|
Learn how to add a Home Page Slider (Carousel) to your store.
You can add up to 6 images to the slider which displays automatically on your store's home page. The Home Page Slider module can then be used to advertise different aspects of your store like sale products, special deals, or anything you'd like display.
This article contains the following sections. Click on a link to view the specific topic.
To use the Home Page Carousel, please follow these steps.
Additional Information
Before proceeding with this tutorial, it would be a good idea to first have your slider images ready to go. Here are a couple of suggestions:
Remember that the carousel images will display as transitional slides on your home page.
- Therefore, when you create your slider pictures, the images should all ideally be the same height and width to preserve the transitional effect. Otherwise, images of varying dimensions may produce undesirable effects.
- Our carousel tries to preserve the original aspect ratio of the images. Because of this, we recommend images that are shaped more like horizontal rectangles instead of vertical ones. As it tries to keep the same shape, images that are more narrow may be upscaled in an unflattering manner.
- Also, when creating your images, be sure to use opaque images rather than transparencies as transparent images will not transition correctly.
- When naming your image files, make sure to not include any spaces in the filenames. Using dashes or underscores is recommended instead. Images with spaces in the filename can potentially create display issues.
After creating your images, you can then upload them to your store either using the File Manager or via FTP. (For FTP, we suggest uploading the images to your "web/assets/images" folder.)
Once the images are prepared and uploaded, you can proceed with the rest of this tutorial.
Configuring the Module
Back to top
First, we'll need to enable the module. It is typically enabled by default, but if you have it disabled on your site, here's how to turn it on again.
- Log into your Shift4Shop Online Store Manager
- Using the left hand navigation menu, go to Modules
- Then, use the search bar at the top and search for "Homepage Carousel" to view the Module options
- Click on "Settings" to begin adding and specifying your slider images
Place a check in the "Yes" checkbox beneath Enable Carousel and click "Save" at the top right to enable the feature.
To add your first image:
- Click on the "Browse" button next to the "1st Image" field.
This will take you to the File Manager where you can navigate and choose an already uploaded file (you can also upload new image files if necessary).
- Once you have navigated to your file, click on its "Select" button.
Your first slider image is now specified. Repeat for each additional image as needed. Remember you have up to 6 that you can add.
Additional Information
Alt-Tags
Beginning with version 12.0.12, you will have the ability to add ALT-Tags to the slider images. Simply enter your desired tag in the "Alt-Tag" field for each image.
Linking a Slider Image to a URL
By default, each slider image will link to your home page. Meaning that if/when someone clicks on the image, they are simply taken back to your store's home page.
However, while you add images to the slider, you also have the option to link the image to a specific URL. For example, one slider image may refer to your Social Media page and you can link the viewer to that page. Another option is to have the slider image pointing to a specific on sale item. To do this, just specify the URL in the "Links to URL" field for the applicable slider image.
- For internal URLs, you will not need the domain name. Just the path to the page - i.e. myaccount.asp instead of www.domain.com/myaccount.asp
- For external URLs, you will need to specify the full domain name. i.e. www.facebook.com/my-store-fan-page
Using Unsplash Images
Beginning with version 12.0.10, Shift4Shop merchants can access free stock images from Unsplash from the Homepage Carousel
When you click on the browse button for the slider image, your image selector will slide out from the right hand side of the screen. At the top of the selector you will see two links:
Select "Free Photos" to search Unsplash's database of free stock photos.
- Enter a search term in the search bar
- Then click on the "Search" button
The system will display a collection of free images that match your search term. At the bottom of the list you will see a button labeled "Load more" if you'd like to see even more collections that match your search term.
- Simply click on your desired image to have it added to your slider.
- Repeat for any other slider images you'd like to update
- Click "Save" at the top right of the page once you're done.
Note
Images will be downloaded into a folder called "Unsplash" that can now be found in your store's built-in File Manager. Furthermore, the system will download a large and small version of the image. For the Homepage Carousel, the large image will automatically be inserted into the slider image path.
At the top of the Home Page Carousel settings, You will have the following options:
- Delay
Set the delay (in miliseconds) between image transitions. If no time is specified, the store will use the default setting of 1000 miliseconds which is one second per slide.
- Choose Transitions
This will allow you to choose the visual effect that is used when transitioning between slider images. Simply select one and click "Save Changes" to set it.
Here's a brief description of each transition:
- fade
The outgoing image fades out while the incoming image fades in. (This is the default)
- slide
The images transition in actual slides from one direction of the screen to the other
Important
The width of the home page carousel will be determined by the template being used. Because of this, there is no recommended size for every store for images. If you wish to adjust this, it will require modifying code which does not fall under the scope of the Shift4Shop Support Team. If editing HTML is beyond your capabilities, we recommend looking into our Webmaster services. Please contact our Support Team for pricing and more information.
Your slider is now active on your live store!
|