How to add a banner in webshop

In your webshop you can add banners. If you add more than one banner on the same page in the webshop, these will be displayed in an carousel.

In the webshop, a banner is defined as an article. To create a banner, you must therefore go to Article search and create a new article. When a new article is created there are certain fields that must be filled in to make it appear as a banner:

• Published for
• Description
• Banner
• File Explorer
• (possibly priority)

(click on the picture to make it bigger)

In Published for you can choose who the banner should be available for. If this is set to All, everyone who visits your website will see it. If you have banners that should be visible in certain periods, it may be good to set this to none in the periods that are not relevant. In that way, you can take care of banners that will be used again at another time. An example of this could be if you want to show specific photos in the summer, and other photos in the winter.

In the Description, you fill in an informative text that says something about what the article is about. This is to make it easier to have an overview of all your articles.

On the option called Banner, you choose where the banner should be located. Front is the front page of the webshop. In order for the article to be displayed as a banner somewhere, this field must be set to something. If none of the options is unchecked, it will not appear on any page, and then the article will not be turned into a banner.

In the File explorer, you upload the image that you want to display. Remember to check the box for "web-active".

Note! If you want to display several banners on, for example, the front page of the webshop, a separate banner article must be created for each image.

Priority is often used if you have several images in the carousel, and want to have a certain order in the presentation of these. Then you prioritize the articles to display in preferred order. Remember that 0 comes before 1 in Quick3.

When all these fields have been filled in, remember to save the article. In the examples below, you see a proposal for how a banner might look:

How the banner is set up in Quick3:

(Click on the picture to make it bigger)

How the banner looks in the webshop:

Display

There are two display options for banners in the webshpå. One is that the images are stretched to the full width of the website), or that it follows the same width as the other content of the page.

Example:

If you want it to appear inline, contained with all other content, you must enter the code "Q3W_Inline" in the field for flags on the image in the file explorer.

Text and link on banner

If the banner is to contain text, this should be included in the article, and not be part of the motive in the banner. This is because of responsiveness and universal design. Texts can be entered in the title (1) and the main text field (2). If you have added a link address in the banner article, this link will appear as a button if you enter a text in extract (3).

TIP: In order for the image in the carousel at the front page to appear as you wish, the image should be scaled in 4:1 size. For banners that uses the flag Q3W_Inline, is the accurate scaling 1200:300px.