Getting Started
To install the London Stars Fashion theme you must have a working Prestashop already installed. To set-up Prestashop you can consult them directly by going to www.prestashop.com/en/getting-started
Installation
- Automatic Installation (Recommended)
1.1. Step 1
Navigate to Preferences > Themes
Click on "Add new theme" button (on the top-right of header's toolbar)
1.2. Step 2
Go to the "Import from your computer" section, then Click on the input[1] button or the Add file[2] button. Find the location of the zipped file in the "Fashion Theme" folder ("Fashion Theme/LondonStars-v1.1.zip"). Finally, you click on the Save[3] button to finish this step.
1.3. Step 3
The result is displayed as the following image:
Hover on the image and then click on the “Use this theme” as displaying in screenshot below:
1.4. Step 4
This is the result after doing Step 3. Click on the "Save" button to finish Step 4 and wait a while then go to next step.
1.5. Step 5
In this step, you can click on the "Go to the thumbnails regeneration page" [Note 1] button or Finish[2] button to finish installation.
[Note 1] : Regenerate Images
If you do not want to use the default size of thumbnails of Prestashop, you can re-generate all of these thumbnails. Of course, you also can re-generate only some sizes/dimentions of these thumbnails.
- Change the image size settings in the table at the top of the "Images" preference page.
- Select which content's images should be regenerated.
- Indicate whether the previous thumbnails should be kept or not.
- Click "Regenerate thumbnails".
* Notice that: Manually-uploaded thumbnails will be erased and replaced by automatically-generated thumbnails.
Important configuration:
After Installation
Go to Preferences > Images
In the "IMAGES" section, go to "Image quality" . You need to choose "Use PNG only if the base image is in PNG format" and then click on the "Save" button.
Go to Preferences > Themes
You can upload your logo.png [1] and icon.ico ( You also can findthe demo logo and favicon in the folder /Documentation/logo and then upload them). After that, click on the "Save" [2] button to save above setting information.
Logo on your site before uploading:
Logo on your site after uploading:
In MOBILE tab [3], choose "I'd like to disable it" [4] to enable responsive-layout on smartphones and tablets as below screenshot. Then click on the "Save" button [5].
Custom Modules
The purpose of this section: we help you to create a demo site like above screenshot.
All of the attachement/customized modules in our theme have the prefix “Fashion”
Navigate to the "Module" and search with the keyword "fashion" to see the molules list.
These are some modules are displayed on homepage :
Modules list on the above screenshot:
- [1] Fashion - Advanced Top Menu
- [2] Fashion – Search with image
- [3] Fashion - Theme configurator
- [4] Fashion - Featured products on the homepage
- [5] Fashion - New products block
- [6] Fashion - Top-sellers block
- [7] Fashion - Collection block
- [8] Fashion - Home slide blogs
- [9] Fashion - Newsletter block
- [10] Fashion - Brands slider block
- [11] Fashion - Advanced Footer
The first module which needs to be configured, is "Theme configurator". This module is used to set the position/hook of banners on homepage(in the content column, left column or right column,...).
Navigate to Modules > Theme configurator then click on the "Configure" button
You need to set the same information as folowing below screenshot[1].
Then click "Save" [2] to save these setting information.
How to setup banners like the demo site?
Under the “THEME CONFIGURATOR” tab
- Step 1: You need to delete the default/existed banners of Prestashop [3]. These banners are put into the HOOKs in the "THEME CONFIGURATOR" tab.
How to delete these banners. See the screenshot below:
To detele one banner, you can do following:
- [S1] Click on the narrow which is nexto the "Edit" button to show the dropdown.
- [S2] After that click on "Delete item" to delete this banner.
- Step 2 : Upload your banners
- We need to upload 3 banners into : Hook “Home”, 1 banner for Hook “Left”, and 1 banner for Hook “Right”. You can upload your images or using our demo images(in the folder /Documentation/img-demo). To
- To upload a banner, click on the "Add item" button:
- You need to input the necessary information in the below form:
[f1] Choose the Hook position that you want to upload the banner. You must upload 3 banners for "Hook: home", 1 banner for "Hook : left" and 1 banner for "Hook : right".
[f2] Upload your banners or you can upload our demo banner and find them in the folder: "/Documentation/img-demo".
[f3] Click on the "Save" to upload the banner and save the information.
You can see the demo banners that we uploaded for hooks in the screenshot below:
After uploading banners for Hook Home [H1], you will see the banners on the home page like the screenshots below:
The Banners that are hook-ed into the [H2] & [H3], will be displayed in the left column or right column of the site.
Below screeshot displays the banner that is hook-ed into Hook-Left [H2]:
And the banner that is hook-ed into Hook-Left [H3]:
2. Fashion - Advanced Top Menu
This module allows to create menu in mega menu format. Mega menu supports for creating two main components are the main menu[1] and the sub menu[2]. After installing our Theme, the demo data for menus will be automatically installed. You can see the style of the top menu in the front-end demo. But you need to change the image's url and the links to suite your site (Default setting for these links, is #).
Following images are the detailed instructions for using this module:
Main menu[1] consists of multi-items, each item has or hasn't a sub menu[2]. In the Installed demo menu, there are 6 items in main menu: Home, Women, men, Kids, Gift, Blog. As the above screenshot, sub menu of item Women is shown.
If you would like to use the menus like the menus in our demo. After installing, Simply you just need to edit the URL of links and images. To do that thing. You can do following these steps:
- Navigate to Modules > Advanced Top Menu
- Click on the Configure button
- For the main menu and items in main menu, we can manipulate one of the following actions:
- [M1] : Add a new item for the main menu
- [M2] : Edit a item of the main menu
- [M3] : Drag and drop to change the position of items.
2.1 How to edit an item of the main menu:
- In the "Main menu setting" section, click on the "edit" icon [M2] :
In this form:
- Type [1]: Types of main menu's item( it can be one of these types: link, image, custom HTML).
- Title [2]: Title of the main menu's item (Supports multi-languages).
- Icon [3]: You can add Awesome font icons in the front of items of menu.
- Custome Link [4]: you can put a custom link for this item.
- Prestashop Link [5]: or you can select a existed link which is available in the Prestashop system.
- Class [6]: you can add your own class into this textbox.
- Defined [7]: or select a existed class in this box.
- After inputting the needed things, click on the "Save" button [8] to save the information. See the result in following image:
2.2 How to add a new item for the main menu:
- In the "Main menu setting" section, click on the "plus" icon [M1] to add a new item :
- In this form, you need to input the necessary information [9], similarly when you edit a item of the main menu (like above...)
- After that click on the "Save" button to save the information
- See the result: in the frontend [11] & backend [12]:
2.3 How to change the positon of items in the main menu?
To change the position of items in the main menu:
- In the backend, you just need to drag and drop items [M3]:
- The result in the backend [13], you also can check in the frontend too:
2.4 Delete an item of the main menu:
- To delete an item of the main menu, click on the "delete" icon [M4] and confirm to delete it [14]:
- See the result in the backend[15] & frontend [16]:
2.5 How to manage items of a sub-menu after installing?
As soon as you setup the theme, the default sub-menu of the main menu's items, is added. You only need to edit the URL of these items
2.5.1 To edit a link/URL of an item in one column of a submenu (Example: Men's sub-menu):
- In the backend, scroll down and go to the "Men's Sub Menu" section, then click on the "edit" icon [17]:
- In the editting form: You can change the URL as well as other information of this item [18], exactly like the way that you work with items of the main menu:
- Finally, click on the "Save" button [19] to save the information that you have just changed. And see the result in the backend [20] & frontend [21]:
2.5.2 How to add an item for one column of the sub-menu?
- In the backend, click on the "Add New Item" on the top of column [22]:
- In this form, you need to add the necessary information [23] then click on the "Save"[24] button to save these information:
- See the result in the backend [25] & front end [26]:
- 
2.5.3 How to delete one item of one column of the sub-menu?
- In the backend, click on the "delete" icon to detete one item of one column of the submenu [27] then click on the "OK"[28] button to confirm:
- See the result [29] & [30]:
2.6 How can I create my own sub-menu for a new item in the main-menu?
Example: Create a sub-menu for the item: "Buy This Theme" in the main-menu:
- Go to the "Sub Menu Setting" section, click on the "plus" icon/ "Add Sub Menu" on the top -right corner [1]:
- In the "Sub Menu Setting" form, input the needed information:
- Parent menu [2]: Select a main menu's item that you want to create a sub-menu for it.
- Width [3]: input a numberic value for the width of this sub-menu (If you leave it blank, the default width's value is 995px)
- Class [4]: you can add a custom class for this sub-menu. We have created some classes that you can use (mega_dropdown men; mega_dropdown; mega_dropdown gift;...), so in the "class" textbox[4] you can type : "mega_dropdown"
- After you add the necessary information, click on the "Save" button [5] to save the setting. See the result in the screenshot below:
- And now, we need to create columns for this sub-menu as well as items for each column. Click on the "Add new column" button [6]:
- In the "Block Setting" form, you can select a value in the "Block width" dropdown list [7], and add a custom class [8]for this column:
- Block width: the length of column with the Bootstrap's standand. If your sub-menu have one column only and you want to setup a full length for this column, you need to select col-sm-12 ; If there are two columns need to select col-sm-6; three columns need to select col-sm-4, …
- Class: a custom class for column. If you want to create the list of items having style such as column [I], [II] in Women's sub menu, adding class "list" when you create a column:
- Then click on the "Save" button [9] to save the setting. See the result [10] in the screenshot below:
- Step by step, you need to create 3 remaining columns:
- After that, you need to add items for these columns (see in the 2.2.5 section) and see the result in the screenshots [12] & [13] below:
- You can create heading texts for columns. Doing the same like the way you create an item for the column but in the " Defined class" dropdown box you need to choose the value: "Group header":
And to change the position of items in a column, you only need to drag and drop [14]...
See the result in the screenshots below [15] & [16]:
You can add the remaining content for 2 other columns of this sub-menu.
- To delete one column of sub-menu, click on the "Delete" icon on the top-right of that column [17] then click on the OK button [18] to confirm:
And see the result below [19] & [20]:
- To edit the setting of one column of sub-menu, click on the "Edit" icon in the top right corner of column [21]:
In the "Block Setting" form, you can change the value for "Block width" [22] as well as the class's name. Then click on the Save button the save the new setting [23]:
See the result below [24]:
- To edit the setting of one sub-menu, click on the "Edit" icon [25] on the top-right corner of the sub-menu's box:
In the "Sub menu setting" form, you can change the values for "Parent menu", "Width", "Class" [26] then click on the Save button [27] to save the new setting for this sub-menu:
- To delete a sub-menu, click on the "Delete" icon on the top-right corner of the sub-menu's section [28] and then the sub-menu will be removed from the system in both of the backend & frontend:
2.7 In the Advance top-menu module, How I can active/de-active the main items, sub-menus, items of sub-menus?
- To de-activate an item of the main menu, click on the "active" icon [1]. Also to activate an item of the main menu, click on the "de-active" icon[2]. See the screenshot below:
And see the result in the frontend:
- To activate an item of the sub-menu, click on the "de-active" icon [3]. Also to de-activate an item of this sub-menu, click on the "active" icon [4]. See the screenshot below:
See the result in the below screenshot:
- To activate a sub-menu, click on the "de-active" icon [5]. See the screenshot below:
- To de-activate a sub-menu of the main menu, click on the "active" icon [6]:
Of course, depending on : you activate or de-activate a sub-menu then it will be showed or hidden (when hover on the main item) in the frontend.
- You also can drag & drop to change the position of items inside one column [7] or between of columns [8]:
This module allows to customize the footer's layout in the structure of rows and blocks. It is also very flexible in placing links, block html or another modules in the footer.
After the theme is setup-ed into your site, the footer (like our demo) will be added automatically into your site. You only need to edit the necessary information of blocks.
- Navigate to Modules > Advanced Footer and click on "Configure" button to change the module setting.
- In “General Setting” tab, you need to fill up the number of rows to be displayed in the footer, then click on "Save" button to save the setting.
We configure a default setting for number of the rows, is 3. You can see above screenshot.
- It is easy to imagine the footer of rows and columns, look at the demo site as shown below. Footer demo split into three rows, in each row consists of blocks, in each block is it's item.
- See the rows and blocks in the frontend:
- See the below image, the setting of rows and blocks corresponding to the demo data. In the backend, Click on the "Advance Footer Configuration" tab:
* Notice: The first row has a bock so the block width will be col-sm-12 (Bootstrap's standard). The second row has three columns so the block width will be col-sm-4. The third row has two column so the block width will be col-sm-6. You can customize the length of each block.
3.1 How to change the content in blocks?
Example: How to change the content in the "About Store" block [1] of the Row 2?
- In the "Footer Row 2", click on the "edit" icon [2] in the "About Store" column:
- After that, you can adjust the content for this part in the following form:
- Title [3]: Title of the content
- Display title [4]: You can enable or disable this title
- Type [5]: type of content. It can be : Link, Custom HTML, Module
- Content [6]: The content will be showed in the "About Store" block
- After you adjust the conents above, click on the Save button [7] to save these change. And see the result [8]:
* With the same way, you can change the content of other columns/blocks in the footer: "Customer Support", "Contact Us".
3.2 How to change the title of blocks/columns in the footer?
*Example: need to change the title of "About Store" block in the footer:
- In the "Footer Row 2" section, you can change the title of "About Store" block [9] then click on the "Update" button [10] to save the change:
- See the result [11] in the frontend:
* Similarly, you can change the title of other blocks in the footer easily.
3.3 Delete an item of a block
- To delete items of one block, click on the "delete" icon [12]. Of course, after that then the item will be removed from both of the frontend & backend:
3.4 Delete a block/column of one row in the footer:
- To delete one block/column of a row in the footer, click on the "delete" icon [13] on the top-right corner of the block and confirm to delete. Of course, after that the block will be removed from both of the Backend & Frontend of site:
3.4 What new update for this module?
- You can drag & drop to change the position of rows[14], blockes of rows[15] and as well as items in a row[16]:
*** Notice: The footer (like the demo site) will be added as soon as you setup the theme. So you only need to change the content of blocks, rows of footer. Of course, you can create new rows, new blocks for these rows,... if you want. The module is flexible and be easy to use.
4.1 Layout Setting:
- In the backend, Navigation to OVIC THEME CONFIG > Layout Control
- In the "Layout setting" tab [1], you can select an option of theme that you would like to use for your site [2] (3 columns, left column + content column, right column + content column or fullwidth). Then click on the "Save" button [3] to save the setting:
- See the result below:
- You can choose an other option:
- Please notice that: one option can support one or several or all of cases: 3 columns, 2 columns or 1 column.
4.2 Sidebar Setting:
- Navigation to OVIC THEME CONFIG > Layout Control to change the setting for sidebars of pages:
- Click choose the "Sidebar setting" tab [1]: you will see a list of pages. Here, you can configure, turn on/off left column or right column for these pages.
- To enable/disable one column of one page, example : the "Best sales" page, click on the icon [2] to enable/disable this column.
- To configure modules for this column, you can click on the "Configure" button [3] (please notice that: you only can configure for the activated columns).
- After you click on the Configure button, you will see a list of modules in the left-column (or right-column or both) [4]:
You can easily add, remove modules(hook modules) into the column. Of course can change the position of modules in the left column or right column of the site. Be very easy to change the position of modules in each sidebar by dragging and dropping. It means: the left column or right column of page can have different modules(Please notice that: default Prestashop does not support this thing).
- You can add modules into this column. To add a new module, click on the "Add new module" button [5]:
In the popup window, you need to choose one module and the postion/hook of this module [7] then click on the "Save" button [7] to save the setting:
The left column of the Best Sales page, before adding the module:
And the left-column of this page, after you added the module: A new module was added [8]:
- You also can drag and drop to change the displaying position of modules:
See the resuilt in the backend:
And result in the frontend:
- You can remove modules from the column. To remove one module, hover on it then click on the "Remove" button [9]:
See the result in the backend and frontend:
This module allows to display an image or a slideshow on the top of the "category" page and "product" page. Notice that: the product page will get the image or slide show of the default category of this product.
- Navigate to Modules > Category Image slider, click on "Configure" to change the setting.
The Slider Configuration form will appear. Fill values for all of the fields as showing in the screenshot below or you can input values that you want:
Click on the Save button to save the setting.
- You can upload banners for each category. At the "Filter by category" section, click "Expand All" at the right conrner to view the list of categories:
Choose a category[1] that you want to add an image or a slideshow, then In the "Slider List", click in the "+" icon/"Add new slide[2]":
"Add New Slide" form will appear as show bellow:
- Select a file : Choose an image that you want to upload for this category. Notice that: your image's ratio should be the same like the ratio in the screenshot below:
- Title, URL, Legend, Description : You can add these information for the image (hover, they are not mandatory).
- Enable : Choose YES to enable this slide.
After inputting the needed information, click on "Save" to save the setting.
After you click on the Save button, you will get the result in the Slider List section, like below screenshot (I uploaded 2 banners for the slide show) [3]:
And this is the slideshow in the frontend of Category page:
- To edit a banner of the slide show, click on the "Edit" button[4]
The Editting form will be displayed like the screeshot below:
After changing the information for slide [5] (Of course, you can replace the old image with a new image by uploading a new image), click on the Save[6] button to save these setting. You can see the new banner/image in the "Slider List"[7] section as well as the new banner for slide in the frontend of this category.
- To delete an banner in the slide show of category, click on the "Delete" button [8]
This module allows to display the designer’s information and products in their collections.
Navigate to Modules > Fashion-Collection block and click on the "Configure" button for setting and adding more information for this module.
After click on the “Configure” button, the collections list will appear as image below:
You can click on the Add a new collection[1] button to create a new collection or click on the Edit[2] button to edit that collection.
- After clicking on the Add a new collection[1] button. You can input the needed information [3]:
- Image: Designer's avatar. You should upload images following this ratio: 270 x 250 px.
- Name: Disigner's name.
- Name of collection: Collection's name
- List product id: The list of IDs of products will be displayed on the designer's collection. IDs are separated by comma ",".
- Company: The company's information of designer.
- Description: Designer's profile or short collection description.
After adding the necessary information, click on the Save button [4] to save the setting. In the backend, you can see the result in the Collection box (see above screenshot). Also in the frontend, see the result in the screenshot below [5]:
- After clicking on the Edit[2] button to edit a collection. You can edit the information of the collection as well as the information of designer in this form [6]:
Finally click to "Save" button[7] to save the setting. You can check the updated information in the frontend like the above screenshot [5](of course, with updated information).
- To delete a collection, click on the "Delete" button [8]:
7. Fashion - Testimonial block
This module allows to display testimonials list in the frontend.
Navigate to Module > Testimonial block and click on "Configure" button.
After clicking on the Configure button, the testimonials list will display, you can click on Add a new testimonial[1] to create a new testimonial or click on the Edit[2] button to edit a testiminial's information:
- Click on the Add a new testimonial[1] button to add a new testimonial:
- Image: Customer's avatar
- Name: Customer's name
- Company and Possition: The information of customer's company, customer's position.
- Description: Customer's description.
After inputting above information [3], click on the Save button[4] to save the information. See the result [5] below:
- To edit the information of a testimonial, click on its edit button [6]:
You can edit the information of the testimonial in the section [7] then click on the Save button [8] to save the updated information:
See the result in the frontend:
- To delete a testimonial, click on the "Delete" button [9]:
After that: the testimonial will be removed from the list [10]:
This module allows to add some extra tabs with customized content in the product page.
Navigate to Extra Tabs module, then click on "Configure" to Setting for this module.
- In "TABS MANAGER" tab, click on "+" icon[1] at the right corner to add new tab.
Form to add new tab:
- Title: Extra tab's name
- Category: Choose a category or all of categories that you want: the tab is displayed there.
- Product: You can configure to show the tab in only one Product page or all of Product pages (Of course, these products are in the slected category)
- Active: Choose YES if you want the tab is showed in the front end and NO if you want to disable it.
After inputting the necessary information for the tab[2], click on the Save button[3] to save these information. See the result in the screenshots below:
- To edit the information of one tab, click on the Edit button [4]:
In the "Edit Tab" form, you can add the updated informtion in the section [5] for the tab then click on the Save button [6] to save the new information:
You can see the result after changing the tab (in the backend):
- To delete one tab, click on the "Delete" button [7]:
After deleting the tab, you can check the result in the backend [8] & frontend (Product page) [9] (There is one remaining extra tab only):
9. Fashion - Featured products on the homepage
This module allows to display the featured products on homepage (See the Fetaured Products tab).
- To set the initial number of featured products displaying on homepage:
Navigate to: Modules > Fashion - Featured products on the homepage. Then click on the Configure button:
Enter the initial number of featured products that you want to set for this module [1]. Then click on the "Save" [2] to save the setting.
You can check the result in the home page:
If you want to see more products in this module, you can click on the "...You Click..." button [3]. Other featured products will be loaded under the current products...
10. Fashion - New products block
This module allows to display the new products in the home page.
- To configure the initial number of new products displaying on homepage:
Navigate to: Modules > Fashion - New products block then click on "Configure" button to configure the setting:
Enter the initial number of new products that you want to set for this module [1]. Then click on the "Save" [2] to save the setting.
You can see the new products in the Latest Products tab on the home page:
To see more new products, click on the "You Click..." button [3] (Other new products will be loaded under the current products):
11. Fashion - Top-sellers block
Be similar to the “Featured products on the homepage” module, but this module allows to display best sale products on the home page (See the Best Sales tab).
- To set the initial number of the best sale products displaying on homepage:
Navigate to: Modules > Fashion - Top-sellers block then click on "Configure" to configure the setting information
Enter the initial number of the best sale products, that you want to set for this module [1]. Then click on the "Save" [2] to save the setting.
You can see the best sales products in the Best Sales tab on the home page:
To see more Best sales products, click on the "You Click..." button [3] (other products will be loaded under the current products) :
12. Fashion - Multi font & multi color
This module allows to change font family, text color, button color...of the theme
Navigate to Modules > Fashion - Multi font & multi color
After clicking on the “Configure” button, The settings form will appear.
[1]: You can change the font of site by filling out the link of google font, that you want to use.
[2]: Configure text's color and hover text's color.
[3]: Configure the link's color and hover link's color.
[4]: Configure button's color and hover button's color
[5]: Configure the title's color of blocks and background color of blocks.
[6]: Configure the background's color of category block and background color when hover.
Finally, click on the "Save" button to save the setting.
13. Enable some module on the homepage
There are three modules which is on homepage, we need to enable:
- Fashion - Collection block [1]
- Fashion - Home slide blogs [2]
- Fashion - Newsletter block [3]
To display these three modules on homepage as the following image, we need to enable them.
We need to reset them before configure the setting information for each module:
14. Fashion - Brands slider block
This module allows to display a list of manufacters. To display this module like our demo.
You should care of some following configuration in: PREFERENCES > IMAGES
The ratio of brand image size: 
15. Fashion - Discount products
This module allows to display a list of discount products. To display this module like our demo.
You should care of some following configuration in: Modules >Fashion - Discount products
The setting form will appears as the following image. Choose the specific date and time that you want to set for discount products[1]. Then click on the "Save" [2] to save the setting.
* Note: The discount products that you want to display on hompage in Deal of the day section then the expiration date of that product have to coincides with the expiration date of setting in module "Fashion - Discount product"
You can see the discount products in the DEALS OF THE DAY section on the home page:
16. Fashion - Home Categories
This module allows to display categories that you would like to display on homepage (shown by New Arrivals, Best Seller, Most Reviews of these chosen categories). It is placed in Hook Possition 1 and Hook Possition 2 on homepage. Let's see our demo in the following image.
You can choose any categories that you would like to show in HOOK POSSITION 1 and HOOK POSSITION 2 on hompage. To do this thing:
Navigate to Modules >Fashion - Home categories and click on the "Configure" button for setting.
The setting form will appears:
For above form. In "HOOK POSSITION 1" section, choose any category[1] from dropdown list that you want to show on homepage, click on "Save" button [2] to save the setting. Similar to HOOK POSITION 1, do the same thing with HOOK POSSITION 2.
17. Fashion - Banner Block HTML (Option 2)
This module allows to display advertising banners, informations or image.... under HTML format. Let's see our demo are displayed on homepage:
- Three advertising banners are displayed on homepage in row and column[1]
* Note: You can change all above advertising banners to suit your website.
Navigate to Modules > Fashion - Banner Block HTML, then click on "Configure"[2] button to configure this module.
It will takes you to the page "BLOCK HTML CONFIGURATION", to display like our demo, you have to manipulate the following steps:
Step 1: Choose displayHome[3] from HOOK POSITION.
Step 2: Click on Source code[4] to copy our source code into this.
Copy our source code into this pop windown[5], then click "OK"[6] to finish this step.
- The result is displayed in the backend[7] and front-end[8] after adding html code into popup windown.
* Note: You can change another images to suite your website by clicking on the image that you want to change, then click on icon 
to edit image.
18. Fashion - Flexible Custom Module
The Fashion flexible custom module allows to create a flexible category which is displayed as the images below:
To display the module like the image above, following these steps:
Step 1: Navigate to Modules > Fashion Flexible Custom Module
Step 2: Config the module by clicking Configure button.
The module will be displayed like image below:
This module allows to create list of category (in our demo we create three categories: Women, Top, Top seller in), and create a list of group inside each category, each group has a list of product which is chosen from a default category or from individual category which is described as the image below:
18.1 Category setting
This section allows to set all the parameters for the category.
To create a new category, click ADD NEW button as the image below:
Fill all the information in the popup form as the image below:
- [1] Module name: Actually it is the name of category. For example: Hot categories
- [2] Language: The language which the category will be displayed
- [3] Module position: Choose the position which the category will be hooked into
- [4] Module layout: Choose the default value, here is Layout[default] value.
- Click SAVE[5] button to insert new category into database. The result is displayed as the image below:
- You manipulate similar to the above steps to create the remaining categories. See the result is displayed in the screenshot below.
To edit the parameter in any category, click to the icon 
in the same line with the category that you want to edit as the image below:
After editting all the parameters, click to Save button.
To delete any category in the group, click to the icon 
in the same line with the category that you want to delete as image below:
18.2 Group setting in the Category
This section allows to create new, edit or delete a list of group in the category.
To do this click on the category's name as the image below:
The design will be displayed like the image below:
To create a new group inside the category, click ADD NEW button as the image below:
Fill all the information in the popup form as the image below:
- [6]Group title: Name of group in the category
- [7]Language: Language which the group will be displayed
- [8]Icon: Choose the group's icon by clicking on the icon
to navigate to image's folder - [9]Active icon: Choose the active group's icon by clicking on the icon to navigate to image's folder. This icon will be displayed when mouse hovers
- [10]Type: Type of group, there are 2 types of group. They are: Auto and Manual, if [10]Type is Auto the design will displayed as the image above
- [11]Categories: Choose the category which all products in the group will belong to
- [12]Product type: Type of product, they are: All, New, Used, Refurbished
- [13]Product field order: The order of product field, The order values are: Sales, Price, Discount, Add Date, Random
- [14]Product order: Choose Ascending order or Descending order
- [15]Max item: The maximum item will be displayed in the group
* Note: If [10]Type is manual the design will be displayed like the image below:
in this case, need to indicate the category which the list of product in the group will belong to (like the image above)
If [10]Type is Auto and after set all the parameters in the form, a list of product will be shown when click on the group's name.
If [10]Type is manual, need to indicate the product list for group after click on the group's name
Click SAVE button to insert a new group into the category. Here is an example:
To edit the group in any category, click to the icon 
in the same line with the group that you want to edit as the image below:
The design will be displayed as the image below:
After editting all the parameters, click to Save button.
To delete any group in the category, click to the icon 
in the same line with the group that you want to delete as image below:
In the example above, The group Short, T-shirt, Shoes, Handbag, Glasse, and All category has Auto type so the number of product (in this example is 12) will be filled into these groups.
And here is the design displays in the front-end:
Frequently Asked Questions
1. How I can configure to show the SIZE(s) of products in the Product page, like your demo?
- In the backend, go to : Catalog > Product Attributes
- Then click on the Edit icon [1]:
- In the Attribute form, choose the "Radio button" [2] in the "Attribute type" dropdown, then click on the Save button [3]:
- See the result in the screenshot below:
2. How I can configure the zoom-effect for the main image in the Product page?
- In the backend, go to : Preferences > Products
- Then choose YES [1] for the option: "Enable JqZoom instead of Thickbox on the product page". Then click on the Save button [2] to save the configuration:
- See the result:
3. How I can show the "Category image slider" module in the category page?
- You need to reset the module: "Category image slider" [12] [13] (You also can see the section: "13. Enable some module on the homepage" in this document):
4. How I can enable the links: "My Account", "Wishlist", "Compare" on the top of mobile?
- You need to reset the module:"User Info Block" [10] [11]:
5. How the Blog module (in the home page) works?
- That module gets the latest posts automatically from the blog's post.
- More than, we use "Smart Prestashop Blog". It's free for Prestashop. You can see it here: http://www.prestashop.com/forums/topic/317230-prestashop-blog-module/
- Sometimes, you need to reset these Blog modules, so they can be displayed well on the home page:
- Sometimes, I see that: the updating information is not updated immediately. It's because the cache. You need to clear the cache by, in the backend: go to "ADVANCED PARAMETERS > PERFORMANCE" [1, ]then click on the "Clear cache" button [2]:
6. Where may I find the guide video (how to setup the theme)?
You can find it in the description of my theme on Themeforest: http://themeforest.net/item/london-stars-responsive-prestashop-theme/7298405
Thank you for your business!