Online Shopping with Shopify and EverWeb!
EverWebSoftwareTips and TricksTutorialsWeb DesignWidgets

Easily Integrate Shopify Buttons in Your EverWeb Website!

Shopify is a platform that helps you start and grow your business at every stage through a collection of e-commerce and point of sales tools. Shopify reaches over 1,000,000 businesses in 175 countries allowing you to sell products via your own Shopify e-commerce store, online marketplace, social media, and even in person via point of sale. Shopify also helps you with marketing your business, enabling you to create campaigns with integration of Google Smart Shopping and Facebook Ads. You can analyze the results of your campaign to see how what works and what doesn’t.

Integrating Shopify In To Your Website
Shopify is designed to be a one stop shop for all of your business needs, but for many small businesses and entrepreneurs it’s not always the best idea to restrict your business to one sales outlet. Often small business prefer to target more one platform to spread the potential business risks inherent in using just one on-line selling platform. Many businesses also have their own website and so will want to showcase the products and services that they sell on Shopify within their own website. This makes sense as it widens the target audience and you can leverage Shopify’s sales platform right from within your website.

So how do can you integrate your website with Shopify? The easiest way is by using Shopify’s Buy Buttons. These can be integrated directly in to your website’s pages and blogs. Buttons are updated automatically in your website if you update your product in Shopify saving you time and effort. Shopify’s buttons are also versatile as you can include images, product descriptions and pricing details to the buttons.

Before Adding Buy Buttons In Shopify
To add Shopify buttons to your website takes just a few steps. In the example below, we will integrate a Shopify Buy Button button in to a page within an EverWeb website. However, before you can create any Buy Buttons you will need to make sure that you have a Buy Button Sales Channel in your Sales Channel…

  1. First go to your Shopify admin section. In the Sales Channel section, you should see the Buy Button Sales Channel. This sales channel is included as part of all Shopify plans, and is used to create your Buy Buttons.
  2. If you don’t see the Buy Button Sales Channel, you can add it to your Sales Channel section.
  3. Click on the ‘+’ sign next to the Sales Channel heading.
  4. You will now see the ‘Add sales channel’ dialog. Click on ‘Buy Button’ and then click ‘Add channel’ to finish.

Note that before creating your Buy Buttons, you will need to make sure that you have already added your products in to your Shopify Admin and that you have made them available to the Buy Button sales channel. Also remember that transaction fees will be applied each time a customer purchases using the Buy Button unless you have activated Shopify Payments.

Shopify allows you to create a Buy Button for either one product (including all is variations) or a collection.

Adding a Buy Button for One Product
To create a Buy Button for One Product, including any of its variants, follow the steps below:

  1. From the Shopify Amin screen, click on ‘Buy Button’, then select ‘Create Buy Button’.
  2. In this example we are creating a button for one product so select ‘Product Button’.
  3. Choose the product that you want from your catalog. If you have many products in your catalog, you may find it easier to use the search function to locate the product you want. Click to Select the product.
  4. You now have a number of customization options available for your button. If your product includes different variations, you can choose to select ‘All variants’ or select just one variant.
  5. You can customize your button’s color, size and font. At any time, you can preview any changes that you make. This is useful when trying out the following customizations.
  6. Choose the layout style that you want for your button: Basic, Classic or Full View. The Basic option adds just the button itself. The Classic option adds a product image and price to the button whilst the Full View option includes product image, price and description to the button.
  7. The next step is to decide what you want to happen when your customer clicks on the button. There are three ‘action’ choices: ‘Add Product to cart’, ‘Direct to checkout’ and ‘Open product details’. These options work as you would expect. The ‘Open product details’ action, however, is of note as it allows your customers to view the product description, select any available product variants, and add the product to the shopping cart. If your product has multiple images associated with it, these will also be displayed. Note that this action type is not available if you have selected ‘Full View’ layout style as this style includes these details already.
  8. Shopify’s default behaviour when you checkout will be to open a new browser window. You can override this by using the Advanced Settings> redirect in the same tab option.
  9. After choosing your options, click on ‘Next’.
  10. Click on ‘Copy Code’. This copies the code to the Clipboard so that you can use it in EverWeb

Adding a Buy Button for a Collection
If you have a collection, creating a button will in fact create a button for each of the products included in the collection. You customize the collection’s buttons in the same way as you would for the single product button as described above.

Integrating Your Button in to EverWeb
Now that you have created your Buy Button and have copied its generated code to the clipboard, you can integrate it in to your EverWeb website.

  1. Launch EverWeb and select the website project file that you want to use.
  2. Go to the page in the project file in which you want to add the Shopify Buy Button.
  3. Go to the Widgets tab in the Inspector Window and drag and drop the HTML Snippet widget on to the page.
  4. In the Widget Settings of the HTML Snippet widget, click in the HTML Code box and paste the code that you copied earlier from Shopify.
  5. Click on the ‘Apply’ button at the bottom of the HTML Code box to apply the changes. The Editor Window will update.
  6. Size and position the widget on the page to where you want it located.
  7. Publish your website to test that the button works correctly.

Adding your own Shopify Buy Buttons to EverWeb is easy and only takes a few minutes. You can now use your website as a front-end online store with Shopify as its e-commerce engine!

You may also like


Leave a reply

Your email address will not be published. Required fields are marked *

More in EverWeb