Note: While our most popular guides have been translated into Spanish, some guides are only available in English.

Product blocks

A product block displays an item from your site's store on other pages or posts. It's a great way to promote products across your site, or to create a layout different than your store's built-in landing page.

Tip: To learn about the differences between store pages and product blocks, visit store pages vs. product blocks

Before you begin

  • To use product blocks, you need a store page containing the product you want to display.
  • The store page containing the product must be enabled. If you disable it, the product won’t appear in shopping carts when added via product blocks.
  • The product must be published and visible.

Add the product block

To add a product block:

  1. Edit a page or post, click an insert point, and select Product from the menu. For help, visit Adding content with blocks.
  2. In the Add A Product field, search for the product you want to display. Click it in the search results to add it. The search displays up to 15 products.
  3. To go to your inventory and make changes to products, click Edit Products, then click Save and Continue. Keep in mind, this closes the current page.
  4. Click the Design tab to customize what product details display.
Tip: Product blocks display one product at a time. To display more than one product on a page, use multiple product blocks, or display a collection of products using summary blocks.

Promote gated products

If you have a subscription to Member Areas and you set up an online store in one of your member areas, site visitors will need to sign up for a membership before they can purchase products from that gated store. To allow non-members to purchase these products, add product blocks on your main site and use the Add A Product search bar to select products from your gated store.

Add product details

To customize the product block, click the Design tab. Here, you can set the block's alignment to left, center, or right. You can also customize which product details to display by switching the toggles on or off:

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

To change any of these details, edit the product.

Style the product block

You can style the product block and customize the Add to Cart button.

Button text

By default, the text for the product block's button is Add to Cart. You can change this text to something else, like Buy Now.

  1. Open the store page containing the product displayed in your product block.
  2. Double-click the product to open the product editor.
  3. In the options tab, enter new button text.

Button design

The way to change the button design depends on your site's version.

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

To learn more, visit Styling buttons.

  1. Open a page containing a product block.
  2. In the Home menu, click Design, then click Site styles.
  3. Scroll down to the style tweaks for buttons.

To learn more, visit Styling buttons.

Product block text and font

How you style the product block title, price, and description depends on your site's version

To change the text that displays, go to your store page and edit the product information.

Change the font, text color, and text size in site styles

  • Font - Follows Paragraphs
  • Color - Follows Paragraph (Medium)
  • Size - Follows Paragraph 2

The title always appears slightly larger.

To change the text that displays, go to your store page and edit the product information.

The product details fonts take their style from other text styles on your site. In most templates:

  • Title - Follows the body text font, but slightly larger. The color follows the body link color.
  • Pricing - Follows the body text font and color, but slightly larger.
  • Description - Follows the body text font and color.

There are some exceptions. In these template families:

Template family Notes

Bedford

  • Title color - Follows body text

Brine

  • Title color - Follows body text

Farro

  • Title color - Follows body text

Skye

  • Title font - List Title (adjust while on a blog page)
  • Description font - Excerpt
  • Title color - Title Color
  • Description Color - Excerpt Color
Supply
  • Price font - no style options
  • Description - Fixed weight

Product block size and shape

When you first add the block, it will fill the full width of the content area if there are no other blocks next to it. For help resizing blocks, visit Resizing blocks and Moving blocks to customize layouts.

For the shape of the block, the aspect ratio of product blocks matches the original aspect ratio of the product's thumbnail image. To ensure a product block has a specific aspect ratio, crop the image before uploading it to the product editor, or use the image editor in the product editor.

Product block search tips

When searching for a product to display in the block, the search results are based on the following information:

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

The search displays up to 15 matches. If your products have similar names, search by the exact title. New products may not display immediately in search.

Customize your online store

While you must use a store page to add products to your site, you can use product blocks to create a custom online store layout on a different page. After you create and customize your store, you can hide the store page by moving it to the Not linked section of the pages panel. This removes the store page from navigation menus while keeping it enabled.

Troubleshooting

My product block displays the wrong image

Product blocks display the product's thumbnail image. This image may be different than the first image set in the product editor. To change the image in the product block, change the product's thumbnail image.

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

If clicking a product block's Add to Cart button doesn't add the product to the shopping cart, the linked store page might be disabled. Products from disabled store pages can display in product blocks, but can't be added to carts. To resolve this issue, enable the store page.

Was this article helpful?
53 out of 172 found this helpful