1

MobileFirst doc

1- Introduction ................................................................................................................................ page 2

2- Installation ................................................................................................................................ page 3

a -Quick Installation .......................................................................................................... . page 3

b- Manual installation. ........................................................................................................ page 4

c- Activate the theme ......................................................................................................... page 4

3- Confirguration ............................................................................................................................. page 6

a -Preambule....................................................................................................................... page 6

b- Performances.................................................................................................................. page 6

c- Images............................................................................................................................. . page 7

d- Theme configurator (module)........................................................................................ . page 8

4- Modules ...................................................................................................................................... page 13

a -Home slide module.......................................................................................................... page 13

b- Brands carrousel.............................................................................................................. page 14

5- Support.. ...................................................................................................................................... page 15

2

1- Introduction

Before starting, Thank you for purchasing this template Atchworks. Hoping that it matches your expectations.

Why choose an Atchworks theme for Prestashop 1.7 ?

Atchworks designs PrestaShop themes since 2009.

Many shops trust us from the beginning, and continues to use our themes.

We favor a light and powerful template rather than a theme with many gadgets that slow down your shop modules.

More than ever, today's shops need to be quick and ergonomic to be visible in the search engines.

This is what our customers are looking for by ordering our themes.

• Simplicity of configuration

• No additional modules to configure (except theme configurator like 1.6 version)

• The theme is mobile first (test absolutely on mobile)

• Lightweight, no need to change settings of your web host

3

2- Installation

How to install your theme

You have two methods to install an atchworks theme :

a. Quick installation

b. Manual installation

a- Quick Installation

1- Download the zip theme from your addons account

2- Login to your Prestashop admin panel and navigate to IMPROVE >> Design >> Theme & Logo. At the top of the

page click the "Add a new theme button".

3- Choose option : import from your computer and add the zip file called "mobilefirst.zip"

4- Prestashop install automatically your new theme

4

b-Manual Installation

1- Download the zip theme from your addons account

2- By FTP, add the zip in the "themes" folder of Prestashop : 2- Login to your Prestashop admin panel and navigate

to IMPROVE >> Design >> Theme & Logo. At the top of the page click the "Add a new theme button".

3- Choose option : import from FTP and add the zip file called "mobilefirst.zip"

4- Prestashop install automatically your new theme

c- Activate theme

When your installation is successfully validated , the new theme will be shown in the section "Select a theme for

the "Yournameshop" shop"

Select the theme to finalize the installation

5

After Theme installation, your page in front office like this :

6

3- Configuration

a- Preamble

Before setting the theme, we will set up the back office to work in good conditions.

If you are not familiar with Prestashop, please read first : Prestashop Guide

b-Performance

1- Login to your Prestashop admin panel and navigate to >> configure >> advanced parameters >> performance

2- Set Template compilation to "Recompile templates if the files have been updated"

7

c-Images

The template installation add new image's formats like modal-default and change image's size.

1- Login to your Prestashop admin panel and navigate to >> improve >> design >> Image

2- In Images generation options set Image format to "Use PNG only if the base image is in PNG format." and save

3- in Regenerate thumbnails click in "regenerate thumbnails"

NB : If you have lot of products, generate images by format.

8

d-theme configurator module

This theme use only one module to configure images and color theme.

Theme configurator, it's a native module Prestashop 1.6 with new options. Login to your Prestashop admin panel

and navigate to >> improve >> Modules >> Manage installed modules and find the module theme configurator

by Atchworks.

options list

Choose your color scheme : #ffffff ---> white color disable this option and use the default color ( Orange)

If you want other color change here.

9

Images managment

� Home images

� Left or Right images

� Home reinsurances

� Product reinsurances

� Paiement logos

How to add image

1. Button add item

2. Select language

3. Title image

4. If you want use the title in front ( only reinsurances hook)

5. add a display none in mobile version (hidden content in mobile)

6. select style media and hook

7. upload image (or select an icon see option 10)

8. not used actually

9. width displayed images

10. select your icon name in google material listing

11. link your image

12. target the link content in modal box ( only in cms page for reinssurances)

13. Content specific

10

-Home and Left/right column

exemple in the demo:

In code HTML optional we add html code with specific class

<p>Ad tota cuius habitus) scripsi amicitia tum Tum loqui amicitia.</p>

<button>See now</button>

Possibility to change button color. : add class "primary"

<button class="primary">See now</button>

11

Reinsurances

exemple in the demo :

In this reinsurance, we use local_shipping icon.

No need HTML in specific content. Only your text.

12

Payment logos

exemple in the demo :

You need only add image ( small is better) and a link (this is optional)

13

4- Modules

a-Home slide module

We use native script Prestashop. However we add HTML class to provide display options.

exemple in the demo:

<div class="left">

<p>EXCEPTEUR OCCAECAT</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

<button>En savoir plus</button></div>

• first class "left"

you have possibility to change by :

• center

• left

• right

For button

• primary : <button class="primary">En savoir plus</button></

To add html content in slide editor, click in < >

14

b-Brands carrousel

To add Brands carrousel in home, use Prestashop module :

And transplant this module in displayHomeAfter hook .

15

5°/ Support

If you have trouble setting the theme, feel free to contact our support by Addon's form.