Designing an iPhone version of your Shopify ecommerce store

Written by: Jonathan Briggs

April 13, 2009 [6459 views]

Designing an iPhone version of your Shopify ecommerce store

Why have an iPhone version of your site?

A web site is often too big to display nicely on a small screen and still be readable. While 90% of sites (no flash or java applets) will display on the iPhone they can be very difficult to navigate
Web visitors are used to scanning a whole page to find what they are looking for. iPhone users want to see the key things immediately
iPhone users may be connecting over slower connections and will not want to wait to see large images
Mobile visitors have a limited set of specific needs often related to being mobile: looking up an address or phone number, making an instant purchase or checking order status

Converting Market Quarter to iPhone

I have based the following tips on the redesign of my French Food store, The Market Quarter. The site automatically detects whether you are using an iphone and displays the appropriate style sheets. It can be viewed at http://www.marketquarter.com.

The Market Quarter is implemented using the excellent hosted ecommerce platform Shopify. Shopify allows you to restyle your store completely using a templating language called Liquid which provides straightforward access to all the products, objects and content on which your store is based.

Tips for redesigning your content

1. The following META tags need to be added to your pages (or in the case of Shopify to theme.liquid) to tell the iPhone to display the pages as zoomed in as possible:

2. Most of the work can be done by serving up an additional style sheet or adding an conditional section to the end of your existing style sheet.

3. You can use the following Javascript to detect your iPhone and deliver your new iPhone style sheet. This was my first approach:

var agent=navigator.userAgent.toLowerCase();
var is_iphone = agent.indexOf('iphone')!=-1;
if (is_iphone) {
document.write("<link rel='stylesheet' type='text/css' href='" + " } " + "' media='screen'>");

4. Alternatively you can use the @media directives in the style sheets themselves. More on media types here http://www.w3.org/TR/CSS2/media.html

@media handheld, only screen and (max-device-width: 480px)

{
/* Your mobile styles go here */
}

5. Remember that styles cascade and use your mobile styles to overwrite your web styles. Many of your existing styles will be fine and simply adding additional iPhone styles will keep the two sites looking similar.

6. Start by reviewing the layout grid that you are using for the web version and replace width styles with either 100% or auto. Allow your layout to collapse before you start to rebuild it for the smaller screen.

7. Replace styles with {float:none;} so that blocks of your page end up one above the other rather than side by side

8. Use to hide blocks of a page or large images that you do not want to show in the iPhone version

9. I was happy with the order of blocks I achieved on my site: seach, main logo, product navigation, featured category, basket.

10. I added an additional navigation block at the bottom of the site: home, about us, contact us. This additional block needed to be added to the main site, hidden from web viewers and then shown in my mobile styles {display:block}

11. Where the web version used fixed widths for form fields, I replaced these with narrower widths for the iPhone.

12. I used iPhoney http://marketcircle.com/iphoney/ to view the progress of my work. This worked well most of the time although it appears not to recognise the @media CSS direction for conditional CSS.

13. You can see the before/after images at the top of the page.

14. I am fairly happy with the results but work still needs to be done on the zooming of the checkout pages which are not under my control; hosted by shopify.