Website Enhancement - Product More Information Tabs
|
Adding tabbed sections to your product more information page gives you the ability to display more information for the customer, in an organized fashion, without taking up too much room. Tabs give the customer a sense of the information that you provide right at the beginning, and make it so that the customer can skip right to the information that they want without scrolling through your product more information page to find where the information is, or if you have that information at all.
When I setup tabs on a website I use both the product text fields and extra product fields for the tabs. The first tab is usually the detailed product description, whatever text/code you have entered into the product more information text field. Another tab might be for product reviews. Then the other tabs you would use extra product fields and only have those tabs be displayed if the extra product fields have text in them. You don't want to show tabs that the customers can click on but not have any information in the tabs. That shows unnecessary code on your pages and is frustrating for the customer.
Below I have provided basic information for installing a tabbed information feature on your store pages. The code below uses specific images and has specific styles. If you are not familiar with coding or you do not want to install this yourself, you can purchase a feature install from me directly. I will install this code on your store pages and customize the images to match the look and feel of your website.
Step 1: Upload JavaScript & CSS Files
For your first step you will want to upload the tabs.js and tabs.css files into your ShopSite store under Merchandising > Custom Templates > Includes > Upload Publish File.
Step 2: Upload Images
Right click the images below and save them to your desktop. Then log into your ShopSite store and go to Images > Upload Images. Upload both of these images into the media directory (not in a sub folder unless you modify the tabs.css file in step 1).
Step 3: Add Script To HEAD Section
In this step you are going to add the following script to the HEAD section of your product more information page.
Step 4: Add Tabs To BODY Section
Copy the code in the field below and paste it in your product more information page custom template where you would like the product more information tabs to appear on your page.
Step 5: Test Your Tabs
For the last step, you will want to assign your custom product template to one of your products, then add some text into the product more information text field, product field 1 and product field 2 to see if the tabs are setup correctly on your website.
Example Of Product More Information Tab Feature
Detailed Product Info for Lauren Hills Design Test Product
Here is where my product description would go. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus semper aliquet accumsan. In in tempus diam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus pellentesque augue sit amet sapien sagittis convallis. Cras pellentesque metus fermentum lorem convallis laoreet. Nunc scelerisque lectus id orci posuere ut feugiat tortor hendrerit. Maecenas ultricies aliquet nulla, at fringilla odio mattis at. Integer non eros dui, a mattis turpis. Vulputate convallis lectus. Sed pharetra massa a nunc rutrum consequat. Nulla ut bibendum neque. Aliquam dictum dignissim elit a aliquet.
Aenean in ligula leo. Vivamus auctor sodales mi, at malesuada orci eleifend a. Aliquam sit amet quam nunc. Phasellus feugiat aliquet magna, vel ornare ipsum porta eu. Suspendisse vitae tellus mauris, non accumsan justo. Nam mattis, nibh vel aliquam blandit, nibh elit facilisis massa, sed dapibus neque lectus faucibus justo. Nullam lacinia lorem ac ipsum accumsan pretium. Nullam ornare, felis id posuere lobortis, neque lorem varius turpis, sed facilisis sem lorem et dui. Suspendisse hendrerit risus nec arcu sodales commodo. Mauris nisi sapien, condimentum id scelerisque at, varius sed odio. In sit amet euismod dui. Donec gravida fermentum vulputate. Nullam suscipit sagittis viverra. Vivamus a porttitor sem. Pellentesque venenatis, dolor quis scelerisque rutrum, lacus ligula tempus ligula, nec dignissim magna nulla in massa.