A beautiful image immediately catches your visitors’ attention. In this step-by-step guide, we’ll explain how to add or replace images within two commonly used visual elements in Webshop Studio: the Hero Slider (a slideshow with changing images) and the Hero Banner (a large, atmospheric image with a background image).
The General Logic of Webshop Studio
Before we dive into the elements, it’s helpful to understand the standard layout of Webshop Studio:
Left (Main Menu): Here you’ll see a list of all active elements on the page. Click the element you want to edit.
Right (Settings Panel): As soon as you click an element on the left, all the specific settings and options for that selected element appear on the right.
Part 1: Managing Images in the Hero Slider (Slideshow)
The Hero Slider is ideal for displaying multiple alternating slides (slideshow) in sequence.
Step 1: Select the Hero Slider
In the left menu of Webshop Studio, click the Hero Slider element or click the black block labeled “+block” to add a Hero Slider block to your page.
If no slides have been created yet, you’ll see the message “No slides and no photos yet.”
Step 2: Set General Settings & Style
Before uploading images, you can configure the slider’s display in the right-hand menu:
Alignment: Choose, for example, between Center (centered) or Left Anchored (left-aligned).
Width: Choose Centered (the element does not take up the full width) or Full Width.
Slide Transition Time: Set the number of seconds between slide changes (for example, every 5 seconds).
Image Height: Set the desired height to Compact, Medium, or High.
Minimum height: Adjust the white space between the Hero Slider and the element above it.
Add a dark overlay: Do you have a very light-colored image that makes white text hard to read? If so, enable the Overlay. This places a transparent, black overlay on top of your image. You can set the opacity of this dark overlay to a maximum of 80%.
Colors: Choose the color of the header, text, and buttons. You can use the preset branding colors from your back office or manually enter a specific hex code.
Step 3: Upload and Select an Image
In the settings menu, scroll down to the section for adding a slide or slideshow.
Click the "Choose Image" button.
Your online store’s Media Manager will open.
Click "Upload Files" and select the desired image from your computer.
Once the image has been uploaded, click on it to select it. A yellow checkmark will appear on the image.
Click the confirmation button to permanently add the image to the slide.
Step 4: Add Text and Buttons
A slide isn’t complete without a clear message:
Fill in the text fields:
Header: A short line of text above the main heading.
Heading: The eye-catching main title.
Caption: An additional explanatory line below the headline.
Button (Call-to-Action): Enter the desired button text (for example, “Shop Now”) and link it to a button URL (for example, /shop/clothing or the full URL) to send visitors directly to the correct page.
Step 5: Save and Publish
Note: This is the most common mistake!
Scroll down and click the Save button located directly below the slideshow settings. So don’t use the general Save button in the bottom-right corner of your screen right away (unless there’s no specific button below the slideshow).
Only then should you click Publish to display the image and text live on your online store.
Part 2: Replacing the Image in the Hero Banner
A Hero Banner is a static element with a single fixed background image (not a rotating slideshow). The steps to replace the image are largely the same.
Step 1: Select the Hero Banner
In the left-hand menu of Webshop Studio, click the Hero Banner element or add the element by clicking the +block button at the bottom left of your screen.
Step 2: Configure Text and Buttons
Enter the desired text on the right-hand side:
Top Line: Text that appears above the main title.
Header: The main title of your banner.
Subline: The supporting text.
Add a button by filling in the Text button (e.g., "View collection") and the corresponding Button URL.
Step 3: Choose a background image
Look for the "Background Image" option on the right.
Click “Choose Image.”
Upload a new image via the Media Manager or select an image you’ve already uploaded from the list.
Confirm your selection to apply the background image.
Optional: Under the “Style” section, you can precisely match the specific colors for the button, the button background, and the button text to your image.
Step 4: Save and Publish
Just like with the Hero Slider, saving correctly is essential here to prevent losing your changes:
Scroll all the way down the right-hand menu to the bottom of the settings.
Click the Save button located directly above the red “Danger Zone.”
Then click Publish to go live with the new background image.
We hope this is clear. Do you have any questions or are you having trouble with anything? Feel free to contact us at cs@storekeeper.nl or call us at 085 016 8008.