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 - similar to our small animation below.
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. To do this:
- Log into your 3dcartOnline 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 "Change 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.
Before enabling the Home Page Slider Carousel, you can click on the "Click here to Preview" link which will show you the carousel on your home page.
As long as you're logged into 3dcart the Online Store Manager, the preview will function only for you so you can see the effect before enabling it for all viewers.
This can be useful if you'd like to add imagesto the module (see next section) before fully enabling it.
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 see a drop down menu labeled "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
At the very top of the page, you will see a button labeled "Advanced Settings"
This is where you can fine tune your slider's timing and sizing configurations.
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.
The width (in pixels) of the slider's image area.
The height (in pixels) of the slider's image area.
The height and width settings will not necessarily affect the display of the image if you are using one of the HTML5 themes, due to the fact that the HTML5 coding takes care of the sizing for you.
If you don't want to specify a width, be sure to leave the field blank instead of a zero. Inputting a zero will have an undesired effect on the slider.
Once you're satisfied with the way your slider appears in the home page preview, you can enable the module and save your changes.
Your slider is now active on your live store!