Storecrafto

Docs

Your storefront

Choosing and editing your theme: sections, colours, phone styles, the AI website maker, custom sections, the announcement bar and the pre-launch page.

All docs

Last updated

Choosing and customizing your theme

Settings, then Theme, is where your storefront's look lives.

Choose theme shows the base themes; open one to see the styles built for different kinds of store - fashion, electronics, beauty and so on. Pick a style and save to apply it. Logo & favicon holds your brand images, Product page controls the "You may also like" block, and Pages holds the standard help pages linked from your footer.

Each style card is a real photo of that style running on a demo shop, so you can see the layout and colours before you commit. Your own store will show your products and your logo - the picture is the starting point, not the finished result. Picking a different theme or style starts you off with its own colours and fonts, so any colours you had chosen are replaced; your logo, menu, pages and the rest of your brand settings stay as they are.

The Customize button opens the full editor in a new tab, with your real store beside the controls:

  1. Sections - add, reorder and edit the blocks that make up a page.
  2. Style - colours, fonts and corner shapes.
  3. Brand - your logo and its size in the header, the navigation menu, announcement bar and social links.

Use the page menu in the top bar to move between Home, your product page, your category page and any pages you have added yourself. New page creates one of your own at /p/your-page-name. Undo and redo are in the top bar, and changes reach your store a couple of minutes after you click Save.

To check the finished result on a phone, the phone icon in the admin top bar opens your live store in a phone-sized window.

One product page per product type

Not everything you sell wants the same page. A t-shirt needs photos and a size picker; a concert needs its dates, its ticket types and a venue. So each product type can have its own product page, chosen in the theme editor under Layouts by product type.

The card lists your six types - Physical, Booking, Rental, Event, Digital and Service - each with a small menu:

  1. Standard product page is today's page, the one every type starts on: gallery, buy box, description and whatever sections you have added to it. Changing that page changes it for every type still set to Standard.
  2. Events start on Event layout instead, a page built for a show: a hero with Get tickets, the list of dates with how many are left, the ticket types, your description, the venue and more events. Switch an event to Standard product page if you would rather sell it like anything else - the Get tickets button still appears there, so buyers can still choose a date and enter attendee details.
  3. Own layout, on the other types, starts as a copy of the standard page and then goes its own way. Use it when, say, your rentals need a different order of sections from your physical products.

The page menu in the top bar gains an entry for each type that has its own layout - "Product page, Events" and so on - so you edit exactly the page you mean. The preview shows a real product of that type; if you have none yet, add one and it appears.

A type left on Standard keeps inheriting improvements to the standard page. Only change a type when it genuinely needs a different page.

Colours that stay readable

Text needs to stand out from whatever sits behind it. When a pairing is too close to read comfortably, a Low contrast warning appears under the colours - in the editor's Style tab under Colours for your whole store, and on a section's own Style tab for a single section.

Fix, beside the warning, sets the text to black or white - whichever reads better on that background. It is an ordinary change: Undo takes it back, and nothing reaches your store until you click Save.

The warning never blocks you: if you want that pairing, keep it. AI is the exception - when it recolours your store or a section it corrects the text colour itself and says so under its reply, so "make it dark" can never leave your writing invisible.

Moving sections and designing your own

In the theme editor you can arrange a page on the preview itself. Hover a section, take hold of the grip on its label and drag it wherever it belongs - the main block on your product and category pages stays put. The Sections list still reorders the same way. A "+ Add section" pill appears in any gap: click it to add a section right there, or drag a card out of the Add section dialog onto the spot you want.

Every section's settings open on two tabs. Content is its wording and pictures. Style is how it looks - its colours, a background image that shows behind the section (sections that paint their own background cover it), an overlay that darkens that picture so your writing stays readable, a colour fade between two colours in the direction you pick, and extra spacing above and below.

A Designer section is one you build yourself, piece by piece. Click Create your own section below the Sections list to add one (or pick Designer section in the Add section dialog), or press Edit design on a Designer section you already have - from its settings, or from its row in the Sections list.

  1. The section opens on its own, on a plain background, with the pieces on the left and its options on the right. The slim bar holds Done, undo, redo, the phone preview and Save.
  2. To see it sitting in the real page instead, press the focus button in that bar - press it again to come back.
  3. The palette offers layout pieces - Stack, Row, Grid, Spacer - elements - Text, Image, Button, Divider, Badge - and a dozen ready-made starters under Basics, Content and Promo.
  4. Click a piece to select it and its options open on the right. Drag pieces to rearrange them, including into columns and grids, and drag the handles to resize text, buttons and images.
  5. Double-click text to edit it where it sits, then click Save when the section is right.

Groups take a Fill and a Frame, pictures take soft or circle corners, and text can be muted or in your accent colour. Every piece has a Hide on phones switch - turn on the phone preview to see the result. Delete and the arrow keys work on the selected piece, each change is a single Undo, and nothing reaches your store until you save. A layout AI built for you opens in the same Designer, and designing by hand uses no credits.

Tip: the Designer needs the Growth or Pro plan. A section holds up to 60 pieces, a page up to 5 Designer sections, and pieces can nest four deep.

Finding the right section

Add section opens the whole library, grouped the way the editor thinks about it - Hero, Categories, Products, Showcase & 3D, Promotions, Trust, Content and Engage. The list down the left jumps to a group; every card shows a small picture and one line saying what the section puts on the page.

The search box matches more than the name. Type what you want the section to do - "photos", "slider", "reviews", "3d", "faq", "countdown" - and it looks through each section's description and its other names as well as its title. Results stay under their group headings, so you learn where things live while you search.

Tip: two words narrow it down: "product slider" finds fewer sections than "slider" alone. If nothing matches, try one plainer word.

Fading a background picture

A picture behind your writing can make it hard to read. Image opacity fades that picture toward the section's own background colour, so the words come forward - 100% is the photo at full strength, 10% is barely there.

Where the control sits depends on the section. Sections that carry their own picture - the photo heroes, the video hero, the tilting promo banner - have it under Advanced on their Style tab, next to their other layout options. Every other section has it under Style, right below the Background image you added there. Either way it only appears once there is a picture to fade.

Those own-picture sections have no Background image of their own to add: they already show one, so the editor offers the fade instead of a second photo fighting the first.

Tip: fading toward a dark section colour and fading toward a light one both work - set the section's Background colour first, then pull the opacity down until your text reads. Phones can have their own value: switch to Phone in the top bar and set it there.

How your product photos are laid out on a product page is set in the theme editor: open your product page, click the product area, then Style. Under Advanced you get three choices.

  1. Gallery - Thumbnails beside the photo (the usual one), Thumbnails underneath, Stacked one above another, a two-per-row Grid, or a Carousel with arrows and dots.
  2. Zoom - Lightbox opens the photo full size when it is clicked, Hover magnifies it under the mouse pointer, or None leaves it alone.
  3. Picture shape - Square, Portrait (taller), or Original to keep each photo's own shape.

On phones every layout becomes the same swipeable row of photos with dots underneath, so nothing you choose here can crowd a small screen. Hover magnifying is for mice only - touch screens keep the tap-to-open behaviour.

The Editorial scroll layout brings its own gallery - one long column of photos beside a buy box that follows you down the page - so these three options do not apply to it and are hidden while it is chosen.

The newest sections

Fourteen sections were added in September 2026. Two are premium - 360 product spin and Product story - and the rest are on every plan.

  1. 360 product spin (premium) - photos taken around a product that shoppers drag to turn it.
  2. Product story - 3D scroll (premium) - your pictures fly in one at a time as the page scrolls, each with its own line of copy.
  3. Lookbook - shop the look - a big photo beside the products in it.
  4. Product comparison - a table comparing two to four products row by row.
  5. Product collage - product photos as a mosaic or a staggered wall.
  6. Featured product - buy box - one product with its price, options and Add to cart, right on the page.
  7. Product tabs - several product picks behind tabs the shopper switches between.
  8. Image & text rows - photo-and-copy rows that alternate sides.
  9. Video with text - a video beside a heading, some copy and a button.
  10. Feature tabs - tabs that each reveal a picture and an explanation.
  11. How it works - numbered steps joined by a line.
  12. Team - your people, with photos and short bios.
  13. Pricing table - plans or packages side by side, one marked as the popular choice.
  14. Store locations & hours - your branches with addresses, opening hours, a Call button and a maps link.

The 3D and showcase sections now sit under Showcase & 3D in the Add section dialog.

Styling your store for phones

Most of your shoppers arrive on a phone, and a look built for a wide screen does not always carry across. The Desktop and Phone buttons in the theme editor's top bar are an editing mode, not just a preview width: switch to Phone and a section's Style tab edits its phone look instead of its desktop one. Desktop is left exactly as it was.

Phone means screens narrower than 640px. Tablets and laptops keep your desktop styles.

  1. Open Settings, then Theme, and click Customize.
  2. Click Phone in the top bar. The preview narrows and the Style tab says you are editing phone styles.
  3. Open a section and go to Style. Its colours, background image, overlay, colour fade and extra spacing can now be set for phones on their own.
  4. Click Save. Changes reach your store a couple of minutes later.

Anything you do not set on phones follows desktop, so you only change what needs to differ. In the drop-downs that is three choices: Same as desktop leaves it inherited, None turns that one thing off on phones only, and the rest are ordinary values. The background image has its own No image on phones switch, for a heavy picture that is worth the wait on a laptop and not on a phone. Reset phone customisations, at the bottom of the tab, puts the section back to following desktop in everything.

Hide on phones drops a whole section on small screens. It sits at the top of the section's Style tab in both modes, and in the three-dot menu on its row in the Sections list. The section then disappears from the phone preview - the Hidden on phones label on its row is how you find it again and switch it back on, and a small phone icon on a row means that section has phone styles or content of its own. The product block on your product page and the product grid on your category page can never be hidden: they are what those pages are for.

Under Style, in Card details, Image shape on phones makes product pictures taller or squarer on phones across your whole store - home page, category pages, search and related products - while desktop keeps its own shape.

Product cards can also take their own image height, card width and image fill on phones - in Card details for the whole store, or on a product section's Style tab for that section alone. Layout choices such as how many columns a section uses stay shared - the same on every screen - and so do your footer, brand colours and fonts.

Tip: phone styles are on every plan. In Phone mode the AI assistant sets them too, for phones only.

Different pictures, text and header on phones

A wide banner photo can shrink to a thin strip on a phone, and a long heading can wrap onto four lines. In Phone mode you can give the busiest parts of your store their own phone versions - a hero's picture and heading, each slide of a slideshow, your header style, your logo and the announcement message - while desktop stays exactly as it is.

  1. Open Settings, then Theme, click Customize, and click Phone in the top bar.
  2. Open a section and stay on Content. Sections built around a big picture or headline, such as heroes, slideshows, banners and image with text, offer a phone picture and phone wording; the rest of the tab is shared with desktop.
  3. For the header, open the Header row at the top of the Home page's Sections list and choose under Header style on phones, or keep Same as desktop.
  4. Under Brand, set a phone logo and logo size, and under Announcement bar a phone message or picture.
  5. Click Save. Changes reach your store a couple of minutes later.

Anything you leave empty follows desktop, and each empty box shows the desktop wording it will use. Slides and tiles are added, removed and reordered on desktop; on phones you only change what each one shows. Editing text right on the phone preview works the same way: wording that can differ on phones changes on phones only, everything else changes everywhere.

Search engines read the phone version of your store first, so give a phone heading words that still say what the page is about. Reset phone customisations, at the bottom of a section's Style tab, clears its phone pictures and wording together with its phone styles.

Tip: phone content is on every plan - only the premium header styles need a plan that includes them. In Phone mode you can also ask the AI assistant for a shorter heading or a different picture, and it changes phones only.

The loading screen and spinner

Tapping a product, searching, or opening the cart used to look broken: on a phone the footer jumped up under the header for a moment, and on every device the new page appeared part-way down and then visibly scrolled itself to the top.

Every page change now shows a proper loading screen. Moving to a product, a custom page or your home page covers the whole screen and puts the loading indicator in the middle; the cart, checkout, category and search pages keep your header in view and show it below. Either way the new page arrives at the top, where you expect it. The cart and checkout use the same screen while your basket is being fetched, so a full cart no longer flashes "Your cart is empty" on the way in.

You choose how that indicator looks. In the theme editor open Style and find Loading spinner under Motion:

  1. Ring - a spinning circle. This is the usual one.
  2. Dots - three dots bouncing in turn.
  3. Pulse - a circle breathing outwards.
  4. Bars - three bars rising and falling.
  5. Logo - your own logo, breathing gently.

Logo needs a logo: add one under Brand first, or the choice stays greyed out. If your logo is removed later the ring quietly takes over, so shoppers always see something.

A page that loads quickly never flashes a spinner at all - the indicator waits a moment before it fades in, so only a wait worth explaining is explained.

Shoppers who have asked their phone to reduce motion, and stores with Motion set to None, get a gentle fade in and out instead of a spin. A loading indicator is the one thing that must keep saying "working", so it never stops entirely.

Tip: the editor preview never changes pages, so it cannot show you the spinner. Save, wait the couple of minutes for your store to update, then tap between pages on your live store to see it.

AI website maker

The AI tab in the theme editor builds and edits your storefront from a description. Type what you want - "add a testimonials section", "write an About page" - and it changes the page you are on.

  1. Open Settings, then Theme, and click Customize.
  2. Open the AI tab beside Sections, Style and Brand.
  3. Describe the change and send it.
  4. Watch the preview update, then click Save to publish it.

It can change nearly everything the other panels can: colours and fonts, corner rounding, your logo, the announcement bar, the navigation menu, footer social links, product-card options, your store's language and festival decorations. On the page it adds, removes, reorders and rewrites sections - it can also copy one, restyle it, edit a single item in a list, place a saved component, or make you a new page and later rename it. Style changes apply across your whole store, not just this page.

If a different theme style would suit you better, the AI suggests it and you decide. Your colours, brand settings and pages are kept - but a style switch cannot be undone with Ctrl+Z.

Whatever it recolours stays readable - see Colours that stay readable.

When a request could go several ways, the reply is a short list of choices - tap one to send it.

Select a section before you type and the AI keeps its changes to that section. If a change needs a picture you do not have, it offers to make one - you see the price first and pay only if you accept.

A layout the AI designs is saved under My components as it lands; open its settings from the Sections panel to change its pictures.

Nothing goes live until you click Save, and every request is one step in the editor's history, so a single Undo takes back the whole change.

Build my whole homepage rebuilds the page from scratch: it picks 8 to 12 sections from your theme's library to suit this store and writes the copy. Your current layout is replaced, not added to, and one Undo brings it back. If it cannot produce the build, the turn is charged as a question instead.

Every reply uses credits. The rates show under the message box before you send - a change costs more than a question, and the homepage build has its own price on its button. A very large request can cost more than the listed price, and the exact amount charged shows after each reply. There is also a daily request limit.

It uses your real products and categories, and only the sections your plan includes. If part of a request was skipped, the reply says why.

Restyling the whole store with AI

Ask the AI for a whole-store change in plain words - "make everything higher contrast", "switch to a dark navy and gold look", "restyle the site" - and it works at brand level: it sets the store palette (background and text together, then primary and accent) and clears any colours set earlier on individual sections, so the new palette shows through everywhere instead of fighting old per-section choices. It tells you when it cleared them, and one Undo puts everything back. A scoped request ("make the hero darker", "teal buttons") only touches what you named.

Every colour the AI suggests shows as a swatch beside its code, and after a change the chat shows the palette it applied - tap Undo if it is not what you wanted.

The AI knows your store: its description, categories, products, prices and product photos are in every turn, so it can answer questions about what you sell, write copy that names real products, and use your product photos in image slots.

It can also style single sections - a background image with a soft, medium or strong scrim, extra spacing, a two-colour gradient, or hiding a section on phones - and reset one section's colours back to the palette. Text colours it sets are checked for readability (4.5:1) and fixed with a note when they would not read.

On Growth and Pro you can also ask the AI to keep the current look as a saved version ("save this as my Eid look") or to bring one back ("restore my summer look") - each shows a card you confirm with a tap. A saved version keeps what is live on your store, so unsaved changes are saved first; restoring replaces your draft and cannot be undone.

Two more helpers sit at the top of the AI tab. Check readability lists every band on this page whose text is hard to read against its background, with a Fix button for each - it runs on your computer and costs no credits. Review the look sends the AI a picture of the page as it is right now and asks what to improve; it costs the same as a question, and the AI can fix what it sees in the same turn. In Phone view, style requests go into the phone layer only, so the desktop look stays as it is.

Not sure what to ask? The Prompts button beside the message box (and the list you see before your first message) holds ready-made requests for all of this - tap one to drop it into the box, change any words you like, then press Enter.

Custom sections built by AI

Sometimes you want something none of the ready-made sections do - a scrolling logo strip, an unusual comparison table, a layout you already have in your head. Describe it to the AI in the theme editor and, when nothing in the library can do it honestly, it offers to build that section for you instead of approximating it badly. It can redo a section you already have, too - ask for your hero, or any section on the page, and the build takes its place rather than being added below. The offer arrives as an ordinary chat reply, which uses credits like any other; the build price is charged only when you confirm the card.

  1. Open the AI tab in the theme editor and describe what you want.
  2. If it needs a custom build, the reply comes with a card describing the section and its price.
  3. Read the description, then confirm - the build price is charged at that point.
  4. The section appears in the preview. Click Save to publish it, or Undo to take it back.

Building takes a minute or two and carries on without you - keep editing or close the editor, and the finished section waits in the AI tab to add when you return. Every build is also kept under My components, so you can place it on another page without paying again.

It is written for your store specifically - your colours, your fonts, your corner rounding - so it sits with the rest of your theme instead of looking pasted in. If you want your own photos in it, say so and name them: the AI passes the exact pictures from your media library into the build, and it cannot use any others.

Editing one works differently: there are no fields to fill in, you change it by asking. Tell the AI what should be different and it rebuilds the section from scratch - a new build at the price on the card. Describe everything you want in one go rather than one tweak at a time. You can still move it, hide it, duplicate it and set its background and text colours from the Sections panel, like any other section.

Custom sections need the Growth or Pro plan. On a plan without them you cannot build new ones, and any you already have stop showing on your store along with the rest of the premium components.

Anything that moves respects your visitors' settings: a section that animates as you scroll stays still for anyone whose device asks for reduced motion, and setting Motion to none in the Style tab stops it for everyone.

If a build does not come back usable, you are not charged. Try again, or describe it differently.

Ordering a section made for your store

If nothing in the section library does what you have in mind, you can ask our designers to build it for you by hand. Open Custom sections in the admin panel and describe what you want. We read it, send you a price, and start building once you have paid.

Write the brief as if you were briefing a person, because you are:

  1. What it is for. "A size guide for shoes", "a strip that shows our three delivery promises".
  2. What it should show. The exact words, if you know them. Leave a slot for anything you want to change yourself later - photos and headings are easy to make editable, layouts are not.
  3. What it should feel like. Links to pages you like are worth more than adjectives; paste them into Links.
  4. Pictures. Upload any reference images or your own photos first, then attach them - only images from your own library can be attached, so nothing goes missing later.

Each section is priced on its own, because each one is different work. If a starting price is shown on the page, treat it as a "from": the real number arrives as a quote once we have read your brief, with a note saying what it covers. Nothing is charged until then, and you can turn the quote down by cancelling the request.

To pay, open Billing and settle the invoice like any other. We start building the moment it clears and tell you here when it is done - the finished section appears in your theme editor under Add section, in the Made for you tab, ready to drop on any page.

You can have five requests open at once. Cancel one any time before you pay; after that it is work in progress, so talk to us instead. If we cannot build something - it needs a feature the storefront does not have, or it belongs on a page we do not run - we say so with a reason rather than quoting for it.

Sections made for your store

Some stores have a section our designers built by hand for them - an unusual layout nobody else has, made to order rather than picked from a list. You can order one from the Custom sections page, or we may have built one for you already. Either way it waits for you in the theme editor: open Add section and you will see a Made for you tab alongside Library and My components. Click it and add the section to any page.

It arrives with our artwork and wording in place, so it looks finished the moment you add it. To make it yours, click the section in the Sections panel: the Content tab lists the parts you can change - a cover photo, a heading, a link - each one an ordinary field, with the same picture uploader you use everywhere else. Leave a field empty and our placeholder stays, so you can fill it in a bit at a time.

  1. In the theme editor, click Add section and open the Made for you tab.
  2. Click the section to drop it on the page, or drag it exactly where you want it.
  3. Click it in the Sections panel and fill in your own photos and text.
  4. Click Save to publish. Colours and spacing live in the Style tab, like every section.

You are not holding a copy of it. The design stays with us, so when we improve it - a fix for a phone screen, a smoother animation - your store picks that up on its own, and the photos and words you put in stay exactly as you left them.

Two things take it off a page: restoring an older saved look, and asking AI to rebuild your whole homepage - both replace the page it was on. Add it again from Made for you and fill it in.

If we stop making it available to your store, it stops showing there. The section stays in your list until you remove it, and its settings sheet says so.

Section pictures

Each card in the Add section dialog shows a picture of what that section looks like. Until someone at Storecrafto photographs a section, its card shows a simple sketch instead - both work the same way, the photograph just reads better.

For the Storecrafto team: the pictures are managed under Section pictures in the platform console. A good one is the section on its own, at desktop width, on a plain demo store with no other sections around it - the shape of the section is what the merchant is choosing, not the demo shop's products.

  1. Frame it 16:10 and save it as a PNG, JPEG or WebP up to 10 MB.
  2. Find the section by name or key and click Upload - Replace swaps a picture, Remove puts the sketch back.
  3. It reaches every store's theme editor straight away; nothing is per-store.

Tip: access to that page is the Designer bundle when inviting a team member - it covers section pictures and the made-for-you sections library, and nothing else.

The announcement bar

The thin strip above your header - "Free delivery over 5,000" and the like.

  1. Go to Settings, then Theme, and click Customize.
  2. Open the Brand panel and find Announcement bar.
  3. Switch it on and type your message.
  4. Set the background and text colours, and a link if the strip should be clickable.
  5. Turn on Sticky to keep it on screen as shoppers scroll, then click Save.

It shows on every page of your store. Clear the switch to take it away. Changes appear on your store a couple of minutes after saving.

Your logo can move a little in the header - enough to catch an eye, not enough to annoy. In the theme editor open Style and find Logo motion under Motion:

  1. None - the logo sits still. This is the usual one.
  2. Float - it drifts gently up and down.
  3. Shine - a light sweeps across it every few seconds.
  4. Glow - a soft glow in your accent colour breathes around it.
  5. Wiggle on hover - it tips side to side when a shopper points at it.
  6. Spin on hover - it turns once when a shopper points at it.

Float, Shine and Glow run on their own, over and over. Wiggle and Spin only happen when a shopper points at the logo with a mouse or trackpad, so on a phone they never play - choose one of the first three if most of your shoppers are on phones.

Shine needs a picture logo, because it sweeps light across the image. A store whose logo is its name in text gets the glow instead, so the choice is never wasted.

The looping effects hold still for shoppers who have asked their phone or computer to reduce motion, and whenever your store's Motion is set to None in that same Motion group - that one switch quiets every effect in the store.

Logo motion belongs to the style you are on, like the loading spinner: picking a different theme or style starts you off with that style's own setting.

Tip: add your logo under Brand first. Changes reach your store a couple of minutes after you click Save.

Announcement bar picture

The strip above your header can carry a picture instead of a line of text - a delivery banner, a sale strip, or a small animation.

  1. Go to Settings, then Theme, and click Customize.
  2. Open the Brand panel, find Announcement bar and switch it on.
  3. Upload Picture (desktop), and Picture (phones) as well if the strip should look different on a small screen.
  4. Keep your message in the text box, then click Save.

The picture replaces the text on screen, but the text still has a job: it becomes the picture's description, read aloud to shoppers using a screen reader and shown if the picture fails to load - so write a real sentence there rather than "banner". The link you set still applies, so the whole strip stays clickable, and the background colour you chose shows through a picture with transparent parts. The picture itself always fills the strip's full width and keeps its own proportions, so anything that would stand taller than 200px on screen is trimmed top and bottom to a 200px band.

Sizes: make the desktop picture 1920 × 120 px and the phone picture 800 × 300 px. Wider-and-shorter is always safe; a square or tall picture gets cropped to the band.

Phones - screens narrower than 640px - show the phone picture when you have added one, and fall back to the desktop picture when you have not. Add a phone picture whenever your desktop strip is long and thin, the sort that shrinks to nothing on a small screen.

An animated GIF or animated WebP plays by itself, with no switch to turn on. Keep it under about 1 MB: the strip loads before anything else on the page, so a heavy picture holds up your whole store on a slow connection. Anything up to 10 MB is accepted, and ordinary JPEG, PNG and WebP work too.

Tip: keep the picture wide and short - it is a strip, not a banner - and look at it on a real phone before you leave it.

Video stories

Video stories puts a row of short videos on your page, the way a phone shows stories: tap one and it opens full screen. Add it from Add section, under Engage, then fill it in on its Content tab.

  1. Add a story - up to twelve. Each one takes a cover picture, a label and a video.
  2. Give it the video by uploading an MP4 or WebM up to 50 MB, or by pasting a YouTube or YouTube Shorts link.
  3. Choose a product for a story that is selling something - a small bag badge marks that story on the page, and a Shop this button appears under the video when it is open, taking the shopper straight to that product.

Layout, on the Style tab, is Circles or Cards. Circles are the round story bubbles shoppers know from their phone, each with a slowly turning ring in your accent colour. Cards are taller rectangles with the label underneath - better when the cover picture is doing the selling.

Autoplay previews plays your uploaded videos, without sound, inside the cards as a shopper scrolls past them. It looks alive, and it spends your shoppers' mobile data - leave it off if your videos are long or your shoppers are on slow connections. Pasted YouTube videos never preview; they play when the story is opened.

In the viewer, the arrows and swiping move between stories, and Escape or the close button leaves it. It fills the screen, so upright videos - the tall 9:16 shape a phone records - look best. A wide video still plays, with bars above and below.

Tip: set a cover picture even when the video has one of its own. It is the first thing a shopper sees, and it appears instantly while the video is still loading.

Motion sections

A handful of sections exist to put movement on a page. Each is in Add section, under the group named beside it here.

Image banner (Promotions) - a full-width picture strip, with its own phone picture, a description for screen readers, an optional link, and a choice of running edge to edge or sitting inside the page with rounded corners. An animated GIF plays as it is.

Photo marquee (Content) - up to sixteen photos sliding sideways. One row or two, the second running the other way, at slow, normal or fast speed, with an optional tilt and three heights.

Hero - aurora (Hero) - a hero with soft colour blobs drifting behind your words, in your own brand colours. Add a cut-out picture beside the copy if you have one, and choose soft or vivid. It swaps with the other heroes without losing your wording.

Text reveal (Content, premium) - a big statement whose words ink in one at a time as the shopper scrolls down to it. Set a small line above it, the statement, a button, the size and the alignment.

Stacking cards (Showcase & 3D, premium) - up to five picture-and-text cards that stick to the screen and pile over each other as the page scrolls, each covered card shrinking back behind the next. It works on phones too.

Ticker bar - the scrolling strip of words gains Style - Solid, Outline (hollow letters) or Mixed - and Size, from S to XL.

The premium ones need the Growth or Pro plan. Every effect here follows your store's Motion setting under Style, and holds still for shoppers who have asked their device to reduce motion: Text reveal shows its words already inked, the marquee becomes a plain grid of photos and the aurora stops drifting. Text reveal also shows itself fully inked in older browsers that cannot follow the scroll.

Three themes are built around these sections - Kinetic (general), Reel (fashion) and Spark (kids). Pick one under Settings, then Theme, like any other.

Pre-launch page and store hours

Both live on Settings, then General, under the Content tab.

Coming soon mode replaces your storefront with a pre-launch page: a headline, a message, an optional launch date that shows a live countdown, and an email sign-up box. The page tells you how many people have signed up, so you have a list to email on launch day. Switch it off to open the store.

Store hours shows a banner outside your opening hours - useful when you only pack orders at set times. Set your timezone, the open and close time for each day (or mark a day closed), and the message shoppers see meanwhile. You can also set the banner's background and text colour here - leave them on theme default and the banner follows your theme's own colours.

Tip: the announcement bar is not on this page - it lives in the theme editor. See The announcement bar.

Still need a hand?

If this didn't cover your question, we're happy to help — a human reads every message.

Contact us