Optimised for 1024 x 768 screen resolution and including some HTML5 and CSS 3 elements in the design, this set is a big reworking of the original JShop design and code. While the set may not look like much has changed, the power lies beneath. The original design remit was to make a flexible, multi-option set that allows the products, items or services you offer to take centre stage while still keeping within the flexible remits of a standard store layout with central content and side columns (fully controllable from the settings). With added functionality and choice usability additions to improve the user experience. All other template sets you may have remain unchanged.

Additional Resources:

We have included some additional resources to compliment our sets for optional use if you so wish

• A necessary component to allow many of the set functions is required to be placed in a core directory of JShop. This file can be found under the “additional_files” folder and instructions are provided once the template set is installed and you navigate to the Installed Template Sets option screen. In most cases it will be a simple copy of the file to the relevant core folder of JShop and that’s it.
• Alongside this we provide a quick way to update the Labels / Snippets with those required for this template (no existing ones will be altered as we use a naming convention to quickly identify JShoptemplates.com labels and snippets).
• There is a quick backup in the template set options screen also that will carry out a backup of your shop files and database into one “tar.gz” archive in the root of your store. Always worth doing before any major amendments of course.
• Lastly, we provide a default .htaccess file (htaccess.txt) for Linux Hosted sites (not Windows) that you can either use as is, or delve in and pick and choose what you feel is useful. It has the standard SEF url rewrite code for JShop that works on most servers. But please be aware, we can not guarantee or provide any support with regards to the htaccess file and how your server will respond, so please backup and be careful when altering anything using an htaccess file. If you don’t know what this is, then it’s best left alone as it is not required for the functioning of your store.

Template Set Options:

Here are the available template set options you will have.  I have marked functions that currently require “PHP be turned on in templates” (as @ Feb 2012) with a red (PHP required) and also please refer to the NOTES: for each option for important information…..

1) Available Options

The first options available are almost standard JShop.

• Upload your own header image to use. Upload your own logo for the top left of the site. For this template we recommend a size no bigger than (width: 410px by height: 70px)  where the height should be the controlling value. Preferably create as an PNG with alpha transparency best, or general transparency. You can of course also use GIFs or PNG’s and set the background colour to that of the header background (beware of any gradient in the background though).
• Enter the preferred width of your site  (default setting is 960px as this is the base standard dimension according to the most common monitor resolutions used currently as of  January 2012) but remember to allow for vertical scroll bars.
• The left and right margins of the page within the total width entered.  So in this default example your content area will be (960 – (20 + 20) = 920px) NOTE: 20px is the default and gives a nice visual separation from the containers, but 10px is equally good.
• Finally, you have a colour scheme choice, black & green, black & blue, black & red. These colours can be edited by going to “themename/templatesource/css/screen/colours.css”.

2) Custom Heading Font

If you wish to replace your main headings with a custom font from Google Webfonts, this is where to do it. If no font is selected the default template font will be used.

• Simply select the font you like, click on the red ‘Get font’ and then from the ‘paste this within your head tag’ area at the bottom, copy the part of the code with the name of the font only. Now also fill in the Custom Font CSS code required below that. NOTE: font names with more than one word use the “+” as in this example above.

3) Home Page Slide Gallery & Image Display

Control the home page (index) slide show gallery display…

• Show and allow home page description OR Show gallery but hide home page description OR Do not show slide gallery
• Set the height of the slider as required (value is in pixels, but enter without the “px”)
• Show the controls? These are the start and stop slideshow buttons and the counter.
• Show the thumbnail navigation of the slides below the gallery?
• Set the height and width of the thumbnails (one value controls both dimensions).
• Show the featured products below the gallery. This allows you to either show the products placed under the home page, or not and simply allow the gallery to do the showcasing for you instead.

4) Sections Slide Gallery & Image Display

Control the Section pages slide show gallery display. NOTE: The above Home Page controls display and thumbnail navigation settings will apply to these section pages also …   NOTE: the section slider options now have their own thumbnail and navigation settings separate from the home page slider and independent control of the section description. These options will be updated shortly to reflect the improvement.

• Show the slider (section images override product images) OR Show the slider (product images only under the sections) OR Show the section image in place of the slider OR Use section image aligned according to setting below
• Enter the height of the slider without the “px” measurement (Default is 420)
• The section image alignment: right, left or center (good for large full width of content image banner).

5) Top and Left Menu Options

Control what menu items you wish to have and where …

• Use this option to change the display of the top main menu to either show the Sections or the Top Articles drop down menus or none at all. If there are custom menu systems to choose from, this is where you can select them. NOTE: if you have too many sections the menu will wrap and not display correctly due to the limited horisontal space available, in this case we advise you select the Articles menu instead and display the sections in the left column vertical menu.
• Use this option to change the display of the left vertical menu to show the Shop Sections in the standard JShop way (nested) or as a Fly-out menu, or the Bottom Articles (nested) , or you can hide it completely (ensure your site sections can be navigated using the top menu display of course if you hide this).

6) Column Layout Settings

Control the columns you wish visible or not in the main areas of the store. The central content is made up of a left column, central content area and right column by default. You have control over what variation of this you wish to have …

• Show or hide the columns on the home page, product pages, section pages, article pages and all other non-specific pages such as contact, or cart etc.

7) Product and Section List Layout Settings

Control how your products and sections get listed on the various areas of the store …

• Change the display of products on the areas shown above of your store to use either one, two, three or four columns according to the options available. Lastly there is the similar option of how to display the sections on the section pages.

8) Other Layout Settings

Customer login panel…

• Use this option to hide or display (if you have set to “allow customer” in admin, it will display) the lower Customer Login panel just above the footer Information area

9) Article Settings

This controls your articles based on a limit of two root articles and their respective sub articles which get shown…

• Enter the ID of the parent article you wish to display the sub articles from.
• Show or Hide the first articles menu and select its position (left main menu position, or left menu below main menu, or at the very top of the page in the black static “info bar”.
• Then enter the ID number of the parent article you wish to display sub articles from for the secondary articles menu.
• Show or Hide the second articles menu and select its position (left column or footer)

 10) Form Layout Settings

Use this option to change the display of all the store forms (apart from one-page checkout)  – account opening, affiliate etc – The standard layout is the columnar display where labels are to the left of form elements. Vertical places labels above the form elements, while Full width is just that. The provided HTML mark-up is based on best practices for accessible forms (use of tabs and accessible for screen readers). This may be removed as an option in later incarnations of the set.

11) Additional Company Information

Enter any relevant company information here and what payments your card processing merchant can accept. If the fields are left blank, they will not show blank lines etc…

• Info 1 – good example to use is a UK company number
• Info 2 – good example is a UK company VAT number
• Show icons of the card payments you accept as required. You need to enter the names of the cards you accept. Currently available payment icons (subject to change):  amex cirrus delta directdebit discover electron google maestro mastercard mastercardsecure paypal solo switch visa visaverified.

12) Follow Us Social Icons(limited)

Use this option to have any Social icons and links shown or to simply hide the containing box if there is nothing entered. The position can also be controled of where you wish them to appear. NOTE: I have used the hash symbol to simply “activate” the display of the icons in the image above for the demo…

• Left column OR right column OR hide
• If you have a twitter account, enter the complete URL only in the field (e.g http://twitter.com/yourplace )
• Have a Facebook account? Enter the complete URL only in the field (e.g http://www.facebook.com/yourplace )
• Linkedin account? Enter the complete URL only in the field (e.g http://www.linkedin.com/companies/yourplace )
• If you have a Youtube account, enter the complete URL only in the field (e.g http://www.youtube.com/user/yourplace )

13) Extra Site Content

Upload your own images to include in the left column (3 available)  OR right column (3 available) OR bottom of the page (3 available)…

• The left and right column extra images will be placed below the default content boxes. The bottom images will be placed between the main central content and the client login box or footer whichever is visible. NOTE:  For this template we recommend a size no wider than 160 pixels for the side columns, and whatever is the central width according to your site width settings … there is a helpfull ruler setting below to aid you in working this out.

14) Additional Meta Tags and Google Analytics

The hidden stuff we pretty much all need at some point. Dont get your hands dirty with code. Use this to enter your Google Analytics account ID. We have built in the Google E-Commerce Tracking code to send data about store purchases, amounts etc. An extremely useful and powerful tool that you or your webmaster can use to improve your ROI (return on investment).

• Google Web Property ID here for analytics to work.
• Google E-Commerce tracking uses the same web ID, but currently requires PHP be turned on in templates (PHP required for E-Commerce tracking only)
• Extra Meta tag 1 – name and content value to define. This will be placed in the head of the pages. You may need this facility to easily activate your google account tracking etc
• Extra Meta tag 2 – name and content value to define. This will be placed in the head of the pages. You may need this facility to easily activate your google account tracking etc

15) Development Help!

A little extra help when developing or changing the design or functions if you feel brave and like to dive in….

• Show or Hide the pixel ruler at the top of the content area to help with laying out or dimensions of section images, banners etc – don’t forget to turn this off when you have finished ;)
• Show or Hide the variables at the bottom of the page  -  the variables will be displayed in a semi-formatted way, and you can use the search function in your browser to find any relevant code. NOTE: please only use if you are a developer or require the varibales to complete some code changes – YOU MUST TURN THIS OFF ONCE FINISHED ;) (PHP required)
  

 

 

That’s it folks! I am sure there will be many more requirements I have missed out, or that you might have or would like to see, and while I welcome any suggestions as to what should be included in the templates, I will not be able to make any major amendments to the sets as they are (apart from a few improvements I may need to do). However, if I receive multiple requests or suggestions of the same function etc, then I will certainly try my hardest to include these in future sets and am obviously happy to make amendments to your existing sets as required with payment for my time.

Any questions, please ask. However I have limited time and can not offer extensive coding and customisation support. Certain requests may cross over into being “paid for” time, and I will be honest and clear about this if you ask. Otherwise, I will be as generous as possible to those needing a bit of extra support in changing some styles, or moving a bit of code around etc.

Dimitri