The logo, the colors, the fonts, the banner and the way products look. It is all edited live on your own store, with the editor.
Step by step
- Tap the EDIT STORE button at the top right of the panel. Your store opens in a new tab with the editor panel on top of it.
- Pick the group at the top of the panel: Style for the visual identity, Content for the banner and the texts, Screens for the product card and the rest of the screens.
- Edit. The change shows in the store instantly, still unpublished.
- Tap Save. Only then do your buyers see it.
Style: the visual identity
- Ready-made looks: complete combinations built by designers. Pick one and the whole store changes at once. There are 39, among them Clásico, Minimal, Editorial, Bento, Lujo, Brutalist, Y2K, Eco, Magazine, Quiet luxury, Hype, Viral, Technical, Apothecary, Cottagecore, Resale, Academia, Coastal, Chrome, Noir, Coquette, Boho, Art déco, Solarpunk, Storyteller, Boutique, Marketplace, Drop shop, Atelier, Pop-up, Mayorista, Café, Galería, Distribuidor, Reposición, Club privado, Lookbook, Fiesta and Outlet.
- Palette & fonts: your store's colors and letterforms, adjustable one by one, with a font finder by style.
- Shape: the corner rounding on buttons, cards and fields across the whole store.
The fastest route is to start from a Ready-made look and then adjust the palette.
The logo, the name, the slogan, the social links and the footer links live separately, in Content → Brand.
The banner: what size to use
The banner is a block, not a fixed screen. You add it in Content → Pages → Home, choosing the Banner / slider block.
There is no required size. Instead of loose pixels, you pick a named shape and the store handles the rest:
- Height, for desktop: Adapt to image, Compact, Medium, Tall, 21:9 (cinematic), 16:9 (wide), 3:1 (strip), 3:2, 4:3 or 1:1 (square). It comes set to Medium.
- Height (mobile): Adapt to image, Compact, Medium, Tall, 16:9 (wide), 1:1 (square), 4:5 (portrait), 3:4 (portrait) or 9:16 (story). Medium by default.
Adapt to image takes the height from the first image in the carousel: it neither crops nor leaves bands. It is the option for when you do not want to fight with sizes.
The two heights are independent: the shape you pick for desktop does not govern mobile.
What proportion to export the images at
When you upload a slide's image, the crop tool opens already framed to the banner's shape: roughly 12:5 on desktop and 4:5 on mobile. Those are the reference proportions if you want to prepare the files in advance. You can still pick a different proportion in the crop.
Each slide accepts a separate Image/video (desktop) and Image/video (mobile).
When the photo is cut off or bands appear
The control is Image fit:
- Cover: the image covers the whole space and the excess is cropped.
- Contain: the whole photo is visible and the leftover frame is filled with a blur of the same image. You can also choose to fill it with a solid color.
On top of that, each slide has Image focus, which decides which part is kept when there is cropping.
Carousel speed and behaviour
- Autoplay: on by default.
- Interval: 3 to 10 seconds, 5 by default. It applies to the whole carousel, not to each banner: you cannot make one slide last longer than the others.
- Transition: slide or fade.
- Progress bar, Arrows and Dots.
Scheduling a banner by date
Each slide has Show from and Hide after. You load the dates and the banner comes and goes on its own. It also has a visibility switch to turn it off by hand, and Slide link so it leads somewhere.
Over the image you can put an Eyebrow, Title, Subheading and up to two buttons with their links, plus the text color and an opacity layer so it reads against the photo.
How many products per row
In the Product grid block, inside the page where you placed it:
- Columns: 2 to 5. 4 by default.
- Columns (mobile): 1 to 3. 2 by default.
- The gap between products runs from 8 to 48 px, 24 by default.
The same block has Show filters and Show sorting, which appear only when the block shows the whole catalog.
If you want an irregular Pinterest-style mosaic instead of an even grid, use the Product wall block.
When products come out different sizes
The cause is the proportion of the photos. Go to Screens → Card and find Image aspect, with these options:
- Natural (no crop): every photo keeps its own shape, so the cards come out uneven.
- Square, 3:4, 4:5, 2:3 or 16:9: every photo is cropped to that same shape and the cards come out identical.
Choosing any proportion other than Natural is what evens out the grid.
On that same screen you configure the card border, the hover effect, the second photo on hover, and the size, weight and alignment of the name and the price. At the very top you choose the card variant, which changes its whole structure.
The header announcement bar
The text lives in Content → Brand, field Announcement bar. It supports two useful things:
- Several rotating messages, separated with a vertical bar:
Free shipping | New collection. The bar cycles through them. - One link per message, with the
=>suffix:Free shipping => /envios.
The strip's look is configured in Screens → Header, and depends on the variant you have selected:
- All of them have the Show announcement switch.
- The Standard variant adds Announcement color, the strip's background.
- The Brutalist variant also adds Text color, the border thickness and the monospaced font.
- The Editorial variant adds a Prefix (Issue) with its color.
- The Luxury variant adds the Gold shade.
Category images and banners
Each category's images and banners are loaded from the panel, not from the editor: in the side menu, Catalog → Categories, you open the category and there you have Title Image, Background Image and the Promotional Banner block with desktop banner, mobile banner, link, margin and rounding.
To build visual entry points to your categories on the home page, use the Categories or Cinematic categories blocks.
Testing before publishing
- Above the panel there are three buttons with monitor, tablet and phone icons: they change the preview size without leaving the editor.
- Below the Save button there is a row with Anonymous and Customer: use it to look at your store as a visitor without an account sees it, or as a customer with their price list.
- Undo and Redo are in the panel. And every save is kept in the Change history, so if something breaks you go back to an earlier version with one click.
What you cannot do
There is no pop-up or modal when someone enters the store. The feature does not exist. The closest thing is putting a Statement or Promo banner block at the very top of the home page, or using the header announcement bar.
If you cannot find it
- You cannot get into the editor: you have to be a business administrator or a manager with the design permission. If you are not, the store says "You do not have permission to edit the store". It is enabled in Configuration → Manager, Store permission group.
- You are looking for a Banner section and it is not there: the banner is a home page block. You add it in Content → Pages → Home.
- You do not see the announcement bar: in the Minimal and Cinematic header variants the Show announcement switch ships off. Turn it on in Screens → Header.
- The announcement bar does not appear in any variant: the Brand Announcement bar field is empty. With no text the strip is not drawn.
- You are looking for the "Page" group: it is called Screens.
- The editor warns the design is close to the size limit: shorten texts or remove blocks before saving.