Skip to content
  1. Docs
  2. Home page & design
  3. Slideshow +

Slideshow +

How to set up Slideshow + in the Trust theme for OpenCart 3: slide sets, "Text + image" and "Ready-made banner" styles, mini banners, sizes, adding the module to a layout.

5 min read

Slideshow + is the main banner of the first screen: a large slider with up to two mini banners next to it and a column of catalogue categories. Slides come in two styles: with their own text, price and button, or a ready-made banner filling the whole slide.

Slider, mini banners and catalogue menu on the home page

The setup has two parts: a slide set (what to show) and a module (how and where to show it).

Slide set

Open Octemplates → Banners → SlideShow +. This is where slide and mini banner sets are stored. One set can be shown in several modules.

Slide sets list

Click "Add" to create a set, or the pencil to edit an existing one.

General

  • Slide name (set name) — only you see it: it is used to pick the set in the module settings. 3 to 64 characters.
  • Status — a disabled set isn't shown on the site even if the module is enabled.
  • Slide style — applies to all slides in the set (mini banners are not affected):
    • "Text + image" — title, description, price and button on a coloured background, with a product image on the right. Colours are set per slide.
    • "Ready-made banner" — a full-slide image with no text on top. Needs two versions: for desktop and for phones.

"Text + image" slides

On the "Slides" tab, on the left is the slide list with thumbnails, on the right the editor of the selected slide. The "Add slide" button creates a new one.

Text + image slide editor

Slide content

Content is filled in separately for each language — switch languages with the tabs above the fields.

FieldDescription
TitleThe large slide heading, 2 to 64 characters. Required.
DescriptionOne or two lines under the title. HTML is allowed.
PriceTwo fields: a prefix (for example "from") and the price itself. The large price sits next to the button. Leave empty if no price is needed.
Button textIn this style only the button is clickable: without its text the slide leads nowhere.
LinkWhere the button leads: a product, category or promotion page.
Product imageShown to the right of the text. PNG or WebP with a transparent background works best. A slide without an image is not shown.

Colours

Match the colours to the image so the text stays readable:

  • Slide background, Title and price, Description text;
  • Button — background and text in the normal and hover states. Custom button colours work only when both background and text are set (separately for each state). Otherwise the theme's standard button is shown.

At the bottom of the editor are the sort order (lower number comes first) and the "Remove slide" button. Removal takes effect after saving.

"Ready-made banner" slides

In this style a slide consists only of a link and two images: "Desktop" (768 px and wider) and "Image for mobiles" (up to 767 px, a portrait or square image works best). A click anywhere on the banner follows the link.

Ready-made banner slide editor

Important. In the "Ready-made banner" style both images are required for every slide and every language. Otherwise the set will not be saved. If a language has no image, the slide is not shown in that language.

The size of ready-made banners is set in the module settings (see below).

Mini banners

The "Mini banners" tab holds small banners next to the slider. The Trust theme shows the first two by sort order, the rest are not displayed. Without mini banners the slider takes the full width. They are optional.

Mini banner editor

  • Title, Subtitle and Price (with a prefix) — separate for each language;
  • Link — the whole mini banner is clickable;
  • Image — a square picture, 200×200 px on the site. A mini banner without an image is not shown;
  • Background color and Text color — for all the banner text.

The module on the site

For a set to appear on the site, it has to be connected through a module. Open Extensions → Extensions → Modules, find "Octemplates - Slideshow +" and add a new module (or edit an existing one).

Slideshow + module settings

General

  • Module name — only you see it, it is how the module is called in the modules list and layouts.
  • Slide set — pick the set created above. Next to it is a "Manage slideshows" link.
  • Status — a disabled module isn't shown on the site.

Image size

  • Width × height — in the "Text + image" style the product image is scaled to this size. For ready-made banners everything depends on the setting below. The same size is used for preloading.
  • Ready-made banner size — only for "Ready-made banner" slides:
    • "Module size" — the banner is cropped to the width and height above; all slides are the same size;
    • "Original size" — the banner is shown at the size of the uploaded file. Handy if banners are already made for the layout.

Behaviour

OptionWhat it does
AutoplaySlides switch on their own.
Arrows"Back" and "forward" buttons.
Counter and progressThe slide number ("01 — 05") and a progress bar.
Catalogue menu alongsideA column with catalogue categories is shown to the left of the slider. For the module at the top of the home page.
PreloadThe browser loads the first slide ahead of the rest. Enable it only for the first-screen slider: the page then appears faster.

Add the module to a layout

After saving, go to Design → Layouts → Home and add the created module to the position you want. Without this step the slider will not appear on the site.

Tip. For the first-screen slider on the home page enable "Catalogue menu alongside" and "Preload": the page looks complete and displays faster.