Category: X-Cart Tutorials
Posted: Jan 18, 2011
Comments: 0 [
Post]
Synopsis: Learn everything you every wanted to know about customizing your Dynamic Product Tabs.
Dynamic Product Tabs was one of the blockbuster mods of 2010 with its genius flexibility and customizable tab setup. We constantly get questions from store owners wanting to mold the dynamic product tabs to fit their vision and this guide intends to give you a head start on setting up your own tabs.
In this guide:
Basic Setup and common problems
The first decision
The biggest DPT setting decision every store owner must make is whether to check or uncheck the "Display product details in a tab" box on the Dynamic Product Tabs settings page.
If this box is checked the product image, description, specifications, extra fields, options, and add to cart button will all be shown in the first Dynamic Product Tab. With this module checked the customer may not have to scroll on the product details page at all to learn everything possible about your product, they just click through each tab.
Alternatively, you can uncheck this option and leave the top of your product details page intact and unaffected by your new DPT install.
The tabs will appear below all of the product details and customers will usually need to scroll down to view the tabs.
The two options are illustrated in the screenshot below:
My tabs dont fit
There is limited room for tabs on product pages, especially for stores with a three column set width layout.
If you find that your product pages have more than one line of tabs and looking unprofessional we suggest you do one or all of the following:
- Disable one or more tab that is unimportant.
- Shorten your tab names by changing the language variable set in the Tab Name or editing the Tab Name itself.
-
Move one of your modules out of a tab and back onto the bottom of the product page
- Combine two tabs into one by copying the contents of one tab and pasting it into another tab, then rename the tab to reflect the new combined tabs' contents.
Using Extra Fields
Extra Fields in X-Cart provide store owners the freedom to add extra product-specific information to their product pages and Dynamic Product Tabs can easily be set up to display this extra information inside a tab(or multiple tabs) as in the example below:
-
Adding a new tab that uses a X-Cart Extra Field
-
Expanding the Extra Fields character limit
Product Description in a Tab
If you have chosen to have your tabs below your product details(image, description, specifications, extra fields, options, and add to cart) but would like to simplify the details area by moving the lengthy product description text into a tab we have a
knowledge base article with step by step instructions.
These instructions are not for stores that have "Display Product Details in a tab" checked.
Below is a screenshot of a store with their product description in the first tab on a product page:
Editing Tab Graphics
This is the basic tab graphic with descriptions added. It is a very simple file that has four parts. There is two graphical elements for the left/middle area and two for the right end of the tab. As long as the size of the image stays the same and the size of each of these four elements remains the same you can customize the tab graphic as much as you would like. The right end of the tab(the parts in the bottom half of the below image) may end up overlapped anywhere along the middle of the top graphics so make sure that the area where the two graphics meet doesnt clash.
xCMS Integration
Adding a tab for xCMS related articles is a great way to share extra information with your customers about the product they are thinking about buying.
Learn more about adding a xCMS Tab to your product page
Other Helpful Information
-
Link Directly to a Dynamic Product Tab
-
How do I get the product name to show up at the top of my tab content on X-Cart 4.1 and 4.2?
-
How can I create tabs that only show or hide for specific categories?
-
How do I install Next Previous products in X-Cart 4.4 with Dynamic Product Tabs?
If you would like further customization of your Dynamic Product Tabs we suggest checking out our
X-Cart Customization Service