eCommerce

Changing Banner using VTex Admin Panel


What is a banner?

  • It’s a focus point where your users will spend their first few seconds when they visit your site.

  • Especially if it is the first thing that you see when you visit a new site.

What is the banners’ purpose?

  • On e-Commerce, the main purposes is to let your users know about new arrivals, promotions, trending products,

  • make your business more appealing to the persona viewing your site

What a banner should include? / Tips to getting Banners right

  • there should be at least a preview of what should be expected throughout your site. Such as images, Site’s name, a recognizable shape (which has to do with the site’s logo or something that is consistently throughout your site), etc.

  • Make sure that the text that you are displaying in your banner can be well read and captious, so it would make the user take a look at the rest of the site. It only takes a few seconds for a user to know if they want to keep looking through the site. So, make the best of your first impression. The following article explains how to update the home banner from your VTex Store.

The following article explains how to update the home banner from your VTex Store.
The first step is to select the E-commerce module
VTex Modules

Then go to settings tab, and under settings tab click con portal.

settings portal link

You will be taken to a different url which will container your domain_name.vtexcommerce.com, and then you will have to click on the portal folder located on the left side of the Page.
Selecting porta folder

After clicking on the Portal folder you will a bunch of other folders and you will have to click on the Websites folder:
Selecting Websites Folder in VTex portal

When you click on websites you will have to click on your site. It should have a blue globe next to it.

Now you will have to click on the / folder and then click on the Home button. Then to the right of the NerdTree you will see panel show up then you will click on the configuration tab and click the pencil on the banner you wish to edit.
Steps to edit banner Vtex

After clicking on the edit button(Pencil) a modal will popup looking like the this:

Then click on the edit button again(pencil) to edit the banner, and you will get another panel that will popup. You are going to have to click on adicionar arquivo to add a file.

After clicking on Adding file. Now you will have to click on the Locate button
Locate file to upload to VTEX banner

Then select the image you want as a banner. (Heads up, make sure the image size does not surpass 3.9 MB) Click salvar arquivo and the file will upload.
Saving image to upload vtex

After saving the image your image this panel will close and you will see the previous one. Scroll down to the bottom and click on Alterar na Lista de Conteúdo.
Save changes Vtex banner

After doing so for this last step you will see the first panel that you popped up and click on Salvar Conteúdo:

Save content vTex Banner

And you are done. This is how you change the banner images in the Home page using VTex.

Beginner
De Código, Café y Cervezas 09 – ¡Hola Mundo!
Javascript
De Código, Café y Cervezas 05 – ReactJS + AngularJS (Parte 3)
Development
What is VTEX platform and why should you migrate your ecommerce to it?