All Collections
WordPress eCommerce
Ecommerce Integrations
Integrating Square Market and WordPress for ecommerce on Shifter
Integrating Square Market and WordPress for ecommerce on Shifter

Using Square Market store and product embeds, add ecommerce solutions to your static WordPress sites

Tomohyco Tsunoda avatar
Written by Tomohyco Tsunoda
Updated over a week ago

Square Market is a excellent option to bring fully functional ecommerce 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 do Square Market embeds 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 the 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>

How to customize your embedded Square Online Square

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 indepth read on Square embeds, check out the Article by their engineering team on Medium.

Square + WordPress FAQs

Is there a plugin that does this?

As far as we can tell, there are a few that offer payment processing but they won't offer embeds.

Do you offer support for Square?

No, we are just fans. We can help you with links and advice but you'll need to talk to them regarding your account.

Did this answer your question?