Store Building Guide
Information for setting up and configuring elements of your store.
Product Search & Subscriptions
Creating a good search will go a long way in helping you create your stores fast and ensuring that the products you want included in your store are included and the products you don't want in your store are excluded.
The following sections cover finding and adding products to your store:
The Good Method
There is a good way and a bad way to add products to a category in your store. The good way is by creating 'search subscriptions'. The bad way is adding products one by one to a category.
Datafeedr enables you to 'subscribe' to a search. Every 'search subscription' is linked to a category in your store. For example:
-
I have a category named "Shoes for Rock Climbing".
-
I do a search for "rock climbing shoes".
-
The search for "rock climbing shoes" returns 100 results.
-
I save this search to my "Shoes for Rock Climbing" category.
-
Now my category has 100 products in it.
What's so "good" about this method?
While it might take a little more time to set up a search subscription which returns the products you want, the time it saves you in the future is well worth it! Here are the advantages of taking the time to set-up a good search subscription:
-
New products are automatically added - If a merchant adds new products to their inventory and those products match your search subscription, those new products will automatically appear in your store.
-
Add dozens/hundreds of products in 1 click - With search subscriptions, you can easily create a store filled with hundreds of products with just a few mouse clicks. There's no need to select every single product, one by one, to be included in your store.
-
No need to check inventory - You don't need to constantly search the Datafeedr database looking for new products that may have been added since the last time you checked. That happens automatically with search subscriptions.
If you find yourself adding more than a dozen products one by one, you are probably a candidate for using search subscriptions.
The Bad Method
The Bad Method of adding products to your store is adding products one by one. While there are exceptions, generally, this is not the best way to build your store.
In most cases, you should be adding products to your store by setting up a search subscription.
If you are adding products to your store one by one, you will never have new products automatically added to your store, your store will gradually get smaller and smaller and everytime you want to add new products, you'll need to search the Datafeedr database.
If you find yourself adding more than a dozen products to your store one by one, consider using a search subscription to make your store building experience easier and faster.
Overview of the Search Form
Here is the layout and a legend of the search form elements.
-
A - The add filter icon will add additional filter fields to the form when clicked.
-
B - To remove a filter, click the remove filter icon.
-
C - This is the field to search.
-
D - This is the input area for a field.
-
E - A few search tips which opens in a pop-up window.
-
F - The [Find] button will perform the search.
-
G - To subscribe to a search click the [Save search] button. This button will only be present after a search has been run.
Searchable Fields
Currently there are 15 filters you can apply to a search. Here's a screenshot of each filter. Below the screenshot is an explanation of each field.
Keyword - Keyword searches are the most broad. A keyword search searches product name, product description and product tag fields.
Product name - Product name searches search only the product name field.
Product description - Product description searches search only the product description field.
Price range - Filters products within a given price range. If you want to search for all products more than $XX.XX, only fill in the first field and leave the second field blank. If you want to search for all products less than $XX.XX, only fill in the second field and leave the first field blank.
Tags - Searches the product tag field.
Images - When this checkbox is checked, only products that have product image URLs will be returned.
Similar to - Returns products that are similar to another product. This filter has 3 fields:
-
Product ID - The product ID of which you are trying to find similar products
-
Certainty - Is a percentage that the returned products are similar. The higher the percentage, the more restrictive the search will be.
-
Price difference - Is the difference in price you will allow between the control product and the returned products. If the control product is priced at $100 and the price difference is set to 25%, then returned products will be between $75 and $125.
Merchants - When this filter is exposed, you must select merchants and a filtering option. By default, all merchants are searched unless this filter is exposed and a merchant is selected.
Limit - To limit the number of results in a search, enter in the maximum number of products you want returned in your search.
Brand - If the merchant has supplied a brand name in the brand field in the datafeed they provided, the brand name will be searchable here.. Not all merchants provide this information and if you do a brand search that returns fewer results than expected, you might consider placing the brand name in the Keyword field.
UPC/EAN - If the merchant has provided a UPC or an EAN number in the appropriate field in the datafeed they provided, the code will be searchable here. Not all merchants provide this information.
Product Code - If the merchant has provided a product code or a SKU number in the appropriate field in the datafeed they provided, the number will be searchable here. Not all merchants provide this information.
Model - If the merchant has provided a model number in the appropriate field in the datafeed they provided, the number will be searchable here. Not all merchants provide this information.
Currency - If the merchant has provided a currency code in the appropriate field in the datafeed they provided, the code will be searchable here. Not all merchants provide this information. Possible code might be: USD, GBP, EUR
ISBN - If the merchant has provided an ISBN number in the appropriate field in the datafeed they provided, the number will be searchable here. Not all merchants provide this information. This information is only provided for books.
Search Operators
AND - Returns products that match all words in the query. Use a space " " to indicate both terms should be searched for. Example: dog bed
OR - Returns products with at least one of the words. Use the pipe symbol "|" to include multiple words in your search. Example: dog|cat
NOT - Returns products that do not have the designated word(s). Use the dash symbol "-" to exclude a word from your search. Example: dog -cat
Phrasal - Returns products that contain the exact phrase. Example: "dog bed"
Starts With - Returns products that start with this string. For example, ^bags only returns products whose field start with "bags". Example: ^puppy
Quorum - Returns products that contain at least X number of words in a given phrase. For example, "dog puppy canine bed sofa couch"/2 will return products that contain at least 2 of the 6 words. Example: "dog puppy canine bed sofa couch"/2
Exact - Returns products that match the exact word. For example, =watch will return all products that contain the word "watch" but not "watched", "watcher" or "watches".
NOTE: All searches use stemming and omit stopwords. For example: "machine" also returns "machines"; "new world of cars" returns "new world cars".
Tips & Additional Information
Remember that all searches in the Factory use stemming and omit stopwords. For example: "machine" also returns "machines"; "new world of cars" returns "new world cars".
Be careful not to create search subscriptions that are too narrow and limited or too broad and general. This could lead to unexpected products appearing or disappearing when merchants modify their datafeeds.
Query Strings
A query string allows you define specific parameters when returning a list of products.
Available Parameters:
-
c - possible values are category ID, category slug or category placeholder (%ci).
-
network - possible values are network name, or a part thereof.
-
merchant - possible values are merchant name, or a part thereof.
-
name - possible values are product name, or a part thereof.
-
price - possible values are exact price or price range.
-
price=-10 equals products priced less than 10.
-
price=10- equals products prices more than 10.
-
price=10-20 equals products priced between 10 and 20.
-
saleprice - possible values are exact saleprice or saleprice range.
-
saleprice=-10 equals products sale priced less than 10.
-
saleprice=10- equals products sale prices more than 10.
-
saleprice=10-20 equals products sale priced between 10 and 20.
-
sort - possible values are field names (like sort=price) optionally preceded by '-' (like sort=-price) for reverse sorting.
-
word - possible values are a keyword which appears in the product name, description and/or tags.
-
tags - possible values are words, separated by "+".
Example Usages:
Filter products by category ID
c=12345
Filter products by category slug
c=running-shoes
Filter products by an affiliate network name
network=Google Affiliate Network
Filter products by a partial affiliate network name
network=Google
Filter products by product name
name=Nike Running Shoes
Filter products by merchant name
merchant=Apple iTunes
Filter products by a partial merchant name
merchant=Apple
Filter products by an exact price
price=10
Filter products by a less than price
price=-10
Filter products by a more than price
price=10-
Filter products by a price range
price=10-20
Filter products by one keyword tag
tags=shoe
Filter products by multiple keyword tags
tags=shoe+running
Filter products by all words in product's name, description or tags)
word=shoe+running
Custom query string advanced examples
Filter products by category ID and price range
c=12345&price=10-20
Filter products by category ID, price range and network
c=12345&price=10-20&network=shareasale
Filter products by words and price
words=running+shoe&price=10-
Before You Upgrade
Version 3 is in BETA. Things might break.
Upgrading from V1 to V3 is NOT mandatory nor is there any urgency to do so. We will continue to support the V1 plugin, although we will not be adding new features to the plugin. The new Factory interface will contine to support Version 1 feed file downloads (Go to Store > Store Menu > Download Store > For Plugin Version 1.x). That file is in the correct format for the V1 plugin to process. We will continue to provide a link to the V1 file format for as long as there are still V1 stores.
We do, however, recommend that if you are creating a new store that you use Datafeedr Version 3 unless you desperately need one of the features that is not available in V3.
Things to keep in mind
-
You need to upgrade your WordPress version to at least version 3.x.
-
Product IDs & category IDs have ALL changed. If you have written any PHP logic into your site which analyzes IDs, those will fail.
-
All category and product management has been moved out of the plugin and into the factory.
-
Previously dripped products will be broken. V3 does not support V1 dripped products in any way.
-
We've revamped all widgets. Your widgets will need to be re-added to your sidebar.
-
Unless great care is taken, your URLs will be changed, though they will all issue 301 redirect header messages to the search engines. (More info: http://www.google.com/support/webmasters/bin/answer.py?hl=en&answer=93633 )
-
The Datafeedr V3 file format will not work with services having their own Datafeedr import feature such as ShopperPress,... until they update their services.
-
We've updated our requirements: http://www.datafeedr.com/requirements/
Things that don't exist yet
-
Tracking clickthroughs
-
Tracking product views
-
Adding custom products
-
Specifying Redirect URL on 404's
-
Attributes have been completely removed (and will not be added again)
-
Embed product icon (DR icon) in post interface (it's possible to embed a product in post using [DFR] shortcodes)
-
No Datafeedr Pages widget (will not be added again as it's easily reproducible using WP's menu system)
Things that will not be ported from V1 to V3
-
Custom product names, descriptions and other manual product info edits
-
Custom "no-image", "Buy Now" and "More Details" images
-
Category images, descriptions
-
New categories created through the Datafeedr V1 plugin interface
-
Affiliate IDs
-
V1 referrer tracking info
-
Products that were dripped in V1 will be dripped again if drip is enabled in V3
-
Custom pages
Upgrade: Version 1 to Version 3
Here is a short guide to help you upgrade your stores from Datafeedr version 1 to Datafeedr version 3. This guide assumes that you have built one or more stores with Datafeedr version 1.
We also have a video covering these details: http://www.datafeedr.com/docs/video_upgrade
Before you begin, make sure you have a backup of your entire site. This includes all of your site's folders and files as well as your site's database. You should have these backups so that you can revert if something goes unexpectedly.
-
Locate Your Store in Factory V3
All your Datafeedr version 1 stores have been imported into the new Factory V3 and are accessible via the left sidebar. Click on the store you want to upgrade. You will now be redirected to the admin area of your store.
-
Configure Basic Store Settings
Click in the Store menu on "Basic Store Settings". In the popup screen that appears put in your domain name in the domain name field and click save. No need to include http and/or www. You can just enter yourdomain.com
-
Configure Affiliate IDs & Tracking Parameters
Click in the Store menu on "Affiliate IDs & Tracking Parameters". There's no need to fill in the affiliate IDs for all networks. Just put in your affiliate IDs for the networks you're displaying products from and click save.
-
Configure URL Settings
Click in the Store menu on "URL Settings". If your store is set as the home page remove store from the "Front Page URL" field so the field is empty. The recommended value for "Legacy URL support" is Redirect. It will automatically redirect old Datafeedr version 1 URLs to the corresponding new Datafeedr version 3 URLs. If you choose "Full" the old Datafeedr version 1 URLs will still be valid and there will be a corresponding Datafeedr version 3 URL giving you 2 URLs for the same page possibly causing duplicate content issues. Configure your store URL settings and click save.
-
Deactivate and Delete Datafeedr Version 1 Plugin
In the plugins section of your site deactivate and delete the Datafeedr and Datafeedr Widgets plugins.
-
Delete additional Datafeedr Version 1 Folders
Using your FTP program, remove the dfr folder in the root of your WordPress installation and the wp-content/datafeedr folder. If you uploaded the datafeedr template files folder to your theme's folder, remove that folder as well.
-
Install New Datafeedr Version 3 Plugin
Download the new Datafeedr version 3 plugin here.
Log into your blog's admin area and go to Plugins > Add New > Upload and upload the Datafeedr plugin .zip file: datafeedr_3_xx_xxxx.zip. After the Datafeedr plugin has been installed, activate the plugin. Detailed instructions are here. You can find the new WordPress Datafeedr admin area under the WordPress Tools section.
-
Insert Connection Key
You can find your connection key in the Factory in the top right hand corner of your store admin area. Copy the connection key and insert it into the Connection Key field in the WordPress Datafeedr admin area. Click save.
-
Update Store
Click the Update Store button to import all your store settings.
Category Lists
The Category List module accepts many different category related tags. Because of the nature of category lists (ie. complex hierarchical structure, opened and closed requirements, CSS requirements), setting up a category list that meets your needs can be a little tricky. So, I will introduce you to the allowable category tags, what they do and how to use them.
In the examples below, we will be working with the following categories:
Example 1:
[category.list before='<ul>' after='</ul>']
<li>
<a href="[category.link]" title="[category.name]">[category.name]</a>
[category.repeat]
</li>
[/category.list]
This is the most basic category displaying code you can provide. It produce the following HTML code:
<ul>
<li><a href="http://site.com/store/category/appliances/" title="Appliances">Appliances</a>
<ul>
<li><a href="http://site.com/store/category/stand-mixers/" title="Stand Mixers">Stand Mixers</a></li>
<li><a href="http://site.com/store/category/blenders/" title="Blenders">Blenders</a></li>
<li><a href="http://site.com/store/category/coffee/" title="Coffee">Coffee</a>
<ul>
<li><a href="http://site.com/store/category/coffee-machines/" title="Coffee Machines">Coffee Machines</a></li>
<li><a href="http://site.com/store/category/espress-machines/" title="Espress Machines">Espress Machines</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="http://site.com/store/category/kitchenware/" title="Kitchenware">Kitchenware</a>
<ul>
<li><a href="http://site.com/store/category/utensils/" title="Utensils">Utensils</a></li>
<li><a href="http://site.com/store/category/cookware-sets/" title="Cookware Sets">Cookware Sets</a></li>
</ul>
</li>
</ul>
I'll break it down, line by line:
[category.list before='<ul>' after='</ul>']
This signals the beginning of the category loop. We've set the category list to begin with <ul> and to end with </ul>.
<li>
<a href="[category.link]" title="[category.name]">[category.name]</a>
These 2 lines format how each list item with be displayed. First we start the list item with <li> and then we insert the anchor tag which links to the category and it displays the category name as the anchor title and text.
[category.repeat]
This line handles all child loops. If we left this out of our code, the category list tag would only display parent categories and all child categories would be ignored. We need to include [category.repeat] to display all child categories and [category.repeat] needs to be placed between <li> and </li>. If it is placed outside of the "li" tags, your hierarchical unordered list will be broken and will not validate.
</li>
After [category.repeat], we close the list item tag.
[/category.list]
We close our category loop with this tag. This signifies the end of the loop. Anything placed outside of this loop will not appear within the unordered list. If your category loop does not contain this tag, you will get an error.
Example 2:
[category.list id='dfparent' before='<ul>' after='</ul>']
<li>
<a href="[category.link]" title="[category.name]">[category.name]</a>
[category.list id='dfchild' before='<ol>' after='</ol>']
<li>
<a href="[category.link]" title="[category.name]">[category.name]</a>
[category.repeat id='dfchild']
</li>
[/category.list]
</li>
[/category.list]
This code generates a more complex list. Here's the output in HTML:
<ul>
<li><a href="/store/category/appliances/" title="Appliances">Appliances</a>
<ol>
<li><a href="/store/category/stand-mixers/" title="Stand Mixers">Stand Mixers</a></li>
<li><a href="/store/category/blenders/" title="Blenders">Blenders</a></li>
<li><a href="/store/category/coffee/" title="Coffee">Coffee</a>
<ol>
<li><a href="/store/category/coffee-machines/" title="Coffee Machines">Coffee Machines</a></li>
<li><a href="/store/category/espress-machines/" title="Espress Machines">Espress Machines</a></li>
</ol>
</li>
</ol>
</li>
<li><a href="/store/category/kitchenware/" title="Kitchenware">Kitchenware</a>
<ol>
<li><a href="/store/category/utensils/" title="Utensils">Utensils</a></li>
<li><a href="/store/category/cookware-sets/" title="Cookware Sets">Cookware Sets</a></li>
</ol>
</li>
</ul>
If you notice, our parent list is an unordered (<ul>) list whereas the child lists are all ordered (<ol>) lists. This allows us to control how each level of the hierarchy is configured. Let's take each line and explain:
[category.list id='dfparent' before='<ul>' after='</ul>']
The only thing we've done different here is to add an ID to this parent list. This is not to be confused with a CSS ID. The ID in this category.list allows us to identify the format to use when a list gets repeat. More on that below.
<li>
<a href="[category.link]" title="[category.name]">[category.name]</a>
This is the same as our previous example.
[category.list id='dfchild' before='<ol>' after='</ol>']
This begins the format for all child lists. We've given it a different ID than its parent and we are also wrapping any child lists in ordered lists (<ol>) instead of unordered lists.
<li>
<a href="[category.link]" title="[category.name]">[category.name]</a>
This begins the list items for the child list.
[category.repeat id='dfchild']
In this category.repeat tag, we provide an ID. This means that whenever a child list of this list is generated, to use the format of the list with ID = "dfchild". So in this case, every time a child list is generated, it will be an ordered list (<ol>).
</li>
Close our child list item tag.
[/category.list]
Close our child list.
</li>
Close our parent list item tag.
[/category.list]
Close our parent list.
Now that we've covered formatting parent and child lists, let's look at some of the other tags that are available to use. The following conditional tags are available for checking the "activeness" of a category. Here are their usages as well as their definitions inside the tags:
[category.if active='self']
display if THIS category is active
[/category.if]
[category.if active='child']
display if one of the child categories of this category is active
[/category.if]
[category.if active='parent']
display if one of the parent cats is active
[/category.if]
[category.if active='no']
category is not in "activity chain"
[/category.if]
Finally we have a useful php tag that we can use: <?php echo $depth; ?>. $depth returns a number which reflects how deep into the category tree we are. In the following example, I will show how to use the last 4 "activeness" tags as well as the depth variable.
Example 3:
[category.list before='<ul class="level<?php echo $depth; ?>">' after='</ul>']
[category.if active='self']
<li class="active">
[category.name]
[category.repeat]
</li>
[/category.if]
[category.if active='child']
<li>
<a href="[category.link]" title="[category.name]">[category.name]</a>
[category.repeat]
</li>
[/category.if]
[category.if active='parent']
<li>
<a href="[category.link]" title="[category.name]">[category.name]</a>
</li>
[/category.if]
[category.if active='no']
<li>
<a href="[category.link]" title="[category.name]">[category.name]</a>
</li>
[/category.if]
[/category.list]
This is a dynamic list which expands to show only parent categories and 1 level deep of child categories if a child's parent category is active. So, when we are not in a category, this code will show 2 links: Appliances & Kitchenware, the 2 parent categories. If we dig all the way down into "Coffee Machines" we will get a menu that looks like this:
<ul class="level1">
<li><a href="/store/category/appliances/" title="Appliances">Appliances</a>
<ul class="level2">
<li><a href="/store/category/appliances/stand-mixers/" title="Stand Mixers">Stand Mixers</a></li>
<li><a href="/store/category/appliances/blenders/" title="Blenders">Blenders</a></li>
<li><a href="/store/category/appliances/coffee/" title="Coffee">Coffee</a>
<ul class="level3">
<li class="active"> Coffee Machines</li>
<li><a href="/store/category/appliances/coffee/espress-machines/" title="Espress Machines">Espress Machines</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="/store/category/kitchenware/" title="Kitchenware">Kitchenware</a></li>
</ul>
Notice that each list level has a class indicating the depth of the list. You can see classes: level1, level2 & level3. You can also see that that the "Coffee Machines" category does not contain a link but is marked with class="active". Below, I explain each part of the code that generated this dynamic menu.
[category.list before='<ul class="level<?php echo $depth; ?>">' after='</ul>']
Start the list. Give each list a CSS class that contains the depth of the list. So, each class will look like level1 or level2 or level3 and so on, depending on the depth of the list.
[category.if active='self']
<li class="active">
[category.name]
[category.repeat]
</li>
[/category.if]
Here, we have removed the anchor tag therefore if a category is active (ie. selected), it will not be linked. We've also given the <li> tag a class="active".
[category.if active='child']
<li>
<a href="[category.link]" title="[category.name]">[category.name]</a>
[category.repeat]
</li>
[/category.if]
This conditional checks to see if one of the child categories of this category is active. If yes, show the category name and show the child list.
[category.if active='parent']
<li>
<a href="[category.link]" title="[category.name]">[category.name]</a>
</li>
[/category.if]
This displays if one of the parent categories is active.
[category.if active='no']
<li>
<a href="[category.link]" title="[category.name]">[category.name]</a>
</li>
[/category.if]
This displays if it is not in the "activity chain".
[/category.list]
Close the list.
You also have 2 PHP variables that you can use in your category lists:
$depth - This is the number of the level you are at in your categories.
$nn - This is simply a counter variable, which increments by 1 for every category in your store.
Creating a Comparison Set
A comparison set allows you to display prices from multiple merchants for a single product. Below are the steps outlined to create a comparison for a single product.
Find the product you want to create a comparison on. Click the "create comparison set" link for that product.
From the comparison set building page, you will be able to search for and add additional products to this set by clicking the "add to comparison set" link.
Below I've added 4 products to this comparison set.
You can always get to comparison by expanding the COMPARISON SETS menu item in the sidebar and picking the product.
Now you need to add the comparison set HTML to your Product Details page. Go to The Factory > Your Store > VIEWS > PRODUCT DETAIL > Default. If you are creating multiple comparison sets, you only have to do this step one time.
Drag a Comparison set module to the module area.
Click the template icon to expose the modules template area then click Template 1 from the snippets window.
Now after you have made your views changes, update your store by clicking [Update Products and Settings] then navigate to a product known to be in a comparison set. Here's how it should look:
Default CSS Code
Below is the default CSS file that gets imported into your store when you do a store update.
/*******************************
LAYOUT
*******************************/
#view .modwrp {padding:0;margin:0;border:0;float:left;}
#view .col1 {width:99.9%;}
#view .col2 {width:49.9%;}
#view .col3 {width:33.3%;}
#view .col4 {width:24.9%;}
#view .col5 {width:19.9%;}
#view .modwrp .modcont {margin:0 10px 10px 0px;padding:5px;}
/*******************************
PRODUCT LISTING - T1
*******************************/
#view .pl .t1 {padding:0;margin:0 0 5px 0;border:0;float:left;}
#view .pl .t1 .bdr {border:1px #B3B3B3 solid;margin:0 5px 10px 5px;padding:2px;}
#view .pl .t1 .bdr .thmb {border:0;overflow:hidden;text-align:center;margin:5px auto;padding:0;}
#view .pl .t1 .bdr .thmb img {border:0; padding:0; margin:0; background-color:transparent;}
#view .pl .t1 .bdr .prc {text-align:center; margin:5px 0;}
#view .pl .t1 .bdr h2 {margin:0; padding:0; overflow:hidden; text-align:center; line-height:1.3em; height:2.6em;}
#view .pl .t1 .bdr h2 a {margin:0; display:block;}
#view .pl .t1 .bdr .desc {overflow:hidden; height:6em; line-height:1.5em; margin:0 5px; padding:0;}
#view .pl .t1 .bdr .btns {overflow:hidden; margin:0 0 5px 0; padding:5px 0; text-align:center;}
#view .pl .t1 .bdr .btns a img {border:0; margin:2px 0 0 0; padding:0; background-color:transparent;}
/*******************************
PRODUCT LISTING - T2
*******************************/
#view .pl .t2 {padding:0; margin:0; border:0; float:left;}
#view .pl .t2 .bdr {border:0px #f5f5f5 solid; margin:0 5px 10px 5px; padding:2px;}
#view .pl .t2 .bdr h2 {margin:0 0 5px 0; padding:0; overflow:hidden; line-height:1.3em; height:2.6em;}
#view .pl .t2 .bdr h2 a {margin:0; display:block;}
#view .pl .t2 .bdr .lc {height:100%; float:left; padding:0; margin:0 auto 0 auto; border:0;}
#view .pl .t2 .bdr .thmb {border:0; overflow:hidden; text-align:center; margin:5px auto; padding:0;}
#view .pl .t2 .bdr .thmb img {border:0; padding:0; margin:0; background-color:transparent;}
#view .pl .t2 .bdr .rc {display:inline-block;}
#view .pl .t2 .bdr .rc {display:block;}
#view .pl .t2 .bdr .desc {overflow:hidden; height:7.5em; line-height:1.5em; margin:0 0 5px 0; padding:0;}
#view .pl .t2 .bdr .prc_btns {width:100%; overflow:hidden;}
#view .pl .t2 .bdr table {width:100%; border-spacing:0; border:0; padding:5px 0;}
#view .pl .t2 .bdr td {vertical-align:middle; padding:5px;}
#view .pl .t2 .bdr td.prc {text-align:right; padding-right:2%;}
#view .pl .t2 .bdr td.btns {text-align:left; padding-left:2%;}
#view .pl .t2 .bdr td.btns a img {border:0; margin:2px 0 0 0; padding:0; background-color:transparent;}
/*******************************
PRODUCT LISTING - T3
*******************************/
#view .pl .t3 {padding:0; margin:0 0 10px 0; border:0; float:left;}
#view .pl .t3 .bdr {border-bottom:0px #f5f5f5 solid; margin:0 5px 10px 5px; padding:2px;}
#view .pl .t3 .bdr .lc {height:100%; float:left; padding:0; margin:0 auto 0 auto; border:0;}
#view .pl .t3 .bdr .thmb {border:0; overflow:hidden; text-align:center; margin:5px auto; padding:0;}
#view .pl .t3 .bdr .thmb img {border:0; padding:0; margin:0; background-color:transparent;}
#view .pl .t3 .bdr .prc {text-align:center; margin:5px 0 0 0;}
#view .pl .t3 .bdr .rc {display:inline-block;}
#view .pl .t3 .bdr .rc {display:block; padding:5px 0 0 0;}
#view .pl .t3 .bdr h2 {margin:0 0 5px 5px; padding:0; overflow:hidden; line-height:1.3em; height:2.6em;}
#view .pl .t3 .bdr h2 a {margin:0; display:block;}
#view .pl .t3 .bdr .desc {overflow:hidden; height:6em; line-height:1.5em; margin:0 10px 5px 5px; padding:0;}
#view .pl .t3 .bdr .btns {overflow:hidden; margin:0 0 5px 5px; padding:5px 0;}
#view .pl .t3 .bdr .btns a img {border:0; margin:2px 0 0 0; padding:0; background-color:transparent;}
/*******************************
SINGLE PRODUCT DETAILS
*******************************/
#view .sp {padding:0; margin:0 0 10px 0; border:0; width:100%;}
#view .sp .lc {float:left; padding:0; margin:0 auto 0 auto; border:0;}
#view .sp .thmb {border:0; text-align:center; margin:5px auto; padding:0;}
#view .sp .thmb img {border:0; padding:0; margin:0; background-color:transparent;}
#view .sp .prc {text-align:left; margin:5px 0 0 0;}
#view .sp h2 {margin:0 0 5px 0px; padding:0;}
#view .sp h2 a {margin:0; display:block;}
#view .sp .desc {margin:0 0px 5px 0px; padding:0;}
#view .sp .btns {margin:0 0 5px 0px; padding:5px 0;}
#view .sp .btns a img {border:0; margin:2px 0 0 0; padding:0; background-color:transparent;}
#view .sp .lc .thmb img {max-width:200px; width:expression(this.height < this.width && this.width > 200 ? '200px' :true);}
#view .sp .lc .thmb .thmb {width:200px;}
#view .sp .lc {width:210px;}
#view .sp .rc {margin-left:210px; padding-left:10px;}
/*******************************
EMBEDDED PRODUCT
*******************************/
.fl { float: left; width: 200px; }
.fr { float: right; width: 200px; }
.embedded .t1 { padding: 0; margin: 0 0 5px 0; border: 0; }
.embedded .t1 .bdr { border: 1px #B3B3B3 solid; margin: 0 5px 10px 5px; padding: 2px; height: 100%; }
.embedded .t1 .bdr .thmb { border: 0; overflow: hidden; text-align: center; margin: 5px auto; padding: 0; }
.embedded .t1 .bdr .thmb img { border: 0; padding: 0; margin: 0; background-color: transparent; }
.embedded .t1 .bdr .prc { text-align: center; margin: 5px 0; }
.embedded .t1 .bdr h2 { margin: 0; padding: 0; overflow: hidden; text-align: center; line-height: 1.3em; height: 2.6em; }
.embedded .t1 .bdr h2 a { margin: 0; display: block; }
.embedded .t1 .bdr .desc { overflow: hidden; height: 6em; line-height: 1.5em; margin: 0 5px; padding: 0; }
.embedded .t1 .bdr .btns { overflow: hidden; margin: 0 0 5px 0; padding: 5px 0; text-align: center; }
.embedded .t1 .bdr .btns a img { border: 0; margin: 2px 0 0 0; padding: 0; background-color: transparent; }
/*******************************
150px IMAGE <img class="thmb1" />
*******************************/
.thmb1 { width: expression(this.height < this.width && this.width > 150 ? '150px' :true); height: expression(this.height > this.width && this.height > 150 ? '150px' :true); max-width: 150px; max-height: 150px; }
/*******************************
1 COLUMN IMAGE
*******************************/
#view .pl .col1 .thmb img {max-width:150px;max-height:150px;width:expression(this.height < this.width && this.width > 150 ? '150px' :true);height:expression(this.height > this.width && this.height > 150 ? '150px' :true);}
#view .pl .col1 .thmb {width:150px;height:160px;}
#view .pl .t3 .thmb img {max-width:150px;max-height:120px;width:expression(this.height < this.width && this.width > 150 ? '150px' :true);height:expression(this.height > this.width && this.height > 150 ? '150px' :true);}
#view .pl .t3 .thmb {width:150px;height:130px;}
#view .pl .col1 .lc {width:160px;}
#view .pl .col1 .rc {margin:0 0 0 165px;}
/*******************************
2 COLUMN IMAGE
*******************************/
#view .pl .col2 .thmb img {max-width:120px;max-height:120px;width:expression(this.height < this.width && this.width > 120 ? '120px' :true);height:expression(this.height > this.width && this.height > 120 ? '120px' :true);}
#view .pl .col2 .thmb {width:120px;height:130px;}
#view .pl .col2 .lc {width:130px;}
#view .pl .col2 .rc {margin:0 0 0 135px;}
/*******************************
3 COLUMN IMAGE
*******************************/
#view .pl .col3 .thmb img {max-width:100px;max-height:100px;width:expression(this.height < this.width && this.width > 100 ? '100px' :true);height:expression(this.height > this.width && this.height > 100 ? '100px' :true);}
#view .pl .col3 .thmb {width:100px;height:110px;}
#view .pl .col3 .lc {width:110px;}
#view .pl .col3 .rc {margin:0 0 0 115px;}
/*******************************
4 COLUMN IMAGE
*******************************/
#view .pl .col4 .thmb img {max-width:75px; max-height:75px;width:expression(this.height < this.width && this.width > 75 ? '75px' :true);height:expression(this.height > this.width && this.height > 75 ? '75px' :true);}
#view .pl .col4 .thmb {width:75px;height:85px;}
#view .pl .col4 .lc {width:85px;}
#view .pl .col4 .rc {margin:0 0 0 90px;}
/*******************************
CATEGORY LISTING
*******************************/
#view .cl .cell {padding:0; margin:0 0 5px 0; border:0; float:left; }
#view .cl .cell .bdr {border:0px #B3B3B3 solid; margin:0 5px 5px 5px; padding:2px; background-color:transparent; float:left; overflow:hidden; }
#view .cl .cell .bdr .catdesc {height: 4.8em; line-height: 1.2em}
/*******************************
SEARCH
*******************************/
#view .srchform label {display:block; text-align:left;}
#view .srchform input {display:block; text-align:left;}
/*******************************
SORT/PPP FILTERS
*******************************/
#view .dffltrs {border: 1px #E6E6E6 solid; margin: 10px 0;}
#view .dffltrs form {background-color: #f5f5f5;padding: 5px;margin: 1px;}
#view .dffltrs .dflside {float: left;}
#view .dffltrs .dfrside {float: right;}
/*******************************
PAGER
*******************************/
#view .pgr {margin:10px 0; }
#view .pgr span {font-weight:bold; }
#view .pgr a {text-decoration:none; }
#view .pgr img {vertical-align:middle; border:0; margin:0 4px; }
/*******************************
PRODUCT TITLES - ALL TEMPLATES
*******************************/
#view .pl h2, #view .pl h2 a, #wdgt_pl .pl .bdr h2, #wdgt_pl .pl .bdr h2 a {font-size:12px;}
/*******************************
WIDGET PRODUCT LISTING
*******************************/
#wdgt_pl .pl {padding: 0; margin: 0 0 5px 0; border: 0; width: 100%;}
#wdgt_pl .pl .bdr {border: 1px #B3B3B3 solid; margin: 0 0 10px 0; padding: 2px;}
#wdgt_pl .pl .bdr .thmb {border: 0; overflow: hidden; text-align: center; margin: 5px auto; padding: 0;}
#wdgt_pl .pl .bdr .thmb img {border: 0; padding: 0; margin: 0; background-color: transparent;}
#wdgt_pl .pl .bdr .prc {text-align: center; margin: 5px 0;}
#wdgt_pl .pl .bdr h2 {margin: 0; padding: 0; text-align: center; line-height: 1.3em;}
#wdgt_pl .pl .bdr h2 a {margin: 0; display: block;}
#wdgt_pl .pl .bdr .desc {line-height: 1.5em; margin: 0 5px; padding: 0;}
#wdgt_pl .pl .bdr .btns {margin: 0 0 5px 0; padding: 5px 0; text-align: center;}
#wdgt_pl .pl .bdr .btns a img {border: 0; margin: 2px 0 0 0; padding: 0; background-color: transparent;}
#wdgt_pl .pl .bdr .thmb {width: 150px;}
#wdgt_pl .pl .bdr .thmb img {max-width: 150px; width: expression(this.height < this.width && this.width > 150 ? '150px' : true);}
/*******************************
WIDGET CATEGORY LISTING
*******************************/
#wdgt_cl {}
/*******************************
WIDGET SIMPLE SERARCH
*******************************/
#wdgt_ss {}
/*******************************
WIDGET ADVANCED SERARCH
*******************************/
#wdgt_as {}
#wdgt_as input {display: block;}
/*******************************
Buttons (Credit:http://www.webdesignerwall.com/tutorials/css3-gradient-buttons/)
*******************************/
.dfbutton { display: inline-block !important; zoom: 1 !important; *display: inline !important; vertical-align: baseline !important; margin: 0 2px 4px 2px !important; outline: none !important; cursor: pointer !important; text-align: center !important; text-decoration: none !important; font: 12px/100% Arial, Helvetica, sans-serif !important; padding: .4em 1.5em .42em !important; text-shadow: 0 1px 1px rgba(0,0,0,.3) !important; -webkit-border-radius: .5em !important; -moz-border-radius: .5em !important; border-radius: .5em !important; -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2) !important; -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2) !important; box-shadow: 0 1px 2px rgba(0,0,0,.2) !important; white-space: nowrap !important; }
.dfbutton:hover { text-decoration: none !important; }
.dfbutton:active { position: relative !important; top: 1px !important; }
.dflarge { font-size: 14px !important; padding: .5em 2em .55em !important; }
.dfmedium { font-size: 12px !important; padding: .4em 1.5em .42em !important; }
.dfsmall { font-size: 11px !important; padding: .2em 1em .275em !important; }
.dfrounded { -webkit-border-radius: 2em !important; -moz-border-radius: 2em !important; border-radius: 2em !important; }
/****** black ******/
.dfblack:link, .dfblack:visited { color: #d7d7d7 !important; border: solid 1px #333 !important; background: #333 !important; background: -webkit-gradient(linear, left top, left bottom, from(#666), to(#000)) !important; background: -moz-linear-gradient(top, #666, #000) !important; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#666666', endColorstr='#000000') !important; }
.dfblack:hover { color: #d7d7d7 !important; background: #000 !important; background: -webkit-gradient(linear, left top, left bottom, from(#444), to(#000)) !important; background: -moz-linear-gradient(top, #444, #000) !important; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#000000') !important; }
.dfblack:active { color: #666 !important; background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#444)) !important; background: -moz-linear-gradient(top, #000, #444) !important; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#666666') !important; }
/****** gray ******/
.dfgray:link, .dfgray:visited { color: #e9e9e9 !important; border: solid 1px #555 !important; background: #6e6e6e !important; background: -webkit-gradient(linear, left top, left bottom, from(#888), to(#575757)) !important; background: -moz-linear-gradient(top, #888, #575757) !important; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#888888', endColorstr='#575757') !important; }
.dfgray:hover { color: #e9e9e9 !important; background: #616161 !important; background: -webkit-gradient(linear, left top, left bottom, from(#757575), to(#4b4b4b)) !important; background: -moz-linear-gradient(top, #757575, #4b4b4b) !important; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#757575', endColorstr='#4b4b4b') !important; }
.dfgray:active { color: #afafaf !important; background: -webkit-gradient(linear, left top, left bottom, from(#575757), to(#888)) !important; background: -moz-linear-gradient(top, #575757, #888) !important; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#575757', endColorstr='#888888') !important; }
/****** white ******/
.dfwhite:link, .dfwhite:visited { color: #606060 !important; border: solid 1px #b7b7b7 !important; background: #fff !important; background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed)) !important; background: -moz-linear-gradient(top, #fff, #ededed) !important; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed') !important; }
.dfwhite:hover { color: #606060 !important; background: #ededed !important; background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#dcdcdc)) !important; background: -moz-linear-gradient(top, #fff, #dcdcdc) !important; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#dcdcdc') !important; }
.dfwhite:active { color: #999 !important; background: -webkit-gradient(linear, left top, left bottom, from(#ededed), to(#fff)) !important; background: -moz-linear-gradient(top, #ededed, #fff) !important; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#ffffff') !important; }
/****** orange ******/
.dforange:link, .dforange:visited { color: #fef4e9 !important; border: solid 1px #da7c0c !important; background: #f78d1d !important; background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20)) !important; background: -moz-linear-gradient(top, #faa51a, #f47a20) !important; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20') !important; }
.dforange:hover { color: #fef4e9 !important; background: #f47c20 !important; background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015)) !important; background: -moz-linear-gradient(top, #f88e11, #f06015) !important; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015') !important; }
.dforange:active { color: #fcd3a5 !important; background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a)) !important; background: -moz-linear-gradient(top, #f47a20, #faa51a) !important; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a') !important; }
/****** red ******/
.dfred:link, .dfred:visited { color: #faddde !important; border: solid 1px #980c10 !important; background: #d81b21 !important; background: -webkit-gradient(linear, left top, left bottom, from(#ed1c24), to(#aa1317)) !important; background: -moz-linear-gradient(top, #ed1c24, #aa1317) !important; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ed1c24', endColorstr='#aa1317') !important; }
.dfred:hover { color: #faddde !important; background: #b61318 !important; background: -webkit-gradient(linear, left top, left bottom, from(#c9151b), to(#a11115)) !important; background: -moz-linear-gradient(top, #c9151b, #a11115) !important; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c9151b', endColorstr='#a11115') !important; }
.dfred:active { color: #de898c !important; background: -webkit-gradient(linear, left top, left bottom, from(#aa1317), to(#ed1c24)) !important; background: -moz-linear-gradient(top, #aa1317, #ed1c24) !important; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#aa1317', endColorstr='#ed1c24') !important; }
/****** blue ******/
.dfblue:link, .dfblue:visited { color: #d9eef7 !important; border: solid 1px #0076a3 !important; background: #0095cd !important; background: -webkit-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5)) !important; background: -moz-linear-gradient(top, #00adee, #0078a5) !important; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00adee', endColorstr='#0078a5') !important; }
.dfblue:hover { color: #d9eef7 !important; background: #007ead !important; background: -webkit-gradient(linear, left top, left bottom, from(#0095cc), to(#00678e)) !important; background: -moz-linear-gradient(top, #0095cc, #00678e) !important; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0095cc', endColorstr='#00678e') !important; }
.dfblue:active { color: #80bed6 !important; background: -webkit-gradient(linear, left top, left bottom, from(#0078a5), to(#00adee)) !important; background: -moz-linear-gradient(top, #0078a5, #00adee) !important; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0078a5', endColorstr='#00adee') !important; }
/****** rosy ******/
.dfrosy:link, .dfrosy:visited { color: #fae7e9 !important; border: solid 1px #b73948 !important; background: #da5867 !important; background: -webkit-gradient(linear, left top, left bottom, from(#f16c7c), to(#bf404f)) !important; background: -moz-linear-gradient(top, #f16c7c, #bf404f) !important; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f16c7c', endColorstr='#bf404f') !important; }
.dfrosy:hover { color: #fae7e9 !important; background: #ba4b58 !important; background: -webkit-gradient(linear, left top, left bottom, from(#cf5d6a), to(#a53845)) !important; background: -moz-linear-gradient(top, #cf5d6a, #a53845) !important; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cf5d6a', endColorstr='#a53845') !important; }
.dfrosy:active { color: #dca4ab !important; background: -webkit-gradient(linear, left top, left bottom, from(#bf404f), to(#f16c7c)) !important; background: -moz-linear-gradient(top, #bf404f, #f16c7c) !important; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#bf404f', endColorstr='#f16c7c') !important; }
/****** green ******/
.dfgreen:link, .dfgreen:visited { color: #e8f0de !important; border: solid 1px #538312 !important; background: #64991e !important; background: -webkit-gradient(linear, left top, left bottom, from(#7db72f), to(#4e7d0e)) !important; background: -moz-linear-gradient(top, #7db72f, #4e7d0e) !important; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#7db72f', endColorstr='#4e7d0e') !important; }
.dfgreen:hover { color: #e8f0de !important; background: #538018 !important; background: -webkit-gradient(linear, left top, left bottom, from(#6b9d28), to(#436b0c)) !important; background: -moz-linear-gradient(top, #6b9d28, #436b0c) !important; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6b9d28', endColorstr='#436b0c') !important; }
.dfgreen:active { color: #a9c08c !important; background: -webkit-gradient(linear, left top, left bottom, from(#4e7d0e), to(#7db72f)) !important; background: -moz-linear-gradient(top, #4e7d0e, #7db72f) !important; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4e7d0e', endColorstr='#7db72f') !important; }
/****** pink ******/
.dfpink:link, .dfpink:visited { color: #feeef5 !important; border: solid 1px #d2729e !important; background: #f895c2 !important; background: -webkit-gradient(linear, left top, left bottom, from(#feb1d3), to(#f171ab)) !important; background: -moz-linear-gradient(top, #feb1d3, #f171ab) !important; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#feb1d3', endColorstr='#f171ab') !important; }
.dfpink:hover { color: #feeef5 !important; background: #d57ea5 !important; background: -webkit-gradient(linear, left top, left bottom, from(#f4aacb), to(#e86ca4)) !important; background: -moz-linear-gradient(top, #f4aacb, #e86ca4) !important; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f4aacb', endColorstr='#e86ca4') !important; }
.dfpink:active { color: #f3c3d9 !important; background: -webkit-gradient(linear, left top, left bottom, from(#f171ab), to(#feb1d3)) !important; background: -moz-linear-gradient(top, #f171ab, #feb1d3) !important; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f171ab', endColorstr='#feb1d3') !important; }
/****** brown ******/
.dfbrown:link, .dfbrown:visited { color: #feeef5 !important; border: solid 1px #462709 !important; background: #804000 !important; background: -webkit-gradient(linear, left top, left bottom, from(#995414), to(#522D0B)) !important; background: -moz-linear-gradient(top, #995414, #522D0B) !important; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#995414', endColorstr='#522D0B') !important; }
.dfbrown:hover { color: #feeef5 !important; background: #d57ea5 !important; background: -webkit-gradient(linear, left top, left bottom, from(#89521B), to(#472A0E)) !important; background: -moz-linear-gradient(top, #89521B, #472A0E) !important; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#89521B', endColorstr='#472A0E') !important; }
.dfbrown:active { color: #DBC4A8 !important; background: -webkit-gradient(linear, left top, left bottom, from(#522D0B), to(#995414)) !important; background: -moz-linear-gradient(top, #522D0B, #995414) !important; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#522D0B', endColorstr='#995414') !important; }
/****** purple ******/
.dfpurple:link, .dfpurple:visited { color: #feeef5 !important; border: solid 1px #380821 !important; background: #4F0B2E !important; background: -webkit-gradient(linear, left top, left bottom, from(#932162), to(#500C2E)) !important; background: -moz-linear-gradient(top, #932162, #500C2E) !important; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#932162', endColorstr='#500C2E') !important; }
.dfpurple:hover { color: #feeef5 !important; background: #d57ea5 !important; background: -webkit-gradient(linear, left top, left bottom, from(#7F265F), to(#420F2B)) !important; background: -moz-linear-gradient(top, #7F265F, #420F2B) !important; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#7F265F', endColorstr='#420F2B') !important; }
.dfpurple:active { color: #B28EA5 !important; background: -webkit-gradient(linear, left top, left bottom, from(#500C2E), to(#932162)) !important; background: -moz-linear-gradient(top, #500C2E, #932162) !important; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#500C2E', endColorstr='#932162') !important; }
/****** silver ******/
.dfsilver:link, .dfsilver:visited { color: #262626 !important; border: solid 1px #989898 !important; background: #CCC !important; background: -webkit-gradient(linear, left top, left bottom, from(#F2F2F2), to(#A6A6A6)) !important; background: -moz-linear-gradient(top, #F2F2F2, #A6A6A6) !important; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#F2F2F2', endColorstr='#A6A6A6') !important; }
.dfsilver:hover { color: #262626 !important; background: #d57ea5 !important; background: -webkit-gradient(linear, left top, left bottom, from(#E8E8E8), to(#9F9F9F)) !important; background: -moz-linear-gradient(top, #E8E8E8, #9F9F9F) !important; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#E8E8E8', endColorstr='#9F9F9F') !important; }
.dfsilver:active { color: #808080 !important; background: -webkit-gradient(linear, left top, left bottom, from(#A6A6A6), to(#F2F2F2)) !important; background: -moz-linear-gradient(top, #A6A6A6, #F2F2F2) !important; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#A6A6A6', endColorstr='#F2F2F2') !important; }
/**********************************************
http://www.positioniseverything.net/easyclearing.html
**********************************************/
.clearfix:after {clear:both; content:'.'; display:block; visibility:hidden; height:0;}
.clearfix {display:inline-block; }
* html .clearfix {height:1%; }
.clearfix {display:block; }
.clearingdiv {clear:left; font-size:0; line-height:0; margin:0; padding:0; }
/*******************************
CUSTOM CSS
*******************************/
/* all custom css code will appear here */
Embedding a Product in a Post
If you want to display a product in a post, this is possible by creating a new view and embedding that view into the post. Here's how.
-
Create a new Custom View. Name it something like Embedded Product. Give the view the following settings in View Properties:
-
Add a Product detail module to this view.
-
Add the following code to the template area of the Product detail module:
<div class="embedded fl">
<div class="t1">
<div class="bdr">
<h2><a href="[product.link]" title="[product.name]">[product.name]</a></h2>
<div class="thmb">
<a href="[product.link]" title="[product.name]"> <img alt="[product.name]" class="thmb1" src="[product.image]" /></a>
</div>
<div class="prc">
[product.currency mode="sign"][product.price]
</div>
<div class="btns">
<a class="dfbutton dforange dfmedium" href="[product.link]" title="View details [product.name]">Details</a>
<a class="dfbutton dforange dfmedium" href="[product.url direct='0']" title="Buy [product.name]">Buy</a>
</div>
<div class="clearingdiv"> </div>
</div>
</div>
<div class="clearingdiv"> </div>
</div>
-
Update your store's settings here: WordPress Admin Area > Tools > Datafeedr.
-
To add this view to a specific post, add this shortcode to your post where 123456 is the product's ID you want to embed. [DFR:Embedded Product?p=123456]
Embedding a View in a Post
There may be times when you want to display content from your store within a WordPress Post or Page. This can be handled by setting up a custom view and then adding a [DFR] tag to your WordPress Post or Page.
In the example below, I will embed a comparison set of a specific product into a Post I wrote about that product.
-
First you need to create the custom view which will display your comparison set. In the sidebar, expand the "VIEWS" menu and then expand the "CUSTOM VIEWS" menu. Under the "CUSTOM VIEWS" menu click the "Add a new view" link. Fill in the view details like this:
-
Now that your view is created, drag the 'Comparison set' module into the module area.
-
Click the 'Template' icon to configure the module's layout. You will need to add some code to display the comparison set. You can use Template 1 from the Comparison Sets snippets. Here's an example:
-
Click the 'Settings' icon to configure the module's settings. You can change the sorting settings to your liking:
-
Create a comparison set. Find a product in the store, click the link for that product which reads, "Create a comparison set". I've set up a comparison set with 3 products:
-
Get the product ID for one of the products in your comparison set. To get the product ID for one of the products, click the "more info" link for one of those products and the product ID will appear in the upper left corner of the pop up window.
-
Log into your blog's admin area and update your store by going to Tools > Datafeedr > [Update Store]
-
Create or edit a post. Add the following tag to where you want your comparison set to appear: [DFR:Embeddable Comp Set?p=194700040367954]. 194700040367954 is the product ID. You will need to use the product ID which you gathered in the previous step. Here's what that will look like:
-
Now when you go to that post, it should look something like this:
IMPORTANT: As an alternative you can now use the compset ID in the shortcode to prevent problems like this.
A new DFR tag is now available in order to prevent your compsets from disappearing once the master product is no longer available in our database.
Instead of referring to the product ID of the master product you can now directly refer to the compset ID which you can find in the Factory.
The new shortcode: [DFR:compset?compset_id=xxxxx]
- Replace compset with the name of the view.
- Replace xxxxx with the compset ID.
When you use this shortcode and a master product is no longer available, the plugin will make the first of compset products a master.
Filters
With the following Datafeedr tag used in your views, you can create URLs to be used to filter a list of products. In conjunction with Widget Context, a free plugin which displays specific widgets on specific pages, a lot of cool things can be done.
In the examples below, we are assuming the page we are viewing (ie. our current URL) is http://www.mysite.com/store/category/shoes/. So, every filter we set up will be filtering the products in the "Shoes" category. We can apply filters to almost every page in our store; front page, category pages, custom pages and search pages. Filters really don't make sense on single product pages as there is nothing to filter... So, in the next few examples, you can assume that the filters we create will be applied to our current URL.
First, let me introduce the primary tag involved in creating a filtering URL:
[server.url type='fullpage' query='']
As is, this will simply return the full URL of the current page.
Example: http://www.mysite.com/store/category/shoes/
What we really need to do is append the URL with some parameters.
[server.url type='fullpage' query='price=150-300']
Now we have filled in the query attribute with a Key=Value parameter. Now this tag returns the current URL with the price filter. Example:
http://www.mysite.com/store/category/shoes/?price=150-300
Here are a few different examples of other Key=Value parameters you could use in this tag instead of the Price Key.:
[server.url type='fullpage' query='brand=Nike']
[server.url type='fullpage' query='merchant=Cooking.com']
[server.url type='fullpage' query='name=shoe']
[server.url type='fullpage' query='word=brown']
[server.url type='fullpage' query='tags=foo']
[server.url type='fullpage' query='tags=foo+bar']
[server.url type='fullpage' query='saleprice=5-10']
You can also have multiple Key=Value parameters within your query attribute:
[server.url type='fullpage' query='merchant=Cooking.com&price=20-40&word=black']
Now that we have the basics down, there are a few more tweaks we can make to the tag to give us more options:
In the previous examples, the Key=Value parameters were added unconditionally to the query string, replacing any Value that had a matching Key. For example, if a user was on this page:
http://www.mysite.com/store/category/shoes/?brand=Coke
and then clicked the URL generated by this tag:
[server.url type='fullpage' query='brand=Pepsi']
They would be taken to this URL:
http://www.mysite.com/store/category/shoes/?brand=Pepsi
But there might be times when you want to ensure that when one Key is set, that it cannot be overwritten. For example:
If a user is on this page:
http://www.mysite.com/store/category/shoes/?brand=Coke
This tag should not give them an option to view the Pepsi pages:
[server.url type='fullpage' query='brand=Pepsi']
We can do that by adding a "+" to the Key value in the query attribute.
[server.url type='fullpage' query='+brand=Pepsi']
[server.url type='fullpage' query='+brand=Coke']
[server.url type='fullpage' query='+brand=7up']
This reads, "Only append the URL with the brand parameter if the brand parameter is not already set. If the brand parameter is already set, do not modify its value".
The last operator we can use is the "-" minus sign. This is useful for giving a user the option to remove a filter:
[server.url type='fullpage' query='-brand']
This generates a URL that removes the brand parameter. This is useful if your user needs to reset their filter and remove any brand filter from their search.
You can also set up a tag that would allow the user to remove many filters at one time:
[server.url type='fullpage' query='-brand&-price&-merchant']
Below are some examples of actually using the Filters within a Widget View:
Example 1
<ul>
<li><a href="[server.url type='fullpage' query='price=-50']">Less than $50</a></li>
<li><a href="[server.url type='fullpage' query='price=50-150']">$50 ~ $150</a></li>
<li><a href="[server.url type='fullpage' query='price=150-300']">$150 ~ $300</a></li>
<li><a href="[server.url type='fullpage' query='price=300-']">More than $300</a></li>
</ul>
Example 2
This example will remove all filters if a filter has already been clicked and give the user to remove the Brand filter which is in place.
<ul>
<?php if (@$_GET['brand']) { ?>
<li><a href="[server.url type='fullpage' query='-brand']">[X] Remove Brand Filter</a></li>
<?php } else { ?>
<li><a href="[server.url type='fullpage' query='brand=Adidas']">Adidas</a></li>
<li><a href="[server.url type='fullpage' query='brand=Nike']">Nike</a></li>
<li><a href="[server.url type='fullpage' query='brand=Reebok']">Reebok</a></li>
<?php } ?>
</ul>
Images
Please use the links below to learn how to manipulate the size of images for different areas of your store.
Product Details Page
If you want to change the size of the image that appears on the single product details page, you will be working with this CSS code:
#view .sp .rc
{
margin-left: 210px;
padding-left: 10px;
}
#view .sp .lc .thmb { width: 200px; }
#view .sp .lc .thmb img
{
max-width: 200px;
width: expression(this.height < this.width && this.width > 200px ? '200px' :true);
}
Let's say you want to increase the size of the image by 85px. Here's what the edited code would look like:
#view .sp .rc
{
margin-left: 295px;
padding-left: 10px;
}
#view .sp .lc .thmb { width: 285px; }
#view .sp .lc .thmb img
{
max-width: 285px;
width: expression(this.height < this.width && this.width > 285px ? '285px' :true);
}
Paste the updated code into the Custom CSS field for your store (Factory > Store menu > Custom CSS) then update your store.
Product Fields
[product.id] => Product ID
[product.net_id] => Affiliate Network ID
[product.net_code] => Affiliate Network Code (for internal purposes)
[product.network] => Affiliate Network Name
[product.merchant_id] => Merchant ID
[product.merchant] => Merchant Name
[product.name] => Product Name
[product.slug] => Product Slug
[product.description] => Product Description
[product.price] => Product Price
[product.image] => Product Image
[product.thumbnail] => Product Thumbnail
[product.url] => Cloaked Product Affiliate URL
[product.link] => Product Detail Page URL
[product.tags] => Product Tags
[product.saleprice] => Product Sale Price
[product.brand] => Product Brand
[product.currency] => Product Currency
[product.sku] => Product SKU
[product.model] => Product Model Number
[product.ean] => Product EAN
[product.isbn] => Product ISBN
[product.shipprice] => Product Shipping Information
[product.promo] => Product Promotional Text
[product.specs] => Product Specifications
[product.cat_id] => Product Category ID
[product.visible] => Product Visibility
[product.legacy_id] => Product Legacy ID
[product.drip_ts] => Product Drip Status
Sorting Filters
The following values can be used in your custom query strings to effect the order in which products are displayed.
sort=name - Sorts products in alphabetical order.
sort=price - Sorts products from lowest price to highest price.
sort=-price - Sorts products from highest price to lowest price.
sort=views - Sorts products from least views to most views.
sort=-views - Sorts products from most views to least views.
sort=clicks - Sorts products from least clickthroughs to most clickthroughs.
sort=-clicks - Sorts products from most clickthroughs to least clickthroughs.
sort=rand - Sorts products randomly.
[DFR] Shortcode
The [DFR] shortcode allows you to embed a view directly into a WordPress Post or Page. Some examples of this are covered here and here. Below you can find possible embedding formats.
Embed the store's front page into a post or page.
[DFR:home]
Embed a custom view into a post or page where custom view's name is "My View".
[DFR:My View]
Embed a custom view into a post or page where custom view's name is "Get Products" and filter by keyword "shoes".
[DFR:Get Products?word=shoes]
Embed a Widget view into a post or page. This example displays a widget named "My Custom Widget". Note that the name passed into the widget shortcode should be all lowercase and words separated by dashes.
[DFR:widget/my-custom-widget]
Embed a list of sub-categories of a parent category (parent ID is 425586) from a view named "Category List".
[DFR:Category List?c=425586]
Embed the Category Page view into a post or page where the Category ID is "517931". Pagination will not work in this instance.
[DFR:category?c=517931]
Embed the Search Page view into a post or page with results returning a query on the word "coffee". Pagination will not work in this instance.
[DFR:search?word=coffee]
Embed the Product Detail Page view into a post or page for a single product with product ID "55700079129891".
[DFR:product?p=55700079129891]
Embed a view named "Related Products" and only return products from the current category. %ci returns the current category the user is viewing.
[DFR:Related Products?c=%ci]
All of the code above can also be used by being called directly from your theme's template files using the datafeedr_tag() function. This tag can either be printed to the screen or stored as a variable for further processing like so:
<?php echo datafeedr_tag('Related Products?c=%ci'); ?>
<?php $shoes = datafeedr_tag('Related Products?c=%ci'); ?>
Below are examples of all above examples used with the datafeedr_tag() function:
<?php echo datafeedr_tag('home'); ?>
<?php echo datafeedr_tag('My View'); ?>
<?php echo datafeedr_tag('widget/my-custom-widget'); ?>
<?php echo datafeedr_tag('Get Products?word=shoes'); ?>
<?php echo datafeedr_tag('Category List?c=425586'); ?>
<?php echo datafeedr_tag('category?c=517931'); ?>
<?php echo datafeedr_tag('search?word=coffee'); ?>
<?php echo datafeedr_tag('product?p=55700079129891'); ?>
Here's a list of all available Query String parameters.
