Shopify Blocks
If your site is connected to a Shopify store, two blocks let you feature your store’s merchandise directly inside posts and pages: the Shopify Product block, which showcases a single product, and the Shopify Collection block, which showcases a group of products. Both pull their content — image, title, and price — straight from your Shopify catalog, so you don’t re-type product details by hand. Prices and availability stay in sync with your store automatically.
Readers who click through are sent to your Shopify storefront — either to the product page or, optionally, straight to a pre-filled cart.
Connecting your store
The Shopify blocks appear once your store is connected, and you can set this up yourself — no need to contact support. Open the Shopify tab in your Publisher App settings and fill in:
- Storefront API token — the Storefront API access token from your Shopify store.
- Store hostname — your store’s address, for example
your-store.myshopify.com. Do not includehttp://orhttps://— just the hostname. - Store URL (optional) — the public storefront address readers are sent to when they click through. Leave it blank to default to your store hostname; set it only if your shop lives at a different public address (such as a custom domain).
Save your settings, and the Shopify Product and Shopify Collection blocks become available in the editor.
The Shopify Product block
Use this block to spotlight one item — a featured release, a recommended product in a review, or a single piece of merch tied to a story.
Adding a product
- In the editor, click the + button to add a new block.
- Search for Shopify Product and select it.
- Start typing a product name in the search field. Matching products from your store appear in a dropdown.
- Select the product. The block fills in its image, title, and price automatically.
- Adjust layout, button, and styling in the block settings panel on the right (optional).
Product settings
| Setting | What it does |
|---|---|
| Product | The item to feature. Search by name and select; you can swap it at any time. |
| Product source | Choose a specific product yourself, or let the block match the article automatically. See Matching products to the article automatically. |
| Layout | Choose Horizontal (image beside the text) or Vertical (image stacked above the text). Horizontal suits inline mentions; vertical reads like a card. |
| Call to action | Pick what the button does — send readers to the product page, or take them straight to a pre-filled cart (add to cart) on your storefront. |
| Button text | Optional override for the button label (for example, “Shop now” or “Get yours”). Leave blank to use the default. |
| Sort by | Only shown in automatic mode. When more than one product matches the article, pick whether the Best selling or the Newest one wins. |
The Shopify Collection block
Use this block to feature a group of products — a seasonal line, a category, or a curated set you’ve built as a collection in Shopify. It can display either the collection’s cover image or the individual products inside it.
Adding a collection
- In the editor, click the + button to add a new block.
- Search for Shopify Collection and select it.
- Search for and select a collection from your store.
- Choose a display mode and adjust the settings in the panel on the right.
Collection settings
| Setting | What it does |
|---|---|
| Collection source | Choose a specific collection yourself, or let the block match the article automatically and build a grid from whatever fits. See Matching products to the article automatically. |
| Display mode | Show the collection’s single cover image (a clean, link-through promo), or show the individual products inside it as a grid of cards. |
| Number of items | How many products to show when displaying individual items (default 4). Only applies in the individual-products mode. |
| Columns | How many products sit across one row on desktop (default 3). On mobile, items stack into a single column automatically. |
| Sort by | Order the products by Best selling or Newest. Ordering is pulled live from Shopify, so a best-selling grid keeps itself current. |
| Show collection header | Toggle the collection title above the products on or off. |
| Call to action / Button text | Same options as the Product block, applied to each product card — link to the product page or to a pre-filled cart, with an optional custom label. |
Matching products to the article automatically
Both Shopify blocks can pick their own merchandise. Instead of choosing a product or collection by hand, set the block’s source to Auto (match the article) and it finds something that fits the story it sits in — each time the page loads, so the same block in an evergreen post keeps up as your catalog changes.
This is worth reaching for when you insert the same block into a template or a recurring format — an artist profile, a review, a recap — and don’t want to pick merchandise post by post.
How the match is found
The block works through three steps and stops at the first one that finds something:
- Shopify product tags. The article’s URL slug and each of its tags are matched against your products’ Shopify tags. An
artist-prefix on the Shopify side is matched too, so a post at/gregg-allman/finds products tagged eithergregg-allmanorartist-gregg-allman. - Product titles. If no tag matches, the block looks for the article’s URL slug in your product titles — so
/gregg-allman/finds “Gregg Allman Tour Poster” even with nothing tagged. Only the URL slug is searched here, not the article’s tags, so a broad tag like “music” can’t pull in unrelated merchandise. - Top products from your store. The last resort when nothing matches. A Collection block always falls back this way rather than leaving a hole in the page. A Product block only does so if you switch If no product matches to show a store-wide product; left on Show nothing, it renders nothing at all and the rest of the post closes up around it.
Tagging your Shopify products to match how you tag articles is what makes step 1 land, and step 1 gives the most relevant results. The title search is a safety net for products you haven’t tagged yet — not a replacement for tagging.
Choosing which match wins
When several products match, Sort by decides the order — Best selling or Newest. It applies at every step, including the store-wide fallback: with Newest selected, a Product block that finds no match shows your newest product rather than your best seller.
Automatic blocks resolve once per page, so several auto blocks in one post all land on the same product or the same grid. To show different merchandise in one post, choose the products by hand.
An automatic Collection grid has no heading unless you set a Custom title — there’s no Shopify collection behind it to take a name from, and repeating the article’s own title above the grid reads oddly.
Styling
Both blocks share a Styling panel in the block settings. By design, every option draws from your site’s existing brand styles, so the blocks always match the rest of your site. You’re choosing from your theme’s fonts, sizes, spacing, and colors rather than picking arbitrary values — there’s no way to set an off-brand color or font here.
Every control defaults to blank, which means “use the brand default.” You only need to touch these when you want a specific block to look different from the standard.
| Control | What it does |
|---|---|
| Title font / Title size | The font family and size used for the product name. |
| Price font / Price size | The font family and size used for the price. |
| Button font / Button size | The font family and size used for the call-to-action button. |
| Button background / Button text color | The button colors, chosen from your theme’s color palette. |
| Show border | Turn the card’s outline on or off. |
| Drop shadow | Add a subtle shadow to lift the card off the page. |
| Padding | The space inside the card, around its contents. |
| Gap between items | The space between product cards in a Collection grid (Collection block only). |
How prices and availability stay in sync
Unlike a manually entered product card, the Shopify blocks keep themselves current. When the page loads, the blocks check your Shopify store for the latest price and stock status, so what readers see matches your storefront. This refresh is cached for a few minutes, so changes you make in Shopify appear on the site shortly after — not necessarily the very instant you save.
When a product sells out, the block shows a Sold out label and the button stops offering “add to cart” — instead it simply links to the product page. You don’t have to edit the post; out-of-stock items are handled for you.
Common questions
I don’t see the Shopify blocks in the editor. Make sure your store is connected: open the Shopify tab in your Publisher App settings and confirm your Storefront API token and store hostname are filled in. A common mistake is including http:// or https:// in the store hostname — remove it so the field holds just the hostname (for example your-store.myshopify.com).
Do I need to set a Store URL? Only if your public storefront lives somewhere other than your store hostname. Leave it blank and readers are sent to your store hostname by default; set it to a custom domain if your shop is published there.
Do I need to update prices by hand? No. Prices and stock status are pulled from Shopify automatically and refresh on their own. The price captured when you inserted the block is only a fallback for the brief moment before the live value loads.
What happens when something goes out of stock? The block automatically shows a “Sold out” label and the button changes to a plain link to the product page. No edit needed.
Can the button add an item straight to the cart? Yes. Set the call to action to the cart option, and the button sends readers to your storefront with the item already in their cart.
What’s the difference between the cover image and individual products in a Collection? Cover image shows the single image you’ve set on the collection in Shopify — a clean, magazine-style promo that links to the full collection. Individual products shows a grid of the actual items, each with its own image, price, and button.
Will the blocks match my site’s design? Yes. They use your site’s existing fonts, colors, and spacing by default. The Styling panel only lets you choose from your established brand styles, so the blocks can’t look off-brand.
Can I show more than one product without a collection? Yes — add multiple Shopify Product blocks, or use a Shopify Collection block in individual-products mode if the items already live in a Shopify collection.
Can a block pick its own product? Yes. Set the block’s source to Auto (match the article) and it matches your Shopify products against the article — by tag first, then by product title. See Matching products to the article automatically.
My automatic block is showing something unrelated. It fell through to the store-wide fallback because nothing matched the article. Tag the product in Shopify with the article’s tag or URL slug, or rename it so the slug appears in its title. On a Product block you can also set If no product matches to Show nothing, and the block disappears instead of showing a mismatch.