Shopify Theme Features: Product Page
So you are shopping for a Shopify theme… What features and functionality should you be looking for? This is the first post in a series that will help you evaluate the capabilities of a theme (including the standard free Shopify themes), and hopefully make it easier to decide which one is right for your store. Over the coming weeks we will be looking at the standard pages that come with every Shopify Theme: home (index), collection, cart, blog and stand-along pages. To start with, let’s look at the Product page.
The Product Page
The primary purpose of the home page is to display product images, describe the product, and ultimately to get your prospective buyer to add the product to the cart.
Main Elements
The overall look of the page should be simple, and easy to scan. Pages that look complicated or are too cluttered will quickly turn prospects away. The main elements in the design are the Product Title, Price and “Buy Now” or “Add to Cart” button, and should be displayed prominently. It is important that the add to cart functionality should look like a button. For the product description, think about presenting more detailed information progressively. For example, separate tabs can be used for the main product description and technical specifications.
Secondary elements to consider:
- Is is possible to specify a quantity?
- Is there a way to “share” the product with a friend or social networking site. A number of themes (including Vanity and Onyx) have built-in integration with sharing services.
- Product availability and delivery schedule should be shown if appropriate.
- Are links to your (or your manufacturer’s) guarantee or return policy provided?
- Trust badges are also good, potentially in the footer for the whole site not just the product page.
- Showing what payment methods are accepted is a great way to entice visitors. This may also be a good candidate for the footer.
- Is there a way to incorporate product reviews and ratings?
Images
Eye tracking studies show that images are always the first place people look when they land on the product page.
Here are some considerations for the product page images:
- Is the main product photo predominantly displayed.
- When you click on an image, can you navigate to the next or previous image without having to close the popup?
- Is there an “Click to Enlarge” link.
- Are thumbnails available, and is it obvious they are additional photos? Some themes display additional images as boxes, so it is easy to miss that these are additional product photos you can click on.
Navigation
Providing navigation links on the product page allows your visitors to quickly look at other products without having to go back to the collection page listing or search results. In particular, a “related products” section has become a standard on high performing e-commerce sites. Some ideas for product page navigation:
- Are related products shown.
- If you are viewing a product in a collection, are links to the previous and next product in the same collection available? Is there a link back to the collection (perhaps via a breadcrumb)?
- Is there a link to all products by this vendor?
- Is there a link to all products of the same type?
Posted by Gavin Terrill on January 24, 2010.
We've Moved!
Here at ShopifyConcierge we like to keep things fresh, but we think we may have gone a little too far this time – we have relocated half way around the planet and are now in Sydney, Australia. We are hoping this won’t have too much of an impact to our North American and European clients, this being the internet ‘n all, but we can’t vouch for the distractions of sun and surf! Things will be a little slower than usual as we get settled, but we are looking forward to getting fully back into the swing of things in February.
Posted by Gavin Terrill on January 20, 2010.
Disable Checkout Shipping Address
In stores where you are buying gifts for someone it is more than likely that the shipping (delivery) address is different than the billing address. Unfortunately, it is not possible to set the default state of the checkbox on the checkout page in Shopify, so you have to be creative in terms of how to overcome the problem. For Santa Monica Flowers, we came up with a solution based on three parts: 1) we created a form for capturing the delivery address on the cart page, 2) we hid the shipping section entirely on the checkout pages and 3) we added the additional attributes to the order notification email. Here is how we did it.
I’ll start with hiding the shipping address on the checkout page first, as it is the easiest. Here is the CSS that needs to be put in checkout.css:
#billing-is-shipping, #addresses .gright {
display:none;
}
This code hides the “Ship items to the above billing address” checkbox, and the right hand side of the screen where the shipping address would normally go.
Creating the form is straightforward HTML, with the caveat that fields must be named “attributes[foo]”, where foo is unique. This is the standard way to capture additional attributes on the cart page. To be honest, creating the form and making it look nice was the most time consuming part of this project. Once that was done I used the excellent jQuery Validation plugin to ensure the required fields were filled out and the phone number valid.
The final piece of the puzzle is to carry the shipping details through to the order notification email. Here is the liquid code that was used:
Delivery date:
date: {{ attributes.delivery_date }} time: {{ attributes.delivery_time }}
Delivery address:
{{ attributes.address_location}}
{{ attributes.recipient_first }} {{ attributes.recipient_last }}
{% if attributes.recipient_relationship.size > 0 %}({{ attributes.recipient_relationship }}){% endif %}
{{ attributes.address_line1 }}
{% if attributes.address_line2.size > 0 %}{{ attributes.address_line2 }}{% endif %}
{{ attributes.address_city }}, {{ attributes.address_state }} {{ attributes.address_zip }}
{{ attributes.address_phone }}
So that is it. One downside to this approach is that if the customer really does want to have it shipped to their billing address they will need to enter the information twice, but in the case of most gift shops that is definitely not the 80/20 rule.
Posted by Gavin Terrill on December 24, 2009.
Free Shipping Reminder Prompt
Offering free shipping (or delivery as they say in Oz) if the order is over a certain amount is a great way to increase average order amounts. For the Poetry in Flowers cart page we added a little prompt near the checkout button when the customer’s order was below the $55 threshold.
Here is the code:
{% if cart.total_price < 5500 %}
Note: If you spend {{ 5500 | minus: cart.total_price | money }} more you will qualify for free delivery.
{% endif %}
Posted by Gavin Terrill on December 19, 2009.
Knock on Wood - A Premium Shopify Theme
It’s been a busy week for us. First we announced Shopify Widgets and our autocomplete application Searchify on Tuesday, and today we’d like to let you know about our first commercial Shopify theme: Knock on Wood.
The focus of Knock on Wood is ease of navigation, and ease of customization for store owners. You don’t need to be a graphical design guru to be able to use this theme. Just load ’er up and start selling!
You can view a demonstration of the theme at: http://knockonwood.myshopify.com
We have a couple more themes lined up, so stay tuned.
Posted by Gavin Terrill on November 14, 2009.