Add Responsive Product List To Datafeedr
Increased tablet and mobile use mean you must have a responsive shop if you want to maximise your revenue. Having a responsive WordPress theme is no-use if your product list is not itself also responsive.
Definition of Responsive: A responsive site works equally well on PCs, tablets and phones by adjusting image sizes and moving menus around to suit the relevant screen size.
The product lists in Datafeedr, by default come with some CSS which you’ll need to overrule if you want to make your product list responsive. Below, I explain how to do this.
Change the Product List Template
The Datafeedr product list comes with a number of templates you can use to show off your products. Unfortunately, they are not very stylish out of the box.
There are a number of best practices for showing products in affiliate product shops. These best practices are all designed to increase click through rates whilst reducing bounce rates, ultimately with the aim of making your store a better place to shop.
- Ensure your theme is ‘responsive’ so it automatically adjusts for smaller screen sizes
- Add infinite scroll so your site works well on tablets
- Include a Pinterest button so users can show off what they’ve found on your site
- Include a sort option to allow users to quickly reverse the price sorting (sort alphabetically is pointless)
- Include Google Analytics Event Tracking so you can track which products users are clicking
- Include a hover tooltip to encourage the user to click
- Include image hover transitions to encourage users to sweep their mouse and start browsing
There are also some options that depend on niche or site-specific preference:
- Choose whether a click on the image sends the user to your product detail page or directly to the affiliate
- Display the merchant name prominently for brand association. This also communicates with your users that you are a comparison shop. (not required if you only have a few merchants)
- Choose whether or not to include the prices
In the code below, a click on the image, merchant name or price takes the user to the affiliate whilst a click on the ‘more’ button takes the user to the product detail page. The prices are included and the merchant name is display prominently in bold.
Hovering over the image reveals ‘Click to view more images of the [product.name]’.
Hovering over the product area highlights the product area by changing the border colour.
Datafeedr Product List Template
Copy and paste the following code into your product list block of code for your category view or search view.
Ensure you take a backup of your old code before doing so.
[product.each]
[/product.each]
Product List CSS
Add the following CSS to your theme – there are options for how to do this. From within Datafeedr, click Store -> Custom CSS and paste it there, or add it to your style.css file.
.awdproduct {
width:180px;
height: 320px;
float:left;
position:relative;
text-align:center;
overflow: hidden;
margin-bottom: 10px;
border:1px solid #eee;
margin-right:5px;
line-height:1em;
}
.awdproduct:hover {
border:1px solid #aaa;
}
.awdproductimage {
width:180px;
height:200px;
}
.awdproductimage img {
max-width:180px;
max-height:200px;
}
.awdsocial {
position:absolute;
top:5px;
left:5px;
}
.awdname {
font-size:10px;
color: #888;
}
.awdproduct a {
color:black;
}
.awdproduct a:hover {
color:black;
}
.awdmerchant {
font-weight:bold;
}
.awdbuybutton {
position:absolute;
bottom:5px;
width:100px;
left:50%;
margin-left:-50px;
}
Additional CSS for Datafeedr Product Lists on Mobile Phones
The code above is fully responsive, but depending on your theme (margins and padding settings) you may find only 1 product displaying per row on your phone.
Optimisation here depends on your specific theme, and often requires optimisation for different screens to fit things in so that they are perfectly aligned.
The code below only kicks into action on mobile phones with a maximum screen width of 480 pixels. That’s the vast majority of early smart phones – note the later smart phones have much higher resolutions but you can still adjust settings for them too if you wish.
The code changes the width of the Datafeedr images and the boxes containing those images so that they fit better on the smaller screen.
If you’re adjusting things to fit your theme, you need to modify all three widths in the code below and ensure they all match. You *may* also need to modify the height although this is less likely. If you need any help, post a comment below.
@media only screen and (max-device-width: 480px) {
/* Fix Datafeedr product and image widths so 2 images fit onto smartphones */
.awdproduct {
width:130px;
height: 270px;
}
.awdproductimage {
width:130px;
height:150px;
}
.awdproductimage img {
max-width:130px;
max-height:150px;
}
body {
padding:12px;
}
}
Additional CSS for grey buttons (if you are not using the Roots theme)
Add the following CSS to have nice clickable grey buttons for ‘buy now’ or ‘learn more’
.btn {
display: inline-block;
padding: 4px 14px;
margin-bottom: 0;
font-size: 14px;
line-height: 20px;
color: #333;
text-align: center;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
vertical-align: middle;
cursor: pointer;
background-color: whiteSmoke;
background-image: -webkit-gradient(linear,0 0,0 100%,from(white),to(#E6E6E6));
background-image: -webkit-linear-gradient(top,white,#E6E6E6);
background-image: -o-linear-gradient(top,white,#E6E6E6);
background-image: linear-gradient(to bottom,white,#E6E6E6);
background-image: -moz-linear-gradient(top,white,#E6E6E6);
background-repeat: repeat-x;
border: 1px solid #BBB;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
border-color: #E6E6E6 #E6E6E6 #BFBFBF;
border-bottom-color: #A2A2A2;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ffffffff',endColorstr='#ffe6e6e6',GradientType=0);
filter: progid:dximagetransform.microsoft.gradient(enabled=false);
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);
-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);
}
.btn {
border-color: #C5C5C5;
border-color: rgba(0, 0, 0, 0.15) rgba(0, 0, 0, 0.15) rgba(0, 0, 0, 0.25);
}
.btn:hover, .btn:active, .btn.active, .btn.disabled, .btn[disabled] {
color: #333;
background-color: #E6E6E6;
}
.btn:hover {
color: #333;
text-decoration: none;
background-color: #E6E6E6;
background-position: 0 -15px;
-webkit-transition: background-position .1s linear;
-moz-transition: background-position .1s linear;
-o-transition: background-position .1s linear;
transition: background-position .1s linear;
}
- How to create a tree of categories from a custom taxonomy - September 22, 2014
- Managing postcodes and locations with WPAllImport - September 22, 2014
- Why do affiliate merchants reject your website? - August 20, 2014
March 19, 2013 @ 12:58 am
Love this! I put it onto my site and it works but one product was listed under another. I was able to decrease the image size so 3 products are in a row, but now the product name ,price and info is not seen. Not sure what I have to do to the code to make the info appear again.
March 21, 2013 @ 4:55 pm
Hi – send me a link to your site and I’ll have a look.
April 14, 2013 @ 5:34 pm
The likeliest issue is that you neglected to include the CSS.