Hooked on Shopify

I recently posted on the Shopfy forum of a simple method to customize your Shopify checkout pages. This provides an easy way to keep the look of the checkout pages whilst adding your own logo / telephone number and help text.

Even for those with limited css / image editing skills you should be able to do this during your lunch.

Here's a step-by-step guide of what to do:

1. Download the checkout.css file and save to your desktop
2. Create a graphic in your favoured image editing software with a white background that is 750px wide then add your logo and any other relevant details (phone number / help text).
3. Remember to make a note of the image height as this is required in the css file
4. Save the image to your desktop
5. Edit the checkout.css file in your favoured editor and change the image height to match your image. If your image isn't called checkout.png then change the name as well.
6. Login to your Shopify site and go to Assets -> Theme Editor
7. Scroll down to the Theme Assets section and click Upload a new theme asset
8. Upload your image and checkout.css files into the theme assets
9. Thats' it. Your done - add items to your basket and go to your new checkout page.

Loading mentions Retweet

Some times it may be beneficial to buy external domains and create landing pages on these to link to your Shopify store. I have recently done this for one of my stores that sells compatible stationery for Sage, Iris and Pegasus accounting and payroll software. After deciding what keywords and phrases I wanted to target I searched for suitable domains over at http://ajaxwhois.com my favourite domain name search site. Within 15 minutes I'd got 6 domains which I could now use for my targetted landing pages.

Anatomy of a Landing Page

The main idea of landing pages is to create a very specific and targetted page that makes your visitor want to take an action. In my case I want the visitor to make a purchase. I created a page with no links and removed all distractions in order to get the visitor straight to the point as quickly as possible. I included a nice large image of the product so they can easily see what the product is and then added my guarantee and a customer review. The Call to Action I've highlighted in a green border to make it stand out and re-inforced my logo as part of the "Add to Basket" button.

Behind the Scenes

The HTML/CSS for the page is pretty straight forward but the main thing that you need to do is link the Call to Action into your Shopify store. What we need to happen is when a visitor clicks the button (in my case "Add to Basket") a message needs to be sent to the corresponding Shopify store to add the product to the basket. This is done by finding the following 2 pieces of information:

1. Your shopify store domain name. This is needed as the page needs to know where to "POST" the information. This will either be a custom domain name (mine is collateit.co.uk) or you maybe using yourname.myshopify.com. This then gets appended with "/cart/add" giving you a full url to POST to of http://yourdomainname.com/cart/add.
2. The product variant ID. This identifies which product needs to be added to the basket when Shopify receives the "POST". The simplest way to do this is look at the source of the relevant product in your Shopify product pages and search for something similar to the following. Please note most of my products have only 1 variant so I choose to hide the field but more likely if you have 2 or more options you will have a dropdown selection box.
   <input id="product-select" name="id" type="hidden" value="16926522" />
or
<select id="product-select" name="id">
   <option value="19563252">Pack 500 - £59.95</option>

   <option value="19563262">Pack 1000 - £99.95</option>

   <option value="19563232">Pack 2000 - £149.95</option>
   </select>
   now just copy this into your new page.

So your HTML FORM on the landing page will be similar to:

<form action="http://collateit.co.uk/cart/add" method="post">
<input type="hidden" value="16926522" id="product-select" name="id">
	

Once you've got this working for one landing page it's just a matter of changing the product id for your other pages.

Hop on over to http://irispayslips.co.uk to take a look at the finished article and feel free to look at the source code.

Loading mentions Retweet

When I first started using Shopify one of the first things I wanted to do was create a dropdown list of quantites in the product.liquid template as I prefer them to having input boxes where a user can type in a number.

The simple way would be:

<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>

That's all well and good but I wanted up to a quantity of 30 and been a programmer didn't want to repeat the same thing another 29 times. So a simple way to achive this using Liquid is to create a For loop and assign a variable to the maximum quantity, in my case 30.

{% assign max_quantity = 30 %}
{% for ii in (1..max_quantity) %}
<option value="{{ ii }}">{{ ii }}</option>
{% endfor %}

You can see this working here.

Loading mentions Retweet

In the five years since leaving the cosy umbrella of full time employment and setting up my web development business I've used a lot of ecommerce software. I started out with osCommerce, Zen Cart and the like but didn't know much PHP at the time so settled on Cactushop a classic ASP application. It did pretty much what I wanted, had a good feature set and with full access to the source let me modify as required for my clients needs.

At first I used to try and do everything - so I'd come up with a design, then 'crowbar' this into a Cactushop template, configure all the options (there were about 200 of them), configure and load the database and resize all the images. This used to take quite a chunk of time and as a consequence increased my costs. Not only that I used to have to have to look after the hosting and make sure everything was ok.

As time went on I would do more and more bespoke modifications which became ever more complicated to the point where I'd just had enough. There must be another way of doing things.

Seeing the light

It was only recently that I discovered Shopify and it's been a true revelation. Never has the KISS acronym been better illustrated in eCommerce. Something that used to be complicated and time consuming is now straightforward and 'no worries'. I don't have to worry about the server, the database, the OS, resizing multiple images, 'hacking' some code so the template will work with the CSS, upgrading the software and/or database. Now I can concentrate on getting a shop up and running as quickly as possible without any hassles - what a joy.

To those who say Shopify is expensive - I say you don't understand the true value of what your getting. The guys at JadedPixel are providing you with a solid platform on which you can establish a simple, easy to use system for selling your goods and services that is way beyond anything else out there at the moment. Sure it doesn't have all the bells and whistles of some other systems but then does it need to? I think, based on the 80/20 rule it covers most requirements that business owners have when selling online.

I for one applaud Tobi and the team for building Shopify into what it is today and trust they will keep the simplicity and elegance that sets them apart from the competition.

I'll be posting some tips here on an adhoc basis about how you can utilise some of the less well known features to optimize your Shopify store to the full. A lot of these are probably already in the Shopify forums but I'll be expanding on many of them so you can judge if they'll be fit for your requirements. I don't pretend to be an expert but just want to share my experience of what has helped me since I started on my Shopify journey.

Loading mentions Retweet