Mac SEO Blog

Shopify is an online platform that helps build your business ‘all from one place’. Shopify aims to help you with all aspects of your online business from sales and marketing to support and management. It is an approach that now reaches over 1,000,000 businesses in 175 countries. 

Although Shopify offers a one stop shop for online businesses, this may not always be the best option. Many established online businesses may just want to use Shopify only to increase their market reach. Other businesses may prefer not to put all of their resources in to one platform in order to reduce business risk and increase business resilience.

Integrating Shopify with EverWeb

Integrating Shopify in to your EverWeb website is best done through Shopify’s Buy Buttons as they can be directly added in to your website’s pages and blogs. The buttons can include images, a description of the product and the price of the product. If you update your product in Shopify, the The Buy Button in EverWeb will also be updated.

Before You Begin…

There are a couple of things that you should check before starting to add Shopify Buy Buttons to your EverWeb website

1. You have products in your Shopify Admin and
2. These products are available to the Buy Button Sales channel. 
3. Shopify Payments has been activated. If this feature has not been activated, a transaction fee will be levied against each customer purchase that uses a Buy Button.

Adding A Shopify Buy Button To Your Site

There are two forms of Shopify Buy Button: for one product (and all is variations) or for a Collection. 

To create a Buy Button for one product

1. Log in to Shopify then go to the Shopify Admin screen
2. Click on ‘Buy Button’. Choose the option to ‘Create Buy Button’. In this example choose ‘Product Button’ as this button will be for one product only.
3. Next select the product that you want to use the button with from your catalog. The search function can be used to quickly find the product you want if you have a lot of products in your catalog.

Buy Button Customization Options

The next step is to apply customization options to the button. Where you have different variations for your product, you can choose to select either ‘All variants’ or select just one variant.

The color of your Buy Button, its size and its font are all customizable. Any changes you make can be previewed at any time.

Choosing The Buy Button Layout Style 

For the Buy Button layout, you have three options to choose from:

• Basic: Only the button itself is displayed. 
• Classic: The button is displayed with a product image and price
• Full View: The button is displayed with a product image, price and description.

Once you have selected the button layout of your choice, the next decision you need to make is to decide what you want to happen when the customer clicks on the button. Again, there are three options:

• Add Product to cart
• Direct to checkout
• Open product details

The last option, Open product details, allows 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. This Open product details type will not available if the ‘Full View’ layout style has been selected as it includes these details already.

Note that when a customer clicks to go to the Checkout, Shopify will by default, open a new browser window. If you do not want this, go to the Advanced Settings and change the ‘Redirect in the same tab option’.

Click on ‘Next’ to complete the Buy Button setup!

The final step is to click on ‘Copy Code’ which will copy the Buy Button code to the Clipboard which you can then use in EverWeb.

Creating Buy Buttons For Collections

If you have products in a Collection, creating a Buy Button will add a button for each product in the collection. The collection’s Buy Buttons can be customized in the same way as for single product buttons.

Adding Buy Button Code Into EverWeb

The last step in creating the Buy Button was to copy the button code to the Clipboard. You can now use this code in your EverWeb website project file.

1. Go to the page in your website project where you want to add the Buy Button.
2. In the Widgets tab in the Inspector Window, drag and drop the HTML Snippet widget on to the page.
3. Click inside the ‘HTML Code box’ then paste the code from the Clipboard.
4. To make sure that the changes are applied you must click on the ‘Apply’ button. You will see that the Editor Window will be updated.
5. Size anYou can now move and position your ‘Buy Button’ around the page as desired.
6. When you have completed your changes, publish and test your website.

EverWeb on Social Media

You can also find EverWeb on the following social media platforms:

Facebook

Flipboard

YouTube

Twitter

Instagram