Avena Premium Responsive Prestashop theme


This document covers the installation and use of this theme and reveals answers to common problems and issues - I encourage you to read this document thoroughly if you are experiencing any difficulties. You can find always fresh version of this documentation by this URL

To install this theme you must have a working version of Prestashop already installed. For information in regard to installing the Prestashop platform, please see the Prestashop Wiki - http://doc.prestashop.com/display/PS15/Getting+Started

Requirements

PHP configuration:

Optional PHP extensions:

Permissions

If you don't know how to check these requirements, ask your hosting provider.

Video installation tutorial

Look at this video of installation process:

Automatic theme installation

To install this theme automatically, please use native “Import/export a theme” module. Do the following steps:

  1. Extract downloaded archive.
  2. Login to your back-office and go to Modules page.
  3. Search "Import/export a theme" module through the search bar. If you don't have this module in your back office, you should install it
  4. Go to the configure of module "Import/export a theme".
  5. Select archive from extracted folder "themes", and click “Next” button.
  6. On this step you will get information about installed theme. Click “Next” button.
  7. On this step you will get information about theme installation status. Please mark selected items as on the screenshot and click “Next” button
  8. Next step will inform you about modules installation status and images settings update. Click “Finish” button
  9. Go to "Preferences" → "Images". Click to "Regenerate thumbnails" button, and wait till it’s done.
Install "Import/export a theme" module
  1. download latest version of theme installator module from addons marketplace
  2. Login to your back-office and go to Modules page
  3. Click "Add new module" button
  4. Select downloaded from addons module and click to "Upload this module" button
  5. Install uploaded module

Congratulations! You have installed your new theme! To check it out, go to the front- end of your online shop and take a look at it!

Manual installation of the template

If you want to install this theme manually do the following steps:

  1. Download and extract it locally.
  2. Upload the entire “avena” to the “/themes” directory on your server.
  3. Login to your back-office and go to “Preferences” → “Themes”.
  4. Click to "Add new" button
  5. Type the name of the theme - "Avena", and the name of the theme's directory - "avena"
  6. Click to "Save" button
  7. Now select "Avena" theme in the "Theme appearance" section below
  8. Click to "Save" button
  9. Upload the “/modules” folder content to the “/modules” directory on your server.
  10. Install each uploaded modules in back office. How to work with prestashop modules please read here http://doc.prestashop.com/display/PS15/Managing+Modules

Congratulations! You have installed your new theme! To check it out go to the front-end of your online shop and take a look at it!

You can choose the type of product images that will suit your products the best. Images can be vertical rectangular (a form well suited for clothing), square (the best for shoes, accessories, electronics, etc.) or horizontal rectangular (furniture, auto, etc.).

By default Avena theme has the following proportions of product images 0.77:1. We advise you to set the rectangular image dimensions according to the following screenshot:

If you decide to use square (with proportions 1:1) images set following dimensions:


For horizontal rectangular images with proportions 2:1 use following dimensions:


Please notice that "small_default" type is required for back office images, so it should exist as well.


Settings Panel on the front page — this option displays "theme settings" panel on the front page. This panel we use for demonstration purpose, but you can allow your customers to change the style of your shop as they like. All changes in the front page settings panel are stored in cookies, which allows each customer to see his own style. The button "Reset" in the bottom of panel will reset all styles to default and clear all stored cookies.

Responsive mode — allows to change the layout of your shop depending on the size of screen. You can disable this option if mobile web customers are not your target.

Page width — defines the view of your shop. Fullwidth mode allows you to create homepage with fullwidth sliders (BxSlider and awShowcase sliders support fullwidth mode). Boxed mode display your shop with fixed width - 1000px.

Page layout — allows to determine page’s layout. If you wish you can place a column in the right or left position of a page.

Scroll to Top — allows you to quickly jump back to the top of any page! Once you scroll far enough down on a page, the button will appear in the bottom right corner. Click it, and you will be taken to the very top in no time!

Stylized tooltips — allows you to style native browser tooltips easily.

Map at the Contact Page — shows a map with pointer to your address. To change address to yours just type it in the field.

Text in the footer section — put your text to the footer, for example copyright. You can use HTML tags in that field.


Background color — defines the background color of your shop.

Background image. You can add your images as background. Image can be showed in center, on the right, on the left, and repeated horizontally, vertically or in both dimensions.

Patterns. Select one of predefined patterns. You can use it along with the background color, in this case you will get overlay effect.


Logo type. You can display your logo as a text or as an image. If you already have your logo, just upload it. Or you can generate your logo directly in the sections below.

Logo options. Type the name of your shop, choose a color, font-family, font-size and line-height.

Slogan options. The same parameters for slogan.

Logo position. You can manage the position of your new logo by clicking to the arrows.


In this section you can configure the view of theme buttons


Headings. Change the font and colors of heading.

Text. Change the font and colors of normal text.

Links. Change the color of links.

Theme Color. Avena has three basic colors. You can change them in this section.

The colors or fonts of some elements can be overridden. For example, if you change the color of heading in "Heading" section and then change the "Color 2" you will get in the end "Color 2" for your heading.


Homepage Column. By default the column on homepage is disabled, but you can enable it if you need.

This section allows you to configure the modules on your homepage. Just click to "show" button to display that module. Each module has a button "configure" to go to the module settings.


Listing View. You can specify the default view of product listing (List of grid). This option can be overridden by buttons on category page.

Product Image Size. If you choose "grid" view you can also select the type of images (Small or big). Small images will be shown as four images in a row. Big images will be shown as three images in a row.


Product Image Appearance. Avena offers two types of carousels on product page. Just choose what you like more.

Product Video. You can disable video section if you don't use it. To add or change the video open the product settings "Catalog" > "Products" > "Edit (Your Product)" and find the tab "Avena theme settings".

Custom Tab. You can disable additional custom tab if you don't use it. You can add any text or images to a custom tab.

Maximize Product Image. This button allows you to maximize product image directly on product page with smooth effect. You can disable this button and use default prestashop "zoom" function.


Add your custom css into this textarea.


This section defines email settings. Just fill all the fields you need and all settings will appear in the emails that your customers receive. In the very bottom you can find the button "Fix it". You can use it, for example, after the update of your prestashop to the latest version, or if you have some problems with emails (broken images, no confirmation emails, etc...).


Fill your social account information. You can show icons in the footer and use these accounts in the email templates.


Here you can manage your "Coming Soon" page. Select a time when your shop will be open. Write a message what you want your customers read.
Use HTML markup to design your message. "H2" tag make the text big and bold. "STRONG" tab make the text with yellow background. "SPAN" tag make the text smaller.
Coming soon page have a footer where you can see three columns: About Us, Facebook and Google Map.
- You can choose CMS page to show it in About Us column.
- You need to have Facebook module installed and enabled to see it in Facebook column.
- You can define in the "General Settings" the place on the map in column.

The list of modules:

awShowcase Slider

awShowcase Prestashop slider is a great module with unconventional possibilities to show point of interest at the slide. You can add a point in one click and assign a product or a text. So you can describe details of each slide and quickly attract customers to selected products.

You can also use video for the slide, just enable video mode in the slide settings and you will get a field for youtube video code.

SCRIPT: Module animation based on BxSlider with some modifications.
HOOK: Default hook of this module is "Top_slider", but it can also be hooked to the "DisplayTop (Top of Page)" hook.

Here is the process of adding points of interests:



This module allows you to display three advertising banners on your homepage. You can look at slider settings below:

Banners Carousel module has an option to show your images as full width slider. For that you need to disable "Carousel View" option.
Recommended image width in "Carousel" mode is 440px. For "Slider" mode the width is 960px.

SCRIPT: Module animation in "Carousel" mode based on BxSlider. In "Slider" mode animation realized with Nivo Slider.
HOOK: Default hook of this module is "top_carousel", but it can also be hooked to the "DisplayTop (Top of Page)" hook.



This module displays your bestseller products as carousel on the subpages (all pages except homepage).

SCRIPT:Module animation based on Flexisel.
HOOK: Default hook of this module is "LeftColumn" but it can also be hooked to the "RightColunm"



BxSlider

This module allows you to create a slideshow in boxed layout and fullwidth as well. The width of slider is always 100% of container width. You can look at slider settings below:

Banners Carousel module has an option to show your images as normal slider. For that you need to disable "Carousel View" option.
Recommended image width for fullwidth mode is 1920px what ensures high quality of slide images. If you want to use it in boxed mode, recommended width is 960px.

Here is a screenshot of add new slide form:


You can also use youtube video as one of your slides. Just put the code of your video to the video field.

SCRIPT: Module animation based on BxSlider.
HOOK: Default hook of this module is "Top_slider", but it can also be hooked to the "DisplayTop (Top of Page)" hook.



This module allows you to create custom links and display them in the header. Module already has four predefined links with dropdown function.


  • Watch List - displays five latest products you watched as dropdown list
  • My Favorites - displays your favorite products as dropdown list
  • My Wishlist - displays your wishlist products as dropdown list
  • My Account, has no dropdown option. Just a link to your account page
HOOK: Default hook of this module is "DisplayTop (Top of Page)".



Facebook Like Box

Display your facebook fans in the footer section. Just put your account name.


HOOK: Default hook of this module is "footer", but it can also be hooked into the "RightColumn" and "LeftColumn" hooks.



Flex Menu

Flex Menu allows you to create unique submenu for each menu item. You can look at demonstration video:

You can add advertising images to promote some products or category. Show manufacturers images to simplify select for your customers. Select and show products in different sections to promote them. Add custom links and show theme in any section.

HOOK: Default hook of this module is "menu".



Isotope Filter

This module allows you to show New/Special/Featured/Bestsellers in one place and switch between them. You can add products to module section automatically. You only need to put the number of products you want to see at your frontpage.


Or you can manually pick a products.


Modules will automatically determine whether the product is "new", "featured", "special" or "bestsellers" and separate them by sections. If you set the number to 5 (for example) the module will take the last 5 products of each type (new/featured/special/bestsellers) and in total you should get 20 products. But if some type doesn't has 5 products, you will get lesser number

SCRIPT: Module animation based on Isotope.
HOOK: Default hook of this module is "Top_carousel", but it can also be hooked into the "DisplayTop (Top of Page)".



Manufacturers Carousel

Display carousel of manufacturers images. The quantity you can specify in the settings.

SCRIPT: Module animation based on Flexisel.
HOOK: Default hook of this module is "Top_carousel", but also can be hooked into the "DisplayTop (Top of Page)".



Product carousel allows you to show featured, special, bestsellers or new products as carousel. If you select more than one product type you shall get carousels in tabs. You also can specify which tab should appear first.

To make your carousels "lighter", you can disable "hover effect" which load additional product images.

SCRIPT: Module animation based on Flexisel.
HOOK: Default hook of this module is "Main_content", but it can also be hooked into the "DisplayHome (Homepage content)".



This is the same carousel module as "Product Carousel with Tabs", but specified to display only one type of products.

SCRIPT: Module animation based on Flexisel.
HOOK: Default hook of this module is "Main_content", but it can also be hooked into the "DisplayHome (Homepage content)".



Sequence Slider

This module allows you to animate each slide layer. It has powerful customization capabilities. Just look at slider demo and you will understand what kind of animations available for you, and all of these you can create in the back office.

Images Settings

Main image will be used as background for the slides composition. You can upload additional images. Each image has following settings:

  • Position before showing. This is the position of an image regarding the slider viewport before the slide will be shown.
  • Position on showing. This is a position of image regarding the slider viewport when the slide will be shown.
  • Position after showing. This is a position of image regarding the slider viewport after the slide will be shown.

- "top", "left" are the values in the percentage. For example left:30% means the position of image will be on the left on 30% of viewport width.
- "duration" is a duration of image animation from one position to another.
- "rotation" is a rotation of image in the current position.
- "opacity" is a opacity value in percentage from 0 to 100.
- "delay" is a delay in seconds before the image animation will start.

 

Text Settings

You have an opportunity to use additional style of your text by adding html tags. For example <h4>your title</h4> will show the title with dark background.
You can add the width of text container to manage the text animation.
All options to configure text position before/on/after works the same as for images.

SCRIPT: Module animation based on Sequencejs.
HOOK: Default hook of this module is "Main_content", but it can also be hooked into the "DisplayHome (Homepage content)".



Social Login

LoginRadius is a company that offers social login through popular hosts such as Facebook, Twitter, Google and over 15 more!
Use following tutorial to configure your social networks https://www.loginradius.com/loginradius/how-it-works



Show your special products in carousel on the subpages like category page, etc...



Twitter Block

This module displays your latest tweets from your twitter account. You need to get Twitter API keys and put them to necessary fields.


Avena has custom hooks. To see them you need to enable "Display non-positionable hooks" checkbox on the "Modules" > "Positions" page.

There are seven (7) custom hooks available to use in the theme. You can see their disposition at the image below. Default modules can't be located in Avena additional hooks without code modification.

Default hook "DisplayHome" located below the "bottom_content" hook.