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:
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.
In order to configure the slider on the Homepage you need to click on the Header slider & Clime tab:
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.
Header Variations
Header Clime design gives you five options on how the text layout in the banner will be shown:
Variant 1
Variant 2
Variant 3
Variant 4
Variant 5
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.
Autoplay speed - to change the slider’s transition speed.
Dots- show the number of images in the slider if checked.
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
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.
Frontend visualization
Social Media- In order to link the shop to your social media just put the link in the preset field:
The social media icon will be visible in the frontend footer of the shop:
Settings for Shopping World elements
Layout configuration:To get the above visualization you need to configure the Elements settings for each of the shopping world elements
Text Element → open the HTML tag h2 className="styled-heading"CATEGORIES h2
Category teaser → css class → category-teaser-item
Layout configuration:
Category teaser → css class → category-mosaic-item
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:
Layout configuration
‘New arrivals’ Product slider:
Fancy slider
Layout configuration
CSS class needs to be added: fancy-slider-wrapper
Brand slider
Layout configuration
