How to personalise banners that appear on your store’s homepage

How to personalise banners that appear on your store's homepage - BigBuy Academy | Documentación y ayuda técnica gratuita para clientes de BigBuy
Skip to content Skip to sidebar Skip to footer

How to personalise banners that appear on your store’s homepage

In this article we’ll fully explain how to edit the banners that appear alongside the slider on the homepage of your online ecommerce store.

To modify the homepage banners, follow these steps:

Valencia

Valencia-banners

Valencia-banners-2

1- Enter Modules (1) >Installed modules (2)  and write “builder” (3) in the search window. Click “Configure” (4).

2- Once you have accessed the module, you need to select the “default” profile within the “LAYOUT PROFILES” button, that way you can make changes to the page structure.

NOTE: Keep in mind that if you have already selected the “default” profile, if you come out of the Page Builder module and then go back in, it will load up automatically.

3- Click on Configure (1) in thee Banner section.

4- In the Widget form section, select an image (1) for each language in which you wish to modify the banners (2). Click “Save” (3).

5- Lastly, click on “Save layout profile” (1).

 

Ibiza

1. First, go to the section Modules > Modules and Services. Use the search function to find the “OWL Static Block” module. Click on Configure.

gallery-ibiza

2. You will then see three blocks. Click Edit on the first one, “Top Banner”.

gallery-ibiza-2

3. An editor will open showing the images that form this gallery. Let’s see how to edit them.

gallery-ibiza-3

Let’s say, for example, that you want to edit the first image. It is currently a banner redirecting to the Home | Garden section. In this example, we will replace it with a banner that redirects to the technology section.

  • Go to the editor. Place the cursor in front of the image that you want to edit, as if you wanted to write. Click the Insert/Edit image button.

gallery-ibiza-4

  • A window will open with various fields. Click on the eye icon situated to the right of the “Source” field. Select “Upload” and choose the image you want to use. The dimensions must be 410 x 575 px. Click OK.

gallery-ibiza-5

  • Once you have added the new banner, you need to link it to the desired URL. To do this, click on the new image, then click on the Insert/Edit link button.

gallery-ibiza-6

A window will open. Copy the desired URL into the “Source”, then click OK.

Once the new image has been added, delete the old one!
  • Finally, you need to change the text that appears below the banner and edit the URL it redirects to. In this case, the text to be changed is “Home | Garden”. You can do this from the editor, but sometimes it is easier to change it from the HTML code (to ensure that the link is correctly inserted).
  • If you want to do it from the editor, change the text and then click on the Insert/Edit link button again and enter the desired URL.
  • If you prefer to do it from the HTML code, click on the Source Code button.

 

You will see a window similar to the following one:

gallery-ibiza-8

Before making changes to the code, we recommend that you copy it into a notebook file to be able to place it back again if any unwanted change occurs.

Search for the text you want to change in the code, in this case “Home | Garden” (marked in red below). Change it for the text you want to display, being careful not to touch any <> symbol. If you delete any, click Cancel and start again.

Once you have changed the text, you need to edit the URL it redirects to. You will see that some code appears before the text <a class=”toge-link” href=”https://ibiza.dropshippershop.com/es/443-hogar-jardin”>. You need to replace this link (marked in blue) with the new link. The link must be between quotation marks. Take care to not delete these quotation marks when inserting the new URL.


<div class=”owl-top-banner”>
<ul class=”row”>
<li class=”col-sm-4″>
<div class=”bn-top-content”><a href=”https://ibiza.dropshippershop.com/es/443-hogar-jardin”><img src=”https://ibiza.dropshippershop.com/modules/owlcustomhtml/views/img/cms/ibiza_hogar_jardin_portrait_es.jpg” alt=”” /> </a><a class=”toge-link” href=”https://ibiza.dropshippershop.com/es/443-hogar-jardin“>Home | Garden</a></div>
</li>
<li class=”col-sm-4″>
<div class=”bn-top-content”><a href=”https://ibiza.dropshippershop.com/es/482-informatica-electronica”><img src=”https://ibiza.dropshippershop.com/modules/owlcustomhtml/views/img/cms/ibiza_informatica_electronica_portrait_es.jpg” alt=”” /> </a><a class=”toge-link” href=”https://ibiza.dropshippershop.com/es/482-informatica-electronica”>Informática | Electrónica</a></div>
</li>
<li class=”col-sm-4″>
<div class=”bn-top-content”><a href=”https://ibiza.dropshippershop.com/es/454-perfumeria-cosmetica”><img src=”https://ibiza.dropshippershop.com/modules/owlcustomhtml/views/img/cms/ibiza_perfumeria_cosmetica_portrait_es.jpg” alt=”” /> </a><a class=”toge-link” href=”https://ibiza.dropshippershop.com/es/454-perfumeria-cosmetica”>Perfumería | Cosmética</a></div>
</li>
</ul>
</div>

Once you have made these changes, click OK. You will see these changes reflected in the Editor.

To finish, click on “Save”.