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 Dashboard 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. |
| 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. |
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 |
|---|---|
| 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. |
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 Dashboard 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.