back to presentation

OMEGA

how to Configure the Omega theme

Congratulations on your decision for OMEGA. The following installation will last a few minutes only and should be carried out as presented.

Configure the Omega theme

Once the theme has been installed it can be found in Backend-> Theme Manager. To configure the Omega theme you need to choose Omega theme and to click on the Configure theme button in the bottom right corner of the screen:

Hello World!

A window that allows you to configure the theme will be open. In the Theme Media window you can load an image for each of the banners given.

Hello World!

In order to configure the slider on the Homepage you need to click on the Header slider & Clime tab:

Hello World!

Color Configuration

In order to get the best visual experience while using the theme you need to configure the colours first. You can do that by hitting the Colour configuration button (Step 1).Next you hit the General button (Step 2) and then the Configuration set button (Step 3) in the bottom left corner of the window. Choose the Omega configuration set (Step 4) from the drop down menu.

Once you have done it click the Load button (Step 5) and then hit Save 9Step 6) to finish the configuration.

Hello World!

Header Variations

Header Clime design gives you five options on how the text layout in the banner will be shown:

Variant 1

Hello World!

Variant 2

Hello World!

Variant 3

Hello World!

Variant 4

Hello World!

Variant 5

Hello World!

To change the text in the banner you need to set the text you prefer in the following snippets in the backend:

IndexHeroSectionHeadingFirstLine

IndexHeroSectionHeadingSecondLine

IndexHeroSectionParagraph

IndexHeroSectionButtonLink

IndexHeroSectionButtonText

Slider items - here you can load up to four different images in the slider

Autoplay - if checked the images will be slid automatically without the use of the arrows

Arrows - if checked the arrows appear on the left and right of the banner

Mouse dragging - enables the user to drag the images in the slider using the mouse

Pause autoplay on hover - if the cursor is aimed at the image the autoplay func is paused in order to give enough time to the user to read the information in the banner.

Slider or Hero image - you can choose to see the image set in the Hero image upload section or the image slider itself.

Show scrolling mouse in the header - if checked a mouse icon is shown to let the user scroll down the page to see the rest of the content on the page.

Hello World!

Autoplay speed - to change the slider’s transition speed.

Dots- show the number of images in the slider if checked.

Hello World!

Infinite loop sliding- slides the images from the beginning after the last one is shown

Enable swiping- enables the user to swipe the images on touch screen

Applying header overlay

Hello World!

Fancy slider badge- The Fancy slider is a Shopping world element that promotes productsof your personal choice. Here you can define which of the four given labels will be set to promote these specific articles.

Hello World!

Frontend visualization

Hello World!

Social Media- In order to link the shop to your social media just put the link in the preset field:

Hello World!

The social media icon will be visible in the frontend footer of the shop:

Hello World!

Settings for Shopping World elements

Category teasers

Hello World!

Layout configuration:To get the above visualization you need to configure the Elements settings for each of the shopping world elements

Hello World!

Text Element → open the HTML tag h2 className=&quotstyled-heading&quotCATEGORIES h2

Hello World!

Category teaser → css class → category-teaser-item

Hello World!

Category mosaic teaser:

To get the above visualization you need to configure the Elements settings for each of the shopping world elements

Hello World!

Layout configuration:

Hello World!

Category teaser → css class → category-mosaic-item

Hello World!

In order to move the text to the left or to the right of the element you need to add an extra class to the CSS class: left-text or right-text. If you want a dark transparent overlay on your images you need to add an extra class to the CSS class: overlay

Sliders

Some of our products’ Product slider:

Hello World!

Layout configuration

Hello World!

‘New arrivals’ Product slider:

Hello World!

Fancy slider

Hello World!

Layout configuration

Hello World!

CSS class needs to be added: fancy-slider-wrapper

Brand slider

Hello World!

Layout configuration

Hello World!