Installation steps ↑ Back to Top
it is recommend to always backup your system before making any upgrades or changes!
Opencart Installtion↑ Back to Top
For installation of Opencart, you just need to follow these steps, InstallationUpload Theme Files↑ Back to Top
After you complete Installation of Opencart, Please follow below Steps to install theme:Replace Theme Files
Paste these directories from "Theme_id-Package" to your Opencart root folder."admin" (Overwrite this folder)
"catalog" (Overwrite this folder)
"image" (Overwrite this folder)
AFTER UPLOAD THEME FILES, YOU MAY GET ERROR (COULD NOT LOAD FILE) ON FRONT SIDE.
BUT DON'T WORRY, WHEN YOU ACTIVATE OUR THEME, IT IS WORK PERFECTLY.
also see below screenshot.
Now you have to set our Template from Admin panel Select Template on "Theme Directory"
Click on save button. also see below screenshot.
Sample Data Importer
Go to"System > Maintenance > Backup/restore > import.sql file"also see below screenshot.
Module Access Permission
Might you display "Access Permission denied" error what you try to access Third-Party Modules, Don't worry about it, Just need to assign administrator user-group permission. Go to"System > Users > User Groups > Administrator > Select all access permission and modify permission"also see below screenshot.
Theme Modules Setting↑ Back to Top
Go to"Extensions > Extensions > Modules > TT Product Tab"Click On"install Button" from admin panel
also see below screenshot.
Step-1: Blog Module Install
Go to"Extension > Extension > Modules > TT Blog"Click On"install Button" from admin panel
also see below screenshot.
Step-2: Blog Module Setting ↑ Back to Top
Go to"Extension > Extension > Modules > TT Blog"Click On EditGive name as TT-From-News Select Status as enabled Give height & width (870*564) Give Products Limit=5 Give Character Limit=50 (as per your Content) Select Allow Comments as Yes Select Login Required as Yes Select Automatic Approval as No
also see below screenshot.
Slideshow-Banner Setting
Go to "Design > Banners > Home Page Slideshow" Click On Edit
Give Banner name and select status Enabled Click on save
Logo Image Setting ↑ Back to Top
Go to"System > Settings > image"Change"Store logo" from admin panel
also see below screenshot.
Brand Image Setting ↑ Back to Top
Go to Design > Banners > Manufacturers Click on EditChange brand logo and click on save
ElectronicStore Theme Settings
Step-1 Image Size Setting Step-2 Slideshow Image Size Setting Step-3 Left/Right Banner Settings Step-4 TemplateTrip Module Setting Step-5 Homepage Products Setting Step-6 Layout settingStep-1: Image Size Setting↑ Back to Top
Go to "Extensions > Extensions > Themes > Your Store" Click on Editalso see below screenshot.
also see below screenshot.
Step-2: Slideshow Image Size Setting↑ Back to Top
Now activate your slideshow go to Extensions > Extensions > Modules > Slideshow Click on Edit Give ModuleName:Home Page Select Banner:Home Page Slideshow Give width & Height(950*550)(Your banner width & height) Select Enabled Now click on Save button
Categorypage - Left Banner/Right Banner
Go to Design > Banners > Click on AddNow provide banner name as category-left-banner and select banner image also select status Enable see bellow screen shot
Now activate your left banner go to Extensions > Extensions > Modules > Banner Click on Add Give ModuleName:category-left-banner Select Banner:category-left-banner Give width & Height (350*460) (Your banner width & height) Select Enabled Now click on Save button
Step-3: TemplateTrip Module Setting↑ Back to Top
Go To "Extensions > Extensions > Modules > Choose Your Module > Click on "Edit" Link
Copy Module CMS
Click On Code View Paste Your CMS in HTML code view Then Click on "Save" Link Go to "Extensions > Extensions > Module > HTML Content > Install(After install click on "Edit" link)"Module - 1:
For "TT-CMS-banner" Give Module Name as TT-CMS-banner Now click on Code View button in text editor block and paste this below code. From Select Status Enabled
<div id="ttcmsbanner"> <div class="ttcmsbanner"> <div class="row"> <div class="ttbanner-img1 ttbanner col-sm-6 col-xs-6"><a href="#"><img alt="banner-01.jpg" src="../image/catalog/demo/banners/banner-01.jpg"></a></div> <div class="ttbanner-img2 ttbanner col-sm-6 col-xs-6"><a href="#"><img alt="banner-02.jpg" src="../image/catalog/demo/banners/banner-02.jpg"></a></div> </div> </div> </div>
Module - 2:
For "TT-CMS-Bottom-Banner" Give Module Name as TT-CMS-Bottom-Banner Now click on Code View button in text editor block and paste this below code. From Select Status Enabled
<div id="ttcmsbottombanner"> <div class="ttcmsbottombanner"> <div class="ttbanner-img ttbanner col-sm-12 col-xs-12"><a href="#"><img alt="bottombanner-01.jpg" src="../image/catalog/demo/banners/bottombanner-01.jpg"></a></div> </div> </div>
Module - 3:
For "TT-CMS-ContactUs" Give Module Name as TT-CMS-ContactUs Now click on Code View button in text editor block and paste this below code. From Select Status Enabled
<div class="contact-us"> <h5 class="">Store Information</h5> <ul style="display: block;" class="list-unstyled"> <li class="contact-detail"> <div class="data address"> <i class="fa fa-map-marker"></i> <div class="contact-address">Demo Store<br>United States</div> </div> </li> <li class="email"> <div class="data email"> <i class="fa fa-envelope"></i> <span class="email-address"> <a href="mailto:demo@gmail.com">demo@gmail.com</a> </span> </div> </li> <li class="fax"> <div class="data fax"> <i class="fa fa-fax"></i> <span class="fax-address"> <a href="#">22354863</a> </span> </div> </li> <li class="contact"> <div class="data contact"> <i class="fa fa-phone"></i> <span class="phone"> <a href="#">0123456789</a> </span> </div> </li> </ul> </div>
Module - 4:
For "TT-CMS-FollowUs" Give Module Name as TT-CMS-FollowUs Now click on Code View button in text editor block and paste this below code. From Select Status Enabled
<div class="follow-us col-sm-3"> <h5>Follow us</h5> <ul class="list-unstyled"> <li class="facebook"> <a target="_blank" class="_blank" href="#" title="Facebook"> <i class="fa fa-facebook"></i> </a> </li> <li class="twitter"> <a target="_blank" class="_blank" href="#" title="Twitter"> <i class="fa fa-twitter"></i> </a> </li> <li class="rss"> <a target="_blank" class="_blank" href="#" title="RSS"> <i class="fa fa-rss"></i> </a> </li> <li class="google-plus"> <a target="_blank" class="_blank" href="#" rel="publisher" title="Google Plus"> <i class="fa fa-google-plus"></i> </a> </li> <li class="instagram"> <a target="_blank" class="_blank" href="#" rel="publisher" title="instagram"> <i aria-hidden="true" class="fa fa-instagram"></i> </a> </li> </ul> </div>
Module - 5:
For "TT-CMS-Footer" Give Module Name as TT-CMS-Footer Now click on Code View button in text editor block and paste this below code. From Select Status Enabled
<div id="ttcmsfooter"> <div class="ttfooter-banner"> <div class="ttcmstextdiv"> <div class="ttcmsthis"><span>On This Week Only/-</span></div> <div class="ttcmsetra"> <p>Extra <span>15% Off</span></p> </div> <div class="ttcmsapp"><span>Download App</span></div> </div> <div class="ttcmsimgdiv"> <div class="ttcmsappimg"><a href="#"><img alt="appstore-img" src="../image/catalog/demo/banners/appstore.png"></a></div> <div class="ttcmsplayimg"><a href="#"><img alt="googlepaly-img" src="../image/catalog/demo/banners/googlepaly.png"></a></div> </div> </div> </div>
Module - 6:
For "TT-CMS-Offer" Give Module Name as TT-CMS-Offer Now click on Code View button in text editor block and paste this below code. From Select Status Enabled
<div id="ttcmsoffer"> <div class="ttcmsoffer-content"> <div class="ttsupport service col-sm-12"> <div class="service-icon-background col-sm-5 col-xs-5"> <div class="ttsupport_img service-icon"><a href="#"><img alt="offer-01" src="../image/catalog/demo/banners/offer-01.jpg"></a></div> </div> <div class="service-content col-sm-7 col-xs-7"> <div class="service-title">Headphone</div> <div class="service-desc">Headphone users..</div> <div class="exploreit"><a href="#">Explore It</a></div> </div> </div> <div class="ttshare service col-sm-12"> <div class="service-icon-background col-sm-5 col-xs-5"> <div class="ttshare_img service-icon"><a href="#"><img alt="offer-02" src="../image/catalog/demo/banners/offer-02.jpg"></a></div> </div> <div class="service-content col-sm-7 col-xs-7"> <div class="service-title">Mac book Pro</div> <div class="service-desc">Daily Usage mac..</div> <div class="exploreit"><a href="#">Explore It</a></div> </div> </div> <div class="ttsaving service col-sm-12"> <div class="service-icon-background col-sm-5 col-xs-5"> <div class="ttsaving_img service-icon"><a href="#"><img alt="offer-03" src="../image/catalog/demo/banners/offer-03.jpg"></a></div> </div> <div class="service-content col-sm-7 col-xs-7"> <div class="service-title">Laptop</div> <div class="service-desc">digital laptops..</div> <div class="exploreit"><a href="#">Explore It</a></div> </div> </div> <div class="ttsaving service col-sm-12"> <div class="service-icon-background col-sm-5 col-xs-5"> <div class="ttsaving_img service-icon"><a href="#"><img alt="offer-04" src="../image/catalog/demo/banners/offer-04.jpg"></a></div> </div> <div class="service-content col-sm-7 col-xs-7"> <div class="service-title">Watch</div> <div class="service-desc">smart watch..</div> <div class="exploreit"><a href="#">Explore It</a></div> </div> </div> </div> <div class="customNavigation"> <a class="btn prev ttcmsoffer_prev"></a> <a class="btn next ttcmsoffer_next"></a> </div> </div>
Module - 7:
For "TT-CMS-Services" Give Module Name as TT-CMS-Services Now click on Code View button in text editor block and paste this below code. From Select Status Enabled
<div id="ttcmsservices"> <div class="ttcmsservice"> <div class="ttshipping col-sm-3"> <div class="ttshipping_img service-icon"></div> <div class="service-content"> <div class="service-title">Free Shipping</div> <div class="service-desc">Deliver to Door</div> </div> </div> <div class="ttsupport col-sm-3"> <div class="ttsupport_img service-icon"></div> <div class="service-content"> <div class="service-title">24x7 Support</div> <div class="service-desc">in Safe Hands</div> </div> </div> <div class="ttsaving col-sm-3"> <div class="ttsaving_img service-icon"></div> <div class="service-content"> <div class="service-title">Big Saving</div> <div class="service-desc">at Lowest Price</div> </div> </div> <div class="ttmoney col-sm-3"> <div class="ttmoney_img service-icon"></div> <div class="service-content"> <div class="service-title">Money Back</div> <div class="service-desc">Easy to Return</div> </div> </div> </div> </div>
Module - 8:
For "TT-CMS-Rightbanner" Give Module Name as TT-CMS-Rightbanner Now click on Code View button in text editor block and paste this below code. From Select Status Enabled
<div class="col-sm-4" id="ttcmsrightbanner"> <div class="ttrightbannerblock"> <div class="ttrightbanner-rows1"> <div class="ttrightanner1 ttbanners col-xs-12 col-sm-12"> <div class="ttrightbanner-img"><a href="#"><img src="../image/catalog/demo/banners/right-banner-01.jpg" alt="right-banner-01.jpg"></a></div> </div> </div> <div class="ttrightbanner-rows2"> <div class="ttrightanner2 ttbanners col-xs-12 col-sm-12"> <div class="ttrightbanner-img"><a href="#"><img src="../image/catalog/demo/banners/right-banner-02.jpg" alt="right-banner-02.jpg"></a></div> </div> </div> <div class="ttrightbanner-rows3"> <div class="ttrightanner3 ttbanners col-xs-12 col-sm-12"> <div class="ttrightbanner-img"><a href="#"><img src="../image/catalog/demo/banners/right-banner-03.jpg" alt="right-banner-03.jpg"></a></div> </div> </div> </div> </div>
Module - 9:
For "TT-CMS-Paymentlogo" Give Module Name as TT-CMS-Paymentlogo Now click on Code View button in text editor block and paste this below code. From Select Status Enabled
<div class="col-md-2 links" id="ttcmspaymentlogo"> <div class="payment_logo_block"> <ul class="payment-list"> <li class="discover"><a href="#"> <img alt="discover" src="../image/catalog/demo/banners/discover.png"></a></li> <li class="google"><a href="#"> <img alt="google" src="../image/catalog/demo/banners/google.png"></a></li> <li class="maestro"><a href="#"> <img alt="maestro" src="../image/catalog/demo/banners/maestro.png"></a></li> <li class="mastercard"><a href="#"> <img alt="mastercard" src="../image/catalog/demo/banners/mastercard.png"></a></li> <li class="paypal"><a href="#"> <img alt="paypal" src="../image/catalog/demo/banners/paypal.png"></a></li> <li class="visa"><a href="#"> <img alt="visa" src="../image/catalog/demo/banners/visa.png"></a></li> </ul> </div> </div>
Module - 10:
For "TT-CMS-Testimonial" Give Module Name as TT-CMS-Testimonial Now click on Code View button in text editor block and paste this below code. From Select Status Enabled
<div id="ttcmstestimonial"> <h4 class="title_block">Testimonials</h4> <div id="tttestimonial" class="tttestimonial"> <div class="tttestimonial-content"> <div class="tttestimonial-inner"> <ul id="tttestimonial-carousel" class="tt-carousel"> <li> <div class="testimonial-image"><img alt="" src="../image/catalog/demo/banners/user1.jpg"></div> <div class="testimonial-content"> <div class="testimonial-user-title"> <h4>John Duff</h4> </div> <div class="testimonial-desc"> <p>Duis faucibus enim vitae nunc molestie, nec facilisis arcu pulvinar nullam mattis..</p> </div> </div> </li> <li> <div class="testimonial-image"><img alt="" src="../image/catalog/demo/banners/user2.jpg"></div> <div class="testimonial-content"> <div class="testimonial-user-title"> <h4>John Duff</h4> </div> <div class="testimonial-desc"> <p>Duis faucibus enim vitae nunc molestie, nec facilisis arcu pulvinar nullam mattis..</p> </div> </div> </li> <li> <div class="testimonial-image"><img alt="" src="../image/catalog/demo/banners/user3.jpg"></div> <div class="testimonial-content"> <div class="testimonial-user-title"> <h4>John Duff</h4> </div> <div class="testimonial-desc"> <p>Duis faucibus enim vitae nunc molestie, nec facilisis arcu pulvinar nullam mattis..</p> </div> </div> </li> </ul> </div> </div> </div> </div>
Module - 11:
For "TT-CMS-Top-Banner" Give Module Name as TT-CMS-Top-Banner Now click on Code View button in text editor block and paste this below code. From Select Status Enabled
<div id="ttcmstopbanner"> <div class="ttcmstopbanner"> <div class="row"> <div class="ttbanner-img1 ttbanner col-sm-6 col-xs-6"><a href="#"><img alt="topbanner-01" src="../image/catalog/demo/banners/topbanner-01.jpg"></a></div> <div class="ttbanner-img2 ttbanner col-sm-6 col-xs-6"><a href="#"><img alt="topbanner-02" src="../image/catalog/demo/banners/topbanner-02.jpg"></a></div> </div> </div> </div>
Step-4: Homepage Products Setting↑ Back to Top
Go to"Extensions > Extensions > Modules > TT Product Tab"Click On EditGive name as Home page Select tab Featured, Latest, Bestseller or Special Select Products on Featured Products Box that display on Homepage Tabs. Give Products Limit=9 Give height & width 290*290 (as per your product image) Select Status as enabled
also see below screenshot.
Homepage Special-Products Setting↑ Back to Top
Go to"Extension > Extension > Modules > Special"Click On EditGive name as Home-Special Give Products Limit=6 Give height & width 290*290 (as per your product image) Select Status as enabled
also see below screenshot.
Column left/right setting↑ Back to Top
Setting of left and right columnGo to "Extensions > Extensions > Modules" Install "Module"Click on Edit
Give module name as Left-Latest Give limit Give width & height(80*80)
then set on layouts and select its position.
Step-5: Layout setting↑ Back to Top
Go to "Design > Layouts" For Home Layout setting Click on Home layout Edit link, and set below settings.
For Category Layout setting Click on Home layout Edit link, and set below settings.
For Product Layout setting Click on Home layout Edit link, and set below settings.
For Account Layout setting Click on Home layout Edit link, and set below settings.
For Affiliate Layout setting Click on Home layout Edit link, and set below settings.
For Checkout Layout setting Click on Home layout Edit link, and set below settings.
For Compare Layout setting Click on Home layout Edit link, and set below settings.
For Contact Layout setting Click on Home layout Edit link, and set below settings.
For Information Layout setting Click on Home layout Edit link, and set below settings.
For Manufacturer Layout setting Click on Home layout Edit link, and set below settings.
For Search Layout setting Click on Home layout Edit link, and set below settings.
For Sitemap Layout setting Click on Home layout Edit link, and set below settings.
Electronic2 Store Theme Settings
Step-2 Slideshow Image Size Setting Step-3 Left/Right Banner Settings Step-4 TemplateTrip Module Setting Step-5 Homepage Products Setting Step-6 Layout settingStep-1: Image Size Setting↑ Back to Top
Go to "Extensions > Extensions > Themes > Your Store" Click on Editalso see below screenshot.
also see below screenshot.
Step-2: Slideshow Image Size Setting↑ Back to Top
Now activate your slideshow go to Extensions > Extensions > Modules > Slideshow Click on Edit Give ModuleName:Home Page Select Banner:Home Page Slideshow Give width & Height(1280*450)(Your banner width & height) Select Enabled Now click on Save button
Categorypage - Left Banner/Right Banner
Go to Design > Banners > Click on AddNow provide banner name as category-left-banner and select banner image also select status Enable see bellow screen shot
Now activate your left banner go to Extensions > Extensions > Modules > Banner Click on Add Give ModuleName:category-left-banner Select Banner:category-left-banner Give width & Height (285*415) (Your banner width & height) Select Enabled Now click on Save button
Step-3: TemplateTrip Module Setting↑ Back to Top
Go To "Extensions > Extensions > Modules > Choose Your Module > Click on "Edit" Link
Copy Module CMS
Click On Code View Paste Your CMS in HTML code view Then Click on "Save" Link Go to "Extensions > Extensions > Module > HTML Content > Install(After install click on "Edit" link)"Module - 1:
For "TT-CMS-banner" Give Module Name as TT-CMS-banner Now click on Code View button in text editor block and paste this below code. From Select Status Enabled
<div id="ttcmsbanner"> <div class="ttcmsbanner"> <div class="row"> <div class="ttbanner-img1 ttbanner col-sm-6 col-xs-6"><a href="#"><img alt="banner-01.jpg" src="../image/catalog/demo/banners/banner-01.jpg"></a></div> <div class="ttbanner-img2 ttbanner col-sm-6 col-xs-6"><a href="#"><img alt="banner-02.jpg" src="../image/catalog/demo/banners/banner-02.jpg"></a></div> </div> </div> </div>
Module - 2:
For "TT-CMS-Bottom-Banner" Give Module Name as TT-CMS-Bottom-Banner Now click on Code View button in text editor block and paste this below code. From Select Status Enabled
<div id="ttcmsbottombanner"> <div class="ttcmsbottombanner"> <div class="ttbanner-img ttbanner col-sm-12 col-xs-12"><a href="#"><img alt="bottombanner-01.jpg" src="../image/catalog/demo/banners/bottombanner-01.jpg"></a></div> </div> </div>
Module - 3:
For "TT-CMS-ContactUs" Give Module Name as TT-CMS-ContactUs Now click on Code View button in text editor block and paste this below code. From Select Status Enabled
<div class="contact-us"> <h5 class="">Store Information</h5> <ul style="display: block;" class="list-unstyled"> <li class="contact-detail"> <div class="data address"> <i class="fa fa-map-marker"></i> <div class="contact-address">Demo Store<br>United States</div> </div> </li> <li class="email"> <div class="data email"> <i class="fa fa-envelope"></i> <span class="email-address"> <a href="mailto:demo@gmail.com">demo@gmail.com</a> </span> </div> </li> <li class="fax"> <div class="data fax"> <i class="fa fa-fax"></i> <span class="fax-address"> <a href="#">22354863</a> </span> </div> </li> <li class="contact"> <div class="data contact"> <i class="fa fa-phone"></i> <span class="phone"> <a href="#">0123456789</a> </span> </div> </li> </ul> </div>
Module - 4:
For "TT-CMS-FollowUs" Give Module Name as TT-CMS-FollowUs Now click on Code View button in text editor block and paste this below code. From Select Status Enabled
<div class="follow-us col-sm-3"> <h5>Follow us</h5> <ul class="list-unstyled"> <li class="facebook"> <a target="_blank" class="_blank" href="#" title="Facebook"> <i class="fa fa-facebook"></i> </a> </li> <li class="twitter"> <a target="_blank" class="_blank" href="#" title="Twitter"> <i class="fa fa-twitter"></i> </a> </li> <li class="rss"> <a target="_blank" class="_blank" href="#" title="RSS"> <i class="fa fa-rss"></i> </a> </li> <li class="google-plus"> <a target="_blank" class="_blank" href="#" rel="publisher" title="Google Plus"> <i class="fa fa-google-plus"></i> </a> </li> <li class="instagram"> <a target="_blank" class="_blank" href="#" rel="publisher" title="instagram"> <i aria-hidden="true" class="fa fa-instagram"></i> </a> </li> </ul> </div>
Module - 5:
For "TT-CMS-Footer" Give Module Name as TT-CMS-Footer Now click on Code View button in text editor block and paste this below code. From Select Status Enabled
<div id="ttcmsfooter"> <div class="ttfooter-banner"> <div class="ttcmstextdiv"> <div class="ttcmsthis"><span>On This Week Only/-</span></div> <div class="ttcmsetra"> <p>Extra <span>15% Off</span></p> </div> <div class="ttcmsapp"><span>Download App</span></div> </div> <div class="ttcmsimgdiv"> <div class="ttcmsappimg"><a href="#"><img alt="appstore-img" src="../image/catalog/demo/banners/appstore.png"></a></div> <div class="ttcmsplayimg"><a href="#"><img alt="googlepaly-img" src="../image/catalog/demo/banners/googlepaly.png"></a></div> </div> </div> </div>
Module - 6:
For "TT-CMS-headerservices" Give Module Name as TT-CMS-headerservices Now click on Code View button in text editor block and paste this below code. From Select Status Enabled
<div id="ttcmsheader"> <div class="ttheader-service">Wants to explore Upcoming Deals on Weekends?</div> </div>
Module - 7:
For "TT-CMS-Services" Give Module Name as TT-CMS-Services Now click on Code View button in text editor block and paste this below code. From Select Status Enabled
<div id="ttcmsservices"> <div class="ttcmsservice"> <div class="ttshipping col-sm-3"> <div class="ttshipping_img service-icon"></div> <div class="service-content"> <div class="service-title">Free Shipping</div> <div class="service-desc">Deliver to Door</div> </div> </div> <div class="ttsupport col-sm-3"> <div class="ttsupport_img service-icon"></div> <div class="service-content"> <div class="service-title">24x7 Support</div> <div class="service-desc">in Safe Hands</div> </div> </div> <div class="ttsaving col-sm-3"> <div class="ttsaving_img service-icon"></div> <div class="service-content"> <div class="service-title">Big Saving</div> <div class="service-desc">at Lowest Price</div> </div> </div> <div class="ttmoney col-sm-3"> <div class="ttmoney_img service-icon"></div> <div class="service-content"> <div class="service-title">Money Back</div> <div class="service-desc">Easy to Return</div> </div> </div> </div> </div>
Module - 8:
For "TT-CMS-Paymentlogo" Give Module Name as TT-CMS-Paymentlogo Now click on Code View button in text editor block and paste this below code. From Select Status Enabled
<div class="col-md-2 links" id="ttcmspaymentlogo"> <div class="payment_logo_block"> <ul class="payment-list"> <li class="discover"><a href="#"> <img alt="discover" src="../image/catalog/demo/banners/discover.png"></a></li> <li class="google"><a href="#"> <img alt="google" src="../image/catalog/demo/banners/google.png"></a></li> <li class="maestro"><a href="#"> <img alt="maestro" src="../image/catalog/demo/banners/maestro.png"></a></li> <li class="mastercard"><a href="#"> <img alt="mastercard" src="../image/catalog/demo/banners/mastercard.png"></a></li> <li class="paypal"><a href="#"> <img alt="paypal" src="../image/catalog/demo/banners/paypal.png"></a></li> <li class="visa"><a href="#"> <img alt="visa" src="../image/catalog/demo/banners/visa.png"></a></li> </ul> </div> </div>
Module - 9:
For "TT-CMS-Testimonial" Give Module Name as TT-CMS-Testimonial Now click on Code View button in text editor block and paste this below code. From Select Status Enabled
<div id="ttcmstestimonial"> <h4 class="title_block">Testimonials</h4> <div id="tttestimonial" class="tttestimonial"> <div class="tttestimonial-content"> <div class="tttestimonial-inner"> <ul id="tttestimonial-carousel" class="tt-carousel"> <li> <div class="testimonial-image"><img alt="" src="../image/catalog/demo/banners/user1.jpg"></div> <div class="testimonial-content"> <div class="testimonial-user-title"> <h4>John Duff</h4> </div> <div class="testimonial-desc"> <p>Duis faucibus enim vitae nunc molestie, nec facilisis arcu pulvinar nullam mattis..</p> </div> </div> </li> <li> <div class="testimonial-image"><img alt="" src="../image/catalog/demo/banners/user2.jpg"></div> <div class="testimonial-content"> <div class="testimonial-user-title"> <h4>John Duff</h4> </div> <div class="testimonial-desc"> <p>Duis faucibus enim vitae nunc molestie, nec facilisis arcu pulvinar nullam mattis..</p> </div> </div> </li> <li> <div class="testimonial-image"><img alt="" src="../image/catalog/demo/banners/user3.jpg"></div> <div class="testimonial-content"> <div class="testimonial-user-title"> <h4>John Duff</h4> </div> <div class="testimonial-desc"> <p>Duis faucibus enim vitae nunc molestie, nec facilisis arcu pulvinar nullam mattis..</p> </div> </div> </li> </ul> </div> </div> </div> </div>
Module - 10:
For "TT-CMS-Top-Banner" Give Module Name as TT-CMS-Top-Banner Now click on Code View button in text editor block and paste this below code. From Select Status Enabled
<div id="ttcmstopbanner"> <div class="ttcmstopbanner"> <div class="row"> <div class="ttbanner-img1 ttbanner col-sm-6 col-xs-6"><a href="#"><img alt="topbanner-01" src="../image/catalog/demo/banners/topbanner-01.jpg"></a></div> <div class="ttbanner-img2 ttbanner col-sm-6 col-xs-6"><a href="#"><img alt="topbanner-02" src="../image/catalog/demo/banners/topbanner-02.jpg"></a></div> </div> </div> </div>
Step-4: Homepage Products Setting↑ Back to Top
Go to"Extensions > Extensions > Modules > TT Product Tab"Click On EditGive name as Home page Select tab Featured, Latest, Bestseller or Special Select Products on Featured Products Box that display on Homepage Tabs. Give Products Limit=9 Give height & width 270*270 (as per your product image) Select Status as enabled
also see below screenshot.
Homepage Special-Products Setting↑ Back to Top
Go to"Extension > Extension > Modules > Special"Click On EditGive name as Home-Special Give Products Limit=6 Give height & width 270*270 (as per your product image) Select Status as enabled
also see below screenshot.
Column left/right setting↑ Back to Top
Setting of left and right columnGo to "Extensions > Extensions > Modules" Install "Module"Click on Edit
Give module name as Left-Latest Give limit Give width & height(80*80)
then set on layouts and select its position.
Step-5: Layout setting↑ Back to Top
Go to "Design > Layouts" For Home Layout setting Click on Home layout Edit link, and set below settings.
For Category Layout setting Click on Home layout Edit link, and set below settings.
For Product Layout setting Click on Home layout Edit link, and set below settings.
For Account Layout setting Click on Home layout Edit link, and set below settings.
For Affiliate Layout setting Click on Home layout Edit link, and set below settings.
For Checkout Layout setting Click on Home layout Edit link, and set below settings.
For Compare Layout setting Click on Home layout Edit link, and set below settings.
For Contact Layout setting Click on Home layout Edit link, and set below settings.
For Information Layout setting Click on Home layout Edit link, and set below settings.
For Manufacturer Layout setting Click on Home layout Edit link, and set below settings.
For Search Layout setting Click on Home layout Edit link, and set below settings.
For Sitemap Layout setting Click on Home layout Edit link, and set below settings.
LingerieStore Theme Settings
Step-2 Slideshow Image Size Setting Step-3 Left/Right Banner Settings Step-4 TemplateTrip Module Setting Step-5 Homepage Products Setting Step-6 Layout settingStep-1: Image Size Setting↑ Back to Top
Go to "Extensions > Extensions > Themes > Your Store" Click on Editalso see below screenshot.
also see below screenshot.
Step-2: Slideshow Image Size Setting↑ Back to Top
Now activate your slideshow go to Extensions > Extensions > Modules > Slideshow Click on Edit Give ModuleName:Home Page Select Banner:Home Page Slideshow Give width & Height(950*550)(Your banner width & height) Select Enabled Now click on Save button
Categorypage - Left Banner/Right Banner
Go to Design > Banners > Click on AddNow provide banner name as category-left-banner and select banner image also select status Enable see bellow screen shot
Now activate your left banner go to Extensions > Extensions > Modules > Banner Click on Add Give ModuleName:category-left-banner Select Banner:category-left-banner Give width & Height (280*410) (Your banner width & height) Select Enabled Now click on Save button
Step-3: TemplateTrip Module Setting↑ Back to Top
Go To "Extensions > Extensions > Modules > Choose Your Module > Click on "Edit" Link
Copy Module CMS
Click On Code View Paste Your CMS in HTML code view Then Click on "Save" Link Go to "Extensions > Extensions > Module > HTML Content > Install(After install click on "Edit" link)"Module - 1:
For "TT-CMS-banner" Give Module Name as TT-CMS-banner Now click on Code View button in text editor block and paste this below code. From Select Status Enabled
<div id="ttcmsbanner"> <div class="ttcmsbanner"> <div class="row"> <div class="ttbanner-img1 ttbanner col-sm-8 col-xs-8"><a href="#"><img alt="banner-01.jpg" src="../image/catalog/demo/banners/banner-01.jpg"></a></div> <div class="ttbanner-img2 ttbanner col-sm-4 col-xs-4"><a href="#"><img alt="banner-02.jpg" src="../image/catalog/demo/banners/banner-02.jpg"></a></div> </div> </div> </div>
Module - 2:
For "TT-CMS-Bottom-Banner" Give Module Name as TT-CMS-Bottom-Banner Now click on Code View button in text editor block and paste this below code. From Select Status Enabled
<div id="ttcmsbottombanner"> <div class="ttcmsbottombanner"> <div class="ttbanner-img ttbanner col-sm-12 col-xs-12"><a href="#"><img alt="bottombanner-01.jpg" src="../image/catalog/demo/banners/bottombanner-01.jpg"></a></div> </div> </div>
Module - 3:
For "TT-CMS-ContactUs" Give Module Name as TT-CMS-ContactUs Now click on Code View button in text editor block and paste this below code. From Select Status Enabled
<div class="contact-us"> <h5 class="">Store Information</h5> <ul style="display: block;" class="list-unstyled"> <li class="contact-detail"> <div class="data address"> <i class="fa fa-map-marker"></i> <div class="contact-address">Demo Store<br>United States</div> </div> </li> <li class="email"> <div class="data email"> <i class="fa fa-envelope"></i> <span class="email-address"> <a href="mailto:demo@gmail.com">demo@gmail.com</a> </span> </div> </li> <li class="fax"> <div class="data fax"> <i class="fa fa-fax"></i> <span class="fax-address"> <a href="#">22354863</a> </span> </div> </li> <li class="contact"> <div class="data contact"> <i class="fa fa-phone"></i> <span class="phone"> <a href="#">0123456789</a> </span> </div> </li> </ul> </div>
Module - 4:
For "TT-CMS-FollowUs" Give Module Name as TT-CMS-FollowUs Now click on Code View button in text editor block and paste this below code. From Select Status Enabled
<div class="follow-us col-sm-3"> <h5>Follow us</h5> <ul class="list-unstyled"> <li class="facebook"> <a target="_blank" class="_blank" href="#" title="Facebook"> <i class="fa fa-facebook"></i> </a> </li> <li class="twitter"> <a target="_blank" class="_blank" href="#" title="Twitter"> <i class="fa fa-twitter"></i> </a> </li> <li class="rss"> <a target="_blank" class="_blank" href="#" title="RSS"> <i class="fa fa-rss"></i> </a> </li> <li class="google-plus"> <a target="_blank" class="_blank" href="#" rel="publisher" title="Google Plus"> <i class="fa fa-google-plus"></i> </a> </li> <li class="instagram"> <a target="_blank" class="_blank" href="#" rel="publisher" title="instagram"> <i aria-hidden="true" class="fa fa-instagram"></i> </a> </li> </ul> </div>
Module - 5:
For "TT-CMS-Footer" Give Module Name as TT-CMS-Footer Now click on Code View button in text editor block and paste this below code. From Select Status Enabled
<div id="ttcmsfooter"> <div class="ttfooter-banner"> <div class="ttcmstextdiv"> <div class="ttcmsthis"><span>On This Week Only/-</span></div> <div class="ttcmsetra"> <p>Extra <span>15% Off</span></p> </div> <div class="ttcmsapp"><span>Download App</span></div> </div> <div class="ttcmsimgdiv"> <div class="ttcmsappimg"><a href="#"><img alt="appstore-img" src="../image/catalog/demo/banners/appstore.png"></a></div> <div class="ttcmsplayimg"><a href="#"><img alt="googlepaly-img" src="../image/catalog/demo/banners/googlepaly.png"></a></div> </div> </div> </div>
Module - 6:
For "TT-CMS-headerservices" Give Module Name as TT-CMS-headerservices Now click on Code View button in text editor block and paste this below code. From Select Status Enabled
<div id="ttcmsheader"> <div class="ttheader-service">Wants to explore Upcoming Deals on Weekends?</div> </div>
Module - 7:
For "TT-CMS-Services" Give Module Name as TT-CMS-Services Now click on Code View button in text editor block and paste this below code. From Select Status Enabled
<div id="ttcmsservices"> <div class="ttcmsservice"> <div class="ttshipping col-sm-3"> <div class="ttshipping_img service-icon"></div> <div class="service-content"> <div class="service-title">Free Shipping</div> <div class="service-desc">Deliver to Door</div> </div> </div> <div class="ttsupport col-sm-3"> <div class="ttsupport_img service-icon"></div> <div class="service-content"> <div class="service-title">24x7 Support</div> <div class="service-desc">in Safe Hands</div> </div> </div> <div class="ttsaving col-sm-3"> <div class="ttsaving_img service-icon"></div> <div class="service-content"> <div class="service-title">Big Saving</div> <div class="service-desc">at Lowest Price</div> </div> </div> <div class="ttmoney col-sm-3"> <div class="ttmoney_img service-icon"></div> <div class="service-content"> <div class="service-title">Money Back</div> <div class="service-desc">Easy to Return</div> </div> </div> </div> </div>
Module - 8:
For "TT-CMS-Paymentlogo" Give Module Name as TT-CMS-Paymentlogo Now click on Code View button in text editor block and paste this below code. From Select Status Enabled
<div class="col-md-2 links" id="ttcmspaymentlogo"> <div class="payment_logo_block"> <ul class="payment-list"> <li class="discover"><a href="#"> <img alt="discover" src="../image/catalog/demo/banners/discover.png"></a></li> <li class="google"><a href="#"> <img alt="google" src="../image/catalog/demo/banners/google.png"></a></li> <li class="maestro"><a href="#"> <img alt="maestro" src="../image/catalog/demo/banners/maestro.png"></a></li> <li class="mastercard"><a href="#"> <img alt="mastercard" src="../image/catalog/demo/banners/mastercard.png"></a></li> <li class="paypal"><a href="#"> <img alt="paypal" src="../image/catalog/demo/banners/paypal.png"></a></li> <li class="visa"><a href="#"> <img alt="visa" src="../image/catalog/demo/banners/visa.png"></a></li> </ul> </div> </div>
Module - 9:
For "TT-CMS-Testimonial" Give Module Name as TT-CMS-Testimonial Now click on Code View button in text editor block and paste this below code. From Select Status Enabled
<div id="ttcmstestimonial"> <div class="tttestimonial-content"> <div class="tttestimonial-inner"> <ul id="tttestimonial-carousel" class="tt-carousel"> <li> <div class="testimonial-image"><img alt="" src="../image/catalog/demo/banners/user1.jpg"></div> <div class="testimonial-content"> <div class="testimonial-user-title"> <h4>John Duff</h4> </div> <div class="testimonial-desc"> <p>Duis faucibus enim vitae nunc molestie, nec facilisis arcu pulvinar. Nullam mattis arcu convallis, bibendum dui ac, laoreet est. Vivamus interdum egestas rutrum. Quisque laoreet ante sed placerat imperdiet.</p> </div> </div> </li> <li> <div class="testimonial-image"><img alt="" src="../image/catalog/demo/banners/user2.jpg"></div> <div class="testimonial-content"> <div class="testimonial-user-title"> <h4>John Duff</h4> </div> <div class="testimonial-desc"> <p>Duis faucibus enim vitae nunc molestie, nec facilisis arcu pulvinar. Nullam mattis arcu convallis, bibendum dui ac, laoreet est. Vivamus interdum egestas rutrum. Quisque laoreet ante sed placerat imperdiet.</p> </div> </div> </li> <li> <div class="testimonial-image"><img alt="" src="../image/catalog/demo/banners/user3.jpg"></div> <div class="testimonial-content"> <div class="testimonial-user-title"> <h4>John Duff</h4> </div> <div class="testimonial-desc"> <p>Duis faucibus enim vitae nunc molestie, nec facilisis arcu pulvinar. Nullam mattis arcu convallis, bibendum dui ac, laoreet est. Vivamus interdum egestas rutrum. Quisque laoreet ante sed placerat imperdiet.</p> </div> </div> </li> </ul> </div> </div> </div>
Module - 10:
For "TT-CMS-Top-Banner" Give Module Name as TT-CMS-Top-Banner Now click on Code View button in text editor block and paste this below code. From Select Status Enabled
<div id="ttcmstopbanner"> <div class="ttcmstopbanner"> <div class="row"> <div class="ttbanner-img1 ttbanner col-sm-6 col-xs-6"><a href="#"><img alt="topbanner-01" src="../image/catalog/demo/banners/topbanner-01.jpg"></a></div> <div class="ttbanner-img2 ttbanner col-sm-6 col-xs-6"><a href="#"><img alt="topbanner-02" src="../image/catalog/demo/banners/topbanner-02.jpg"></a></div> </div> </div> </div>
Module - 11:
For "TT-CMS-Rightbanner" Give Module Name as TT-CMS-Rightbanner Now click on Code View button in text editor block and paste this below code. From Select Status Enabled
<div class="col-sm-4" id="ttcmsrightbanner"> <div class="ttrightbannerblock"> <div class="ttrightbanner-rows1"> <div class="ttrightanner1 ttbanners col-xs-12 col-sm-12"> <div class="ttrightbanner-img"><a href="#"><img alt="right-banner-01.jpg" src="../image/catalog/demo/banners/right-banner-01.jpg"></a></div> </div> </div> </div> </div>
Step-4: Homepage Products Setting↑ Back to Top
Go to"Extensions > Extensions > Modules > TT Product Tab"Click On EditGive name as Home page Select tab Featured, Latest, Bestseller or Special Select Products on Featured Products Box that display on Homepage Tabs. Give Products Limit=9 Give height & width 270*351 (as per your product image) Select Status as enabled
also see below screenshot.
Homepage Special-Products Setting↑ Back to Top
Go to"Extension > Extension > Modules > Special"Click On EditGive name as Home-Special Give Products Limit=6 Give height & width 270*351 (as per your product image) Select Status as enabled
also see below screenshot.
Column left/right setting↑ Back to Top
Setting of left and right columnGo to "Extensions > Extensions > Modules" Install "Module"Click on Edit
Give module name as Left-Latest Give limit Give width & height(70*91)
then set on layouts and select its position.
Step-5: Layout setting↑ Back to Top
Go to "Design > Layouts" For Home Layout setting Click on Home layout Edit link, and set below settings.
For Category Layout setting Click on Home layout Edit link, and set below settings.
For Product Layout setting Click on Home layout Edit link, and set below settings.
For Account Layout setting Click on Home layout Edit link, and set below settings.
For Affiliate Layout setting Click on Home layout Edit link, and set below settings.
For Checkout Layout setting Click on Home layout Edit link, and set below settings.
For Compare Layout setting Click on Home layout Edit link, and set below settings.
For Contact Layout setting Click on Home layout Edit link, and set below settings.
For Information Layout setting Click on Home layout Edit link, and set below settings.
For Manufacturer Layout setting Click on Home layout Edit link, and set below settings.
For Search Layout setting Click on Home layout Edit link, and set below settings.
For Sitemap Layout setting Click on Home layout Edit link, and set below settings.
KidsStore Theme Settings
Step-2 Slideshow Image Size Setting Step-3 Left/Right Banner Settings Step-4 TemplateTrip Module Setting Step-5 Homepage Products Setting Step-6 Layout settingStep-1: Image Size Setting↑ Back to Top
Go to "Extensions > Extensions > Themes > Your Store" Click on Editalso see below screenshot.
also see below screenshot.
Step-2: Slideshow Image Size Setting↑ Back to Top
Now activate your slideshow go to Extensions > Extensions > Modules > Slideshow Click on Edit Give ModuleName:Home Page Select Banner:Home Page Slideshow Give width & Height(1470*500)(Your banner width & height) Select Enabled Now click on Save button
Categorypage - Left Banner/Right Banner
Go to Design > Banners > Click on AddNow provide banner name as category-left-banner and select banner image also select status Enable see bellow screen shot
Now activate your left banner go to Extensions > Extensions > Modules > Banner Click on Add Give ModuleName:category-left-banner Select Banner:category-left-banner Give width & Height (280*440) (Your banner width & height) Select Enabled Now click on Save button
Step-3: TemplateTrip Module Setting↑ Back to Top
Go To "Extensions > Extensions > Modules > Choose Your Module > Click on "Edit" Link
Copy Module CMS
Click On Code View Paste Your CMS in HTML code view Then Click on "Save" Link Go to "Extensions > Extensions > Module > HTML Content > Install(After install click on "Edit" link)"Module - 1:
For "TT-CMS-banner" Give Module Name as TT-CMS-banner Now click on Code View button in text editor block and paste this below code. From Select Status Enabled
<div id="ttcmsbanner"> <div class="ttcmsbanner"> <div class="row"> <div class="ttbanner-img1 ttbanner col-sm-8 col-xs-8"><a href="#"><img alt="banner-01.jpg" src="../image/catalog/demo/banners/banner-01.jpg"></a></div> <div class="ttbanner-img2 ttbanner col-sm-4 col-xs-4"><a href="#"><img alt="banner-02.jpg" src="../image/catalog/demo/banners/banner-02.jpg"></a></div> </div> </div> </div>
Module - 2:
For "TT-CMS-Bottom-Banner" Give Module Name as TT-CMS-Bottom-Banner Now click on Code View button in text editor block and paste this below code. From Select Status Enabled
<div id="ttcmsbottombanner"> <div class="ttcmsbottombanner"> <div class="ttbanner-img ttbanner col-sm-12 col-xs-12"><a href="#"><img alt="bottombanner-01.jpg" src="../image/catalog/demo/banners/bottombanner-01.jpg"></a></div> </div> </div>
Module - 3:
For "TT-CMS-ContactUs" Give Module Name as TT-CMS-ContactUs Now click on Code View button in text editor block and paste this below code. From Select Status Enabled
<div class="contact-us"> <h5 class="">Store Information</h5> <ul style="display: block;" class="list-unstyled"> <li class="contact-detail"> <div class="data address"> <i class="fa fa-map-marker"></i> <div class="contact-address">Demo Store<br>United States</div> </div> </li> <li class="email"> <div class="data email"> <i class="fa fa-envelope"></i> <span class="email-address"> <a href="mailto:demo@gmail.com">demo@gmail.com</a> </span> </div> </li> <li class="fax"> <div class="data fax"> <i class="fa fa-fax"></i> <span class="fax-address"> <a href="#">22354863</a> </span> </div> </li> <li class="contact"> <div class="data contact"> <i class="fa fa-phone"></i> <span class="phone"> <a href="#">0123456789</a> </span> </div> </li> </ul> </div>
Module - 4:
For "TT-CMS-FollowUs" Give Module Name as TT-CMS-FollowUs Now click on Code View button in text editor block and paste this below code. From Select Status Enabled
<div class="follow-us col-sm-3"> <h5>Follow us</h5> <ul class="list-unstyled"> <li class="facebook"> <a target="_blank" class="_blank" href="#" title="Facebook"> <i class="fa fa-facebook"></i> </a> </li> <li class="twitter"> <a target="_blank" class="_blank" href="#" title="Twitter"> <i class="fa fa-twitter"></i> </a> </li> <li class="rss"> <a target="_blank" class="_blank" href="#" title="RSS"> <i class="fa fa-rss"></i> </a> </li> <li class="google-plus"> <a target="_blank" class="_blank" href="#" rel="publisher" title="Google Plus"> <i class="fa fa-google-plus"></i> </a> </li> <li class="instagram"> <a target="_blank" class="_blank" href="#" rel="publisher" title="instagram"> <i aria-hidden="true" class="fa fa-instagram"></i> </a> </li> </ul> </div>
Module - 5:
For "TT-CMS-Footer" Give Module Name as TT-CMS-Footer Now click on Code View button in text editor block and paste this below code. From Select Status Enabled
<div id="ttcmsfooter"> <div class="ttfooter-banner"> <div class="ttcmstextdiv"> <div class="ttcmsthis"><span>On This Week Only/-</span></div> <div class="ttcmsetra"> <p>Extra <span>15% Off</span></p> </div> <div class="ttcmsapp"><span>Download App</span></div> </div> <div class="ttcmsimgdiv"> <div class="ttcmsappimg"><a href="#"><img alt="appstore-img" src="../image/catalog/demo/banners/appstore.png"></a></div> <div class="ttcmsplayimg"><a href="#"><img alt="googlepaly-img" src="../image/catalog/demo/banners/googlepaly.png"></a></div> </div> </div> </div>
Module - 6:
For "TT-CMS-headerservices" Give Module Name as TT-CMS-headerservices Now click on Code View button in text editor block and paste this below code. From Select Status Enabled
<div id="ttcmsheader"> <div class="ttheader-service">Wants to explore Upcoming Deals on Weekends?</div> </div>
Module - 7:
For "TT-CMS-Services" Give Module Name as TT-CMS-Services Now click on Code View button in text editor block and paste this below code. From Select Status Enabled
<div id="ttcmsservices"> <div class="ttcmsservice"> <div class="ttshipping col-sm-3"> <div class="ttshipping_img service-icon"></div> <div class="service-content"> <div class="service-title">Free Shipping</div> <div class="service-desc">Deliver to Door</div> </div> </div> <div class="ttsupport col-sm-3"> <div class="ttsupport_img service-icon"></div> <div class="service-content"> <div class="service-title">24x7 Support</div> <div class="service-desc">in Safe Hands</div> </div> </div> <div class="ttsaving col-sm-3"> <div class="ttsaving_img service-icon"></div> <div class="service-content"> <div class="service-title">Big Saving</div> <div class="service-desc">at Lowest Price</div> </div> </div> <div class="ttmoney col-sm-3"> <div class="ttmoney_img service-icon"></div> <div class="service-content"> <div class="service-title">Money Back</div> <div class="service-desc">Easy to Return</div> </div> </div> </div> </div>
Module - 8:
For "TT-CMS-Paymentlogo" Give Module Name as TT-CMS-Paymentlogo Now click on Code View button in text editor block and paste this below code. From Select Status Enabled
<div class="col-md-2 links" id="ttcmspaymentlogo"> <div class="payment_logo_block"> <ul class="payment-list"> <li class="discover"><a href="#"> <img alt="discover" src="../image/catalog/demo/banners/discover.png"></a></li> <li class="google"><a href="#"> <img alt="google" src="../image/catalog/demo/banners/google.png"></a></li> <li class="maestro"><a href="#"> <img alt="maestro" src="../image/catalog/demo/banners/maestro.png"></a></li> <li class="mastercard"><a href="#"> <img alt="mastercard" src="../image/catalog/demo/banners/mastercard.png"></a></li> <li class="paypal"><a href="#"> <img alt="paypal" src="../image/catalog/demo/banners/paypal.png"></a></li> <li class="visa"><a href="#"> <img alt="visa" src="../image/catalog/demo/banners/visa.png"></a></li> </ul> </div> </div>
Module - 9:
For "TT-CMS-Testimonial" Give Module Name as TT-CMS-Testimonial Now click on Code View button in text editor block and paste this below code. From Select Status Enabled
<div id="ttcmstestimonial"> <div class="tttestimonial-content"> <div class="tttestimonial-inner"> <ul id="tttestimonial-carousel" class="tt-carousel"> <li> <div class="testimonial-image"><img alt="" src="../image/catalog/demo/banners/user1.jpg"></div> <div class="testimonial-content"> <div class="testimonial-user-title"> <h4>John Duff</h4> </div> <div class="testimonial-desc"> <p>Duis faucibus enim vitae nunc molestie, nec facilisis arcu pulvinar. Nullam mattis arcu convallis, bibendum dui ac, laoreet est. Vivamus interdum egestas rutrum. Quisque laoreet ante sed placerat imperdiet.</p> </div> </div> </li> <li> <div class="testimonial-image"><img alt="" src="../image/catalog/demo/banners/user2.jpg"></div> <div class="testimonial-content"> <div class="testimonial-user-title"> <h4>John Duff</h4> </div> <div class="testimonial-desc"> <p>Duis faucibus enim vitae nunc molestie, nec facilisis arcu pulvinar. Nullam mattis arcu convallis, bibendum dui ac, laoreet est. Vivamus interdum egestas rutrum. Quisque laoreet ante sed placerat imperdiet.</p> </div> </div> </li> <li> <div class="testimonial-image"><img alt="" src="../image/catalog/demo/banners/user3.jpg"></div> <div class="testimonial-content"> <div class="testimonial-user-title"> <h4>John Duff</h4> </div> <div class="testimonial-desc"> <p>Duis faucibus enim vitae nunc molestie, nec facilisis arcu pulvinar. Nullam mattis arcu convallis, bibendum dui ac, laoreet est. Vivamus interdum egestas rutrum. Quisque laoreet ante sed placerat imperdiet.</p> </div> </div> </li> </ul> </div> </div> </div>
Module - 10:
For "TT-CMS-Top-Banner" Give Module Name as TT-CMS-Top-Banner Now click on Code View button in text editor block and paste this below code. From Select Status Enabled
<div id="ttcmstopbanner"> <div class="ttcmstopbanner"> <div class="row"> <div class="ttbanner-img1 ttbanner col-sm-6 col-xs-6"><a href="#"><img alt="topbanner-01" src="../image/catalog/demo/banners/topbanner-01.jpg"></a></div> <div class="ttbanner-img2 ttbanner col-sm-6 col-xs-6"><a href="#"><img alt="topbanner-02" src="../image/catalog/demo/banners/topbanner-02.jpg"></a></div> </div> </div> </div>
Step-4: Homepage Products Setting↑ Back to Top
Go to"Extensions > Extensions > Modules > TT Product Tab"Click On EditGive name as Home page Select tab Featured, Latest, Bestseller or Special Select Products on Featured Products Box that display on Homepage Tabs. Give Products Limit=9 Give height & width 270*351 (as per your product image) Select Status as enabled
also see below screenshot.
Homepage Special-Products Setting↑ Back to Top
Go to"Extension > Extension > Modules > Special"Click On EditGive name as Home-Special Give Products Limit=6 Give height & width 270*351 (as per your product image) Select Status as enabled
also see below screenshot.
Column left/right setting↑ Back to Top
Setting of left and right columnGo to "Extensions > Extensions > Modules" Install "Module"Click on Edit
Give module name as Left-Latest Give limit Give width & height(70*91)
then set on layouts and select its position.
Step-5: Layout setting↑ Back to Top
Go to "Design > Layouts" For Home Layout setting Click on Home layout Edit link, and set below settings.
For Category Layout setting Click on Home layout Edit link, and set below settings.
For Product Layout setting Click on Home layout Edit link, and set below settings.
For Account Layout setting Click on Home layout Edit link, and set below settings.
For Affiliate Layout setting Click on Home layout Edit link, and set below settings.
For Checkout Layout setting Click on Home layout Edit link, and set below settings.
For Compare Layout setting Click on Home layout Edit link, and set below settings.
For Contact Layout setting Click on Home layout Edit link, and set below settings.
For Information Layout setting Click on Home layout Edit link, and set below settings.
For Manufacturer Layout setting Click on Home layout Edit link, and set below settings.
For Search Layout setting Click on Home layout Edit link, and set below settings.
For Sitemap Layout setting Click on Home layout Edit link, and set below settings.
JewellryStore Theme Settings
Step-2 Slideshow Image Size Setting Step-3 Left/Right Banner Settings Step-4 TemplateTrip Module Setting Step-5 Homepage Products Setting Step-6 Layout settingStep-1: Image Size Setting↑ Back to Top
Go to "Extensions > Extensions > Themes > Your Store" Click on Editalso see below screenshot.
also see below screenshot.
Step-2: Slideshow Image Size Setting↑ Back to Top
Now activate your slideshow go to Extensions > Extensions > Modules > Slideshow Click on Edit Give ModuleName:Home Page Select Banner:Home Page Slideshow Give width & Height(1280*550)(Your banner width & height) Select Enabled Now click on Save button
Categorypage - Left Banner/Right Banner
Go to Design > Banners > Click on AddNow provide banner name as category-left-banner and select banner image also select status Enable see bellow screen shot
Now activate your left banner go to Extensions > Extensions > Modules > Banner Click on Add Give ModuleName:category-left-banner Select Banner:category-left-banner Give width & Height (290*450) (Your banner width & height) Select Enabled Now click on Save button
Step-3: TemplateTrip Module Setting↑ Back to Top
Go To "Extensions > Extensions > Modules > Choose Your Module > Click on "Edit" Link
Copy Module CMS
Click On Code View Paste Your CMS in HTML code view Then Click on "Save" Link Go to "Extensions > Extensions > Module > HTML Content > Install(After install click on "Edit" link)"Module - 1:
For "TT-CMS-banner" Give Module Name as TT-CMS-banner Now click on Code View button in text editor block and paste this below code. From Select Status Enabled
<div id="ttcmsbanner"> <div class="ttcmsbanner"> <div class="row"> <div class="ttbanner-img1 ttbanner col-sm-8 col-xs-8"><a href="#"><img alt="banner-01.jpg" src="../image/catalog/demo/banners/banner-01.jpg"></a></div> <div class="ttbanner-img2 ttbanner col-sm-4 col-xs-4"><a href="#"><img alt="banner-02.jpg" src="../image/catalog/demo/banners/banner-02.jpg"></a></div> </div> </div> </div>
Module - 2:
For "TT-CMS-Bottom-Banner" Give Module Name as TT-CMS-Bottom-Banner Now click on Code View button in text editor block and paste this below code. From Select Status Enabled
<div id="ttcmsbottombanner"> <div class="ttcmsbottombanner"> <div class="ttbanner-img ttbanner col-sm-12 col-xs-12"><a href="#"><img alt="bottombanner-01.jpg" src="../image/catalog/demo/banners/bottombanner-01.jpg"></a></div> </div> </div>
Module - 3:
For "TT-CMS-ContactUs" Give Module Name as TT-CMS-ContactUs Now click on Code View button in text editor block and paste this below code. From Select Status Enabled
<div class="contact-us"> <h5 class="">Store Information</h5> <ul style="display: block;" class="list-unstyled"> <li class="contact-detail"> <div class="data address"> <i class="fa fa-map-marker"></i> <div class="contact-address">Demo Store<br>United States</div> </div> </li> <li class="email"> <div class="data email"> <i class="fa fa-envelope"></i> <span class="email-address"> <a href="mailto:demo@gmail.com">demo@gmail.com</a> </span> </div> </li> <li class="fax"> <div class="data fax"> <i class="fa fa-fax"></i> <span class="fax-address"> <a href="#">22354863</a> </span> </div> </li> <li class="contact"> <div class="data contact"> <i class="fa fa-phone"></i> <span class="phone"> <a href="#">0123456789</a> </span> </div> </li> </ul> </div>
Module - 4:
For "TT-CMS-FollowUs" Give Module Name as TT-CMS-FollowUs Now click on Code View button in text editor block and paste this below code. From Select Status Enabled
<div class="follow-us col-sm-3"> <h5>Follow us</h5> <ul class="list-unstyled"> <li class="facebook"> <a target="_blank" class="_blank" href="#" title="Facebook"> <i class="fa fa-facebook"></i> </a> </li> <li class="twitter"> <a target="_blank" class="_blank" href="#" title="Twitter"> <i class="fa fa-twitter"></i> </a> </li> <li class="rss"> <a target="_blank" class="_blank" href="#" title="RSS"> <i class="fa fa-rss"></i> </a> </li> <li class="google-plus"> <a target="_blank" class="_blank" href="#" rel="publisher" title="Google Plus"> <i class="fa fa-google-plus"></i> </a> </li> <li class="instagram"> <a target="_blank" class="_blank" href="#" rel="publisher" title="instagram"> <i aria-hidden="true" class="fa fa-instagram"></i> </a> </li> </ul> </div>
Module - 5:
For "TT-CMS-Footer" Give Module Name as TT-CMS-Footer Now click on Code View button in text editor block and paste this below code. From Select Status Enabled
<div id="ttcmsfooter"> <div class="ttfooter-banner"> <div class="ttcmstextdiv"> <div class="ttcmsthis"><span>On This Week Only/-</span></div> <div class="ttcmsetra"> <p>Extra <span>15% Off</span></p> </div> <div class="ttcmsapp"><span>Download App</span></div> </div> <div class="ttcmsimgdiv"> <div class="ttcmsappimg"><a href="#"><img alt="appstore-img" src="../image/catalog/demo/banners/appstore.png"></a></div> <div class="ttcmsplayimg"><a href="#"><img alt="googlepaly-img" src="../image/catalog/demo/banners/googlepaly.png"></a></div> </div> </div> </div>
Module - 6:
For "TT-CMS-headerservices" Give Module Name as TT-CMS-headerservices Now click on Code View button in text editor block and paste this below code. From Select Status Enabled
<div id="ttcmsheader"> <div class="ttheader-service">Wants to explore Upcoming Deals on Weekends?</div> </div>
Module - 7:
For "TT-CMS-Services" Give Module Name as TT-CMS-Services Now click on Code View button in text editor block and paste this below code. From Select Status Enabled
<div id="ttcmsservices"> <div class="ttcmsservice"> <div class="ttshipping col-sm-3"> <div class="ttshipping_img service-icon"></div> <div class="service-content"> <div class="service-title">Free Shipping</div> <div class="service-desc">Deliver to Door</div> </div> </div> <div class="ttsupport col-sm-3"> <div class="ttsupport_img service-icon"></div> <div class="service-content"> <div class="service-title">24x7 Support</div> <div class="service-desc">in Safe Hands</div> </div> </div> <div class="ttsaving col-sm-3"> <div class="ttsaving_img service-icon"></div> <div class="service-content"> <div class="service-title">Big Saving</div> <div class="service-desc">at Lowest Price</div> </div> </div> <div class="ttmoney col-sm-3"> <div class="ttmoney_img service-icon"></div> <div class="service-content"> <div class="service-title">Money Back</div> <div class="service-desc">Easy to Return</div> </div> </div> </div> </div>
Module - 8:
For "TT-CMS-Paymentlogo" Give Module Name as TT-CMS-Paymentlogo Now click on Code View button in text editor block and paste this below code. From Select Status Enabled
<div class="col-md-2 links" id="ttcmspaymentlogo"> <div class="payment_logo_block"> <ul class="payment-list"> <li class="discover"><a href="#"> <img alt="discover" src="../image/catalog/demo/banners/discover.png"></a></li> <li class="google"><a href="#"> <img alt="google" src="../image/catalog/demo/banners/google.png"></a></li> <li class="maestro"><a href="#"> <img alt="maestro" src="../image/catalog/demo/banners/maestro.png"></a></li> <li class="mastercard"><a href="#"> <img alt="mastercard" src="../image/catalog/demo/banners/mastercard.png"></a></li> <li class="paypal"><a href="#"> <img alt="paypal" src="../image/catalog/demo/banners/paypal.png"></a></li> <li class="visa"><a href="#"> <img alt="visa" src="../image/catalog/demo/banners/visa.png"></a></li> </ul> </div> </div>
Module - 9:
For "TT-CMS-Testimonial" Give Module Name as TT-CMS-Testimonial Now click on Code View button in text editor block and paste this below code. From Select Status Enabled
<div id="ttcmstestimonial"> <h4 class="title_block">Testimonials</h4> <div id="tttestimonial" class="tttestimonial"> <div class="tttestimonial-content"> <div class="tttestimonial-inner"> <ul id="tttestimonial-carousel" class="tt-carousel"> <li> <div class="testimonial-image"><img alt="" src="image/catalog/demo/banners/user1.jpg"></div> <div class="testimonial-content"> <div class="testimonial-user-title"> <h4>John Duff</h4> </div> <div class="testimonial-desc"> <p>Duis faucibus enim vitae nunc molestie, nec facilisis arcu pulvinar nullam mattis..</p> </div> </div> </li> <li> <div class="testimonial-image"><img alt="" src="image/catalog/demo/banners/user2.jpg"></div> <div class="testimonial-content"> <div class="testimonial-user-title"> <h4>John Duff</h4> </div> <div class="testimonial-desc"> <p>Duis faucibus enim vitae nunc molestie, nec facilisis arcu pulvinar nullam mattis..</p> </div> </div> </li> <li> <div class="testimonial-image"><img alt="" src="image/catalog/demo/banners/user3.jpg"></div> <div class="testimonial-content"> <div class="testimonial-user-title"> <h4>John Duff</h4> </div> <div class="testimonial-desc"> <p>Duis faucibus enim vitae nunc molestie, nec facilisis arcu pulvinar nullam mattis..</p> </div> </div> </li> </ul> </div> </div> </div> </div>
Module - 10:
For "TT-CMS-Top-Banner" Give Module Name as TT-CMS-Top-Banner Now click on Code View button in text editor block and paste this below code. From Select Status Enabled
<div id="ttcmstopbanner"> <div class="ttcmstopbanner"> <div class="row"> <div class="ttbanner-img1 ttbanner col-sm-4 col-xs-4"><a href="#"><img alt="topbanner-01" src="../image/catalog/demo/banners/topbanner-01.jpg"></a></div> <div class="ttbanner-img2 ttbanner col-sm-8 col-xs-8"><a href="#"><img alt="topbanner-02" src="../image/catalog/demo/banners/topbanner-02.jpg"></a></div> </div> </div> </div>
Step-4: Homepage Products Setting↑ Back to Top
Go to"Extensions > Extensions > Modules > TT Product Tab"Click On EditGive name as Home page Select tab Featured, Latest, Bestseller or Special Select Products on Featured Products Box that display on Homepage Tabs. Give Products Limit=9 Give height & width 232*302 (as per your product image) Select Status as enabled
also see below screenshot.
Homepage Special-Products Setting↑ Back to Top
Go to"Extension > Extension > Modules > Special"Click On EditGive name as Home-Special Give Products Limit=6 Give height & width 232*302 (as per your product image) Select Status as enabled
also see below screenshot.
Column left/right setting↑ Back to Top
Setting of left and right columnGo to "Extensions > Extensions > Modules" Install "Module"Click on Edit
Give module name as Left-Latest Give limit Give width & height(70*91)
then set on layouts and select its position.
Step-5: Layout setting↑ Back to Top
Go to "Design > Layouts" For Home Layout setting Click on Home layout Edit link, and set below settings.
For Category Layout setting Click on Home layout Edit link, and set below settings.
For Product Layout setting Click on Home layout Edit link, and set below settings.
For Account Layout setting Click on Home layout Edit link, and set below settings.
For Affiliate Layout setting Click on Home layout Edit link, and set below settings.
For Checkout Layout setting Click on Home layout Edit link, and set below settings.
For Compare Layout setting Click on Home layout Edit link, and set below settings.
For Contact Layout setting Click on Home layout Edit link, and set below settings.
For Information Layout setting Click on Home layout Edit link, and set below settings.
For Manufacturer Layout setting Click on Home layout Edit link, and set below settings.
For Search Layout setting Click on Home layout Edit link, and set below settings.
For Sitemap Layout setting Click on Home layout Edit link, and set below settings.
FurnitureStore Theme Settings
Step-2 Slideshow Image Size Setting Step-3 Left/Right Banner Settings Step-4 TemplateTrip Module Setting Step-5 Homepage Products Setting Step-6 Layout settingStep-1: Image Size Setting↑ Back to Top
Go to "Extensions > Extensions > Themes > Your Store" Click on Editalso see below screenshot.
also see below screenshot.
Step-2: Slideshow Image Size Setting↑ Back to Top
Now activate your slideshow go to Extensions > Extensions > Modules > Slideshow Click on Edit Give ModuleName:Home Page Select Banner:Home Page Slideshow Give width & Height(1903*750)(Your banner width & height) Select Enabled Now click on Save button
Categorypage - Left Banner/Right Banner
Go to Design > Banners > Click on AddNow provide banner name as category-left-banner and select banner image also select status Enable see bellow screen shot
Now activate your left banner go to Extensions > Extensions > Modules > Banner Click on Add Give ModuleName:category-left-banner Select Banner:category-left-banner Give width & Height (300*480) (Your banner width & height) Select Enabled Now click on Save button
Step-3: TemplateTrip Module Setting↑ Back to Top
Go To "Extensions > Extensions > Modules > Choose Your Module > Click on "Edit" Link
Copy Module CMS
Click On Code View Paste Your CMS in HTML code view Then Click on "Save" Link Go to "Extensions > Extensions > Module > HTML Content > Install(After install click on "Edit" link)"Module - 1:
For "TT-CMS-banner" Give Module Name as TT-CMS-banner Now click on Code View button in text editor block and paste this below code. From Select Status Enabled
<div id="ttcmsbanner"> <div class="ttcmsbanner"> <div class="row"> <div class="ttbanner-img1 ttbanner col-sm-6 col-xs-6"><a href="#"><img alt="banner-01.jpg" src="../image/catalog/demo/banners/banner-01.jpg"></a></div> <div class="ttbanner-img2 ttbanner col-sm-6 col-xs-6"><a href="#"><img alt="banner-02.jpg" src="../image/catalog/demo/banners/banner-02.jpg"></a></div> </div> </div> </div>
Module - 2:
For "TT-CMS-Bottom-Banner" Give Module Name as TT-CMS-Bottom-Banner Now click on Code View button in text editor block and paste this below code. From Select Status Enabled
<div id="ttcmsbottombanner"> <div class="ttcmsbottombanner"> <div class="ttbanner-img ttbanner col-sm-12 col-xs-12"><a href="#"><img alt="bottombanner-01.jpg" src="../image/catalog/demo/banners/bottombanner-01.jpg"></a></div> </div> </div>
Module - 3:
For "TT-CMS-ContactUs" Give Module Name as TT-CMS-ContactUs Now click on Code View button in text editor block and paste this below code. From Select Status Enabled
<div class="contact-us"> <h5 class="">Store Information</h5> <ul style="display: block;" class="list-unstyled"> <li class="contact-detail"> <div class="data address"> <i class="fa fa-map-marker"></i> <div class="contact-address">Demo Store<br>United States</div> </div> </li> <li class="email"> <div class="data email"> <i class="fa fa-envelope"></i> <span class="email-address"> <a href="mailto:demo@gmail.com">demo@gmail.com</a> </span> </div> </li> <li class="fax"> <div class="data fax"> <i class="fa fa-fax"></i> <span class="fax-address"> <a href="#">22354863</a> </span> </div> </li> <li class="contact"> <div class="data contact"> <i class="fa fa-phone"></i> <span class="phone"> <a href="#">0123456789</a> </span> </div> </li> </ul> </div>
Module - 4:
For "TT-CMS-FollowUs" Give Module Name as TT-CMS-FollowUs Now click on Code View button in text editor block and paste this below code. From Select Status Enabled
<div class="follow-us col-sm-3"> <h5>Follow us</h5> <ul class="list-unstyled"> <li class="facebook"> <a target="_blank" class="_blank" href="#" title="Facebook"> <i class="fa fa-facebook"></i> </a> </li> <li class="twitter"> <a target="_blank" class="_blank" href="#" title="Twitter"> <i class="fa fa-twitter"></i> </a> </li> <li class="rss"> <a target="_blank" class="_blank" href="#" title="RSS"> <i class="fa fa-rss"></i> </a> </li> <li class="google-plus"> <a target="_blank" class="_blank" href="#" rel="publisher" title="Google Plus"> <i class="fa fa-google-plus"></i> </a> </li> <li class="instagram"> <a target="_blank" class="_blank" href="#" rel="publisher" title="instagram"> <i aria-hidden="true" class="fa fa-instagram"></i> </a> </li> </ul> </div>
Module - 5:
For "TT-CMS-Footer" Give Module Name as TT-CMS-Footer Now click on Code View button in text editor block and paste this below code. From Select Status Enabled
<div id="ttcmsfooter"> <div class="ttfooter-banner"> <div class="ttcmstextdiv"> <div class="ttcmsthis"><span>On This Week Only/-</span></div> <div class="ttcmsetra"> <p>Extra <span>15% Off</span></p> </div> <div class="ttcmsapp"><span>Download App</span></div> </div> <div class="ttcmsimgdiv"> <div class="ttcmsappimg"><a href="#"><img alt="appstore-img" src="../image/catalog/demo/banners/appstore.png"></a></div> <div class="ttcmsplayimg"><a href="#"><img alt="googlepaly-img" src="../image/catalog/demo/banners/googlepaly.png"></a></div> </div> </div> </div>
Module - 6:
For "TT-CMS-headerservices" Give Module Name as TT-CMS-headerservices Now click on Code View button in text editor block and paste this below code. From Select Status Enabled
<div id="ttcmsheader"> <div class="ttheader-service">Wants to explore Upcoming Deals on Weekends?</div> </div>
Module - 7:
For "TT-CMS-Services" Give Module Name as TT-CMS-Services Now click on Code View button in text editor block and paste this below code. From Select Status Enabled
<div id="ttcmsservices"> <div class="ttcmsservice"> <div class="ttshipping col-sm-3"> <div class="ttshipping_img service-icon"></div> <div class="service-content"> <div class="service-title">Free Shipping</div> <div class="service-desc">Deliver to Door</div> </div> </div> <div class="ttsupport col-sm-3"> <div class="ttsupport_img service-icon"></div> <div class="service-content"> <div class="service-title">24x7 Support</div> <div class="service-desc">in Safe Hands</div> </div> </div> <div class="ttsaving col-sm-3"> <div class="ttsaving_img service-icon"></div> <div class="service-content"> <div class="service-title">Big Saving</div> <div class="service-desc">at Lowest Price</div> </div> </div> <div class="ttmoney col-sm-3"> <div class="ttmoney_img service-icon"></div> <div class="service-content"> <div class="service-title">Money Back</div> <div class="service-desc">Easy to Return</div> </div> </div> </div> </div>
Module - 8:
For "TT-CMS-Paymentlogo" Give Module Name as TT-CMS-Paymentlogo Now click on Code View button in text editor block and paste this below code. From Select Status Enabled
<div class="col-md-2 links" id="ttcmspaymentlogo"> <div class="payment_logo_block"> <ul class="payment-list"> <li class="discover"><a href="#"> <img alt="discover" src="../image/catalog/demo/banners/discover.png"></a></li> <li class="google"><a href="#"> <img alt="google" src="../image/catalog/demo/banners/google.png"></a></li> <li class="maestro"><a href="#"> <img alt="maestro" src="../image/catalog/demo/banners/maestro.png"></a></li> <li class="mastercard"><a href="#"> <img alt="mastercard" src="../image/catalog/demo/banners/mastercard.png"></a></li> <li class="paypal"><a href="#"> <img alt="paypal" src="../image/catalog/demo/banners/paypal.png"></a></li> <li class="visa"><a href="#"> <img alt="visa" src="../image/catalog/demo/banners/visa.png"></a></li> </ul> </div> </div>
Module - 9:
For "TT-CMS-Testimonial" Give Module Name as TT-CMS-Testimonial Now click on Code View button in text editor block and paste this below code. From Select Status Enabled
<div id="ttcmstestimonial"> <h4 class="title_block">Testimonials</h4> <div id="tttestimonial" class="tttestimonial"> <div class="tttestimonial-content"> <div class="tttestimonial-inner"> <ul id="tttestimonial-carousel" class="tt-carousel"> <li> <div class="testimonial-image"><img alt="" src="image/catalog/demo/banners/user1.jpg"></div> <div class="testimonial-content"> <div class="testimonial-user-title"> <h4>John Duff</h4> </div> <div class="testimonial-desc"> <p>Duis faucibus enim vitae nunc molestie, nec facilisis arcu pulvinar nullam mattis..</p> </div> </div> </li> <li> <div class="testimonial-image"><img alt="" src="image/catalog/demo/banners/user2.jpg"></div> <div class="testimonial-content"> <div class="testimonial-user-title"> <h4>John Duff</h4> </div> <div class="testimonial-desc"> <p>Duis faucibus enim vitae nunc molestie, nec facilisis arcu pulvinar nullam mattis..</p> </div> </div> </li> <li> <div class="testimonial-image"><img alt="" src="image/catalog/demo/banners/user3.jpg"></div> <div class="testimonial-content"> <div class="testimonial-user-title"> <h4>John Duff</h4> </div> <div class="testimonial-desc"> <p>Duis faucibus enim vitae nunc molestie, nec facilisis arcu pulvinar nullam mattis..</p> </div> </div> </li> </ul> </div> </div> </div> </div>
Module - 10:
For "TT-CMS-Top-Banner" Give Module Name as TT-CMS-Top-Banner Now click on Code View button in text editor block and paste this below code. From Select Status Enabled
<div id="ttcmstopbanner"> <div class="ttcmstopbanner"> <div class="row"> <div class="ttbanner-img1 ttbanner col-sm-6 col-xs-6"><a href="#"><img alt="topbanner-01" src="../image/catalog/demo/banners/topbanner-01.jpg"></a></div> <div class="ttbanner-img2 ttbanner col-sm-6 col-xs-6"><a href="#"><img alt="topbanner-02" src="../image/catalog/demo/banners/topbanner-02.jpg"></a></div> </div> </div> </div>
Step-4: Homepage Products Setting↑ Back to Top
Go to"Extensions > Extensions > Modules > TT Product Tab"Click On EditGive name as Home page Select tab Featured, Latest, Bestseller or Special Select Products on Featured Products Box that display on Homepage Tabs. Give Products Limit=9 Give height & width 230*299 (as per your product image) Select Status as enabled
also see below screenshot.
Homepage Special-Products Setting↑ Back to Top
Go to"Extension > Extension > Modules > Special"Click On EditGive name as Home-Special Give Products Limit=6 Give height & width 230*299 (as per your product image) Select Status as enabled
also see below screenshot.
Column left/right setting↑ Back to Top
Setting of left and right columnGo to "Extensions > Extensions > Modules" Install "Module"Click on Edit
Give module name as Left-Latest Give limit Give width & height(70*91)
then set on layouts and select its position.
Step-5: Layout setting↑ Back to Top
Go to "Design > Layouts" For Home Layout setting Click on Home layout Edit link, and set below settings.
For Category Layout setting Click on Home layout Edit link, and set below settings.
For Product Layout setting Click on Home layout Edit link, and set below settings.
For Account Layout setting Click on Home layout Edit link, and set below settings.
For Affiliate Layout setting Click on Home layout Edit link, and set below settings.
For Checkout Layout setting Click on Home layout Edit link, and set below settings.
For Compare Layout setting Click on Home layout Edit link, and set below settings.
For Contact Layout setting Click on Home layout Edit link, and set below settings.
For Information Layout setting Click on Home layout Edit link, and set below settings.
For Manufacturer Layout setting Click on Home layout Edit link, and set below settings.
For Search Layout setting Click on Home layout Edit link, and set below settings.
For Sitemap Layout setting Click on Home layout Edit link, and set below settings.
Grocery Store Theme Settings
Step-1 Image Size Setting Step-2 Slideshow Image Size Setting Step-3 Left/Right Banner Settings Step-4 TemplateTrip Module Setting Step-5 Homepage Products Setting Step-6 Layout settingStep-1: Image Size Setting↑ Back to Top
Go to "Extensions > Extensions > Themes > Your Store" Click on Editalso see below screenshot.
also see below screenshot.
Step-2: Slideshow Image Size Setting↑ Back to Top
Now activate your slideshow go to Extensions > Extensions > Modules > Slideshow Click on Edit Give ModuleName:Home Page Select Banner:Home Page Slideshow Give width & Height(1280*550)(Your banner width & height) Select Enabled Now click on Save button
Categorypage - Left Banner/Right Banner
Go to Design > Banners > Click on AddNow provide banner name as category-left-banner and select banner image also select status Enable see bellow screen shot
Now activate your left banner go to Extensions > Extensions > Modules > Banner Click on Add Give ModuleName:category-left-banner Select Banner:category-left-banner Give width & Height (300*450) (Your banner width & height) Select Enabled Now click on Save button
Step-3: TemplateTrip Module Setting↑ Back to Top
Go To "Extensions > Extensions > Modules > Choose Your Module > Click on "Edit" Link
Copy Module CMS
Click On Code View Paste Your CMS in HTML code view Then Click on "Save" Link Go to "Extensions > Extensions > Module > HTML Content > Install(After install click on "Edit" link)"Module - 1:
For "TT-CMS-banner" Give Module Name as TT-CMS-banner Now click on Code View button in text editor block and paste this below code. From Select Status Enabled
<div id="ttcmsbanner"> <div class="ttcmsbanner"> <div class="row"> <div class="ttbanner-img2 ttbanner col-sm-6 col-xs-6"><a href="#"><img src="../image/catalog/demo/banners/banner-02.jpg" alt="banner-02.jpg"></a></div> <div class="ttbanner-img1 ttbanner col-sm-3 col-xs-3"><a href="#"><img src="../image/catalog/demo/banners/banner-01.jpg" alt="banner-01.jpg"></a></div> <div class="ttbanner-img3 ttbanner col-sm-3 col-xs-3"><a href="#"><img src="../image/catalog/demo/banners/banner-03.jpg" alt="banner-03.jpg"></a></div> </div> </div> </div>
Module - 2:
For "TT-CMS-Bottom-Banner" Give Module Name as TT-CMS-Bottom-Banner Now click on Code View button in text editor block and paste this below code. From Select Status Enabled
<div id="ttcmsbottombanner"> <div class="ttcmsbottombanner"> <div class="ttbanner-img ttbanner col-sm-12 col-xs-12"><a href="#"><img alt="bottombanner-01.jpg" src="../image/catalog/demo/banners/bottombanner-01.jpg"></a></div> </div> </div>
Module - 3:
For "TT-CMS-ContactUs" Give Module Name as TT-CMS-ContactUs Now click on Code View button in text editor block and paste this below code. From Select Status Enabled
<div class="contact-us"> <h5 class="">Store Information</h5> <ul style="display: block;" class="list-unstyled"> <li class="contact-detail"> <div class="data address"> <i class="fa fa-map-marker"></i> <div class="contact-address">Demo Store<br>United States</div> </div> </li> <li class="email"> <div class="data email"> <i class="fa fa-envelope"></i> <span class="email-address"> <a href="mailto:demo@gmail.com">demo@gmail.com</a> </span> </div> </li> <li class="fax"> <div class="data fax"> <i class="fa fa-fax"></i> <span class="fax-address"> <a href="#">22354863</a> </span> </div> </li> <li class="contact"> <div class="data contact"> <i class="fa fa-phone"></i> <span class="phone"> <a href="#">0123456789</a> </span> </div> </li> </ul> </div>
Module - 4:
For "TT-CMS-FollowUs" Give Module Name as TT-CMS-FollowUs Now click on Code View button in text editor block and paste this below code. From Select Status Enabled
<div class="follow-us col-sm-3"> <h5>Follow us</h5> <ul class="list-unstyled"> <li class="facebook"> <a target="_blank" class="_blank" href="#" title="Facebook"> <i class="fa fa-facebook"></i> </a> </li> <li class="twitter"> <a target="_blank" class="_blank" href="#" title="Twitter"> <i class="fa fa-twitter"></i> </a> </li> <li class="rss"> <a target="_blank" class="_blank" href="#" title="RSS"> <i class="fa fa-rss"></i> </a> </li> <li class="google-plus"> <a target="_blank" class="_blank" href="#" rel="publisher" title="Google Plus"> <i class="fa fa-google-plus"></i> </a> </li> <li class="instagram"> <a target="_blank" class="_blank" href="#" rel="publisher" title="instagram"> <i aria-hidden="true" class="fa fa-instagram"></i> </a> </li> </ul> </div>
Module - 5:
For "TT-CMS-Footer" Give Module Name as TT-CMS-Footer Now click on Code View button in text editor block and paste this below code. From Select Status Enabled
<div id="ttcmsfooter"> <div class="ttfooter-banner"> <div class="ttcmstextdiv"> <div class="ttcmsthis"><span>On This Week Only/-</span></div> <div class="ttcmsetra"> <p>Extra <span>15% Off</span></p> </div> <div class="ttcmsapp"><span>Download App</span></div> </div> <div class="ttcmsimgdiv"> <div class="ttcmsappimg"><a href="#"><img alt="appstore-img" src="../image/catalog/demo/banners/appstore.png"></a></div> <div class="ttcmsplayimg"><a href="#"><img alt="googlepaly-img" src="../image/catalog/demo/banners/googlepaly.png"></a></div> </div> </div> </div>
Module - 6:
For "TT-CMS-headerservices" Give Module Name as TT-CMS-headerservices Now click on Code View button in text editor block and paste this below code. From Select Status Enabled
<div id="ttcmsheader"> <div class="ttheader-service">Wants to explore Upcoming Deals on Weekends?</div> </div>
Module - 7:
For "TT-CMS-Paymentlogo" Give Module Name as TT-CMS-Paymentlogo Now click on Code View button in text editor block and paste this below code. From Select Status Enabled
<div class="col-md-2 links" id="ttcmspaymentlogo"> <div class="payment_logo_block"> <ul class="payment-list"> <li class="discover"><a href="#"> <img alt="discover" src="../image/catalog/demo/banners/discover.png"></a></li> <li class="google"><a href="#"> <img alt="google" src="../image/catalog/demo/banners/google.png"></a></li> <li class="maestro"><a href="#"> <img alt="maestro" src="../image/catalog/demo/banners/maestro.png"></a></li> <li class="mastercard"><a href="#"> <img alt="mastercard" src="../image/catalog/demo/banners/mastercard.png"></a></li> <li class="paypal"><a href="#"> <img alt="paypal" src="../image/catalog/demo/banners/paypal.png"></a></li> <li class="visa"><a href="#"> <img alt="visa" src="../image/catalog/demo/banners/visa.png"></a></li> </ul> </div> </div>
Module - 8:
For "TT-CMS-Testimonial" Give Module Name as TT-CMS-Testimonial Now click on Code View button in text editor block and paste this below code. From Select Status Enabled
<div id="ttcmstestimonial"> <h4 class="title_block">Testimonials</h4> <div id="tttestimonial" class="tttestimonial"> <div class="tttestimonial-content"> <div class="tttestimonial-inner"> <ul id="tttestimonial-carousel" class="tt-carousel"> <li> <div class="testimonial-image"><img alt="" src="../image/catalog/demo/banners/user1.jpg"></div> <div class="testimonial-content"> <div class="testimonial-user-title"> <h4>John Duff</h4> </div> <div class="testimonial-desc"> <p>Duis faucibus enim vitae nunc molestie, nec facilisis arcu pulvinar nullam mattis..</p> </div> </div> </li> <li> <div class="testimonial-image"><img alt="" src="../image/catalog/demo/banners/user2.jpg"></div> <div class="testimonial-content"> <div class="testimonial-user-title"> <h4>John Duff</h4> </div> <div class="testimonial-desc"> <p>Duis faucibus enim vitae nunc molestie, nec facilisis arcu pulvinar nullam mattis..</p> </div> </div> </li> <li> <div class="testimonial-image"><img alt="" src="../image/catalog/demo/banners/user3.jpg"></div> <div class="testimonial-content"> <div class="testimonial-user-title"> <h4>John Duff</h4> </div> <div class="testimonial-desc"> <p>Duis faucibus enim vitae nunc molestie, nec facilisis arcu pulvinar nullam mattis..</p> </div> </div> </li> </ul> </div> </div> </div> </div>
Module - 9:
For "TT-CMS-Top-Banner" Give Module Name as TT-CMS-Top-Banner Now click on Code View button in text editor block and paste this below code. From Select Status Enabled
<div id="ttcmstopbanner"> <div class="ttcmstopbanner"> <div class="row"> <div class="ttbanner-img1 ttbanner col-sm-6 col-xs-6"><a href="#"><img alt="topbanner-01" src="../image/catalog/demo/banners/topbanner-01.jpg"></a></div> <div class="ttbanner-img2 ttbanner col-sm-6 col-xs-6"><a href="#"><img alt="topbanner-02" src="../image/catalog/demo/banners/topbanner-02.jpg"></a></div> </div> </div> </div>
Step-4: Homepage Products Setting↑ Back to Top
Go to"Extensions > Extensions > Modules > TT Product Tab"Click On EditGive name as Home page Select tab Featured, Latest, Bestseller or Special Select Products on Featured Products Box that display on Homepage Tabs. Give Products Limit=9 Give height & width 300*390 (as per your product image) Select Status as enabled
also see below screenshot.
Homepage Special-Products Setting↑ Back to Top
Go to"Extension > Extension > Modules > Special"Click On EditGive name as Home-Special Give Products Limit=6 Give height & width 300*390 (as per your product image) Select Status as enabled
also see below screenshot.
Column left/right setting↑ Back to Top
Setting of left and right columnGo to "Extensions > Extensions > Modules" Install "Module"Click on Edit
Give module name as Left-Latest Give limit Give width & height(70*91)
then set on layouts and select its position.
Step-5: Layout setting↑ Back to Top
Go to "Design > Layouts" For Home Layout setting Click on Home layout Edit link, and set below settings.
For Category Layout setting Click on Home layout Edit link, and set below settings.
For Product Layout setting Click on Home layout Edit link, and set below settings.
For Account Layout setting Click on Home layout Edit link, and set below settings.
For Affiliate Layout setting Click on Home layout Edit link, and set below settings.
For Checkout Layout setting Click on Home layout Edit link, and set below settings.
For Compare Layout setting Click on Home layout Edit link, and set below settings.
For Contact Layout setting Click on Home layout Edit link, and set below settings.
For Information Layout setting Click on Home layout Edit link, and set below settings.
For Manufacturer Layout setting Click on Home layout Edit link, and set below settings.
For Search Layout setting Click on Home layout Edit link, and set below settings.
For Sitemap Layout setting Click on Home layout Edit link, and set below settings.
ToolsStore Theme Settings
Step-2 Slideshow Image Size Setting Step-3 Left/Right Banner Settings Step-4 TemplateTrip Module Setting Step-5 Homepage Products Setting Step-6 Layout settingStep-1: Image Size Setting↑ Back to Top
Go to "Extensions > Extensions > Themes > Your Store" Click on Editalso see below screenshot.
also see below screenshot.
Step-2: Slideshow Image Size Setting↑ Back to Top
Now activate your slideshow go to Extensions > Extensions > Modules > Slideshow Click on Edit Give ModuleName:Home Page Select Banner:Home Page Slideshow Give width & Height(1280*520)(Your banner width & height) Select Enabled Now click on Save button
Categorypage - Left Banner/Right Banner
Go to Design > Banners > Click on AddNow provide banner name as category-left-banner and select banner image also select status Enable see bellow screen shot
Now activate your left banner go to Extensions > Extensions > Modules > Banner Click on Add Give ModuleName:category-left-banner Select Banner:category-left-banner Give width & Height (290*415) (Your banner width & height) Select Enabled Now click on Save button
Step-3: TemplateTrip Module Setting↑ Back to Top
Go To "Extensions > Extensions > Modules > Choose Your Module > Click on "Edit" Link
Copy Module CMS
Click On Code View Paste Your CMS in HTML code view Then Click on "Save" Link Go to "Extensions > Extensions > Module > HTML Content > Install(After install click on "Edit" link)"Module - 1:
For "TT-CMS-banner" Give Module Name as TT-CMS-banner Now click on Code View button in text editor block and paste this below code. From Select Status Enabled
<div id="ttcmsbanner"> <div class="ttcmsbanner"> <div class="row"> <div class="ttbanner-img1 ttbanner col-sm-6 col-xs-6"><a href="#"><img alt="banner-01.jpg" src="../image/catalog/demo/banners/banner-01.jpg"></a></div> <div class="ttbanner-img2 ttbanner col-sm-6 col-xs-6"><a href="#"><img alt="banner-02.jpg" src="../image/catalog/demo/banners/banner-02.jpg"></a></div> </div> </div> </div>
Module - 2:
For "TT-CMS-Bottom-Banner" Give Module Name as TT-CMS-Bottom-Banner Now click on Code View button in text editor block and paste this below code. From Select Status Enabled
<div id="ttcmsbottombanner"> <div class="ttcmsbottombanner"> <div class="ttbanner-img ttbanner col-sm-12 col-xs-12"><a href="#"><img alt="bottombanner-01.jpg" src="../image/catalog/demo/banners/bottombanner-01.jpg"></a></div> </div> </div>
Module - 3:
For "TT-CMS-ContactUs" Give Module Name as TT-CMS-ContactUs Now click on Code View button in text editor block and paste this below code. From Select Status Enabled
<div class="contact-us"> <h5 class="">Store Information</h5> <ul style="display: block;" class="list-unstyled"> <li class="contact-detail"> <div class="data address"> <i class="fa fa-map-marker"></i> <div class="contact-address">Demo Store<br>United States</div> </div> </li> <li class="email"> <div class="data email"> <i class="fa fa-envelope"></i> <span class="email-address"> <a href="mailto:demo@gmail.com">demo@gmail.com</a> </span> </div> </li> <li class="fax"> <div class="data fax"> <i class="fa fa-fax"></i> <span class="fax-address"> <a href="#">22354863</a> </span> </div> </li> <li class="contact"> <div class="data contact"> <i class="fa fa-phone"></i> <span class="phone"> <a href="#">0123456789</a> </span> </div> </li> </ul> </div>
Module - 4:
For "TT-CMS-FollowUs" Give Module Name as TT-CMS-FollowUs Now click on Code View button in text editor block and paste this below code. From Select Status Enabled
<div class="follow-us col-sm-3"> <h5>Follow us</h5> <ul class="list-unstyled"> <li class="facebook"> <a target="_blank" class="_blank" href="#" title="Facebook"> <i class="fa fa-facebook"></i> </a> </li> <li class="twitter"> <a target="_blank" class="_blank" href="#" title="Twitter"> <i class="fa fa-twitter"></i> </a> </li> <li class="rss"> <a target="_blank" class="_blank" href="#" title="RSS"> <i class="fa fa-rss"></i> </a> </li> <li class="google-plus"> <a target="_blank" class="_blank" href="#" rel="publisher" title="Google Plus"> <i class="fa fa-google-plus"></i> </a> </li> <li class="instagram"> <a target="_blank" class="_blank" href="#" rel="publisher" title="instagram"> <i aria-hidden="true" class="fa fa-instagram"></i> </a> </li> </ul> </div>
Module - 5:
For "TT-CMS-Footer" Give Module Name as TT-CMS-Footer Now click on Code View button in text editor block and paste this below code. From Select Status Enabled
<div id="ttcmsfooter"> <div class="ttfooter-banner"> <div class="ttcmstextdiv"> <div class="ttcmsthis"><span>On This Week Only/-</span></div> <div class="ttcmsetra"> <p>Extra <span>15% Off</span></p> </div> <div class="ttcmsapp"><span>Download App</span></div> </div> <div class="ttcmsimgdiv"> <div class="ttcmsappimg"><a href="#"><img alt="appstore-img" src="../image/catalog/demo/banners/appstore.png"></a></div> <div class="ttcmsplayimg"><a href="#"><img alt="googlepaly-img" src="../image/catalog/demo/banners/googlepaly.png"></a></div> </div> </div> </div>
Module - 6:
For "TT-CMS-headerservices" Give Module Name as TT-CMS-headerservices Now click on Code View button in text editor block and paste this below code. From Select Status Enabled
<div id="ttcmsheader"> <div class="ttheader-service">Wants to explore Upcoming Deals on Weekends?</div> </div>
Module - 7:
For "TT-CMS-Services" Give Module Name as TT-CMS-Services Now click on Code View button in text editor block and paste this below code. From Select Status Enabled
<div id="ttcmsservices"> <div class="ttcmsservice"> <div class="ttshipping col-sm-3"> <div class="ttshipping_img service-icon"></div> <div class="service-content"> <div class="service-title">Free Shipping</div> <div class="service-desc">Deliver to Door</div> </div> </div> <div class="ttsupport col-sm-3"> <div class="ttsupport_img service-icon"></div> <div class="service-content"> <div class="service-title">24x7 Support</div> <div class="service-desc">in Safe Hands</div> </div> </div> <div class="ttsaving col-sm-3"> <div class="ttsaving_img service-icon"></div> <div class="service-content"> <div class="service-title">Big Saving</div> <div class="service-desc">at Lowest Price</div> </div> </div> <div class="ttmoney col-sm-3"> <div class="ttmoney_img service-icon"></div> <div class="service-content"> <div class="service-title">Money Back</div> <div class="service-desc">Easy to Return</div> </div> </div> </div> </div>
Module - 8:
For "TT-CMS-Paymentlogo" Give Module Name as TT-CMS-Paymentlogo Now click on Code View button in text editor block and paste this below code. From Select Status Enabled
<div class="col-md-2 links" id="ttcmspaymentlogo"> <div class="payment_logo_block"> <ul class="payment-list"> <li class="discover"><a href="#"> <img alt="discover" src="../image/catalog/demo/banners/discover.png"></a></li> <li class="google"><a href="#"> <img alt="google" src="../image/catalog/demo/banners/google.png"></a></li> <li class="maestro"><a href="#"> <img alt="maestro" src="../image/catalog/demo/banners/maestro.png"></a></li> <li class="mastercard"><a href="#"> <img alt="mastercard" src="../image/catalog/demo/banners/mastercard.png"></a></li> <li class="paypal"><a href="#"> <img alt="paypal" src="../image/catalog/demo/banners/paypal.png"></a></li> <li class="visa"><a href="#"> <img alt="visa" src="../image/catalog/demo/banners/visa.png"></a></li> </ul> </div> </div>
Module - 9:
For "TT-CMS-Testimonial" Give Module Name as TT-CMS-Testimonial Now click on Code View button in text editor block and paste this below code. From Select Status Enabled
<div id="ttcmstestimonial"> <h4 class="title_block">Testimonials</h4> <div id="tttestimonial" class="tttestimonial"> <div class="tttestimonial-content"> <div class="tttestimonial-inner"> <ul id="tttestimonial-carousel" class="tt-carousel"> <li> <div class="testimonial-image"><img alt="" src="image/catalog/demo/banners/user1.jpg"></div> <div class="testimonial-content"> <div class="testimonial-user-title"> <h4>John Duff</h4> </div> <div class="testimonial-desc"> <p>Duis faucibus enim vitae nunc molestie, nec facilisis arcu pulvinar nullam mattis..</p> </div> </div> </li> <li> <div class="testimonial-image"><img alt="" src="image/catalog/demo/banners/user2.jpg"></div> <div class="testimonial-content"> <div class="testimonial-user-title"> <h4>John Duff</h4> </div> <div class="testimonial-desc"> <p>Duis faucibus enim vitae nunc molestie, nec facilisis arcu pulvinar nullam mattis..</p> </div> </div> </li> <li> <div class="testimonial-image"><img alt="" src="image/catalog/demo/banners/user3.jpg"></div> <div class="testimonial-content"> <div class="testimonial-user-title"> <h4>John Duff</h4> </div> <div class="testimonial-desc"> <p>Duis faucibus enim vitae nunc molestie, nec facilisis arcu pulvinar nullam mattis..</p> </div> </div> </li> </ul> </div> </div> </div> </div>
Module - 10:
For "TT-CMS-Top-Banner" Give Module Name as TT-CMS-Top-Banner Now click on Code View button in text editor block and paste this below code. From Select Status Enabled
<div id="ttcmstopbanner"> <div class="ttcmstopbanner"> <div class="row"> <div class="ttbanner-img1 ttbanner col-sm-6 col-xs-6"><a href="#"><img alt="topbanner-01" src="../image/catalog/demo/banners/topbanner-01.jpg"></a></div> <div class="ttbanner-img2 ttbanner col-sm-6 col-xs-6"><a href="#"><img alt="topbanner-02" src="../image/catalog/demo/banners/topbanner-02.jpg"></a></div> </div> </div> </div>
Step-4: Homepage Products Setting↑ Back to Top
Go to"Extensions > Extensions > Modules > TT Product Tab"Click On EditGive name as Home page Select tab Featured, Latest, Bestseller or Special Select Products on Featured Products Box that display on Homepage Tabs. Give Products Limit=9 Give height & width 270*351 (as per your product image) Select Status as enabled
also see below screenshot.
Homepage Special-Products Setting↑ Back to Top
Go to"Extension > Extension > Modules > Special"Click On EditGive name as Home-Special Give Products Limit=6 Give height & width 270*351 (as per your product image) Select Status as enabled
also see below screenshot.
Column left/right setting↑ Back to Top
Setting of left and right columnGo to "Extensions > Extensions > Modules" Install "Module"Click on Edit
Give module name as Left-Latest Give limit Give width & height(70*91)
then set on layouts and select its position.
Step-5: Layout setting↑ Back to Top
Go to "Design > Layouts" For Home Layout setting Click on Home layout Edit link, and set below settings.
For Category Layout setting Click on Home layout Edit link, and set below settings.
For Product Layout setting Click on Home layout Edit link, and set below settings.
For Account Layout setting Click on Home layout Edit link, and set below settings.
For Affiliate Layout setting Click on Home layout Edit link, and set below settings.
For Checkout Layout setting Click on Home layout Edit link, and set below settings.
For Compare Layout setting Click on Home layout Edit link, and set below settings.
For Contact Layout setting Click on Home layout Edit link, and set below settings.
For Information Layout setting Click on Home layout Edit link, and set below settings.
For Manufacturer Layout setting Click on Home layout Edit link, and set below settings.
For Search Layout setting Click on Home layout Edit link, and set below settings.
For Sitemap Layout setting Click on Home layout Edit link, and set below settings.
Autoparts Store Theme Settings
Step-1 Image Size Setting Step-2 Slideshow Image Size Setting Step-3 Left/Right Banner Settings Step-4 TemplateTrip Module Setting Step-5 Homepage Products Setting Step-6 Layout settingStep-1: Image Size Setting↑ Back to Top
Go to "Extensions > Extensions > Themes > Your Store" Click on Editalso see below screenshot.
also see below screenshot.
Step-2: Slideshow Image Size Setting↑ Back to Top
Now activate your slideshow go to Extensions > Extensions > Modules > Slideshow Click on Edit Give ModuleName:Home Page Select Banner:Home Page Slideshow Give width & Height(1280*520)(Your banner width & height) Select Enabled Now click on Save button
Categorypage - Left Banner/Right Banner
Go to Design > Banners > Click on AddNow provide banner name as category-left-banner and select banner image also select status Enable see bellow screen shot
Now activate your left banner go to Extensions > Extensions > Modules > Banner Click on Add Give ModuleName:category-left-banner Select Banner:category-left-banner Give width & Height (290*415) (Your banner width & height) Select Enabled Now click on Save button
Step-3: TemplateTrip Module Setting↑ Back to Top
Go To "Extensions > Extensions > Modules > Choose Your Module > Click on "Edit" Link
Copy Module CMS
Click On Code View Paste Your CMS in HTML code view Then Click on "Save" Link Go to "Extensions > Extensions > Module > HTML Content > Install(After install click on "Edit" link)"Module - 1:
For "TT-CMS-banner" Give Module Name as TT-CMS-banner Now click on Code View button in text editor block and paste this below code. From Select Status Enabled
<div id="ttcmsbanner"> <div class="ttcmsbanner"> <div class="row"> <div class="ttbanner-img1 ttbanner col-sm-6 col-xs-6"><a href="#"><img alt="banner-01.jpg" src="../image/catalog/demo/banners/banner-01.jpg"></a></div> <div class="ttbanner-img2 ttbanner col-sm-6 col-xs-6"><a href="#"><img alt="banner-02.jpg" src="../image/catalog/demo/banners/banner-02.jpg"></a></div> </div> </div> </div>
Module - 2:
For "TT-CMS-Bottom-Banner" Give Module Name as TT-CMS-Bottom-Banner Now click on Code View button in text editor block and paste this below code. From Select Status Enabled
<div id="ttcmsbottombanner"> <div class="ttcmsbottombanner"> <div class="ttbanner-img ttbanner col-sm-12 col-xs-12"><a href="#"><img alt="bottombanner-01.jpg" src="../image/catalog/demo/banners/bottombanner-01.jpg"></a></div> </div> </div>
Module - 3:
For "TT-CMS-ContactUs" Give Module Name as TT-CMS-ContactUs Now click on Code View button in text editor block and paste this below code. From Select Status Enabled
<div class="contact-us"> <h5 class="">Store Information</h5> <ul style="display: block;" class="list-unstyled"> <li class="contact-detail"> <div class="data address"> <i class="fa fa-map-marker"></i> <div class="contact-address">Demo Store<br>United States</div> </div> </li> <li class="email"> <div class="data email"> <i class="fa fa-envelope"></i> <span class="email-address"> <a href="mailto:demo@gmail.com">demo@gmail.com</a> </span> </div> </li> <li class="fax"> <div class="data fax"> <i class="fa fa-fax"></i> <span class="fax-address"> <a href="#">22354863</a> </span> </div> </li> <li class="contact"> <div class="data contact"> <i class="fa fa-phone"></i> <span class="phone"> <a href="#">0123456789</a> </span> </div> </li> </ul> </div>
Module - 4:
For "TT-CMS-FollowUs" Give Module Name as TT-CMS-FollowUs Now click on Code View button in text editor block and paste this below code. From Select Status Enabled
<div class="follow-us col-sm-3"> <h5>Follow us</h5> <ul class="list-unstyled"> <li class="facebook"> <a target="_blank" class="_blank" href="#" title="Facebook"> <i class="fa fa-facebook"></i> </a> </li> <li class="twitter"> <a target="_blank" class="_blank" href="#" title="Twitter"> <i class="fa fa-twitter"></i> </a> </li> <li class="rss"> <a target="_blank" class="_blank" href="#" title="RSS"> <i class="fa fa-rss"></i> </a> </li> <li class="google-plus"> <a target="_blank" class="_blank" href="#" rel="publisher" title="Google Plus"> <i class="fa fa-google-plus"></i> </a> </li> <li class="instagram"> <a target="_blank" class="_blank" href="#" rel="publisher" title="instagram"> <i aria-hidden="true" class="fa fa-instagram"></i> </a> </li> </ul> </div>
Module - 5:
For "TT-CMS-Footer" Give Module Name as TT-CMS-Footer Now click on Code View button in text editor block and paste this below code. From Select Status Enabled
<div id="ttcmsfooter"> <div class="ttfooter-banner"> <div class="ttcmstextdiv"> <div class="ttcmsthis"><span>On This Week Only/-</span></div> <div class="ttcmsetra"> <p>Extra <span>15% Off</span></p> </div> <div class="ttcmsapp"><span>Download App</span></div> </div> <div class="ttcmsimgdiv"> <div class="ttcmsappimg"><a href="#"><img alt="appstore-img" src="../image/catalog/demo/banners/appstore.png"></a></div> <div class="ttcmsplayimg"><a href="#"><img alt="googlepaly-img" src="../image/catalog/demo/banners/googlepaly.png"></a></div> </div> </div> </div>
Module - 6:
For "TT-CMS-headerservices" Give Module Name as TT-CMS-headerservices Now click on Code View button in text editor block and paste this below code. From Select Status Enabled
<div id="ttcmsheader"> <div class="ttheader-service">Wants to explore Upcoming Deals on Weekends?</div> </div>
Module - 7:
For "TT-CMS-Services" Give Module Name as TT-CMS-Services Now click on Code View button in text editor block and paste this below code. From Select Status Enabled
<div id="ttcmsservices"> <div class="ttcmsservice"> <div class="ttshipping col-sm-3"> <div class="ttshipping_img service-icon"></div> <div class="service-content"> <div class="service-title">Free Shipping</div> <div class="service-desc">Deliver to Door</div> </div> </div> <div class="ttsupport col-sm-3"> <div class="ttsupport_img service-icon"></div> <div class="service-content"> <div class="service-title">24x7 Support</div> <div class="service-desc">in Safe Hands</div> </div> </div> <div class="ttsaving col-sm-3"> <div class="ttsaving_img service-icon"></div> <div class="service-content"> <div class="service-title">Big Saving</div> <div class="service-desc">at Lowest Price</div> </div> </div> <div class="ttmoney col-sm-3"> <div class="ttmoney_img service-icon"></div> <div class="service-content"> <div class="service-title">Money Back</div> <div class="service-desc">Easy to Return</div> </div> </div> </div> </div>
Module - 8:
For "TT-CMS-Paymentlogo" Give Module Name as TT-CMS-Paymentlogo Now click on Code View button in text editor block and paste this below code. From Select Status Enabled
<div class="col-md-2 links" id="ttcmspaymentlogo"> <div class="payment_logo_block"> <ul class="payment-list"> <li class="discover"><a href="#"> <img alt="discover" src="../image/catalog/demo/banners/discover.png"></a></li> <li class="google"><a href="#"> <img alt="google" src="../image/catalog/demo/banners/google.png"></a></li> <li class="maestro"><a href="#"> <img alt="maestro" src="../image/catalog/demo/banners/maestro.png"></a></li> <li class="mastercard"><a href="#"> <img alt="mastercard" src="../image/catalog/demo/banners/mastercard.png"></a></li> <li class="paypal"><a href="#"> <img alt="paypal" src="../image/catalog/demo/banners/paypal.png"></a></li> <li class="visa"><a href="#"> <img alt="visa" src="../image/catalog/demo/banners/visa.png"></a></li> </ul> </div> </div>
Module - 9:
For "TT-CMS-Testimonial" Give Module Name as TT-CMS-Testimonial Now click on Code View button in text editor block and paste this below code. From Select Status Enabled
<div id="ttcmstestimonial"> <h4 class="title_block">Testimonials</h4> <div id="tttestimonial" class="tttestimonial"> <div class="tttestimonial-content"> <div class="tttestimonial-inner"> <ul id="tttestimonial-carousel" class="tt-carousel"> <li> <div class="testimonial-image"><img alt="" src="image/catalog/demo/banners/user1.jpg"></div> <div class="testimonial-content"> <div class="testimonial-user-title"> <h4>John Duff</h4> </div> <div class="testimonial-desc"> <p>Duis faucibus enim vitae nunc molestie, nec facilisis arcu pulvinar nullam mattis..</p> </div> </div> </li> <li> <div class="testimonial-image"><img alt="" src="image/catalog/demo/banners/user2.jpg"></div> <div class="testimonial-content"> <div class="testimonial-user-title"> <h4>John Duff</h4> </div> <div class="testimonial-desc"> <p>Duis faucibus enim vitae nunc molestie, nec facilisis arcu pulvinar nullam mattis..</p> </div> </div> </li> <li> <div class="testimonial-image"><img alt="" src="image/catalog/demo/banners/user3.jpg"></div> <div class="testimonial-content"> <div class="testimonial-user-title"> <h4>John Duff</h4> </div> <div class="testimonial-desc"> <p>Duis faucibus enim vitae nunc molestie, nec facilisis arcu pulvinar nullam mattis..</p> </div> </div> </li> </ul> </div> </div> </div> </div>
Module - 10:
For "TT-CMS-Top-Banner" Give Module Name as TT-CMS-Top-Banner Now click on Code View button in text editor block and paste this below code. From Select Status Enabled
<div id="ttcmstopbanner"> <div class="ttcmstopbanner"> <div class="ttbanner-img ttbanner col-sm-12 col-xs-12"><a href="#"><img src="../image/catalog/demo/banners/topbanner-01.jpg" alt="topbanner-01.jpg"></a></div> </div> </div>
Step-4: Homepage Products Setting↑ Back to Top
Go to"Extensions > Extensions > Modules > TT Product Tab"Click On EditGive name as Home page Select tab Featured, Latest, Bestseller or Special Select Products on Featured Products Box that display on Homepage Tabs. Give Products Limit=9 Give height & width 270*351 (as per your product image) Select Status as enabled
also see below screenshot.
Homepage Special-Products Setting↑ Back to Top
Go to"Extension > Extension > Modules > Special"Click On EditGive name as Home-Special Give Products Limit=6 Give height & width 270*351 (as per your product image) Select Status as enabled
also see below screenshot.
Column left/right setting↑ Back to Top
Setting of left and right columnGo to "Extensions > Extensions > Modules" Install "Module"Click on Edit
Give module name as Left-Latest Give limit Give width & height(70*91)
then set on layouts and select its position.
Step-5: Layout setting↑ Back to Top
Go to "Design > Layouts" For Home Layout setting Click on Home layout Edit link, and set below settings.
For Category Layout setting Click on Home layout Edit link, and set below settings.
For Product Layout setting Click on Home layout Edit link, and set below settings.
For Account Layout setting Click on Home layout Edit link, and set below settings.
For Affiliate Layout setting Click on Home layout Edit link, and set below settings.
For Checkout Layout setting Click on Home layout Edit link, and set below settings.
For Compare Layout setting Click on Home layout Edit link, and set below settings.
For Contact Layout setting Click on Home layout Edit link, and set below settings.
For Information Layout setting Click on Home layout Edit link, and set below settings.
For Manufacturer Layout setting Click on Home layout Edit link, and set below settings.
For Search Layout setting Click on Home layout Edit link, and set below settings.
For Sitemap Layout setting Click on Home layout Edit link, and set below settings.
MedicineStore Theme Settings
Step-2 Slideshow Image Size Setting Step-3 Left/Right Banner Settings Step-4 TemplateTrip Module Setting Step-5 Homepage Products Setting Step-6 Layout settingStep-1: Image Size Setting↑ Back to Top
Go to "Extensions > Extensions > Themes > Your Store" Click on Editalso see below screenshot.
also see below screenshot.
Step-2: Slideshow Image Size Setting↑ Back to Top
Now activate your slideshow go to Extensions > Extensions > Modules > Slideshow Click on Edit Give ModuleName:Home Page Select Banner:Home Page Slideshow Give width & Height(960*500)(Your banner width & height) Select Enabled Now click on Save button
Categorypage - Left Banner/Right Banner
Go to Design > Banners > Click on AddNow provide banner name as category-left-banner and select banner image also select status Enable see bellow screen shot
Now activate your left banner go to Extensions > Extensions > Modules > Banner Click on Add Give ModuleName:category-left-banner Select Banner:category-left-banner Give width & Height (290*415) (Your banner width & height) Select Enabled Now click on Save button
Step-3: TemplateTrip Module Setting↑ Back to Top
Go To "Extensions > Extensions > Modules > Choose Your Module > Click on "Edit" Link
Copy Module CMS
Click On Code View Paste Your CMS in HTML code view Then Click on "Save" Link Go to "Extensions > Extensions > Module > HTML Content > Install(After install click on "Edit" link)"Module - 1:
For "TT-CMS-banner" Give Module Name as TT-CMS-banner Now click on Code View button in text editor block and paste this below code. From Select Status Enabled
<div id="ttcmsbanner"> <div class="ttcmsbanner"> <div class="row"> <div class="ttbanner-img1 ttbanner col-sm-6 col-xs-6"><a href="#"><img alt="banner-01.jpg" src="../image/catalog/demo/banners/banner-01.jpg"></a></div> <div class="ttbanner-img2 ttbanner col-sm-6 col-xs-6"><a href="#"><img alt="banner-02.jpg" src="../image/catalog/demo/banners/banner-02.jpg"></a></div> </div> </div> </div>
Module - 2:
For "TT-CMS-Bottom-Banner" Give Module Name as TT-CMS-Bottom-Banner Now click on Code View button in text editor block and paste this below code. From Select Status Enabled
<div id="ttcmsbottombanner"> <div class="ttcmsbottombanner"> <div class="ttbanner-img ttbanner col-sm-12 col-xs-12"><a href="#"><img alt="bottombanner-01.jpg" src="../image/catalog/demo/banners/bottombanner-01.jpg"></a></div> </div> </div>
Module - 3:
For "TT-CMS-ContactUs" Give Module Name as TT-CMS-ContactUs Now click on Code View button in text editor block and paste this below code. From Select Status Enabled
<div class="contact-us"> <h5 class="">Store Information</h5> <ul style="display: block;" class="list-unstyled"> <li class="contact-detail"> <div class="data address"> <i class="fa fa-map-marker"></i> <div class="contact-address">Demo Store<br>United States</div> </div> </li> <li class="email"> <div class="data email"> <i class="fa fa-envelope"></i> <span class="email-address"> <a href="mailto:demo@gmail.com">demo@gmail.com</a> </span> </div> </li> <li class="fax"> <div class="data fax"> <i class="fa fa-fax"></i> <span class="fax-address"> <a href="#">22354863</a> </span> </div> </li> <li class="contact"> <div class="data contact"> <i class="fa fa-phone"></i> <span class="phone"> <a href="#">0123456789</a> </span> </div> </li> </ul> </div>
Module - 4:
For "TT-CMS-FollowUs" Give Module Name as TT-CMS-FollowUs Now click on Code View button in text editor block and paste this below code. From Select Status Enabled
<div class="follow-us col-sm-3"> <h5>Follow us</h5> <ul class="list-unstyled"> <li class="facebook"> <a target="_blank" class="_blank" href="#" title="Facebook"> <i class="fa fa-facebook"></i> </a> </li> <li class="twitter"> <a target="_blank" class="_blank" href="#" title="Twitter"> <i class="fa fa-twitter"></i> </a> </li> <li class="rss"> <a target="_blank" class="_blank" href="#" title="RSS"> <i class="fa fa-rss"></i> </a> </li> <li class="google-plus"> <a target="_blank" class="_blank" href="#" rel="publisher" title="Google Plus"> <i class="fa fa-google-plus"></i> </a> </li> <li class="instagram"> <a target="_blank" class="_blank" href="#" rel="publisher" title="instagram"> <i aria-hidden="true" class="fa fa-instagram"></i> </a> </li> </ul> </div>
Module - 5:
For "TT-CMS-Footer" Give Module Name as TT-CMS-Footer Now click on Code View button in text editor block and paste this below code. From Select Status Enabled
<div id="ttcmsfooter"> <div class="ttfooter-banner"> <div class="ttcmstextdiv"> <div class="ttcmsthis"><span>On This Week Only/-</span></div> <div class="ttcmsetra"> <p>Extra <span>15% Off</span></p> </div> <div class="ttcmsapp"><span>Download App</span></div> </div> <div class="ttcmsimgdiv"> <div class="ttcmsappimg"><a href="#"><img alt="appstore-img" src="../image/catalog/demo/banners/appstore.png"></a></div> <div class="ttcmsplayimg"><a href="#"><img alt="googlepaly-img" src="../image/catalog/demo/banners/googlepaly.png"></a></div> </div> </div> </div>
Module - 6:
For "TT-CMS-headerservices" Give Module Name as TT-CMS-headerservices Now click on Code View button in text editor block and paste this below code. From Select Status Enabled
<div id="ttcmsheader"> <div class="ttheader-service">Wants to explore Upcoming Deals on Weekends?</div> </div>
Module - 7:
For "TT-CMS-Services" Give Module Name as TT-CMS-Services Now click on Code View button in text editor block and paste this below code. From Select Status Enabled
<div id="ttcmsservices"> <div class="ttcmsservice"> <div class="ttshipping col-sm-3"> <div class="ttshipping_img service-icon"></div> <div class="service-content"> <div class="service-title">Free Shipping</div> <div class="service-desc">Deliver to Door</div> </div> </div> <div class="ttsupport col-sm-3"> <div class="ttsupport_img service-icon"></div> <div class="service-content"> <div class="service-title">24x7 Support</div> <div class="service-desc">in Safe Hands</div> </div> </div> <div class="ttsaving col-sm-3"> <div class="ttsaving_img service-icon"></div> <div class="service-content"> <div class="service-title">Big Saving</div> <div class="service-desc">at Lowest Price</div> </div> </div> <div class="ttmoney col-sm-3"> <div class="ttmoney_img service-icon"></div> <div class="service-content"> <div class="service-title">Money Back</div> <div class="service-desc">Easy to Return</div> </div> </div> </div> </div>
Module - 8:
For "TT-CMS-Paymentlogo" Give Module Name as TT-CMS-Paymentlogo Now click on Code View button in text editor block and paste this below code. From Select Status Enabled
<div class="col-md-2 links" id="ttcmspaymentlogo"> <div class="payment_logo_block"> <ul class="payment-list"> <li class="discover"><a href="#"> <img alt="discover" src="../image/catalog/demo/banners/discover.png"></a></li> <li class="google"><a href="#"> <img alt="google" src="../image/catalog/demo/banners/google.png"></a></li> <li class="maestro"><a href="#"> <img alt="maestro" src="../image/catalog/demo/banners/maestro.png"></a></li> <li class="mastercard"><a href="#"> <img alt="mastercard" src="../image/catalog/demo/banners/mastercard.png"></a></li> <li class="paypal"><a href="#"> <img alt="paypal" src="../image/catalog/demo/banners/paypal.png"></a></li> <li class="visa"><a href="#"> <img alt="visa" src="../image/catalog/demo/banners/visa.png"></a></li> </ul> </div> </div>
Module - 9:
For "TT-CMS-Testimonial" Give Module Name as TT-CMS-Testimonial Now click on Code View button in text editor block and paste this below code. From Select Status Enabled
<div id="ttcmstestimonial"> <h4 class="title_block">Testimonials</h4> <div id="tttestimonial" class="tttestimonial"> <div class="tttestimonial-content"> <div class="tttestimonial-inner"> <ul id="tttestimonial-carousel" class="tt-carousel"> <li> <div class="testimonial-image"><img alt="" src="../image/catalog/demo/banners/user1.jpg"></div> <div class="testimonial-content"> <div class="testimonial-user-title"> <h4>John Duff</h4> </div> <div class="testimonial-desc"> <p>Duis faucibus enim vitae nunc molestie, nec facilisis arcu pulvinar nullam mattis..</p> </div> </div> </li> <li> <div class="testimonial-image"><img alt="" src="../image/catalog/demo/banners/user2.jpg"></div> <div class="testimonial-content"> <div class="testimonial-user-title"> <h4>John Duff</h4> </div> <div class="testimonial-desc"> <p>Duis faucibus enim vitae nunc molestie, nec facilisis arcu pulvinar nullam mattis..</p> </div> </div> </li> <li> <div class="testimonial-image"><img alt="" src="../image/catalog/demo/banners/user3.jpg"></div> <div class="testimonial-content"> <div class="testimonial-user-title"> <h4>John Duff</h4> </div> <div class="testimonial-desc"> <p>Duis faucibus enim vitae nunc molestie, nec facilisis arcu pulvinar nullam mattis..</p> </div> </div> </li> </ul> </div> </div> </div> </div>
Module - 10:
For "TT-CMS-Top-Banner" Give Module Name as TT-CMS-Top-Banner Now click on Code View button in text editor block and paste this below code. From Select Status Enabled
<div id="ttcmstopbanner"> <div class="ttcmstopbanner"> <div class="row"> <div class="ttbanner-img1 ttbanner col-sm-6 col-xs-6"><a href="#"><img alt="topbanner-01" src="../image/catalog/demo/banners/topbanner-01.jpg"></a></div> <div class="ttbanner-img2 ttbanner col-sm-6 col-xs-6"><a href="#"><img alt="topbanner-02" src="../image/catalog/demo/banners/topbanner-02.jpg"></a></div> </div> </div> </div>
Step-4: Homepage Products Setting↑ Back to Top
Go to"Extensions > Extensions > Modules > TT Product Tab"Click On EditGive name as Home page Select tab Featured, Latest, Bestseller or Special Select Products on Featured Products Box that display on Homepage Tabs. Give Products Limit=9 Give height & width 270*351 (as per your product image) Select Status as enabled
also see below screenshot.
Homepage Special-Products Setting↑ Back to Top
Go to"Extension > Extension > Modules > Special"Click On EditGive name as Home-Special Give Products Limit=6 Give height & width 270*351 (as per your product image) Select Status as enabled
also see below screenshot.
Column left/right setting↑ Back to Top
Setting of left and right columnGo to "Extensions > Extensions > Modules" Install "Module"Click on Edit
Give module name as Left-Latest Give limit Give width & height(70*91)
then set on layouts and select its position.
Step-5: Layout setting↑ Back to Top
Go to "Design > Layouts" For Home Layout setting Click on Home layout Edit link, and set below settings.
For Category Layout setting Click on Home layout Edit link, and set below settings.
For Product Layout setting Click on Home layout Edit link, and set below settings.
For Account Layout setting Click on Home layout Edit link, and set below settings.
For Affiliate Layout setting Click on Home layout Edit link, and set below settings.
For Checkout Layout setting Click on Home layout Edit link, and set below settings.
For Compare Layout setting Click on Home layout Edit link, and set below settings.
For Contact Layout setting Click on Home layout Edit link, and set below settings.
For Information Layout setting Click on Home layout Edit link, and set below settings.
For Manufacturer Layout setting Click on Home layout Edit link, and set below settings.
For Search Layout setting Click on Home layout Edit link, and set below settings.
For Sitemap Layout setting Click on Home layout Edit link, and set below settings.
Support System ↑ Back to Top
Theme Id: Digital Mart Theme (Theme Name)
Thank You for purchasing TemplateTrip Theme.
If you have any questions, please feel free to contact us via our support from support.templatetrip.com.
Thanks again for your purchase.