Website Shopping Cart Integration

ecommerceIf you have read the book I published which illustrates a clear online strategy for marketing products and services, you should be well aware of the importance I place upon the integration of purchasing tools in a website’s design.

We live in a society that has immediate desires that need to be instantly satiated. In many instances, there may be only one opportunity to sell a product to an individual who visits a website. Often this applies to brick and mortar establishments as well. If one misses the immediate opportunity to make a sale, it is rare the customer will be returning as they are probably rushing home to find a similar product online or from another retailer. By providing an opportunity to immediately fulfill a customer’s impulse purchasing desires, you are much more likely to make the sale. Having to communicate through a series of emails may be tedious enough to dissuade a purchaser who would have otherwise bought a product immediately if a shopping cart system existed in an online retailer’s web design.

One of the first things I investigated during my recent website redesign project was the ease with which I could implement a shopping cart system. For the products I am selling, there were two facets of the design that needed to be considered: original artwork sales via PayPal and fine art Giclée print sales via an online fulfillment center.

My previous website encouraged original artwork sales by integrating simple PayPal “Buy Now” buttons into each painting’s description. Although effective, it was also very labor intensive to implement since every new painting I posted required logging into PayPal, creating a purchasing button, and pasting the code into the HTML content of the web page that represented a particular painting.

Readers who are familiar with PayPal’s website will surely recognize the fact that creating a PayPal button isn’t necessarily difficult but the speed at which the site operates makes the process tedious. When one only has a short amount of time in which to update a website, the speed at which PayPal’s site renders can be an excruciatingly painful setback.

By utilizing a WordPress format and moving my watercolor art website to a new host that allows server-side scripting, I became presented with many more e-commerce possibilities. There are several plug-ins available for WordPress that can make it very easy to implement a simple shopping cart system. Since each of my products is unique and handmade, I didn’t really need to worry about the added sophistication of inventory management. Once an item is sold, there is no need to restock it. The simplicity of my requirements revealed quite a few plug-in selections but one really stood out due to its ease of implementation.

I found a very basic option called WordPress Simple Shopping Cart that fulfilled nearly all my criteria and was extremely easy to incorporate into my new website. The plug-in integrated a purchasing button into a portfolio’s text through the inclusion of a small segment of WordPress short-code. The short-code defined the products name, price, shipping cost, and handles all the backside shopping cart implementation. By adding a simple View Cart button to the upper right corner of my website’s header, user’s can instantly see the purchases they are making. When they check out, PayPal handles all the credit/debit card processing. The plug-in makes the shopping cart implementation very simple and satisfies the impulse purchasing needs of modern consumers. It has proven itself to be a very effective addition to my website. I feel it necessary to mention that this company also offers a more sophisticated version of the plug-in that offers inventory management for a small fee. Since I don’t need the additional functionality, I opted for the free version but various readers of this blog might find the inventory functionality to be a necessary requirement.

Once my original painting purchasing method had been implemented, the next stumbling block in my e-commerce strategy arose when I decided to include an online print shop in the website’s design. Many of you know that I almost exclusively utilize Fine Art America as my print fulfillment service. I have found the company to be extremely timely and reliable so integrating their custom shop into my design seemed to be an appropriate decision. Unfortunately, the custom shop offered by FAA doesn’t organize artwork into categories or galleries so a customer has to wade through hundreds of images in order to find a specific painting. I have approached the owner/programmer of FAA regarding adding this feature but the company is currently focusing its efforts on the construction of their own premium artist webpages. These are very nice and offer an enormous number of fantastic features. Unfortunately the pages don’t allow direct purchasing of original artwork. They do, however, organize prints into gallery categories if an artist desires. Because of this, I began looking for a way to incorporate the FAA artist website into my main website in place of their standard custom shop.

I began by downloading and modifying the most basic template that was part of the WordPress theme I am using and eliminated all the content. This left me with the parts of the PHP code that left the header, footer, and sidebar of the theme intact thus preserving the look and feel of the theme’s design. Because the Fine Art America website and its associated artist webpages are non-responsive and don’t reformat or re-size based upon browser width, I was forced to eliminate the responsive nature of the integrated print shop on my website as well. There was simply no way around it.

I created a basic iFrame in the PHP code to house the externally hosted FAA artist website. In the process, I discovered that the artist website consistently maintains a header and navigation bar across the top of the page and they remain in place throughout all navigation and the entire checkout process. Since there are features of the artist website that I don’t want visitors to my main website to use, I decided to change the positioning of the displayed website in the iFrame so the header and navigation information is not viewable. By pushing the site upward by 140 px, all the artist website features become invisible and, therefore, not accessible. Through FAA’s setup screens, I removed commenting ability since this provided additional navigation away from my specific artist website and could cause another artist’s site to be displayed within the frame on my website. I then created a WordPress page that used my new template design.

Everything was operating very well and I really liked the look and functionality of the integrated print shop except for one small detail. As I mentioned before, the non-responsive nature of FAA meant that when the page was displayed on a mobile device, the width of the page would be far too large. Since pinch-and-zoom capabilities are disabled in the theme I am using, this presented a problem. Unfortunately, this forced me to make the decision to serve a different page if a user is visiting my print shop through a mobile device. I added a function to the beginning of the print shop’s PHP page that checked for a mobile device and then opened the standard FAA custom shop page instead. This allows mobile users to pinch-and-zoom while navigating through FAA’s print shop but eliminates the use of FAA’s galleries. There is a definable link that returns users to my main homepage so users can shop and then return to the main site and everything works appropriately.

Bear in mind that there are additional style sheets, etc… associated with my theme that are being utilized but the PHP code I am implementing to make the print shop operate is shown below:


<?php

function isMobile() {
return preg_match(“/(android|avantgo|blackberry|bolt|boost|cricket|docomo|fone|hiptop|mini|mobi|palm|phone|pie|tablet|up\.browser|up\.link|webos|wos)/i”, $_SERVER[“HTTP_USER_AGENT”]);
}

if(isMobile())
header(“Location: http://fineartamerica.com/customshop/ken-powers.html”);
?>

<?php
/*
Template Name: PrintShopWide
*/
get_header();
?>

<style type=”text/css”>
iframe {
overflow-x: hidden;
overflow-y: scroll;
position: absolute;
top: -140px;
left: -8px;
width: 100%;
height: 758px;
}
</style>
<section id=”pageprintshop”>
<header id=”pageHeader”>
<h1><?php the_title(); ?></h1>
<a href=”#” class=”actionButton minimize” data-content=”#pageprintshop” data-speed=”600″>minimize</a>
</header>
<div style=”width:988px; height:600px; position: relative; overflow: hidden;”>
<iframe src=”http://ken-powers.artistwebsites.com/art/all/all/all”></iframe>
</div>
</section>
<?php get_footer(); ?>


Although the solution above may require some more refining and is not perfect, it does integrate a fully functional print shop into my main website while maintaining the site’s look and feel. I do end up sacrificing my site’s responsive characteristics for one page by doing this but mobile users will probably never notice due to the redirect code I have included. I may still discover a facet of this solution that throws a wrench into my website’s cogs, but for now I am pleased with the end result.

Have you implemented e-commerce capability into your own marketing website? If so, let me know what you are using to accomplish your goals in the comment section below. I would enjoy learning about other approaches.

Tagged with: , , , , , , , ,
Comments (6)
  • Dai Wynn November 16, 2012

    Hi Ken,

    I found this ‘blog extremely helpful, thank you.

    Now, I cannot claim to be inundated by collectors buying artworks from my website, so what I say or do is in anticipation of a future deluge.

    Thanks to your advice in previous ‘blogs, I have invested in a responsive WordPress website which has reduced the maintenance of my online presence by two thirds. However, I still have a number of online galleries in my old – non-responsive – format. Each has a matrix of thumbnails. Clicking on a thumbnail opens a new tab with a larger image, painting details and a PayPal “Buy Now” button. Each gallery has 30 thumbnail images, so you can imagine the amount of maintenance the whole site requires, in addition to the WordPress responsive section.

    The maintenance issue becomes acute when I decide to change a price of an artwork, and to harmonise that price with several hundred other artworks of similar size, quality and genre. This means spending several hours on the PayPal website, and you already know what that means. So it would seem to be an excellent move to simply use PayPal for checkout and payment, rather than for the generation of “Buy Now” or “Add to Cart” buttons with associated random alphanumeric codes.

    Were I to hit the jackpot and suddenly become “on trend”, I might be embarrassed by having to deal with multiple orders for the same artwork. This has happened to others in the past and PayPal now deals with this situation by including a quantity in stock window and a return URL when out of stock.

    Julian Merrow-Smith of http://www.shiftinglight.com had a bespoke online auction sub-domain built to handle his 24-hour auctions. The result is a true market value for his work (he has 30k+ names on his mailing list and all have opted in so are more than just tyre-kickers), and only one winner. I would rather not have to pay $10k+ for online auction software which simply counts down the hours and minutes while toting up the bids. Nothing as fancy as eBay. Are you aware of such open-source freeware?

    On the topic of prints, I am in the process of printing this year’s Christmas cards via Fine Art America, having read their ‘blog about their quality printing services. Two weeks after order and acknowledgement, I had still not received a tracking code, so I wrote to them. I believe the cards are with UPS as I write but, as I pointed out, I live just north of Antarctica.

    By the way, it’s not just the drop cap that goes horribly wrong in your emails. The PHP code gets somewhat ugly too.

    Cheers,

    Dai

    • Ken Powers November 16, 2012

      Dai,

      Thank you for the kind words. I will have to stop by your site and see what avenue you have pursued in regards to your pages.

      I agree with your assessment of time management as it pertains to website maintenance and gallery/shopping cart integration. The more time we can save, the more creative time we have available. Unfortunately, the initial time investment can be quite taxing. I am still not precisely where I want to be when it comes to the logistics of the site. But, I feel I am far closer than any time in the past.

      As for the shopping cart and inventory management issues. Up to this point I have been fairly safe. Unfortunately, however, it is possible for a redundant order to be placed by two different customers. I can be a little proactive since I can instantly change a painting’s status manually via my iPhone. I am notified by mail of any purchase and then I immediately edit the text of the WordPress project to remove the purchasing button. There is still a brief window of possible disaster but that is the risk to cost ratio I have opted to accept. Perhaps I should draft a pre-written letter of apology. 😉 When I was using individual PayPal Buy Now buttons, I would always set the quantity to one to avoid such issues. But, this new convenience is worth the possible repercussions. I will have to investigate free-ware auction packages or if one’s even exist. I will keep you posted if I find anything useful for our shared purposes.

      As for e-mail formatting issues, JetPack added an automated social sharing option for blog posts. Unfortunately this first attempt at using it caused the post to be sent to subscribers before I could make sure the PHP code snippet was properly formatted. I am definitely to blame for that one. I hope that in the future, the WordPress JetPack writers will include the ability to properly format theme-specific shortcode. I am patiently waiting and they claim this feature will be on the way as well as the ability to specify a post’s excerpt instead of its entire content. The many positive features of JetPack still make it incredibly more useful than the standard WordPress features. Custom CSS, subscription service, login through social media (huge plus), proofreading features, sharing ability, and an enormous list of other positive features that accompany it make it well worth using. I just hope they make the aforementioned edits soon. Luckily my blog only has 7 subscribers at this point since it is still in its infancy. I get a lot of traffic but not many subscribers. Hopefully that will change!

      Thanks again for your kind words of support! I am glad you are finding the website helpful and motivating.

      Ken

  • Imofx December 11, 2012

    Hi Ken

    I see that you’ve come a long way with your store!
    And it’s good to hear that FAA is showing support for making the Artist pages better. Hopefully they’ll focus on mobile too, as a recent study (forgot the source, sorry) showed more and more people are buying stuff through their mobile phones. (last Black Friday for instance, showed an increasing number of iPad users)

    As I mentioned, I deleted my Fine Art America account and switched to Zenfolio.
    I used the CNAME method to point my domain to a page with Zenfolio to upload my images to. That way I can unload my server (as the images can take up as much as 64Mb each) and style that page, so that it looks as though it’s on my own website. It’s a service that is offered through Photoshelter as well. Unfortunately, Zenfolio has no plans yet to allow mobile visitors to buy art 🙁

    So it looks as though we’re a bit early starters…;)

    Edwin

    • Ken Powers December 11, 2012

      Thanks Edwin! Some of the POD sites definitely need to step up and create more mobile friendly and responsive versions. I just read an article on Mashable.com today that said 2013 is going to be the year of the responsive website. Let’s see if more sites get the hint!

      Ken

  • foto wisuda October 13, 2013

    My spouse and I absolutely love your blog and find almost all
    of your post’s to be just what I’m looking for. Does one
    offer guest writers to write content in your case? I wouldn’t mind producing
    a post or elaborating on a few of the subjects you write about
    here. Again, awesome weblog!

    • Ken Powers October 13, 2013

      Thank you very much for the kind words! At the present time I am created all my own content in order to remain consistent and to help chronicle my art business and art eCommerce website creation. I may entertain the idea of having guest posters in the future, however. I will certainly let you know when that time arises. Have a great day!

Leave a Comment

* required

This is a unique website which will require a more modern browser to work!

Please upgrade today!