This site contains examples for embedding Square Market items in your own website. Please refer to the README for full documentation.
An embedded item can be between 200px and 558px wide, depending on the size of its container.
If its container is static (i.e. has a fixed width) and smaller is than 558px wide, the item will take up the entire width of the container. If the container is fluid (i.e. has a percentage width), the item will contract/expand with the size of the container. The embedded item appears centered in a container wider than 558px. Resize the window to see how it affects the examples below.
Example: The embedded item is in a fixed-size container with max-width: 200px.
Example: The embedded item is in a fixed-size container with max-width: 180px. Because the container is smaller than the minimum width, the item remains 200px wide.
Example: The embedded item is in a fixed-size container with max-width: 558px. It resizes based on this layout's responsive breakpoints.
You might want to embed more than one item at a time; say, in a list or gallery. The item styling should be flexible enough to support any orientation you choose. See below for a few common examples or jump straight to the Masonry test.
Example: The embedded items are in a responsive list. They will automatically adjust to the dimensions of their container.
If the script portion of the embed code is present on the page, any link to Square Market with the class sq-item-embed will be replaced with an embedded item. To reduce unnecessary duplication, you may only want to include the script tag once, but it won't slow down your page if you include it more than once.
As an alternative to using the embed script as-is, you can include the script tag using appendChild so that it doesn't block page rendering:
<script>
(function(d, id, src) {
var s = d.getElementById(id);
if (!s) {
s = d.createElement('script');
s.id = id;
s.src = src;
d.head.appendChild(s);
}
})(document, "sq-embed-js", "https://d2dyi2pd86a6cw.cloudfront.net/market/embed.js");
</script>
You may see the original link tags render for a moment before the script loads.