Banner Slider

Go to the Design → Banner Manager

Editing Sliders in AbanteCart Themes

Slider management can vary significantly between different AbanteCart themes. Some themes might handle sliders as simple HTML banners within layout blocks (Banner blocks with added Text Banners or simple HTML blocks), while others might use dedicated slider extensions.

Editing the Default (Bootstrap 5) Theme Slider:

The default AbanteCart theme (based on Bootstrap 5) manages its homepage slider within the Main Page Carousel block. Crucially, when editing the slider's HTML, do not use the visual editor. Edit the HTML source code directly to prevent unexpected formatting changes or code corruption.

Editing Instructions:

Navigate to Layouts: In your AbanteCart admin panel, go to Design > Layouts.
Select Home Page: Choose the "Home" page layout.
Locate the Carousel Block: Find the block named "Main Page Carousel."
Edit the Block: Click the "Edit" button for this block.
edit block HTML

General Slider Editing Notes for Other Themes:

HTML Banners: If the theme uses HTML banners for sliders, you'll typically find these within a layout block on the homepage. Edit the HTML directly within the block.
Slider Extensions: If the theme utilizes a dedicated slider extension, there will usually be a separate section in the admin panel for managing the slider's content and settings. Consult the theme's documentation for specific instructions.

If you make a mistake with the HTML code, you can easily revert your changes using AbanteCart's Content Vault feature. Simply click on the 'View Field History' button and select the previous version.

Novator theme sliders

The Novator theme offers two distinct slider areas: the main homepage slider and the category top sliders. Here's how to edit each:

Editing the Main Homepage Slider:

Novator Home page slider

Navigate to Layouts: In your AbanteCart admin panel, go to Design > Layouts.
Select Home Page: Choose the "Home" page layout.
Locate the Carousel Block: Find the block named "Novator Main Page Carousel."
Edit the Block: Click the "Edit" button for this block.
Edit HTML Directly: When editing the slider's HTML code, avoid using the Visual editor. Directly edit the HTML source code to prevent unexpected formatting issues.

Editing the Novator Category Top Slider:

Novator category carousel

The Novator category top slider dynamically displays images associated with a category, excluding the first image. This means the first image uploaded to a category acts as the category thumbnail/image, and subsequent images become part of the slider.

Add Additional Images to Category: In your admin panel, navigate to the category you want to edit and add the desired images.
Edit Image Metadata: Open the Resource Library and locate the images you just added to the category. Edit each image and add a title and description.
- Image Title: The image title (not the filename) will be used as the category slider title.
- Image Description: The description can be used to add additional HTML, such as a "Buy Now" button with a link. For example:
<button class="btn btn-dark rounded-pill">Buy Now</button>
Recommended Image Size: While sizes can vary, the demo uses images around 600x400 pixels, which is a good starting point.

Example in Demo: Refer to the "Apparel & accessories" category in the AbanteCart demo to see a working example of this category slider setup.