Thin Theme Documentation

The purpose of the files in the package

  • INSTALL_ADDON_ThinTheme_vX_X_44x-45x_cs_cart_version_XXXX-XX-XX.zip – add-on installation – Thin Theme
  • icons_pack_for_menu from_demo.zip – this is an archive that contains the icons used in the demo, they are as auxiliary material. it’s not an addon.
  • layouts_ThinTheme_blog_05252017.zip – this is a blog layout. It’s not an addon. Installation
  • ath_pie_vX_X_435-45x_cs_cart_version_XXXX-XX-XX.zip – package to install the add-on “Product Image Effects” (installation not required)
  • previous_and_next_vX_X_XXXX-XX-XX.zip – package to install the add-on “Previous and Next Product” (installation not required)

A) Installation top

1. Uploading

  1. Download the add-on
  2. Go to Admin panel > Add-ons > Manage Add-ons
  3. Click on [+] to open upload modal window
  4. Please choose whatever is comfortable for you:
    Local: zip archive is saved on your computer
    Server: zip archive is uploaded on your server
    URL: you have a direct link to the zip archive
  5. After you selected the zip archive corresponding to your current version of CS-Cart please click Upload & install

2. License Activation

  1. Open add-on settings page Admin panel > Add-ons > Manage Add-ons >
    [TH] Thin Theme Settings
  2. In Activation tab insert License key
  3. Save the settings and go back to Manage Add-ons page
  4. In the same line with the name of the add-on, click Active
  5. Clear cache, choose Administration > Storage > Clear cache

3. Theme Activation

  1. Go to Admin panel > Design > Themes
  2. Click on tab Browse all available themes
  3. Hover “Thin theme” and press Install button
  4. Then you can activate the theme in the Installed theme tab

That’s all, the theme is installed

The demonstration banners will be installed automatically, Extended Menu requires independent settings


It is possible to use SVG logo in this theme

  1. Optimize SVG file, you can use online service SVGOMG!
  2. Open the file in a text editor and copy the text
  3. Go to Admin panel > Design > Layouts
  4. Deactivate block Logo
  5. Activate block Logo SVG
  6. Press [gear] and select Content tab
  7. Insert the text of your file between the lines
    <a title="{$logos.theme.image.alt}" href="{">
    svg code
    </a>

SVG is a vector format, so scaling the image quality doesn’t deteriorate. Also when you add the SVG as described above, there is no additional request to the server.

To replace the logo on the image

  1. Go to Design > Themes
  2. Press Visual Editor in front of the currently active layout
  3. In the new tab, you will see your shop with Theme editor panel
  4. In CUSTOMIZE selector choose Logos
  5. After editing save your changes by pressing Save and press [X] to close editor

C) Change colors top

  1. Go to Design > Themes
  2. Press Visual Editor in front of the currently active layout
  3. In the new tab, you will see your shop with Theme editor panel
  4. In CUSTOMIZE selector choose Colors
  5. After editing save your changes by pressing Save and press [X] to close editor

D) Change styles top

Style files add-on should not be changed, this can lead to incorrect work of the add-on. If there was a need to redefine or add styles, please use Theme editor for this

  1. Go to Design > Themes
  2. Press Visual Editor in front of the currently active layout
  3. In the new tab, you will see your shop with Theme editor panel
  4. In CUSTOMIZE selector choose Custom CSS
  5. In textarea your can add your styles
  6. After editing save your changes by pressing Save and press [X] to close editor

E) Full-width section top

You can easily make the section to full width

In grid settings added User-defined CSS class for section and Fullwidth

For their appearance it is necessary to fulfill two conditions

  1. The grid has no parent
  2. Width – 16

Theme already has classes that specify background

  • .content_bg_section – Special background
  • .accent_bg_section – Main accent color
Fill width section

F) Banners with text top

Added another option to display banners. Text on the graphic banner is added from the block. The text is set in the form of language variables.

Example:

Add a new variable new_arrivals to the block and save the block

  1. Go to Administration > Languages > Translations
  2. Click on [+] to add new language variable
  3. Add a variable and its translation, (2) and (3)
  4. Press Create button

For a variable, use Latin letters without spaces

​ Correctly:

text_for_example

❌ Not correct:

текст для примера

 


G) Extended Menu top

Create Extended Menu

  1. Go to Admin panel > Design > Menus
  2. Click on [+] to open “New menu” modal window
  3. Enter name and please click Create
  4. Select new menu
  5. Click on [+] to open “New item” modal window

The menu items of the 1st level have two types

  1. Full category tree (1) – display all categories and category banners
  2. Default – display menu items and submenuOptions:
    • Display type – specifies how to display submenu
    • Float right (9) – sets the alignment of the element on the right edge
    • Icon (2) – the image for the menu item
    • SVG Icon (2) – field to insert SVG code

The menu items of the 2nd level have two types

  1. Default (8) – menu items display as menu by default
  2. Text (7) – display wiziwig content

Full category tree

It created automatically. Content is defined in the settings page, category

  • Icon (3) – icon for the item in the menu
  • SVG Icon (3) – field to insert SVG code
  • Banner (5) – promotional banner for the first-level categories
  • Banner URL – link for promo banner
  • Images (4) – displayed under the name of the category


To create the menu item “Contacts”, follow these steps.

Create item “Contacts”, select

  • Content type: default
  • Display type: List
  • Float right: selected

Create sub-item “Info”

  • Parent element: Contacts
  • Type of content: Text
  • Custom CSS class: ath_mega-menu__contacts

In the visual editor, choose the mode “Code” and insert the following HTML:

<h4><i class="icon-tt-pin"></i> Address:</h4>
<p>3993 Hanover Street, <br>New York, NY 10016
</p>
<p><br>
</p>
<h4><i class="icon-tt-mail"></i> Email:</h4>
<p><a href="mailto:sales@example.com">sales@example.com</a>
</p>
<p><br>
</p>
<h4><i class="icon-tt-phone"></i> Phone:</h4>
<p>+1 917-722-7425
</p>
<p>(free call)
</p>
<p><br>
</p>
<h4><i class="icon-tt-clock"></i> Opening hours</h4>
<p>10:00 — 6:00
</p>
<p>From Monday to Friday
</p>

 

When the menu is ready, go to Admin panel > Design > Layouts and in the MegaMenu in tab Content select the created menu

Important! Extended Menu for the main menu of the site, it is therefore recommended to use only one menu of this type.


H) Category catalog top

The number of columns on category page is set in the add-on settings


I) Blog top

In the theme there is stylized add-on Blog by SIMTECH company included in the default CS-Cart

layouts_ThinTheme_blog_05252017.zip – this is a blog layout, to install it follow these steps

  1. Go to Design > Layouts > Gear next to the plus > Import layout
  2. In the opened window select Update current layout > Override locations by dispatch
  3. Upload the unzip file

The number of columns on the blog page is set in the add-on settings


J) Iconic font top

The theme uses an icon font:

In order to change the icon, for example – in unit free shipping, you need to replace the following code

<i class="icon-tt-gift"></i>

to

<i class="icon-tt-clock"></i>

this will replace the gift icon to the clock icon.


K) Theme Update top

To update the theme, follow these steps
  • make a full backup of the store
  • close the store
  • install the theme add-on over the old version without removing the previous one
  • clear the cache
  • if necessary, make changes that can be erased during the upgrade if you changed the theme files directly
  • check that everything is successfully updated
  • open the store

To update language variables and add-on settings:

  • Go to developer mode
  • For this file local_conf.php add define(‘DEVELOPMENT’, true);
    If you do not have a file, create one.
  • Clear the cache
  • On the add-ons page in the drop – down list next to the add-on “[TH] Thin Theme Settings” select “Update”
  • Return to normal store mode

For stores using color schemes created before the version 3.0

Updating the color scheme:
  • On the themes page, switch to the color scheme “Crimson”
  • Run the “Theme Editor””
  • Select your color scheme and save it.
  • The new color variables will be set to white. Replace them if necessary.
A subscription is required to access to product latest version and for technical support.
You can update alone or contact with us via support@themehills.com


L) FAQ (Frequently asked questions)top

  • How to make a menu item “Contacts” like on the demo

    Method described in paragraph Extended Menu

  • How to make the blocks with banners “popular” in 4 or 5 columns?

    This requires replacing the custom classes for the section “col_3 col_3–special” to “col_4 col_4–special” and “col_5 col_5–special” accordingly

  • How do I change the default vendor logo ?

    Change the file design/themes/thin_theme/media/images/logo.png to yours own and clear the cache.


Changelog

3.03 (20 Dec 2018)
fix extended menu

3.02 (14 Dec 2018)
color scheme fixes
fixed compatibility with mega menu add-on

3.01 (23 Nov 2018)
correction of add-on priority for correct work with banners

3.00 (19 Nov 2018)
5 new color schemes
changed SVG block of payment system icons
updated layouts
added language variables
new color settings in the theme editor
fixed working rtl menu for Android
changed the work of searching by categories

2.21 (1 Oct 2018)
fixes for extended menu
changed the priority of the add-on

2.20 (9 Sept 2018)
fixes for extended menu
added a block with categories to the layout

2.19 (9 Apr 2018)
license update
fix RTL
fix layouts
fix banners

2.18 (28 Feb 2018)
license update

2.17 (9 Feb 2018)
updated templates to 4.7.2
new updated block list of vendors

2.16 (9 Jan 2018)
updated product date for correct operation of the list of variations on the item card
updated the item card

2.15 (6 Dec 2017)
fixed Lazy Load for IE

2.14 (29 Nov 2017)
added Russian layout
block with categories fixed
added a backup menu

2.13 (3 Nov 2017)
added block with categories

2.12 (31 Octb 2017)
mega menu add-on support
Emerald Theme support

2.11 (21 Oct 2017)
Fix Lazy Load
Information about unavailability of the license server

2.10 (21 Sept 2017)
Fix for mega menu on desktop

2.7 (7 March 2017)
multivendor support
added the ability to make blocks in the section of new items on 4 and 5 columns
added banner on sale page
added image for Gift certificates page
the mega menu added the ability to hide the price and language
in the mega menu added setting the number of items in the display " number of categories"
corrections
Russian documentation

2.6 (16 February 2017)
added display of “buy in one click " buttons”
attached hook on the detailed page of products:add_to_cart

2.5 (13 February 2017)
fixes: columns in wysiwyg, added background for text 
updated icon files: added Vkontakte and Odnoklassniki

2.9 (29 Jun 2017)
fix the layout
support for new features for multivendor
in test mode we added lazyload for images (it is possible to disable it)
ability to limit the number of items for mega menu
many fixes for RTL version
added ability to specify sizes for blog images
improved theme settings during installation