Integrating Square Market and WordPress for e-commerce on Shifter

Using Square Market store and product embeds, add e-commerce solutions to your static WordPress sites.

Square Market is an excellent option to bring fully functional e-commerce to static WordPress sites. With a few short embed codes copy and pasted, users can combine their custom WordPress themes with existing Square accounts.

Square Online Store Explained

While a lot of people are familiar with Square as the register in your local coffee shop, they also offer tools for business to sell products online.

Launched in 2013 as Square Market, now known as Square Online Store, it’s a feature available to all Square sellers.

The great part about Square Online Store (aside from Shifter compatibility!) is that it works as an extension of existing Square accounts. If you already use the Square Reader in your brick and mortar shop or on the road, you can enable this feature.

To enable your Square Online Store, check out the official docs here.

How does Square Market embed work on Shifter?

Since Square Market manages payment processing, inventory, customer data and more, all the necessary functions and services happen through their API.

Similar to a YouTube video or an embedded Google Form. Just copy and paste the embed code and the necessary HTML will render on the page.

After you add your embed code and generate your static WordPress site, you can manage products from the Square Dashboard.

How to add Square Online Store to WordPress

Add this embed code to any page or post and your shop will render. This is the demo site provided by Square so you will need to first enable your online shop and update the script URL with your personal one.

In this example, menu-embed-test-coffee-shop is the demo shop name they provide.

<a href="https://mkt.com/menu-embed-test-coffee-shop" class="sq-embed-menu">Order Online</a> <script src="https://cdn.sq-api.com/market/embed.js" charset="utf-8"></script>

This is where some features are lacking. While there are a lot of options that cover the basics, you cannot do a full design overhaul yet. We hope that Square offers this in the future as well.

Some custom options include hiding descriptions, image sizes, number of columns, etc.

Here’s an example of a customized shop embed.

<a href=”https://mkt.com/menu-embed-test-coffee-shop”
data-menu-item-images=”small”
data-menu-accent-color=”ff5324″
data-menu-template=”column”
data-menu-border=”hide”
data-menu-item-descriptions=”show”
class=”sq-embed-menu”>Order Online</a>
<script src=”https://cdn.sq-api.com/market/embed.js” charset=”utf-8″></script>

For a more in-depth read on Square embeds, check out the Article by their engineering team on Medium.

Square + WordPress FAQs