Feature a product on any page with a product block

false

Feature a product on any page with a product block

Last updated October 13, 2026 15:42

Use a product block to display a product from your store on any page or post, and link customers straight to checkout.

A product block displays a single item from your store on another page or post. Use product blocks to promote products across your site, or to build a store layout that differs from your store page's built-in design.

Video: Adding and customizing product blocks (Version 7.1)

Watch this video for a walk through on adding a product block, choosing a product, and setting which details display on Version 7.1.

Add the product block

Each product block displays one product. To show several products on a page, add a product block for each one, or display a whole collection with a summary block.

To display a product on another page:

  1. Confirm the product is published and visible, and that the store page holding it is enabled.
  2. Add a block to a page or post, then click Product.
  3. Click the pencil icon on the block to open the block editor.
  4. In the Add A Product field, search for the product.
  5. Optional: to open your inventory and change a product, click Edit Products, then click Save and Continue. This closes the page you're editing.
  6. Switch the toggles on or off to choose which product details display.
  7. Click Design to set the shape of the product image.

If your products have similar names, search the exact title. A new product might not appear in the results right away.

The Add a product search field displays up to seven matches and looks through:

  • Categories
  • Descriptions
  • Tags
  • Text blocks in the product's additional information
  • Titles

Choose which product details display

In the product block's Content tab, you can customize which product details display by switching the toggles on or off:

  • Add to Cart Button - Displays an Add to Cart button and Quantity field
  • Description - Displays the description of the product
  • Image - Displays the product's featured image
  • Price - Displays the product's price
  • Product Quick View - Enables quick view
  • Title - Displays the product's title

To change any of these details, edit the product.

Set the product image shape

In the Design tab of the product block editor, click the dropdown menu under Image to choose a shape. Each shape crops the image differently, so try a few to find the one that suits your product photos.

You can also change the image's aspect ratio, its focal point, and the alignment of the block's content. Depending on the shape, you can round the corners individually or all at once with the corner radius.

To change the shape on a block you have already added, open the page, double-click the product block, click Design, then select a shape from the dropdown menu. For help with block size, visit resizing blocks on your page.

Style the Add to Cart button

Product block buttons follow your site-wide button styles, and how you reach those styles depends on which version your site is on.

To style the button in version 7.1:

  1. Open a page with a product block.
  2. Click Edit, open site styles, then click Buttons.

Product block buttons follow the Primary styling options. You can't customize button padding.

To style the button in version 7.0:

  1. Open a page with a product block.
  2. Return to the Website panel, click Design, then click Site styles.
  3. Scroll down to the button style tweaks.

To learn more, visit customizing your site's button styles.

Change the Add to Cart button text

The product block's button says Add to Cart by default. To change it to something else, like Buy Now:

  1. Open the store page holding the product.
  2. Double-click the product to open the product editor.
  3. In the Details tab, enter the new button text.

Style the product title, price, and description

To change what the text says, open your store page and edit the product information. How you change the font, color, and size depends on which version your site is on.

In version 7.1, change the font, text color, and text size in site styles. The product details follow these styles:

  • Color follows Paragraph (Medium)
  • Font follows Paragraphs
  • Size follows Paragraph 2
  • The title always displays slightly larger than the rest.

In version 7.0, the product details take their style from other text styles on your site. In most templates:

  • Description follows the body text font and color
  • Pricing follows the body text font and color, slightly larger
  • Title follows the body text font, slightly larger, with the body link color

Five template families work differently:

  • Bedford, Brine, and Farro: the title color follows body text.
  • Skye: the title font follows List Title, which you adjust while on a blog page, and the title color follows Title Color. The description font follows Excerpt and its color follows Excerpt Color.
  • Supply: the price has no style options, and the description has a fixed weight.

Style the sold out label

You can change the sold out text in the Product status panel on either version. How you style the label depends on which version your site is on.

In version 7.1, sold out labels always display as white text on a black rectangle, and the font follows your site-wide paragraph font.

In version 7.0, the label follows your site's Product: status badges style tweaks. You can't change where the label displays.

Style the quantity field

The quantity field displays beside the Add to Cart button when there's room. On narrower displays the two stack, with the quantity field on top. How you style the field depends on which version your site is on.

To style the quantity field in version 7.1:

  1. Click the paintbrush icon to open site styles.
  2. Click Forms.
  3. Use the Field Shape, Field Fill, Border, and Border Thickness tweaks.

In version 7.0, you can change the quantity field's font, which follows the Page Text Font under Main Content.

Can I sell products from my member sites to non-members?

Yes. You can use a product block to sell products from your gated site to non-members. If you set up an online store in a member site, visitors will need to sign up for a membership before they can purchase products from that store. To sell these products to non-members, add product blocks on your main site and use the Add a Product search bar to select products from your gated store.

Can I add subscription products to a product block?

Yes. If your subscription product also has a one-time purchase option, the block displays only that option, not a subscribe option. Switch on the Product Quick View toggle so your customers can choose between the two.

Do I have to have a store page to use a product block?

Yes, but you can hide your store page from visitors. Products need a store page to live on, but you don't have to send customers there. Build the layout you want on another page with product blocks, then move the store page to the Not linked section of the pages panel. The store page stays enabled and drops out of your navigation menus.

My product block displays the wrong image

Product blocks display the product's featured image, which can differ from the first image in the product editor. To fix this, change the product's featured image.

The product won't add to the cart from a product block

If clicking Add to Cart in a product block doesn't add the product to the cart, the linked store page is disabled. Products from a disabled store page still display in product blocks, but customers can't add them to a cart. To fix this issue, enable the store page.

Error: Something went wrong. Try again or refresh the page.

This error appears when you edit a product block that’s linked to a deleted store page. Product blocks pull their details from a store page, so you can't edit them on their own. To fix this issue, restore the deleted store page within 30 days of deleting it.

Was this article helpful?

Yes No

203 out of 523 found this helpful

Yes No

Feature a product on any page with a product block