Create a new slider - Creative Slider

This guide will walk you through creating your first slider from scratch. We will build a simple slide with a background image and a text layer to get you familiar with the basic workflow of the Creative Slider editor.

Note: You can also create sliders by importing from our Template Store, but this guide focuses on building a new slider from a blank canvas.

Step 1: Create a New Slider

From your PrestaShop admin, navigate to the Creative Slider dashboard.
Click the Add New Slider button.
Give your slider a Name (e.g., "My First Slider").
Click Add Slider. You will be taken to the Slider Settings page for your new project.

Adding a new slider.

Step 2: Enter the Slide Editor

You are now on the Slider Settings page, which contains options that affect the entire slider (like its size and layout). For this tutorial, we will leave these as default. To begin designing, click the main Slides tab at the top of the page.

The visual editor is organized into several key areas. For a quick start, follow this guide. For an in-depth explanation of every setting, refer to the linked articles.

Slide Options: At the top, this panel is for managing your slides. Here you can add new slides, duplicate them, and configure the background and transitions for the current slide.
Preview: The large central area is your live workspace. You build your slide by dragging and positioning content layers directly on the canvas.
Layers: Located below the canvas, this is where you add new content layers (like text, images, and buttons) and configure their content, styling, and animations.

Step 3: Building Your First Slide

A blank slide is automatically created for you. Let's add a background and a simple text layer.

1. Set the Slide Background

In the Slide Options panel, find the "Slide Background Image" field and click the "Click to set" area. This will open your media library where you can upload a new image or select an existing one. Alternatively, you can set a simple background color using the "Background color" field.

Setting a slide background

2. Add a Text Layer

In the Layers Panel, click the Add New Layer button and select Text from the dropdown. A new text layer will appear on the Preview canvas.

3. Edit and Position the Layer

With the new text layer selected, the panels at the bottom will switch to Layer Settings.

In the Content tab, change the default text to "Welcome to our Shop!".
Click the Styles tab to change its appearance. Use the controls to adjust the Font Size, Color, and Font Weight.
To position the layer, you can either drag and drop it directly on the canvas or use the Layout settings within the Styles tab for precise alignment (e.g., set 'left' to 50% and 'top' to 40%).

Edit and position the layer

Step 4: Save Your Work

Once you are happy with your slide, click the blue Save button in the bottom left corner.

Step 5: Displaying Your Slider

To make your slider appear on your website, you need to publish it and assign it to a theme hook.

Navigate back to the Slider Settings tab at the top of the editor.
Go to the Publish tab and activate the slider.
Go to the Layout tab and find the Module Position setting. Select a hook from the dropdown list where you want the slider to appear (e.g., `displayHome` for the homepage).
Click Save again. Your slider is now live on your site.

Tip: If you want to position the slider at the very top of your homepage, go to your PrestaShop admin and navigate to Design > Positions. Search for the `displayHome` hook and drag the "Creative Slider" module to the top of the list.

Publish and display slider