Set where your logo sits and how it shows, how tall the big banner at the top of your homepage is, which photo fills it and which part of that photo stays in view. Everything here is in the Header group of the Studio’s Design tab.
The words on the banner, its headline, subheading and buttons, are written on the Content tab. Write your storefront text
Logo position, logo display and logo size
- In the sidebar, under Storefront, open Design.
- Click Header to open the group.
| Control | Choices | What it does |
|---|---|---|
| Logo position | Start, Centred | Start puts your logo at the start of the header, on the left in English and on the right in Arabic, with the menu after it. Centred puts the logo in the middle and moves the menu to the start. |
| Logo display | Logo only, Logo + name, Name only | What the header and the footer show: your logo, your logo with your store name beside it, or just the name. A new store starts on Logo only. |
| Logo size | S, M, L | How tall your logo is in the header. A new store starts on M. |
The hint under Logo display helps you choose: A wordmark already contains your store name, so pairing it with the name prints it twice. A symbol or monogram usually needs the name beside it. Layal Boutique’s logo is a small mark, so it uses Logo + name to put the store name beside it. Name only lets you keep your logo uploaded without showing it in the header or the footer.
When the group is folded, its heading shows your logo position, for example Start.
A store with no logo yet
Until you upload a logo, Logo display and Logo size are hidden, because there is nothing for them to change. The header shows your store name instead.
You upload your logo with your store’s details, not in the Studio. As soon as it is uploaded, the two controls appear here. Update your store’s details
Hero height and image focus
| Control | Choices | What it does |
|---|---|---|
| Hero height | Standard, Tall, Full | How much of the screen the banner takes on a computer. Standard is a short banner, Tall takes about three-quarters of the screen and is where a new store starts, and Full fills the screen below the header. |
| Hero image focus | Start, Centre, End | Which part of the photo stays in view when the banner crops it. Start keeps the left and upper part, Centre the middle, End the right and lower part. |
The banner rarely has the same shape as your photo, so it crops it. Hero image focus moves the photo along whichever side is being cropped: a wide photo slides sideways, a tall one up and down. For a portrait of a person, Start usually keeps the face in view.
Hero image focus is set separately for each language, because the banner mirrors in Arabic: a crop that keeps the subject clear of English text on the left can put it behind the Arabic text on the right. The control changes the focus for the language the preview is showing, so:
- In the top bar, choose a language in the language switch.
- In Hero image focus, click the choice that frames the photo best.
- Switch the preview to your next language and check it again.
The console’s hint says the same: Where the photo is anchored when the panel crops it. Set per language — a crop framed around left-hand copy sits behind the text once the page mirrors.
Upload a hero image
Lower in the Header group, Hero image shows the current banner photo.
- Under Hero image, click Upload.
- Choose a photo from your computer or phone: a JPG, PNG, WebP or GIF of 10 MB or less.
- Wait while the button reads Uploading…. The photo then appears in the slot and in the preview.
Each new photo also becomes the newest in your list of recent hero images. Like every Studio change, it reaches customers only when you click Publish.
A wide, well-lit photo works best, with the subject away from the side where the headline sits. On a phone the banner stacks the headline above the photo, so check the phone preview too.
On Growth and up, Generate with AI sits beside Upload and makes a banner photo to match your design. The box under the buttons, Describe the hero image you want (optional), tells it what to draw. On other plans, only Upload shows. Generate hero and About images with AI
Tip
Choose your theme preset and set Hero height before you generate a hero image with AI. The picture is made in the shape of the space it will fill, and the preset decides whether the photo fills the whole banner or sits beside the headline.
Your recent hero images: use one again, remove one, Clear
Once you have had two or more hero photos, Your hero images appears under the buttons: a strip of thumbnails, newest first, up to 20. The photo in use is outlined.
- Use one again: click its thumbnail. Pointing at it shows Use this image.
- Remove one from the list: point at its thumbnail and click its × (Remove).
- Empty the list: click Clear.
Removing a photo from the list, or clearing the list, does not delete the file and does not change the banner. The photo in use stays in use, and a published banner never breaks because you tidied the list.
Remove the hero image
To show no photo at all:
- Point at the photo under Hero image and click its × (Remove).
The slot empties, and the banner shows a simple icon on a panel in your theme’s colours, as the hint under the slot says: Shown as the hero banner. When empty, a themed icon takes its place. If you have had two or more hero photos, they stay in Your hero images, so you can pick one again. If you have had only one, the strip does not show, so upload the photo again to put it back. Publish to remove the photo from the live storefront.
When an upload is refused
If a photo cannot be used, a message in the corner says why, and the current hero photo stays as it was.
| Message | Why, and what to do |
|---|---|
| File type is not allowed. | The file is not a JPG, PNG, WebP or GIF. Photos from some phones are saved as HEIC: export or save the photo as JPG, then upload that. |
| File content type is not allowed. | Your browser reported a file type that does not match the file’s name, which can happen with a renamed or converted file. Open the photo, save it again as JPG or PNG, and upload that. |
| The file's contents do not match its type. Check the file and try again. | The file’s name says one type but its content is another, for example a renamed file. Open the photo and save it again as JPG or PNG. |
| A message that includes “Request body too large” | The photo is over the 10 MB limit. This message is in English whatever your console language. Save a smaller copy, for example by exporting it at a lower quality or a smaller size, and upload that. |
| This plan has reached its storage limit. Delete some files or upgrade to store more. | Your store’s storage is full. Free up space or move to a plan with more storage. Plans and what each includes |
| Could not reach the server. Check your connection and try again. | Your connection dropped during the upload. Reconnect and upload again. |
| You do not have permission to do this. | Your role cannot upload files. Ask the store owner. |
| Could not upload the image. Try again. | The upload did not finish. Try again in a moment. |
Uploading needs the Upload files permission, in the Files section of a role. Store owners and store managers have it; if your role does not, ask the store owner. Staff roles: what each one can see and do
Header options: announcement bar, sticky on scroll and wishlist icon
Three switches at the end of the Header group turn header features on or off. All three are on for a new store.
| Switch | When on | When off |
|---|---|---|
| Announcement bar | The thin bar above the header shows your announcements, taking turns when you have several. | The bar is hidden, but your announcements are kept for later. |
| Sticky on scroll | The header stays at the top of the screen while customers scroll, so the menu, search and cart are always in reach. | The header scrolls away with the page. |
| Wishlist icon | Customers can save products: a heart in the header, on each product card and as a Wishlist button on the product page. | Every wishlist control is hidden. |
You write the announcements on the Content tab. With the bar on but no announcements written, nothing shows. Write your storefront text
The wishlist is on Starter and up. On Free, the storefront shows no wishlist even when Wishlist icon is ticked, and your setting is kept for when you move up. Plans and what each includes
When the header and banner look right in each language and on a phone, click Publish. Save a draft and publish your storefront
Next, write the banner’s headline and buttons in Write your storefront text, or let AI make a banner photo with Generate hero and About images with AI.