The Product Block displays a product from a Products Page on a Regular Page or blog post with an optional Add to Cart button. This is an alternate way to display products from your store, letting you promote them on a homepage or create a customized layout different than your template's Products Pages.
Note: To learn about the differences between a Product Block and a Products Page, visit Products Pages vs. Product Blocks.
Before you begin
- To use a Product Block, you need a Products Page containing the product you want to display.
- The Products Page containing the product must be enabled. If you disable it, the product won’t appear in shopping carts when added via the Product Block.
- The product must be published and visible.
- The Product Block displays one product. To display multiple products, add multiple Product Blocks or a Summary Block.
- If you're using Product Blocks to arrange your store instead of Products Pages, you can hide your Products Pages by moving them to the Not Linked section of the Pages panel. This removes the Products Page from navigation menus, while keeping them enabled.
Step 1 - Add the Product Block
- Open a page or post editor.
- Click an Insert Point or the +.
- Select Product from the menu.
- For more detailed steps, visit Adding blocks.
Step 2 - Choose a product to display
In the Find A Product search bar, search for the product to display in the block, and click it in the search results to add it.
The search scans product:
- Text Blocks in the product's Additional Information
Tip: The search displays up to 15 matches. If your products have similar names, search by the exact title.
Step 3 - Add product details
Use the checkboxes to customize which details display in the Product Block. These details are pulled from the Item and Options tabs in the Product Editor. Double-click a product on its Products Page to open this editor.
- Check Show Image to display the product's thumbnail image.
- Check Show Title to display the product's title.
- Check Show Price to display the product's price.
- Check Show Description to display the description of the product.
- Check Show Add to Cart Button to display an Add to Cart button.
Step 4 - Save
Click Apply to publish your changes.
Repeat these steps to add multiple Product Blocks to a Regular Page or blog post. Product Blocks work well in combination with other blocks on a page, letting you create layouts beyond the Products Page.
Step 5 - Style the Add to Cart button (optional)
You can customize the design and text of the Product Block's Add to Cart button.
Edit the button design
- Open a page containing a Product Block.
- In the Home Menu, click Design, and then click Style Editor.
- Scroll down to the style tweaks for buttons.
To learn more, visit Styling buttons.
Change the 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.
- Go to the Products Page containing the product displayed in your Product Block.
- Double-click the product to open the Product Editor.
- In the Options tab, enter new button text.
What's the difference between Products Pages and Product Blocks?
Product Blocks display individual products from existing Products Pages, while Products Pages hold collections of multiple products in template-specific layouts. To learn more, visit Products Pages vs. Product Blocks.
Can I display multiple products in a Product Block?
No. A Product Block only displays a single product. However, you can add multiple products to a page by adding multiple Product Blocks.
You can also display a collection of products in a magazine-style layout using a Summary Block.
Can I change the size of a Product Block?
Yes. When you first add the block, it will occupy the full width of the content area if there are no other blocks next to it. For help resizing and arranging Product Blocks, visit Resizing blocks and Creating columns and rows with blocks.
My Product Block displays the wrong image.
The Product Block displays the product's thumbnail image. This image may be different than the first image set in the Item tab of 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 Products Page might be disabled. Products from disabled Products Pages can display in the Product Block, but can't be added to carts. To resolve this issue, enable the Products Page.
How do I change the font?
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.
- Other item details - Follow the body text font and color.
There are a few exceptions. This list groups templates by family:
|Bedford, Anya, Bryant, Hayden||Title color - Follows body text|
|Brine, Aria, Basil, Burke, Cacao, Clay, Ethan, Fairfield, Feed, Foster, Greenwich, Hatch, Heights, Hunter, Hyde, Jaunt, Juke, Keene, Lincoln, Maple, Margot, Marta, Mentor, Mercer, Miller, Mojave, Moksha, Motto, Nueva, Polaris, Rally, Rover, Sofia, Sonny, Sonora, Thorne, Wav, West||Title color - Follows body text|
|Farro, Haute||Title color - Follows body text|
|Skye, Foundry, Indigo, Ready, Tudor||
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|
Note: To change the text that displays, go to your Products Page and adjust the item directly.