How do I Use the Home Page Carousel Feature?

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.

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.

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

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.

1. Log into your Shift4Shop Online Store Manager.

2. Using the left navigation menu, go to Modules.

3. Then, use the search bar at the top and search for "Homepage Carousel" to view the Module options.

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

Adding Images

To add your first image:

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

2. 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. 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 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 point 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 side of the screen. At the top of the selector, you will see two links:

• File Manager

• Free Photos

Select Free Photos to search Unsplash's database of free stock photos.

1. Enter a search term in the search bar.

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

3. Click on your desired image to have it added to your slider.

4. Repeat for any other slider images you'd like to update.

5. Click Save at the top right of the page once you're done.

Settings

At the top of the Home Page Carousel settings, You will have the following options:

• Delay
  Set the delay (in milliseconds) between image transitions. If no time is specified, the store will use the default setting of 1000 milliseconds 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. 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

Your slider is now active on your live store!