The words customers read on your homepage — the announcement bar, the hero, the About section, the trust badges, and the reviews and newsletter headings — are written on the Content tab of the Storefront Studio, separately for each language your store sells in. This article goes through every field.
The Content tab and the language you write in
- In the sidebar, under Storefront, open Content. If the Studio is already open, select the Content tab beside Design.
- At the top of the Studio, check which language is selected — English or Arabic, for example. Everything you type goes into that language only.
The Studio opens in your store’s default language. The language buttons appear only when your store sells in more than one language; the language picker in the preview’s own header switches the language too.
At the top of the tab, a short line reminds you that a field left blank does not appear on your storefront, and that the grey text is only an example. Below it, Translate to other languages fills your other languages from the one you are writing in — see Translate your storefront text. Then come six groups: Announcement bar, Hero, About section, Trust badges, Reviews and Newsletter. Select a group’s name to fold or unfold it.
What you type appears in the preview as you type. Customers see it once you publish. The store owner and store managers can write here, because both can design the storefront. On this tab, the ? beside Storefront Studio opens this article in a new browser tab.
If the Studio sends you to your dashboard with Finish setting up your store before designing it, finish your setup list first — see The setup list before your first publish.
Announcement bar: add several, order them, remove one
The announcement bar is a thin strip across the top of every page. With several announcements, it shows one at a time, changing every five seconds, in the order of your list.
- In the Announcement bar group, select Add announcement. An empty line appears at the end of the list.
- Type the announcement — for example, “Free delivery in Jordan on orders over 60 JOD”.
- To change the order, use the up and down arrows under an announcement. The first one in the list shows first.
- To delete an announcement, select the × under it.
The number beside the group’s name counts the announcements in this language. Each language has its own list, and empty lines are skipped. Keep each announcement short, so it fits on one line on a phone.
The bar appears only when Announcement bar is ticked in the Header group of the Design tab and at least one announcement has text. See Set up your header and hero image.
Hero: eyebrow, headline, subheading and buttons
The hero is the first thing customers see on your homepage.
| Field | What it is | Left blank |
|---|---|---|
| Eyebrow | A short line above the headline. | Your store name shows here — but only once you have written a headline. |
| Headline | The large heading of your homepage. | Your store name is the headline. |
| Subheading | One or two sentences under the headline. It is also the line under your name in the footer. | Nothing shows. |
| Primary button | The label of the main button. On most theme presets it takes customers down to your newest products. | No button. |
| Secondary button | The label of the second button. It takes customers down to your About section. | No button. |
Not every theme preset shows both buttons. Atelier, the default preset, shows only the primary button, and it opens your product list. Onyx and Drop show only the secondary button. Bloom, Juno, Circuit and Souq show only the primary. Sadeem, Oud, Terra, Haven and Volt show both. A button your preset does not show stays hidden even when you write its label — see Arrange your homepage sections. If the section a button points to is hidden, the button opens your full product list instead. The hero appears once it has a headline, a subheading or a picture; the picture is set on the Design tab.
About section
The About section tells your story beside a picture. In the Homepage sections list it is called Image with text.
| Field | What it is | Left blank |
|---|---|---|
| Eyebrow | A short line above the title, such as “Our story”. | Nothing shows. |
| Title | The heading of the section. | Nothing shows. |
| Body | Your story, in a few sentences. | Nothing shows. |
| Button | The label of a button under the text. It opens your store’s Our story page, and it shows only once that page is published. | No button. |
Under Button, a note always reads The button shows once your “Our story” page is published. The button takes customers to your Our story page, so your storefront, and the Studio’s preview with it, show the button only while that page is published. Until then the section shows without a button, whatever label you write. Layal Boutique’s story page is published, so its Read more button shows.
To write the page:
- Under the note, select Write your story. Policy pages opens on its Our story tab, in this browser tab.
- Write who you are, how you started and how you make what you sell. The page starts from blank: there is no AI draft for your story.
- Tick Published on the storefront, then save the page.
Once it is published, the button appears on your homepage, and Our story joins the Company column of your footer. See Write and publish your policy pages.
Leaving the Studio keeps the edits you have not saved in this browser tab, but not Undo generation. If you are in the middle of a design, select Save draft first.
The section appears once you have written a Title or a Body. Its picture and size are set on the Design tab — see Arrange your homepage sections.
Trust badges: four short promises
Trust badges are four short promises in a row, each with an icon, a title and a line under it. They are made for cash on delivery, delivery, secure payment and support, and their default icons show a banknote, a van, a padlock and a speech bubble — but you can write any promise you keep.
Each badge has two fields: Badge 1 title (up to Badge 4 title) and its Subtitle.
The row appears once you have written at least one badge title.
Tip
Write all four badges, or leave all four blank. Once the row shows, all four places show — a badge with no title shows its icon alone.
Promise only what your store really does. The grey examples, such as “Apple Pay, mada, cards”, never appear on your storefront unless you type them yourself.
Choose, search or reset a badge icon
Above each badge title is its icon row: the icon in use and its name — Default icon until you choose one.
- Above the badge, select Choose icon. A grid of more than a hundred icons opens, with a search box. The first tile is the default icon. Only one badge’s grid is open at a time.
- To narrow the grid, type in the Search icons… box — for example, “gift”. The search matches icon names in English and in the language your console is in.
- Select an icon. It replaces the badge’s icon in the preview straight away, and its name appears in the icon row.
- Select Hide icons to close the grid.
If nothing matches your search, the grid empties and says No matching icons. Try a shorter or more general word, or clear the box to see every icon again.
To go back to the default icon, select the × beside the icon’s name (Reset to the default icon), select the first tile in the grid, or select the chosen icon again. A badge’s icon is the same in every language, so you choose it once.
Reviews heading
The Reviews group has one field, Title: the heading above the reviews section, such as “What our customers say”.
You do not write the reviews themselves. The section shows up to twelve of your store’s most recent approved reviews that have written text. With no such review, the section does not appear at all, whatever its heading. With the heading left blank, the section shows without a heading. To approve reviews, see Approve, unpublish or delete reviews.
Newsletter title and text
The Newsletter group has a Title and a Body. Together they invite customers to join your mailing list.
The section — your title, your text, an email box and a Subscribe button — appears only once you have written its Title. The Body is optional. Customers who sign up appear in your subscribers list at once as Pending, and get an email asking them to confirm; once they do, they show as Confirmed. Campaigns go to confirmed subscribers only, and sending them is on Growth and up — see Write and send a newsletter campaign.
Empty fields and the grey examples
- Grey text in an empty field is an example, in the language you are editing. It shows what kind of words belong there and never appears on your storefront. The Title of the Reviews group, for example, shows “Loved by our customers” in grey until you write your own.
- Two fields are different: the hero’s Headline and Eyebrow. Their grey text is your store name (for Eyebrow, once you have written a headline), because your storefront really shows your store name there when you leave them blank.
- A field holding only spaces counts as empty.
- A section with nothing written does not appear. The hero, About, trust badges and newsletter sections stay hidden until you write in them, so an unfinished store never shows words you did not choose.
- To take text off your storefront, clear the field.
Warning
Your text is not saved until you select Save draft or Publish. Unsaved changes survive reloading the page, but not closing the browser tab. See Save a draft and publish your storefront.
Next, fill your other languages in one go with Translate your storefront text, or change the order of these sections in Arrange your homepage sections.