How To: Link an External Landing Page to your Shopify Store

by Stuart Whitman on July 9, 2009

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.

External Landing Page

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.

Leave a Comment

Previous post:

Next post: