Create an E-Commerce Landing Page with Unbounce

Building a landing page is easy.

Easier than it's ever been, actually: modern landing page creation tools have stepped their game up lately. Their technical entry barrier is real, real low.

And Unbounce is a shining leader in that competitive space. It lets you easily build, publish, test, and share landing pages online. You can capture leads without a line of code.

But creating an e-commerce landing page for direct online sales? A bit more challenging.

That's where Snipcart, our shopping cart platform, comes in.

After a few user requests and tests, I realized Snipcart & Unbounce were a powerful match to create compelling transactional landing pages:

Unbounce takes care of the design and testing, while Snipcart handles the transactional part. Oh, and it lets users check out directly on your page.

Two distinct tools for two different jobs, playing well together.

So in this tutorial, I'm going to show you how to add buy buttons and a shopping cart to an Unbounce page.

But first, let's cover some important tips for your e-commerce landing page design.

Tips & reminders: e-commerce landing page best practices

Now I don't want to dive too deeply into this before the technical tutorial. Still, there are a few dos and don'ts to keep in mind here. Why? To make sure all that web traffic you're funneling onto your product pages actually converts.

So here's a handy list of tips before we get started:

• Write compelling copy; make sure to get your length just right.

• Remove unnecessary navigation links; keep users focused on the page.

• Listen to AdWords' advice: your page's content must match your ads' promise.

• Focus on performance (optimize images, copy, scripts, CSS, etc.)

• Avoid visual clutter: design for conversion

• Add trust points: SSL certificates, PCI compliance, seals of quality, norms, & guarantees.

• Display high-quality product images and/or videos.

• Leverage social proof with product reviews & testimonials.

Of course, these are just a few of many e-commerce landing page best practices. But checking all of them will ensure a conversion-optimized approach and more sales.

If you want to draw inspiration for designing your transactional landing page, I advise giving this HubSpot list a look.

Now let's get a little more get technical, shall we?

1. Integrating your landing page's shopping cart

You'll need a Snipcart account to get started. Sign up free and complete the simple activation steps.

If you haven't done it already, choose among Unbounce's e-commerce landing page templates.

Open up your Unbounce landing page builder. Under the page itself is a small menu. There, select Javascripts.

Now go into your Snipcart dashboard, under Account > API Keys. There, copy the code snippet in the gray box. These are Snipcart's required files. We'll need to add them to your Unbounce landing page for the shopping cart to work.

Switch back to Unbounce. Copy Snipcart's required files in your Javascripts editor. You can un-check the jQuery box seen in the screenshot:

2. Adding buy buttons to your e-commerce landing page

Now that Snipcart is integrated to your Unbounce page, you'll want to add product buy buttons in there.

To do so, we'll use the Custom HTML widget in the landing page builder, and replace the template's dummy buttons with it.

Note: Snipcart products are defined using simple HTML attributes. You'll see how it works in this tutorial, and you can learn more about it right here.

Double clicking on the Custom HTML placeholder will open up an editor.

Here are the code and HTML attributes we'll use to define a product buy button:

<button class="snipcart-add-item button" 
        data-item-name="BASIC"
        data-item-price="25.00"
        data-item-id="1"
        data-item-url="#"
        data-item-description="One awesome shirt."
        data-item-image="https://i.imgur.com/zNG2kra.png"
        data-item-weight="20">
  BUY NOW
</button>

A few notes here:

• To design my product button within Unbounce's landing page builder, I created a button class that calls a custom CSS rule (explained in step 3).

• It's important that you also keep the snipcart-add-item in the class attribute.

• Make sure the data-item-url attribute displays the domain and page you're using for your Unbounce e-commerce landing page.

3. Styling your buy buttons with a custom CSS rule

Here, we'll use Unbounce's custom CSS feature to apply styling to our buttons:

For this tutorial, I've simply copied the template's dummy buttons' CSS. I did that using Google Chrome's dev tools in the preview view.

Once that was done, I pasted the CSS in the editor, defining the button class I applied to my products earlier:

You'll want to style your buy buttons so they fit your e-commerce landing page's design. This website lets you generate pre-made style rules. You could use that to create your own style of buttons. Also, Googling stuff like CSS buttons will go a long way here! ;)

Notes:

• Snipcart is responsive and will work just fine on mobile. Your buy buttons, however, might need a few adjustments. Use the Mobile view in your Unbounce landing page builder for that.

• Getting the right size for your Custom HTML placeholders might necessitate a few tries and switches between editor and preview view.

Now, let's see the whole thing in action, yeah?

I think we're done here, friends! Direct sales await. :)

Pushing your Unbounce e-commerce further with Snipcart

Crafting this working demo of Unbounce + Snipcart took me less than an hour. Of course, the integration I have outlined in this tutorial is a pretty basic one. There are lots of other cool stuff you could do to improve your e-commerce landing page with Snipcart. Some quick ideas:

• Enabling Google Analytics' e-commerce tracking.

• Customizing Snipcart's shopping cart to match your landing page design.

• Boosting sales with targeted discounts & promotions.

And if you're looking at using Snipcart on a whole site, or a blog even, you might want to check out our Guides & tutorials section.

Unbounce is a killer tool for landing pages, and we'd sure love to see more e-commerce initiatives built with Snipcart on top of it!

If you enjoyed this post and found it valuable in any way, please send a tweet our way. I'd love that! Got any questions regarding Unbounce & Snipcart? Hit the comments! :)