Frizty

Frizty– Pet Store Ecommerce Prestashop Theme

Thank you for purchasing this theme. If you have any questions that are beyond the scope of this help file, feel free to contact us via our Support ticket system. We will do our best to answer you in shortest of time (24-48 hours usually).


Step 1 : Installation

The installation of a theme is a relatively straightforward process and here we will guide you through the steps of the process for theme installation.
Before you install this theme:
  • - Read our complete instruction to install theme
  • - Make sure you have installed and running the correct version of Prestashop: Prestashop 1.7.x.x
  • - Take a FULL BACKUP for your site before you start theme installation if you have done any custom core modifications.

  • We recommend to use this theme on a new, clean installation or existing shops without custom core modifications.
  • There are two options for theme installation. You can choose one of them.

There are two options for theme installation. You can choose one of them.

  • 1) Installation via the Admin Panel
  • 2) Installation using FTP
1) Installation via the Admin Panel:
  • First of all login to your prestashop store admin panel and navigate to Design > Theme & Logo.
  • Here in this section top right corner you will see “Add new theme” button. Click here.

  • Here you will see “Import from your computer” you need to select Installer ZIP file which you have with theme downloaded package Layout01_Installer.zip and click on “Save” button.
  • You have successfully installed your new theme!
  • NOTE:
    After completion of above process upload all static images on your server in “/public_html/img/cms/” directory using FTP or Cpanel.
  • You can find images in package folder: Prestashop Files_v.1.7.x.x/img/cms/ directory.
2) FTP Upload:
  • Use an FTP client such as FileZilla, FireFTP or Cyberduck (if you are a Mac user) to connect to your hosting account.
  • Browse to required directory (Normally public_html)
  • Now unzip the downloaded theme package and you can see here folder with name "Prestashop Files_v.1.7.x.x" that containing three folders themes, modules and img.
  • Upload this three folders respective from (provided in to ZIP file) to your prestashop installation root directory ,
  • ”themes” , ”modules” , ”img”
For Active Theme
  • Go to Admin Panel Design > Theme & Logo
  • Now select your theme Frizty - Pet Store, click on 'Use This Theme'

Step 2 : PrestaShop’s Features

  • User will also be able to efficiently manage your PrestaShop site without related the programming skill. You work in the front-office interface directly (in the Administration Area), which can be helpful to everyone, special for shop owners. To find more informations, please read on http://doc.prestashop.com/display/PS17/User+Guide
  • NOTE:
    When you finish install theme, you should disable cache. This step will help your Prestashop site active normally.
  • Just Go to Advanced Parameters > Performance
  • At field Cache, choose No
  • And Click on “Save” button at right corner.

Step 3 : Logo setting

  • For logo setting,
    Go to Design > Theme & Logo
  • From Header Logo : upload your logo image
  • And Click on “Save” button at right corner.

Step 4 : Image size setting

  • Now we have to set our template from Admin panel
  • Go to Admin Panel Extensions > Extensions
  • Now select 'Themes' from dropdown.
    Click on Edit button of Your Store.
For Image Size setting
  • Edit Default Store Theme > Images
  • Change Image Size as shown in below
    And Click on “Save” button at top right corner.

Step 5 : Translate theme


  • For translate theme ,
  • Go to Admin Panel Go to International > Translations

  • At "Modify translations" section:
    • Type of translation : Translate anything in Prestashop (and not just modules)
    • Select your language : Choose language you want to translate
  • Choose Modify
  • Then Search titles or text need translate
  • After typing your language, click Save and stay or Save to finish.
  • In module traslation, In the footer, you can choose another module for translation.
  • NOTE:
    To find more informations, please read on http://doc.prestashop.com/display/PS17/Translations

Step 6 : Module Settings

  • After activation with "Frizty" theme you can see all the modules provided by codezeel is installed completely with this theme.
  • Go to Modules > Module Manager. In this section you can find below listed modules.
6.1 : Ttm Slideshow Slider
  • Ttm Slideshow Slider module display banner slider on home page. Click on "Configure" link to edit slide.
  • Select “Edit” button in Slide1 (Sample1) slide.
  • Set Speed The duration of the transiton between two slides.
  • Enable Pause on hover Stop sliding when hover.
  • Enable Show Caption Show/Hide Captions.
  • Now click on "Save" button at top right corner.
6.2 : Ttm Vertical Menu
  • Ttm Vertical Menu module display vertical menu on header. Click on "Configure" link to edit slide.
6.3 : Ttm Featured Products
  • Ttm Featured Products module display products as Slider or Grid in the center column of your homepage.
  • Click on "Configure" link to change configuration settings.
  • In this configuration settings you can set number of products to be displayed on home page and display products in slider or grid mode.
  • This module is also display products in left sidebar.
6.4 : Ttm New Products
  • Ttm New Products module display new products as Slider or Grid in the center column of your homepage.
  • Click on "Configure" link to change configuration settings.
  • In this configuration settings you can set number of products to be displayed on home page and display products in slider or grid mode.
  • This module is also display products in left sidebar.
6.5 : Ttm Special Products
  • Ttm Special Products module display special products as Slider or Grid in the center column of your homepage.
  • Click on "Configure" link to change configuration settings.
  • In this configuration settings you can set number of products to be displayed on home page.
6.6 : Ttm Staticblock
  • Ttm Staticblock module display static cms block in your homepage.
  • Click on "Configure" link to change configuration settings.
  • Choose Add New button to add new static block
  • Enter the value of parameters and click Save button when you finish.

  • For left navbar , Static Nav1
  • set hook position displayNav1
  • Click on Source code button display in screenshot and paste below HTML code for static cms block and click on "OK" button. After that Click on "Save" button.
  • Click here & Copy this code

    <div class="nav_contact_item">
    <div class="ttm-textcolor-highlight">Welcome To Our Pet Store!</div>
    </div>

  • For heading contact cms , Static Contact
  • set hook position displayTop
  • Click on Source code button display in screenshot and paste below HTML code for static cms block and click on "OK" button. After that Click on "Save" button.
  • Click here & Copy this code

    <div class="ttm_contactcms">
    <div class="ttm_contactcms_inner">
    <div class="icon phone"> </div>
    <div class="text"><span class="title">contact us</span> <span class="desc">+ 123 456 7890</span></div>
    </div>
    <div class="ttm_contactcms_inner">
    <div class="icon mail"> </div>
    <div class="text"><span class="title">Email</span> <a href="#" class="desc">example@gmail.com</a></div>
    </div>
    </div>

  • For Service block , Static Service
  • set hook position displayImageSlider
  • Click on Source code button display in screenshot and paste below HTML code for static cms block and click on "OK" button. After that Click on "Save" button.
  • Click here & Copy this code

    <div id="ttm_serviceblock">
    <div class="container">
    <div class="service_inner_content">
    <ul>
    <li class="service_content service1 col-lg-3 col-md-3 col-sm-3 col-xs-12">
    <div class="service_content_inner">
    <div class="service_image_block"><span class="service_icon"> </span></div>
    <div class="service-des"><span class="service-title">Free WorldWide Delivery</span></div>
    </div>
    </li>
    <li class="service_content service2 col-lg-3 col-md-3 col-sm-3 col-xs-12">
    <div class="service_content_inner">
    <div class="service_image_block"><span class="service_icon"> </span></div>
    <div class="service-des"><span class="service-title">Free Gift Voucher</span></div>
    </div>
    </li>
    <li class="service_content service3 col-lg-3 col-md-3 col-sm-3 col-xs-12">
    <div class="service_content_inner">
    <div class="service_image_block"><span class="service_icon"> </span></div>
    <div class="service-des"><span class="service-title">Money Back Gurantee</span></div>
    </div>
    </li>
    <li class="service_content service4 col-lg-3 col-md-3 col-sm-3 col-xs-12">
    <div class="service_content_inner">
    <div class="service_image_block"><span class="service_icon"> </span></div>
    <div class="service-des"><span class="service-title">24/7 Support Assistance</span></div>
    </div>
    </li>
    </ul>
    </div>
    </div>
    </div>

  • For Block Cms, Static Block Cms
  • set hook position displayHome
  • Click on Source code button display in screenshot and paste below HTML code for static cms block and click on "OK" button. After that Click on "Save" button.
  • Click here & Copy this code

    <div id="ttm_banneroffer">
    <div class="container">
    <div class="bannercms_content first">
    <div class="bannercms_item"><a href="#" class="img"><img src="../img/cms/banner_image3.png" alt="" /></a>
    <div class="bannertext"><span class="bannertext1"># Frizty store</span> <span class="bannertext2">Up To <span class="tm-skincolor">50%Off</span></span> <span class="bannertext3">Final Sales Items</span> <a href="#" class="bannerbtn">shop now <i class="fa fa-angle-double-right"></i></a></div>
    </div>
    </div>
    </div>
    </div>

  • For Left banner, Static Left banner
  • set hook position displayLeftColumn
  • Click on Source code button display in screenshot and paste below HTML code for static cms block and click on "OK" button. After that Click on "Save" button.
  • Click here & Copy this code

    <div id="leftbanner">
    <ul>
    <li class="leftbanner-container"><a href="#" title="LeftBanner 1"> <img src="../img/cms/left-banner-1.jpg" alt="LeftBanner 1" title="LeftBanner 1" /> </a></li>
    </ul>
    </div>

  • For Footer aboutus, Footer aboutus
  • set hook position displayFooterBefore
  • Click on Source code button display in screenshot and paste below HTML code for static cms block and click on "OK" button. After that Click on "Save" button.
  • Click here & Copy this code

    <div id="ttmblockaboutus">
    <div class="block-aboutus"><img class="aboutus-img" alt="" src="../img/cms/logo-white.png" /><span class="block-details">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum <a href="#">More About Us <i class="fa fa-arrow-right"></i></a></span></div>
    </div>

  • For Footer Payment, Footer Payment
  • set hook position displayOther
  • Click on Source code button display in screenshot and paste below HTML code for static cms block and click on "OK" button. After that Click on "Save" button.
  • Click here & Copy this code

    <div class="ttmpayment"> <ul class="payment-block-inner"> <li class="icon"><a href="#"><img src="../img/cms/card-1.png" alt="" /></a></li>
    <li class="icon"><a href="#"><img src="../img/cms/card-2.png" alt="" /></a></li>
    <li class="icon"><a href="#"><img src="../img/cms/card-3.png" alt="" /></a></li>
    <li class="icon"><a href="#"><img src="../img/cms/card-4.png" alt="" /></a></li>
    <li class="icon"><a href="#"><img src="../img/cms/card-5.png" alt="" /></a></li>
    </ul>
    </div>

6.7 : Ttm Search products by category
  • Ttm Search products by category, With this module, customers will be able to find exactly what they're looking for in seconds.
  • Click on "Configure" link to change configuration settings.
6.8 : Ttm Product Hover Image
  • Click on "Configure" link to change configuration settings.
  • This module provides to display secondory image on product block hover. You can disable this effact on click of "Disable" link.
6.9 : Ttm Product Feature
  • Click on "Configure" link to change configuration settings.
  • Upload Ttm Product Feature "ttmproductfeature.zip" from theme package to enable Wishlist and Compare feature for your store.
6.10 : Ttm list categories
  • Click on "Configure" link to change configuration settings.
  • Set all information in this
  • Now click on "Save" button at bottom right corner.
6.11 : Ttm Banner CMS Block
  • Click on "Configure" link to change configuration settings.
  • Click on Source code button display in screenshot and paste below HTML code for Ttm Banner CMS Block and click on "OK" button. After that Click on "Save" button.
  • Click here & Copy this code

    <div id="ttm_bannercms">
    <div class="container">
    <div class="bannercms">
    <ul class="bannercms-wrapper row">
    <li class="bannercms_content first col-lg-6 col-md-6 col-sm-6">
    <div class="bannercms_item"><a href="#" class="img"><img src="../img/cms/banner_img1.png" alt="" /></a>
    <div class="bannertext"><span class="bannertext1">Big <span class="tm-skincolor">Sale</span><br />Pets All Product</span> <span class="bannertext2">Save Up To 30% All Product</span> <a class="bannerbtn" href="#">shop now <i class="fa fa-angle-double-right"></i></a></div>
    </div>
    </li>
    <li class="bannercms_content second col-lg-6 col-md-6 col-sm-6">
    <div class="bannercms_item"><a href="#" class="img"><img src="../img/cms/banner_img2.jpg" alt="" /></a>
    <div class="bannertext"><span class="bannertext1">Save Up To <span>25%</span></span> <span class="bannertext2">On Every Order</span> <span class="bannertext3">Pets Food And Equipments</span> <a class="bannerbtn" href="#">Shop Now <i class="fa fa-angle-double-right"></i></a></div>
    </div>
    </li>
    </ul>
    </div>
    </div>
    </div>
6.12 : Ttm Testimonials
  • Click on "Configure" link to change configuration settings.
  • Set all information in this
  • Now click on "Save" button at bottom right corner.
6.13 : Product Comments
  • Click on "Configure" link to change configuration settings.
  • Basic configuration
  • You can select position where module will display comments on product page (product footer / product tabs)
  • You can set minimal number of characters that must be used in comment title
  • You can set minimal number of characters that must be used in comment contents
  • You can show average rating as a "stars" on list of products (below products' thumbs)
  • You can decide what comment elements will appear on producty page (review date, author, title, contents and detailed grade)
  • Reviews waiting for approval
  • As you already know with this module you can enable feature to validate the review before it will be visible. On product edit page you can find section where you will see the reviews that wainting for validation. You can approve review, or remove it.
  • Reported reviews
  • Shop visitors / guests or customers can report reviews. You will be able to preview the reports on module configuration page and remove the report (deny report) or accept the report - module will hide the comment then.
6.14 : Ttm Blog Management
  • Click on "Configure" link to change configuration settings.
  • Once the module is installed successfully, you will see the Ps Blog Management quicklink in the left sidebar, hover the Ttm Blog Setting to see list of blog management tabs.
  • Blog Configuration
  • Enable Categories Tree Block: This will enable blog category tree block in left column in your store.
  • In our live demo store we have uploaded blog image size dimension is 870 x 585 ( W x H ) to display image.
  • Limit Item: You can set limits of post to display on home page and blog listing page.
  • Ttm Blog Dashboard
  • You can see here numbers of blogs , categories and comments.
  • You can see here categories and comments.
  • You can see here quick tools direct edit or see all pages or related blog
  • You can see here at bottom 3 tabs "General Setting", "Listing Blog Setting" and "Item Blog Setting".
  • - "General Setting" tab is includes general blog related settings.
  • - "Listing Blog Setting" is includes settings like 'Show Category Info or not', 'Leading Column', 'Leading Limit Items', 'Image size setting', 'Show title or not, etc'.
  • - "Item Blog Setting" is includes settings for single blog page item settings.
  • Blogs Management
  • To create blog page, go to: Ttm Blog Setting » Blog Dashboard, in the "General Tab", configure Blog menu title, link, template and metadata info.
  • Categories Management
  • The blog content includes category and blog items so firsly, Open the "Ttm Blog Setting » Categories Management" panel, create new category and configure it
  • Comment Management
  • On the blog details page, you can enable or disable the comment form in the "Blog Dashboard" configuration panel. When enabled, user can comment on the blog, and you can manage the comments from back-end. just go to: Ttm Blog Setting » Comment Management.
  • You can publish or disable any comment, edit comment or add new comment.
6.15 : Product countdown
  • Click on "Configure" link to change configuration settings.
  • Once the module is installed successfully, you have to set "Specific Price" with particular date range for selected product to show timer on that product in modules of our theme.
  • Click on "Configure" link to change configuration settings.
  • Cookie system – Module remembers if user has closed the popup. If You don’t want to show it again, You can set cookie duration. User will see the popup again after that amount of time.
  • Display options (colors, size, etc.)
  • Popup content for each available language in Your shop
  • Delay option: define how many seconds must pass to show the popup
  • Display your popup wherever you want to – just select any hook(s)

  • Click here & Copy this code

    <div class="ttmnewsletterpopup-content"><span class="ttmnewsletterpopup-title">Get To Know The Latest Offers!</span>
    <span class="ttmnewsletterpopup-desc">Subscribe and get notified at first on the latest update and offers!</span>
    <div class="ttmnewsletterpopup-mail">
    <div class="news-content"><input type="text" id="subscribe_email" name="mail_subscribe" class="newsletter_email" /></div>
    <div class="subscribe_button"><button type="submit" class="btn btn-default btn-lg">Subscribe</button></div>
    </div>
    </div>

Help

Thank you for purchasing this theme. If you have any questions that are beyond the scope of this help file, feel free to contact us via our Support ticket system.