Customize the store design

The logo, the colors, the fonts, the banners and the way products look in the grid. It is all configured from the Store design section of the side menu.

Step by step

1. In the side menu, find the Store design section. It is not one screen: it is eight separate screens, each with its own menu item.
2. Open the screen matching what you want to change. The list is below.
3. Edit. Almost every screen has a preview on the right that updates as you work.
4. Tap Save at the bottom of the screen.
5. Reload your store to see the change.

The eight Store design screens

Banners: what size to use

There is no required size. The store accepts any resolution and adapts to the screen. What matters is that every banner in the carousel shares the same proportion, or that you fix a height. The editor itself warns you when it detects banners of different shapes: "The banners have different proportions. To avoid display problems, use images with the same format or set a fixed height for the slider".

Go to Store design → Banners. Above the preview there are two buttons, Desktop and Mobile. The height field below changes depending on which one is selected:

• Desktop height: the carousel height on a large screen. It ranges from 0 to 800 px. The field suggests 600.
• Mobile height: the carousel height on phones. It ranges from 0 to 800 px. The field suggests 400.

Understanding what each case does saves you half the trouble:

• Field empty: the banner is shown full width and the height comes from the image. Nothing is cropped, but every slide is a different size and the carousel jumps in height between them.
• Field with a number: the banner is exactly that tall and the image is cropped from the center to fill it. Every slide comes out identical, but if the image has a different proportion, a piece of it is lost.

So once you fix the height it is worth exporting every image at that same proportion: they then fill the space without losing anything.

If you leave the mobile height empty, phones use the desktop one. A height meant for a wide screen, applied to a narrow phone, crops enormously. If you fix a height, fix both.

A different image for mobile

Each slide can have its own mobile image alongside the desktop one. On the slide's row, in the 📱 Mobile block, tap the dotted box that says MOBILE to upload it. If you want to remove it later, there is the Remove mobile image button: the banner goes back to using the desktop image.

This is what solves the "the banner does not look right on mobile" case: a wide desktop image on a narrow phone ends up tiny. With a vertical mobile image it is seen in full.

The editor also warns when they are missing: "Some banners have no mobile image. On phones the desktop image will be shown, which may look different."

What you can upload

• Images and videos, with the Add image/video button.
• YouTube videos, with the Add YouTube video button: you paste the video URL and it comes in as one more slide.

What you can do with each slide

In the Manage Slides list, each row has:

• A Visible / Hidden button to pull a banner out of the store without deleting it.
• Up and down arrows to change the slide order.
• A red button to delete it.
• Destination link: the URL the buyer goes to when they click the banner. Leave it empty and the banner is not clickable.
• Button text: the text of the button shown over the banner. It needs a destination link to appear.
• Content over banner: formatted text on top of the image.

If you are going to use text or a button on top, it is best that the image carries no baked-in text, so they do not overlap.

There is no speed or auto-rotation control for the carousel, and you cannot schedule a banner by date. To pull one out of circulation, use the Hidden button.

A category banner

This is a different banner from the carousel one, and it is loaded on the category record. In the side menu, Catalog → Categories, open the category and scroll down to Promotional Banner:

• Banner: the promotional image or video shown above that category's products. It accepts .mp4 files.
• Banner Mobile: an alternative image for phones.
• Banner Link: where the buyer goes when they click.
• Banner Margen: the space around the banner, in pixels.
• Banner Redondeado: the banner's rounded corners, in pixels.

There is no required size here either. The category also has its own Title Image, which replaces the name text in the header, and its Background Image, which appears behind the products.

Product Grid: how many products per row

In Store design → Product Grid:

• Products on desktop: 1 to 6 products per row. 4 by default.
• Products on mobile: 1 or 2. 2 by default.
• Cell Height: the card height, from 100 to 800 px. The suggested value is 300. If you type a number outside that range, the field clamps it when you leave.
• Margin: the space between products, from 0 to 50 px.

On the right there is a preview with Desktop and Mobile buttons so you can see the result before saving.

On top of that, each category can override that number. In Catalog → Categories, inside the category, the Columns field sets how many products per row that particular category shows. That is what you use when you want one section at 4 across and the rest at 3.

When products come out different sizes

This is the most common complaint after setting the cell height, and cell height alone does not fix it. The cause is how the photo sits inside the card.

Go to Store design → Product Card, section Product Photos, and switch on Fill card with photo. The field's own help explains it: "When active, the photo fills the whole card and the excess is cropped. When inactive, the photo is shown in full and may leave white space above and below."

Switching it on reveals Priority area when cropping, with three options: Top, Center and Bottom. It is the part of the image kept when it gets cropped. For model shots, Top is best so faces are not cut off.

There is a second possible cause: if a product is marked as Highlight on its record, its card takes up twice the space in the grid. That is deliberate, not a configuration error.

Product Card: the three badges

In Store design → Product Card you upload three images. They are images: there is no text or color field for them.

• Top Sales Badge: shown on the best-selling products. It is automatic, not picked product by product. It is drawn at the top right of the card, at a maximum of 50 × 50 pixels.
• New Badge: shown on products you marked as New on the product record. It is drawn at the top left, at a maximum of 50 pixels wide.
• Offer Badge: appears on products with an active offer. It is drawn at the bottom right, on a small white box, at a maximum of 24 pixels tall by 28 wide.

Below the Offer Badge, if the product has offer text loaded, that text is shown in red. That color is fixed in the system and cannot be changed from any settings screen. If you do not want red on the card, the only way out is to leave the product's offer text empty and use only the badge image.

The same screen holds Card Style, with the Without border switch, which removes the card frame and gives it a shadow.

Colors & Background

There are five colors plus one image, grouped into three blocks:

• Header colors: Header Background Color (the top bar's background) and Text Color (that bar's text). This is where you change the page header color.
• Main color and categories: Buttons, banners & badges (the main color, applied to buttons, announcement banners, promotion badges and category headers) and Category text color.
• Background: the store's Background Color and Background Image.

On the right there is a preview of the header and the footer that updates as you pick.

Typography

There are three font selectors:

• Body Text: product names, prices and store texts.
• Headers & Buttons: headings, navigation, buttons and category titles. It also has a Bold switch.
• Descriptions: product descriptions and secondary texts.

Brand

• Logo: the header logo. When you upload it, the system extracts the image's colors and offers them as a palette on the other screens.
• Adapt logo for dark footer: converts the logo to white so it reads against the footer's dark background.
• Favicon: the little icon on the browser tab.

The header announcement bar

This is the strip at the very top, on every page.

The text is NOT edited from Store design. It lives in the side menu, under Configuration → Communication. When you open it, the screen starts with Checkout notice before finalizing purchase selected; you have to click Header announcement, which is the first item in the Store sections list on the left.

The strip has no color of its own. The background is the Buttons, banners & badges color from Colors & Background, and the text turns white on its own, unless that color is white, in which case the text comes out dark gray. If you want to change how the strip looks, that color is the only lever, and changing it also moves the buttons and badges across the whole store.

Things that are not in Store design

• Page under construction: the switch is in Configuration → General, and it is called Page under construction.
• Currency: the Currency selector is in Configuration → General, next to the time zone.
• The Catalogo Clasico, Catalogo Premium, Lookbook, Lista Compacta, Galeria and Catalogo Minimal templates do not change your store's design. They are the templates of the Catalog builder, the downloadable PDF, CSV or Excel catalog you build from Catalog → Catalog builder.

What you cannot do

• There is no pop-up or modal when someone enters the store. The feature does not exist. The real alternatives are the header announcement bar, or putting the notice as the first slide of the carousel.
• You cannot build your own menu in the header. The header tabs are fixed: Points of Sale, How to buy, Who We Are, the custom page, a single custom button, Contact and the social icons. Each one appears only if you loaded its content, and the order cannot be changed. There are no submenus and no categories as tabs either.
• You cannot tag products with text and colors of your choice. The card's only markers are the three image badges described above.

Moving to the new store

VentasxMayor has a second-generation store, built from blocks and edited live on the store itself, with far more design controls than these eight screens.

The rollout is gradual and the VentasxMayor team does the activation. Write to support and we will set it up for you.

It is not activated from the panel and there is no draft you can build in the meantime: the STORE button at the top right only takes you to your current store. Once they activate it, that button changes to EDIT STORE and opens the editor.

If you cannot find it

• You cannot find where to change a color or the header: it is in Store design → Colors & Background, not in Brand or Banners.
• You do not see the Mobile height field: the field changes with the Desktop / Mobile button selected above the preview. Tap Mobile.
• You deleted a banner and it still appears: check whether you marked it as Hidden instead of deleting it, and whether it has a separate mobile image loaded.
• The banner looks different on mobile: it is missing the mobile image, or the slides have different proportions and you did not fix the height.
• You changed the cell height and the cards are still uneven: you still need to switch on Fill card with photo in Product Card.
• You cannot find the Store design section in the menu: check that your user has the design permission. It is enabled in Configuration → Manager, in the Store permission group.