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.
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.
- Also, when creating your images, be sure to use opaque images rather than transparencies as transparent images will not transition correctly.
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.
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
At the top of the Home Page Carousel settings, You will have the following options:
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:
The outgoing image fades out while the incoming image fades in. (This is the default)
The images transition in actual slides from one direction of the screen to the other
Your slider is now active on your live store!