SP Clickboom 17 Layout 1

<p><strong>Call us: </strong>1-888-345_6789</p>

1. In your Prestashop Admin Dashboard, navigate to IMPROVE >> Modules >> Modules and Services >> go to Installed modules section, search for “SP Theme Configuration” module then click on Configure.

2. In the SP Theme Settings, choose “General” to configure the parameters in this section. After finishing, you could go to the front-end to view the changes.

1. In your Prestashop Admin Dashboard, navigate to IMPROVE >> Modules >> Modules and Services >> go to Installed modules section, search for “SP Theme Configuration” module then click on Configure.

2. In the SP Theme Settings, choose “Layout” to configure the parameters in this section. After finishing, you could go to the front-end to view the changes.

1. In your Prestashop Admin Dashboard, navigate to IMPROVE >> Modules >> Modules and Services >> go to Installed modules section, search for “SP Theme Configuration” module then click on Configure.

2. In the SP Theme Settings, choose “Background” to configure the parameters in this section. After finishing, you could go to the front-end to view the changes.

1. In your Prestashop Admin Dashboard, navigate to IMPROVE >> Modules >> Modules and Services >> go to Installed modules section, search for “SP Theme Configuration” module then click on Configure.

2. In the SP Theme Settings, choose “Fonts” to configure the parameters in this section. After finishing, you could go to the front-end to view the changes.

Note: Please copy and paste the following line into Font Selector tab:

1.

body

2.

h1,h2,h3,h4,h5,h6

3.

.content_sortPagiBar_top div.selector span, .content_sortPagiBar_bottom div.selector span,.content_sortPagiBar_top label, .content_sortPagiBar_bottom label , .cart_block .buttons a, .content_sortPagiBar_top .view-bottom #pagination ul li span, .content_sortPagiBar_bottom .view-bottom #pagination_bottom ul li span

1. Navigate to IMPROVE >> Modules >> Modules and Services go to Installed modules section and look for SP Mega Menu >> Click the Configure button to access the module configuration page.

2. In the SP Mega Menu Panel, you could Add New Module by click on the button like the following image:

3. In the configuration page of new module, you could configure General Options as follows

4. In the configuration page of new module, you could configure Menu Information as follows

5. In order to add menu items, to add items as you want, you need to click Add New button.

6. Menu list of Mega Menu You need to look at the menu list to configure easily.

7. To configure each item, you need to click Edit button.

Go Here to readmore about the SP Mega Menu module.

Note: In the next steps, when editing items in the menus, the items (in a menu) having same level could have same configuration. Therefore, we encourage you read thoroughly and find out the item’s level to configure it without any errors.

Shop

• Backend Setting : Please click Here to view.


• Backend Setting of Item "Box Categories" Please click Here to view.


• Backend Setting of Item "Fashion" Please click Here to view.

Note: The items named ‘Sport’, ‘Gifts’, 'Health&Beauty’ having same menu level as item ‘Fashion’ could have same configuration

• Backend Setting of ‘Category Image′: Please click Here to view.

<p><img src="http://dev.ytcvn.com/ytc_templates/prestashop/sp_clickboom17/themes/sp_clickboom17/assets/img/cms/1_1.jpg" alt="image custom" width="226" height="244" /></p>

• Backend Setting of ‘Custom Html′: Please click Here to view.

<p><strong>Quicklinks: </strong> <a href="#">sony,</a> <a href="#">iphone,</a> <a href="#">electronics,</a> <a href="#">bag,</a> <a href="#">fashion,</a> <a href="#">hot sale,</a> <a href="#">featured,</a> <a href="#">game,</a> <a href="#">dolce gabbana</a></p>

Sport

Frontend Appearance

• Backend Setting : Please click Here to view.


• Backend Setting of ‘Box Cate 1’: Please click Here to view.


• Backend Setting of ‘Category Html Image’ in ‘Box Cate 1’: Please click Here to view.

<p><a href="#"><img src="http://dev.ytcvn.com/ytc_templates/prestashop/sp_clickboom17/themes/sp_clickboom17/assets/img/cms/categories-1.jpg" alt="image custom" /></a></p>

• Backend Settings of Item ‘Headphone′ in ‘Box Cate 1′: Please click Here to view.

Note: The items named ‘Box Cate 2’, ‘Box Cate 3’, ‘Box Cate 4’ having same menu level as item ‘Box Cate 1’ could have same configuration

Fashion

• Backend Setting : Please click Here to view.


• Backend Setting of "Categories 1" Please click Here to view.


• Backend Setting of "Categories 2" Please click Here to view.


• Backend Setting of "Categories 3" Please click Here to view.

1. Navigate to IMPROVE >> Modules >> Modules and Services go to Installed modules section and look for SP Vertical Mega Menu >> Click the Configure button to access the module configuration page.

2. In the SP Vertical Megamenu Panel, you could Add New Module by click on the button like the following image:

3. In the configuration page of new module, you could configure General Options as follows

4. In the configuration page of new module, you could configure Menu Information as follows

5. In order to add menu items, to add items as you want, you need to click Add New button.

6. Menu list of Vertical Megamenu You need to look at the menu list to configure easily.

7. To configure each item, you need to click Edit button.

Go Here to readmore about the SP Vertical Megamenu module.

Note: In the next steps, when editing items in the menus, the items (in a menu) having same level could have same configuration. Therefore, we encourage you read throughtly and find out the item’s level to configure it without any errors.

Shop

Frontend Appearance

• Backend Setting : Please click Here to view.


• Backend Settings of Item ‘Box Category Menu’: Please click Here to view.


• Backend Settings of Item ‘Box Category’: Please click Here to view.


• Backend Settings of Item ‘Categories 1’ in ‘Box Category’: Please click Here to view.


• Backend Settings of Item ‘Categories 2’ in ‘Box Category’: Please click Here to view.


• Backend Settings of Item ‘Categories 3’ in ‘Box Category’: Please click Here to view.


• Backend Settings of Item ‘Categories 4’ in ‘Box Category’: Please click Here to view.


• Backend Settings of Item ‘Box Image’: Please click Here to view.



Copy and paste the following code into the content:

<p><img src="http://dev.ytcvn.com/ytc_templates/prestashop/sp_clickboom17/themes/sp_clickboom17/assets/img/cms/verticalmenu01.jpg" alt="#" /></p>

Note: You could do the same with the other items in this vertical mega menu

1. In your Prestashop Admin Dashboard, navigate to IMPROVE >> Modules >> Modules and Services >> go to Installed modules section, search for “SP Theme Configuration” module then click on Configure.

2. In the SP Theme Settings, choose “Listing Pages” to configure the parameters in this section. After finishing, you could go to the front-end to view the changes.

+) Show number of products in current category

Display product number on Listing Page (Show/Hide)

Backend Settings:

Frontend Appearance:

+) Product title

Display product title on Listing Page (Show/Hide)

Backend Settings:

Frontend Appearance:

+) Show product description

Display product short description on Listing Page (Show/Hide)

Backend Settings:

Frontend Appearance:

+) Show Quick view

Display button Quickview on Listing Page (Show/Hide)

Backend Settings:

Frontend Appearance:

+) Show product price

Display product price on Listing Page (Show/Hide)

Backend Settings:

Frontend Appearance:

+) Show product label (New/Sale)

Display product price on Listing Page (Show/Hide)

Backend Settings:

Frontend Appearance:

+) Stock informartion

Display product stock on Listing Page (Show/Hide)

Backend Settings:

Frontend Appearance:

+) Display Second Image

Display second product image when hover on Listing Page (Show/Hide)

Backend Settings:

Frontend Appearance:

1. In your Prestashop Admin Dashboard, navigate to IMPROVE >> Modules >> Modules and Services >> go to Installed modules section, search for “SP Theme Configuration” module then click on Configure.

2. In the SP Theme Settings, choose “Product Pages” to configure the parameters in this section. After finishing, you could go to the front-end to view the changes.

+) Thumbnails Type

Choose type display of thumbnails block on product page.

• Vertical Thumbnails
• Horizontal Thumbnails

Backend Settings:

Frontend Appearance:

-Vertical Thumbnails

-Horizontal Thumbnails

+) Display thumbnails

Number of thumbnails be displayed.

Backend Settings:

Frontend Appearance:

+) Display Product SKU

Show/Hide Product SKU.

Backend Settings:

Frontend Appearance:

+) Display Product Attribute

Show/Hide Product Attribute.

Backend Settings:

Frontend Appearance:

+) Display Product Availability

Show/Hide Product Availability.

Backend Settings:

Frontend Appearance:

+) Share buttons

Show/Hide Share buttons.

Backend Settings:

Frontend Appearance:

+) Short Product Description

Show/Hide Short Product Description.

Backend Settings:

Frontend Appearance:

+) Product More Info Styles

Choose style of block "Product more info"

• Product Moreinfo Tab
• Product Moreinfo Accordion
• Product Moreinfo List

Backend Settings:

Frontend Appearance:

-Product Moreinfo Tab

-Product Moreinfo Accordion

-Product Moreinfo List

+) Custom Tab Content

Input content for Custom Tab on "Product more info"

Backend Settings:

Frontend Appearance:

Backend Settings:

Step 1:

• Install the "smartblog.zip" file.
• Install the "smartblogcategories.zip" file.
• Install the "smartbloghomelatestnews.zip" file.
• Install the "smartblogrecentposts.zip" file.

Step 2: In the Prestashop Admin Panel, navigate to IMPROVE >> Modules >> Modules and Services >> Installed Modules

• Look for Smart Blog file.
• Look for SmartBlog Home Latest file.

Step 3: You could configure this module like the following image.

- Smart Blog

- SmartBlog Home Latest

Please read more guide for Smartblog at here. SmartBlog Module

Store information

In the Prestashop Admin Panel, navigate to Shop Parameters >> Contact >> Tabs Stores >> Contact Details

Frontend Appearance:

Backend Setting:

Step 1: In the Prestashop Admin Panel, navigate to IMPROVE >> Design >> Pages

Step 2: In the “Pages” configuration page, click button in the right corner to “ADD NEW”.

Step 3: You could add new cms page like the illustration

<div class="about-wrap">
<div class="about">
<div class="image"><a href="#"><img src="http://dev.ytcvn.com/ytc_templates/prestashop/sp_clickboom17/themes/sp_clickboom17/assets/img/cms/aboutus.jpg" alt="" /></a></div>
<div class="text">
<h2>about us</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.</p>
</div>
</div>
</div>

1. Add new Language

Step 1:

- In the Prestashop Admin Panel, navigate to IMPROVE >> International >> Translations

Step 2:

- At here, Scroll to block "ADD / UPDATE A LANGUAGE"

- Then, Select the language you want to add new, and click button "Add or update a language"

2. Export Language

Step 1:

- In the Prestashop Admin Panel, navigate to IMPROVE >> International >> Translations (Same Add new Language)

Step 2:

- At here, Scroll to block "Export a Language"

- Then, Select Language and Your theme that you want Export, and click button "Export"

3. Import Language

Step 1:

- In the Prestashop Admin Panel, navigate to IMPROVE >> International >> Translations (Same Add new Language)

Step 2:

- At here, Scroll to block "Import a language pack manually"

- Then, click button "Add file" and choose file language and select your theme, and click button "Import"

4. Management Language

Step 1:

- In the Prestashop Admin Panel, navigate to IMPROVE >> International >> Localization, and choose tab "Languages"

- You can edit or delete language on your store

Step 2:

- If you want change language, click button "Edit".

Step 1:

- In the Prestashop Admin Panel, navigate to IMPROVE >> International >> Localization, and choose tab "Currencies"

Step 2:

- In the "Currencies" configuration page, click button in the right corner to “ADD NEW”.

Step 3:

You could configure this module like the illustration

1. Translations Theme

Step 1:

- In the Prestashop Admin Panel, navigate to IMPROVE >> International >> Translations (Same Add new Language)

Step 2:

- In the "Translations" configuration page, scroll to block "MODIFY TRANSLATIONS"

- In the block "MODIFY TRANSLATIONS".

1. Choose "Type of translation" is "Theme translations"
2. Choose "Select your theme" is your theme you want translated.
3. Select your language you want translated

- Then click button "Modify"

- Here, you can translate the text in the theme.

2. Translations Modules

Step 1:

- In the Prestashop Admin Panel, navigate to IMPROVE >> International >> Translations (Same Add new Language)

Step 2:

- In the "Translations" configuration page, scroll to block "MODIFY TRANSLATIONS"

- In the block "MODIFY TRANSLATIONS".

1. Choose "Type of translation" is "Installed modules translations"
2. Choose "Select your module" is your module you want translated.
3. Select your language you want translated

- Then click button "Modify"

- Here, you can translate the text in the module.

1. In your Prestashop Admin Dashboard, navigate to IMPROVE >> Modules >> Modules and Services >> go to Installed modules section, search for “SP Theme Configuration” module then click on Configure.

2. In the SP Theme Settings, choose "Custom Codes" to configure the parameters in this section. After finishing, you could go to the front-end to view the changes.

- You can input css or javascript.

body{
	background-color: red;
}

alert('This is demo javascript');

Frontend Appearance

- In your Prestashop Admin Dashboard, navigate to IMPROVE >> Modules >> Modules and Services >> go to Installed modules section, search for “SP Theme Configuration” module then click on Configure.

- In the SP Theme Settings, choose “Advanced” to configure the parameters in this section. After finishing, you could go to the front-end to view the changes.

1. SCSS Compile

- Active: The system will automatically compile into CSS from SCSS when you refresh the website

Note: System will change css file theme-...css. Ex: theme-ff0000.css

Do not edit css file when active SCSS Compile

2. CSS Format

Css formatting after compile from sass.

• scss_formatter: Css Normal
• scss_formatter_nested: Css Nested
• scss_formatter_compressed: Css Compressed

3. Keep Menu Top

- Param for Float header. You can use float header.

- Header always display on top when scroll.

Frontend Appearance

There are two instances to edit css file via ftp.

• SCSS Compile: Disable
• SCSS Compile: Enable

1. SCSS Compile: Disable

- You can edit css file of modules.

Example: "../themes/sp_clickboom 17/modules/spcustomhtml/views/css/style.css"

- You can edit css file of theme.

Example:

+) "../themes/sp_clickboom 17/assets/css/theme-0083c1.css"

+) "../themes/sp_clickboom 17/assets/css/theme.css"

2. SCSS Compile: Enable

- You can edit css file of modules. (Sample as Disable)

Note: The system will generate css file "theme-0083c1.css, theme-{color code}.css"

Your changes to this file will be lost

- You must edit file "*.scss" in the folder "_dev/css"

Example: "../themes/sp_clickboom 17/_dev/css/themestyles/_content.scss"

- New versions of PrestaShop come every few months, sometimes even weeks apart. Some are major, most are minor, but they all bring a slew of innovations, improvements and bug fixes. It is therefore highly advised to keep up with the latest version.

- There are two ways to upgrade PrestaShop 1.7:

• Automatic (Same Configuration Prestashop 1.6)
• Manual

Note: Update Version Prestashop Document