The JavaScript Buy SDK was announced at Unite — Shopify’sPartner and Developer Conference— to provide Shopify Partners with even more ways to host Shopify stores.
现在更容易集成Shopify JavaScript Buy SDK into any website or CMS, meaning end users need minimal customization. This means products can be managed within the robust Shopify architecture, including checkout, returns, and shipping, while the look and feel is managed within the CMS.
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.
The Shopify JavaScript Buy SDK can be used to:
- 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 byStanley 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 theStanley 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 isKyfakand 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 successfulinbound marketingcampaign. 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.
With the Shopify JavaScript Buy SDK iIntegration, you can maximize sales of a specific product or product line by leading visitors to a landing page that is focused on promoting the product or /product line. Instead of the usual call to action, you can have a bBuy bButton as the focus of the landing page, incentivizing visitors toward buying a product (and getting their email in the process).
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 isElf 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
How simple is it to set up a Shopify integration in a CMS? Once the Javascript Buy SDK is embedded into a CMS, there are only a few simple steps that you need to follow for the store to appear on a website.
Setup
To use any of these examples, we first need to set up clients in the main Shopify JavaScript file. The following JavaScript code initializes the website to the Shopify store:
一旦建立,CMS可以配置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:
This is the way that it has been set up in the Northern Village CMS, however, there are different ways to do this. The following are instructions on how the Javascript SDK can be set up in your CMS.
Configuring your CMS
The code below, provided by the team at Shopify, outlines how the Shopify SDK works, so that it can be placed into a CMS. It demonstrates the different and simple ways you can use the JavaScript Buy SDK to build ecommerce into any website. Head over toGetting startedfor more details.
Product Checkout
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.
We’re going to create markup in our JavaScript, therefore our HTML can just include a container element.
