Shopify website integration is a useful way for agencies or freelancers to provide customers with more creative online shopping experiences, and opens up new opportunities to pitch the SDK to current or potential clients.
Better yet, it means that smaller clients — those that previously would not have had the budget or thought it would be overly complicated — can now integrate Shopify into their website.
- Provide products on a service-oriented website
- Offer a low-risk way to test a full-store idea
- Provide a simple way of creating landing pages
- Create a microsite for a unique set of products
Today I’ll go through all four options in detail.
You might also like: Design Your Store Faster With Product CSVs and Images
1. Limited products as part of a website
Some clients have a service-oriented website, and generally don’t put a lot of effort into selling products. However, they may be looking to earn some additional revenue, or increase brand awareness through promotional products.
Perhaps it’s a charity that would like to sell some merchandise as a fundraiser. Or a service company with some tools it could promote. Or a restaurant with a line of in-house sauces, or a recipe book. Any of these examples would benefit from a Shopify integration within their existing website.
Here’s a real-life example: The Stanley Thompson Society promotes some of the world’s best golf courses, created by Stanley Thompson. It’s a rich website with a lot of information about the man, the exceptional golf courses he created, and the activities of the Society, including verifying Stanley Thompson golf courses and providing a scholarship for golf course design/maintenance..
As part of the website, they also use Shopify integration to sell golf-related products through the Stanley Thompson Store.
2. Test a full store idea
The benefits of reaching an expanded online audience, and providing an easy way for existing customers to shop from their home, can be a substantial win for clients already running a retail operation. But, taking the leap to e-commerce can also create a lot of anxiety and involve a considerable amount of time, money, and risk to get up and running.
Testing the idea of an online store can be a good way of reducing that risk. A retailer can take a subset of products — ones they think will sell best online — and display them on a simple website, using the Shopify integration.
If the client has a limited budget, more of it can be spent on marketing, in order to test the idea and get it off to a great start. If there’s good feedback, you’re on the right path. Continue adding products to set up the full store, while continuing to test customer appetite.
On the other hand, if you test the market response and find that there’s not enough interest, your client will be glad you saved them significant time and money.
A solid example of testing an idea online is Kyfak and their first product — a hilarious party game called FINISHIT. To start selling the game, Kyfak wanted a simple website to introduce the company, and sell their boardgame and accessories online. The Shopify integration was just the thing they needed to get started. If the board game sells well online, Kyfak plans on expanding into other products.
3. Enhance your landing page with products
Landing pages are a key component to a successful inbound marketing campaign. The landing page is a standalone web page that is distinct from your main website and has been designed for a single call to action. The navigation bar is hidden to restrict the options available to users visiting this page, helping to guide them toward an intended goal, such as subscribing to a newsletter or asking for an email in exchange for a discount coupon or download.
A campaign may use social media, content marketing, email marketing, or paid search to drive a visitor to a landing page, in the hopes of converting them, giving better results than sending visitors to a generic page on the website.
At my agency, Northern Village, we use our website’s landing page to sell a custom laptop pad that keeps a computer cool while sitting on a lap. We now have a link that we can use to promote the product on Twitter, Facebook, and various blogs. The Shopify integration made promotion effective, and the orders are rolling in.
4. Create a microsite for a set of products
A retailer may have a set of products that are quite different from their main business. It could be a specialty item, or a set of products that is better suited for an online store. Creating a microsite for a product line is also a good way to reach a new online market. A small website with its own unique branding can easily be setup.
It’s easy to create a small website, and add products to a new store.
A great example is Elf Cozy’s Workshop, a Canadian online store specializing in custom clothing and accessories for professional Santas, including puffy shirts, aprons, ball caps, etc. It was born out of Sharon’s Cozy Horse Creations, but because Santa clothing doesn’t have anything to do with horse accessories, Sharon decided to set up a one page website to test demand for a full website. Within only a few weeks of launch, the website was receiving orders from as far away as Hawaii.
You might also like: How to Use Web Fonts in Your Shopify Store
Embedding Shopify into a website
Once that is set up, the CMS can be configured to embed a store into any page on the website. One way of doing this is to have a script that specifies a Product or Collection that can appear on that page, like so:
Configuring your CMS
This example illustrates the simplest way to integrate ecommerce into your site in order to allow visitors to purchase a single product. It creates an HTML anchor element that links to the product’s checkout URL.
After fetching a product with the product ID, we use the promise function to generate some markup with the required attributes and content, and add it inside our HTML container element.
This example illustrates the use of a cart to manage multiple products and variants. Only certain snippets of code will be highlighted from the full example, available in a subfolder in the JS Buy SDK repository.
First, the app makes a call to retrieve the product. Then, it sets a few variables to store the default selected variant, the selected variant’s image, and the variant options available for the product.
The demo then updates the HTML structure for the product using the updateProductTitle, updateVariantImage, updateVariantTitle, and updateVariantPrice functions, and builds out <select> elements for the product’s variant options and appends them to the product’s HTML markup.
Various listener functions are called to watch for ‘Add to Cart’ button clicks, variant option changes, and increment/decrement buttons for the variants in the cart.
The attachOnVariantSelectListeners function updates the product.options when a selected option is changed, then calls the various update functions with the new selected variant and selected variant’s image.
In our example application, when a product variant is added to the cart, the addVariantToCart function handles a series of things. First, it updates the cart model. It then uses the line items in the cart to build the required markup, in order to display the cart items in the DOM.
Additional event listeners are used to toggle the cart’s visibility on/off, by adding and removing the js-active class on the cart.
An affordable way to have an online store
This allows you to use Shopify’s robust, full-featured admin interface and checkout process, while retaining the look and feel of your client’s website.