6.1 SP Supershop Layout 1
![home-default]()
displayBanner Position
SP Countdown Timer: Top Deal
Frontend Appearance:
![]()
Backend Settings:
Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Countdown Timer” module >> click “Configure” button to configure.
![]()
Step 2: In the “SP Countdown Timer” configuration page, click ![]()
button in the right corner to “ADD NEW MODULE”.
Step 3: You could configure this module like the following image.
![]()
Copy and paste the following code into the content:
<h3 class="custom-title"><a href="#">[ 50% Off ] Combo Modern Sofa + Chairs for Living Room</a></h3>
displayTop1 Position
SP Custom HTML: My Account
Frontend Appearance:
![]()
Backend Settings:
Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Custom HTML” module >> click “Configure” button to configure.
![]()
Step 2: In the “SP Custom HTML” configuration page, click ![]()
button in the right corner to “ADD NEW MODULE”.
Step 3: You could configure this module like the following image.
![]()
Copy and paste the following code into the content:
<div class="header_account">
<div class="account"><a href="../login">My Account </a></div>
<ul class="list-link">
<li class="sign-in"><a href="../login">Login</a></li>
<li><a href="../order-history">My Orders</a></li>
<li><a href="../addresses">My addresses</a></li>
<li><a href="../order-follow">My merchandise returns</a></li>
<li><a href="../identity">Manage my personal information</a></li>
</ul>
</div>
displayUserInfo Position
SP User Info
Frontend Appearance:
![]()
Backend Settings:
In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP User Info Block” module >> click “Enable” button to enable this module.
![]()
displayTopNav Position
1. SP Language
Frontend Appearance:
![]()
Backend Settings:
Step 1: To add language as you want. For example: To add “Arabic” language, in your Admin Panel >> navigate to LOCALIZATION >> Languages >> click ![]()
button in the right corner to “ADD NEW”.
![]()
Step 2: Fill information into the required field (*) as below:
![]()
Step 3: Click “Save” button and view shop to see the changes.
Note: When you add any language as you want, for example: Arabic language as above. At the frontend , some images will display “?” image as following:
![]()
.
To resolve this error, please make the steps following:
1. In your administator, please find to position of this module, for example: Position – displayTop2 (Custom ADV Banner); Module: SP Custom HTML.
![]()
.
2. And click source code to add “../” at before the image url >> Click “OK”.
![]()
.
3. Click “Save” button and go to the frontend to view the changes.
![]()
.
2. SP Currency Block
Frontend Appearance:
![]()
Backend Settings:
In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Currency Block” >> click “Enable” button to enable this module.
![]()
displaySearch Position
SP Search Pro
Frontend Appearance:
![]()
Backend Settings:
In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Search Pro” module >> click “Configure” button to configure this module.
![]()
displayCart Position
SP Cart block
Frontend Appearance:
![]()
Backend Settings:
In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Cart Block” module >> click “Configure” button to configure this module.
![]()
displaySlidershow1 Position
SP Home Slider
Frontend Appearance:
![]()
Backend Settings:
Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Home Slider” module >> click “Configure” button to configure.
![]()
Step 2: In the “Sp slider for your homepage” configuration page, click ![]()
button in the right corner to “ADD NEW MODULE”.
Step 3: You could configure this module like the following image.
![]()
Step 4: In the last part named Slides List of this configuration page, click ![]()
button in the right corner to add new slide and edit slide’s information as follows:
<h2><a href="#"><strong>Modern</strong> sofa 2015</a></h2>
<ul>
<li class="one"><a href="#">Top 10 Item Best Sales</a></li>
<li class="two"><a href="#">Best Quality</a></li>
<li class="three"><a href="#">Over 1200 Happy Customer</a></li>
</ul>
<div class="shopnow"><a href="#">Shop Now</a></div>
Sample 2: ![]()
Copy and paste the following code into the content:
<h2><a href="#"><strong>office</strong> chair 2015</a></h2>
<ul class="slider-second">
<li class="one"><a href="#">Top 10 Item Best Sales</a></li>
<li class="two"><a href="#">Best Quality</a></li>
<li class="three"><a href="#">Over 1200 Happy Customer</a></li>
</ul>
Sample 3: ![]()
Copy and paste the following code into the content:
<h2><a href="#"><strong>Furniture</strong> living room</a></h2>
<ul class="slider-three">
<li class="one"><a href="#">Top 10 Item Best Sales</a></li>
<li class="two"><a href="#">Best Quality</a></li>
<li class="three"><a href="#">Over 1200 Happy Customer</a></li>
</ul>
displayBottom1 Position
1. SP Custom HTML: Banner Top
Frontend Appearance:
![]()
Backend Settings:
Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Custom HTML” module >> click “Configure” button to configure.
![]()
Step 2: In the “SP Custom HTML” configuration page, click ![]()
button in the right corner to “ADD NEW MODULE”.
Step 3: You could configure this module like the following image.
![]()
Copy & Paste the code into your editor:
<div class="banner-top">
<ul>
<li class="item-first col-sm-4" data-scroll-reveal="enter bottom move 50px, after 0.3s"><a class="first" href="#"><img src="../themes/sp_supershop/img/cms/banner-1.jpg" alt="image" /></a> <a class="last" href="#"> <img src="../themes/sp_supershop/img/cms/banner-2.jpg" alt="image" /></a></li>
<li class="b-center col-sm-4" data-scroll-reveal="enter bottom move 50px, after 0.6s"><a href="#"> <img src="../themes/sp_supershop/img/cms/banner-3.jpg" alt="image" /></a></li>
<li class="item-last col-sm-4" data-scroll-reveal="enter bottom move 50px, after 0.9s"><a href="#"> <img src="../themes/sp_supershop/img/cms/banner-4.jpg" alt="image" /></a></li>
</ul>
</div>
2. SP Slider: Best Sellers
Frontend Appearance:
![]()
Backend Settings:
In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Slider” module >> click “Configure” button to configure this module.
![]()
3. SP Super Category: Sp Super Category Bottom1
Frontend Appearance:
![]()
Backend Settings:
Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Super Category” module.
![]()
Step 2: In the “SP Super Category” configuration page, click ![]()
button in the right corner to “ADD NEW MODULE”.
Step 3: You could configure this module like the following image.
![]()
displayBottom2 Position
SP Custom HTML: Center Image
Frontend Appearance:
![]()
Backend Settings:
Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Custom HTML” module >> click “Configure” button to configure.
![]()
Step 2: In the “SP Custom HTML” configuration page, click ![]()
button in the right corner to “ADD NEW MODULE”.
Step 3: You could configure this module like the following image.
![]()
Copy & Paste the code into your editor:
<div class="banner-center clearfix">
<ul>
<li class="col-md-6 col-sm-6 col-xs-12" data-scroll-reveal="enter left move 50px, after 0.3s"><a href="#"><img src="../themes/sp_supershop/img/cms/banner-5.jpg" alt="" /></a></li>
<li class="col-md-6 col-sm-6 col-xs-12" data-scroll-reveal="enter right move 50px, after 0.3s"><a href="#"><img src="../themes/sp_supershop/img/cms/banner-6.jpg" alt="" /></a></li>
</ul>
</div>
displayBottom3 Position
3. SP Super Category: Sp Super Category Bottom3
Frontend Appearance:
![]()
Backend Settings:
Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Super Category” module.
![]()
Step 2: In the “SP Super Category” configuration page, click ![]()
button in the right corner to “ADD NEW MODULE”.
Step 3: You could configure this module like the following image.
![]()
displayBottom4 Position
SP Countdown Slider: Group 1
Frontend Appearance:
![]()
Backend Settings:
Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Countdown Timer” module.
![]()
Step 2: In the “SP Countdown Timer” configuration page, click ![]()
button in the right corner to “ADD NEW MODULE”.
Step 3: You could configure this module like the following image.
![]()
Step 4: In the last part named Slides List of this configuration page, click ![]()
button in the right corner to add new slide and edit slide’s information as follows:
<h2>Living Room Sale 50% Off</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis<br /> nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<div class="shopnow"><a href="#">Shop Now</a></div>
Slide 2: ![]()
Copy and paste the following code into the content:
<h2>Living Room Sale 50% Off</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis<br /> nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<div class="shopnow"><a href="#">Shop Now</a></div>
Slide 3: ![]()
Copy and paste the following code into the content:
displayBottom5 Position
SP SmartBlog Home Lastest
Frontend Appearance:
![]()
Backend Settings:
Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP SmartBlog Home Lastest” module.
![]()
Step 2: You could configure this module like the following image.
![]()
displayBottom6 Position
SP Custom HTML: Count
Frontend Appearance:
![]()
Backend Settings:
Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Custom HTML” module >> click “Configure” button to configure.
![]()
Step 2: In the “SP Custom HTML” configuration page, click ![]()
button in the right corner to “ADD NEW MODULE”.
Step 3: You could configure this module like the following image.
![]()
Copy & Paste the code into your editor:
<div class="count clearfix">
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-6">
<div class="item_count happy-customers">
<div class="icon_con"><span class="#">Link</span></div>
<div class="start-count"><span class="counter">12686<br /></span></div>
<div class="text">
<p>Happy Customers.</p>
</div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-6">
<div class="item_count items">
<div class="icon_con"><span class="#">Link</span></div>
<div class="start-count"><span class="counter">2686<br /></span></div>
<div class="text">
<p>Items</p>
</div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-6">
<div class="item_count views">
<div class="icon_con"><span class="#">Link</span></div>
<div class="start-count"><span class="counter">1808<br /></span></div>
<div class="text">
<p>Views</p>
</div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-6">
<div class="item_count sales">
<div class="icon_con"><span class="#">Link</span></div>
<div class="start-count"><span class="counter">14560<br /></span></div>
<div class="text">
<p>Sales</p>
</div>
</div>
</div>
</div>
displayBottom7 Position
Frontend Appearance:
![]()
Backend Settings:
To edit Copyright, please follow these steps:
1. Open your theme installation directory >> go to the themes\themeXXX\(themeXXX is your theme’s name) >> open “contact.tpl” file with your HTML/PHP editor (for example, Adobe Dreamweaver, Notepad++, etc).
2. Look for the following code and edit as you want:
<div class="contact-tittle">
<h2 class="title">{l s='Contact Us'}</h2>
<p>We Will Give You the Answer You Expect.<p>
</div>
<div class="contact-content clearfix">
<div class="contact-info col-md-6 col-sm-12" data-scroll-reveal="enter bottom move 50px, after 0.3s">
<div class="info">
<ul>
<li class="address">
<label class="icon"><i class="fa fa-map-marker"></i></label>
<div class="text">
<h3>Address</h3>
<span>10700 World Trade Blvd, Raleigh City, North Carolina </span>
</div>
</li>
<li class="hotline">
<label class="icon"><i class="fa fa-phone"></i></label>
<div class="text">
<h3>Phone / Fax</h3>
<span>+1 325 1152 325 - +1 325 1152 325</span>
</div>
</li>
<li class="email">
<label class="icon"><i class="fa fa-envelope"></i></label>
<div class="text">
<h3>Phone / Fax</h3>
<span>Email : <a href="#">Contact@supershop.com</a> / <a href="#">Sales@supershop.com</a></span>
</div>
</li>
<li class="office-hour">
<label class="icon"><i class="fa fa-clock-o"></i></label>
<div class="text">
<h3>Office Hours</h3>
<span>Mon / Friday 09:00 - 13.00 / 14:00 - 18:00</span>
</div>
</li>
</ul>
</div>
</div>
<form action="email.com" method="post" class="contact-form-box col-md-6 col-sm-12" enctype="multipart/form-data"
data-scroll-reveal="enter bottom move 50px, after 0.6s"
>
<fieldset>
<div class="row">
<div class="col-md-12 col-sm-12">
<p class="form-group">
<input class="form-control" placeholder="Your Name (required)" type="text" name="from" value=""/>
</p>
<p class="form-group">
<input class="form-control" placeholder="Your Email (required)" type="text" id="email2" name="from" value=""/>
</p>
<p class="form-group selector1">
<input class="form-control" type="text" placeholder="Subject" name="id_order" id="id_order" value="" />
</p>
</div>
<div class="col-md-12 col-sm-12">
<textarea class="form-control" placeholder="Your Message" id="message" name="message"></textarea>
</div>
</div>
<div class="submit">
<button type="button" name="submitMessage" id="submitMessage" class="button btn btn-default button-medium">
{l s='Send'}
</button>
</div>
</fieldset>
</form>
</div>
displayBottom8 Position
SP Manufacture Slider:
Frontend Appearance: Shop Brands
![]()
Backend Settings:
Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Custom HTML” module >> click “Configure” button to configure.
![]()
Step 2: In the “SP Custom HTML” configuration page, click ![]()
button in the right corner to “ADD NEW MODULE”.
Step 3: You could configure this module like the following image.
![]()
SP Custom HTML: Logo bottom
Frontend Appearance:
![]()
Backend Settings:
Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Custom HTML” module >> click “Configure” button to configure.
![]()
Step 2: In the “SP Custom HTML” configuration page, click ![]()
button in the right corner to “ADD NEW MODULE”.
Step 3: You could configure this module like the following image.
![]()
Copy & Paste the code into your editor:
<div class="logo-bottom"><a href="#">logo</a>
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut<br />perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium</p>
</div>
SP Theme Configuration
Frontend Appearance:
![]()
Backend Settings:
1. In your Prestashop Admin Dashboard, navigate to MODULES > Modules. Go to MODULES LIST section, search for “SP Theme configurator” module then click on Configure.
![]()
2. In the SP Theme Settings, choose “Social Accounts” to configure the parameters in this section. After finishing, you could go to the front-end to view the changes.
![]()
SP Custom HTML: Information
Frontend Appearance:
![]()
Backend Settings:
Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Custom HTML” module >> click “Configure” button to configure.
![]()
Step 2: In the “SP Custom HTML” configuration page, click ![]()
button in the right corner to “ADD NEW MODULE”.
Step 3: You could configure this module like the following image.
![]()
Copy & Paste the code into your editor:
<div class="infomation-link">
<ul>
<li><a href="#">Information</a></li>
<li><a href="#">Support Center</a></li>
<li><a href="#">Shipping Info</a></li>
<li><a href="#">My Account</a></li>
</ul>
</div>
SP Custom HTML: Link
Frontend Appearance:
![]()
Backend Settings:
Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Custom HTML” module >> click “Configure” button to configure.
![]()
Step 2: In the “SP Custom HTML” configuration page, click ![]()
button in the right corner to “ADD NEW MODULE”.
Step 3: You could configure this module like the following image.
![]()
Copy & Paste the code into your editor:
<div class="link">
<ul>
<li>
<h4>Living Room:</h4>
<span class="lienket"> <a href="#">Mattresses</a> </span> <span class="lienket"> <a href="#">Bedroom Mirrors</a> </span> <span class="lienket"> <a href="#">Dressers</a> </span> <span class="lienket"> <a href="#">Dining Sets </a> </span> <span class="lienket"> <a href="#">Kitchen Furniture</a> </span> <span class="lienket"> <a href="#">Commercial Office</a> </span> <span class="lienket"> <a href="#">Bathroom Shelving</a> </span><span class="lienket"> <a href="#">Dining Chairs</a> </span> <span class="lienket"> <a href="#">Dining Chairs</a> </span> <span class="lienket"> <a href="#">Chairs</a> </span> <span class="lienket"> <a href="#">Living Room</a> </span> <span class="lienket"> <a href="#">Bedroom</a> </span> <span class="lienket"> <a href="#">View all</a> </span></li>
<li>
<h4>Bedroom:</h4>
<span class="lienket"><a href="#">Air Beds</a> </span> <span class="lienket"> <a href="#">Armoires</a> </span> <span class="lienket"> <a href="#">Headboards</a> </span> <span class="lienket"> <a href="#">Chests & Dressers</a> </span> <span class="lienket"> <a href="#">Mattresses</a> </span> <span class="lienket"> <a href="#">Sofa</a> </span> <span class="lienket"> <a href="#">Lamps</a> </span> <span class="lienket"> <a href="#">Offices</a> </span> <span class="lienket"> <a href="#">Furniture</a> </span> <span class="lienket"> <a href="#">Interior</a> </span> <span class="lienket"> <a href="#">Tables & Chairs</a></span> <span class="lienket"> <a href="#">Bookshelves</a></span> <span class="lienket"> <a href="#">Coffee & Accent Tables</a></span> <span class="lienket"> <a href="#">View all</a> </span></li>
</ul>
</div>
copyright Position
SP Theme Configuration
Frontend Appearance:
![]()
Backend Settings:
Go Here to see the backend settings.
displayFooterPayment Position
SP Theme Configuration
Frontend Appearance:
![]()
Backend Settings:
Go Here to see the backend settings.
6.2 SP Supershop Layout 2
![home-default]()
displaySlidershow2 Position
SP Home Slider
Frontend Appearance:
![]()
Backend Settings:
Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Home Slider” module >> click “Configure” button to configure.
![]()
Step 2: In the “Sp slider for your homepage” configuration page, click ![]()
button in the right corner to “ADD NEW MODULE”.
Step 3: You could configure this module like the following image.
![]()
Step 4: In the last part named Slides List of this configuration page, click ![]()
button in the right corner to add new slide and edit slide’s information as follows:
<h2><a href="#"><strong>Modern</strong> living room</a></h2>
<ul class="slider-second">
<li class="one"><a href="#">Top 10 Item Best Sales</a></li>
<li class="two"><a href="#">Best Quality</a></li>
<li class="three"><a href="#">Over 1200 Happy Customer</a></li>
</ul>
Sample 5: ![]()
Copy and paste the following code into the content:
<div class="slide-home-2">
<h2><a href="#"><strong>Modern</strong> living room</a></h2>
<div class="text">
<p>Lorem ipsum dolor sit amet, consectetur <br /> adipisicing elit</p>
</div>
<div class="shopnow"><a href="#">Shop Now</a></div>
</div>
displayBottom Position
SP Custom HTML: Banner Top 2
Frontend Appearance:
![]()
Backend Settings:
Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Custom HTML” module >> click “Configure” button to configure.
![]()
Step 2: In the “SP Custom HTML” configuration page, click ![]()
button in the right corner to “ADD NEW MODULE”.
Step 3: You could configure this module like the following image.
![]()
Copy & Paste the code into your editor:
<div class="banner-top-2">
<ul>
<li class="banner-item item-1"><a class="first" href="#"><img src="../themes/sp_supershop/img/cms/banner-2-1.jpg" alt="image" /></a></li>
<li class="banner-item item-2"><a class="first" href="#"><img src="../themes/sp_supershop/img/cms/banner-2-2.jpg" alt="image" /></a></li>
<li class="banner-item item-3"><a href="#"> <img src="../themes/sp_supershop/img/cms/banner-2-3.jpg" alt="image" /></a></li>
<li class="banner-item item-4"><a href="#"> <img src="../themes/sp_supershop/img/cms/banner-2-4.jpg" alt="image" /></a></li>
<li class="banner-item item-5"><a class="first" href="#"><img src="../themes/sp_supershop/img/cms/banner-2-5.jpg" alt="image" /></a></li>
</ul>
</div>
displaySlider Position
SP Slider: Best Sellers
Frontend Appearance:
![]()
Backend Settings:
In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Slider” module >> click “Configure” button to configure this module.
![]()
displayNewsLetter Position
SP Newsletter Block
Frontend Appearance:
![]()
Backend Settings:
Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Newsletter Block” module.
![]()
Step 2: You could configure this module like the following image.
![]()
displaySuper Position
SP Super Category: Sp Super Category Slider
Frontend Appearance:
![]()
Backend Settings:
Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Super Category” module.
![]()
Step 2: In the “SP Super Category” configuration page, click ![]()
button in the right corner to “ADD NEW MODULE”.
Step 3: You could configure this module like the following image.
![]()
displayBottom15 Position
SP Custom HTML: Image Left Column
Frontend Appearance:
![]()
Backend Settings:
Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Custom HTML” module >> click “Configure” button to configure.
![]()
Step 2: In the “SP Custom HTML” configuration page, click ![]()
button in the right corner to “ADD NEW MODULE”.
Step 3: You could configure this module like the following image.
![]()
Copy & Paste the code into your editor:
<div class="image-left"><a><img src="../themes/sp_supershop/img/cms/best-sofa.jpg" alt="" /></a></div>
SP Twitter Slider
Frontend Appearance:
![]()
Backend Settings:
Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Twitter Slider” module.
![]()
Step 2: In the “SP Twitter Slider” configuration page, click ![]()
button in the right corner to “ADD NEW MODULE”.
Step 3: You could configure this module like the following image.
![]()
displaySuper2 Position
SP Super Category: Sp Super Category Slider 2
Frontend Appearance:
![]()
Backend Settings:
Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Super Category” module.
![]()
Step 2: In the “SP Super Category” configuration page, click ![]()
button in the right corner to “ADD NEW MODULE”.
Step 3: You could configure this module like the following image.
![]()
displayBottom11 Position
SP Custom HTML: Center Image 2
Frontend Appearance:
![]()
Backend Settings:
Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Custom HTML” module >> click “Configure” button to configure.
![]()
Step 2: In the “SP Custom HTML” configuration page, click ![]()
button in the right corner to “ADD NEW MODULE”.
Step 3: You could configure this module like the following image.
![]()
Copy & Paste the code into your editor:
<div class="banner-center-2"><a href="#" data-scroll-reveal="enter bottom move 50px, after 0.3s"><img src="../themes/sp_supershop/img/cms/banner-center.jpg" alt="" /></a></div>
displayBottom13 Position
SP Custom HTML: Gallery
Frontend Appearance:
![]()
Backend Settings:
Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Custom HTML” module >> click “Configure” button to configure.
![]()
Step 2: In the “SP Custom HTML” configuration page, click ![]()
button in the right corner to “ADD NEW MODULE”.
Step 3: You could configure this module like the following image.
![]()
Copy & Paste the code into your editor:
<h3 class="title_block">Gallery</h3>
<div id="container" class="cf">
<div id="main">
<div id="slider" class="flexslider">
<ul class="slides">
<li><img src="../themes/sp_supershop/img/cms/blog-1.jpg" alt="" /></li>
<li><img src="../themes/sp_supershop/img/cms/blog-2.jpg" alt="" /></li>
<li><img src="../themes/sp_supershop/img/cms/blog-3.jpg" alt="" /></li>
<li><img src="../themes/sp_supershop/img/cms/blog-4.jpg" alt="" /></li>
<li><img src="../themes/sp_supershop/img/cms/blog-5.jpg" alt="" /></li>
<li><img src="../themes/sp_supershop/img/cms/blog-6.jpg" alt="" /></li>
<li><img src="../themes/sp_supershop/img/cms/blog-7.jpg" alt="" /></li>
<li><img src="../themes/sp_supershop/img/cms/blog-8.jpg" alt="" /></li>
<li><img src="../themes/sp_supershop/img/cms/blog-9.jpg" alt="" /></li>
<li><img src="../themes/sp_supershop/img/cms/blog-10.jpg" alt="" /></li>
<li><img src="../themes/sp_supershop/img/cms/blog-11.jpg" alt="" /></li>
<li><img src="../themes/sp_supershop/img/cms/blog-12.jpg" alt="" /></li>
</ul>
</div>
<div id="carousel" class="flexslider">
<ul class="slides">
<li><img src="../themes/sp_supershop/img/cms/blog-1.jpg" alt="" /></li>
<li><img src="../themes/sp_supershop/img/cms/blog-2.jpg" alt="" /></li>
<li><img src="../themes/sp_supershop/img/cms/blog-3.jpg" alt="" /></li>
<li><img src="../themes/sp_supershop/img/cms/blog-4.jpg" alt="" /></li>
<li><img src="../themes/sp_supershop/img/cms/blog-5.jpg" alt="" /></li>
<li><img src="../themes/sp_supershop/img/cms/blog-6.jpg" alt="" /></li>
<li><img src="../themes/sp_supershop/img/cms/blog-7.jpg" alt="" /></li>
<li><img src="../themes/sp_supershop/img/cms/blog-8.jpg" alt="" /></li>
<li><img src="../themes/sp_supershop/img/cms/blog-9.jpg" alt="" /></li>
<li><img src="../themes/sp_supershop/img/cms/blog-10.jpg" alt="" /></li>
<li><img src="../themes/sp_supershop/img/cms/blog-11.jpg" alt="" /></li>
<li><img src="../themes/sp_supershop/img/cms/blog-12.jpg" alt="" /></li>
</ul>
</div>
</div>
</div>
displayBottom14 Position
SP Custom HTML: Clients say
Frontend Appearance:
![]()
Backend Settings:
Step 1: In the Pretashop Admin Panel, navigate to Modules and Services >> Modules and Services >> look for “SP Custom HTML” module >> click “Configure” button to configure.
![]()
Step 2: In the “SP Custom HTML” configuration page, click ![]()
button in the right corner to “ADD NEW MODULE”.
Step 3: You could configure this module like the following image.
![]()
Copy & Paste the code into your editor:
<div class="block block-cliensay">
<div class="block-title"><strong> Whats Clients Say? </strong></div>
<div class="block-content">
<div class="tab-content">
<div id="client-1" class="tab-pane fade">
<p class="client-des">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna</p>
<p class="client-name"><strong>Anna Kendrick</strong> - Designer</p>
</div>
<div id="client-2" class="tab-pane fade in active">
<p class="client-des">Consectetur adipisicing elit, lorem ipsum dolor sit amet, sed do eiusmod tempor incididunt ut labore et dolore magna</p>
<p class="client-name"><strong>Adam Levine</strong> - Creat Manager</p>
</div>
<div id="client-3" class="tab-pane fade">
<p class="client-des">Sed do eiusmod tempor incididunt ut labore et dolore magna, lorem ipsum dolor sit amet, consectetur adipisicing lorem ipsum</p>
<p class="client-name"><strong>Abraham</strong> - Marketing</p>
</div>
</div>
<ul class="client-list">
<li><a title="Client 1" href="#client-1"><img class="img-circle" src="../themes/sp_supershop/img/cms/client-1.jpg" alt="Client1" /></a></li>
<li class="active"><a title="Client 2" href="#client-2"><img class="img-circle" src="../themes/sp_supershop/img/cms/client-2.jpg" alt="Client2" /></a></li>
<li><a title="Client 3" href="#client-3"><img class="img-circle" src="../themes/sp_supershop/img/cms/client-3.jpg" alt="Client3" /></a></li>
</ul>
</div>
</div>
When you are done, click the ‘Next’ button.
button in the right corner to “ADD NEW MODULE”.
.
.
.
.
at center of this part to configure its backend settings
Woocommerce Tab Category Slider
/upload1.png)
When you are done, click the ‘Next’ button.
button in the right corner to “ADD NEW MODULE”.
.
.
.
.
When you are done, click the ‘Next’ button.
button in the right corner to “ADD NEW”.
.
.
.
.
When you are done, click the ‘Next’ button.
button in the right corner to “ADD NEW”.
.
.
.
