Creating and Editing Banners with Studio Assistant

Have Studio Assistant generate desktop and mobile banners for a product and add them to the page, change the background, or add a new product to an existing banner; step-by-step instructions and video.

Studio Assistant generates banners from product photos based on your request in the page editor, adds the banner to the page, and edits existing banner images. This page explains three tasks: creating a new banner for a product, changing the banner background, and converting a single-product banner into a collection banner. The video of the same explanation is below.

<video controls preload="metadata" playsinline width="1920" height="1080" poster="https://files.docs.hebiar.com/videos/console/studio/pages/asistan-banner.tr.jpg" src="https://files.docs.hebiar.com/videos/console/studio/pages/asistan-banner.tr.mp4"><a href="https://files.docs.hebiar.com/videos/console/studio/pages/asistan-banner.tr.mp4">Open the video</a></video>

Before you start

The assistant writes only to the draft. After each request, you choose Changes in this turn card's Approve, Revert, or Decide later. The page does not change on the site until you press Publish.
Product photos are taken from the catalog. Write the product's SKU (stock code) in the request. The product name also works, but if there are multiple colors with the same name, the assistant asks which one you want.
Images are generated with the Image model selected in the Assistant settings panel. Each generated image is also added to Media.
Today's usage at the bottom of the panel shows how much of the daily AI budget has been used.

1. Generate a banner for a product

Open the page where you want to add the banner from Pages.
Open the assistant with the Studio Assistant button at the top right. The assistant knows the open page.
Write your request and press Enter. Example:

Generate a campaign banner for Ghost 17 running shoes with code 1204311B453: two images, wide horizontal (21:9) for desktop and vertical (4:5) for mobile. Use the product photo as reference; only a large 'GHOST 17' headline on the image. Add the banner as a single banner just below the slider on the homepage and link it to the product page. Do not attach the banner to the slider: add 40 px spacing on top (24 px on mobile) with a Spacer component.
The assistant finds the product, generates images, and adds the banner to the page. This may take a couple of minutes; the panel shows the current step.
Check the images in the Generated images card and press Approve.

Specify the aspect ratio of desktop and mobile images, text on the image, and banner position on the page clearly in the request. If the image model does not support an aspect ratio, it uses the closest ratio and mentions this in the response (e.g., 3:4 instead of 4:5).

2. Publish and check on the site

Close the assistant and press Publish in the top bar. Check the addresses to be published in the popup and press Publish again.
Open the site. The banner appears on the page; the vertical image is shown on mobile.

3. Change the banner background

Write the banner and desired background to the assistant. Example:

Generate new desktop and mobile images for the Ghost 17 banner on the homepage by referencing the current images: the background should be a sunrise, misty forest path; keep the shoe and headline the same. Do not use old images from Media.
The assistant references the existing image and changes only the background. Desktop and mobile images are renewed together.
Press Approve. To preview before publishing, close the assistant and use Preview. Preview opens the draft in site view; the live site does not change.

If you do not write "Do not use old images from Media," the assistant may reuse a previously generated image from Media that matches the request instead of generating a new one.

4. Add a product to an existing banner (collection banner)

Find the banner to be changed on the canvas. If the banner is in a slider, navigate to the relevant slide with the arrow.
Write the SKU of the product to be added and specify where and in which direction it should be placed. Example:

Use the second slide of the homepage slider with the 'Glycerin 23' image as a base. Keep the navy-neon yellow shoe in the image as is. Add the light blue Glycerin 23 women's model with code 1204651B487 to its left, facing the opposite direction: nose left, heel right; the heel should be close to and slightly behind the navy shoe's heel. The light blue shoe should be a single, complete shoe. Do not change texts or background. Generate desktop and mobile images once each and apply to the slide.
The assistant references both the banner image and product photo. The new image appears on the same slide on the canvas.
Press Approve and check with Preview.

Check the result

Preview: Opens the draft in site view. Navigate to the changed slide in the slider with the arrow.
Media: Generated images are here; sizes and file names are visible.
History: Every published version is here. You can restore an older version to the draft with Restore to draft if needed.

Common situations

Product appears broken or incomplete in the image: Press Revert and clarify the request: specify the product position, direction it faces, and whether it overlaps with other products. The assistant sometimes tries several times on its own; the last image assigned to the slide is valid.
Texts on the image changed or disappeared: Count the texts in the image in the request and say "keep texts and layout the same."
Assistant asked questions without making changes: It asks if the product, banner, or slide is unclear. Answer and continue.
Daily budget exhausted: The assistant does not generate new images when the usage limit is reached; try again the next day.
Left the page and the changes card disappeared: The chat resets when the page reloads, but assistant changes remain in the draft. If unwanted, restore a previous version from History to the draft.