Nota: Si bien hemos traducido las guías más populares al español, algunas guías están disponibles solamente en inglés.

Bloques de producto

Use Product Blocks to display products from a Products Page on a Layout Page or blog post with an optional Add to Cart button. With Product Blocks, you can promote items from your store across your site. You can add multiple Product Blocks to create a layout that looks different than your site's Products Page.

Tip: To learn about the differences between Product Blocks and Products Pages, visit Products Pages vs. Product Blocks.

Antes de comenzar

  • To use Product Blocks, 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 Product Blocks.
  • The product must be published and visible.

Add the Product Block

Para añadir un bloque de producto:

  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 Find A Product search bar, 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. Customize what product details display using the checkboxes.
  4. Click Apply to save your changes.

Add product details

Use the checkboxes in the block editor to customize which product details display. These details are pulled from the Item and Options tabs in the product 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.

To change any of these details, edit the product.

Style the Add to Cart button

You can customize the design and text of the Product Block's Add to Cart button.

Cambiar el texto del botón

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

Edit the button design

  1. Open a page containing a Product Block.
  2. En el Menú de Inicio, haz clic en Diseño y, luego, en Estilos del sitio.
  3. Scroll down to the style tweaks for buttons.

To learn more, visit Styling buttons.

Product Block search tips

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

  • Títulos
  • 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.

Preguntas frecuentes

Can I display multiple products in a Product Block?

No. Product Blocks display one product at a time. However, you can add multiple Product Blocks to a page. You can also display a collection of products using Summary Blocks.

If I use Product Blocks, can I hide my Products Pages?

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

Can I change the size or shape of Product Blocks?

Sí. Cuando agregues el bloque por primera vez, llenará el ancho completo del área de contenido si no hay otros bloques al lado. Para obtener ayuda sobre cómo cambiar el tamaño de los bloques, visita Cómo cambiar el tamaño de bloques y Cómo mover bloques para personalizar los diseños.

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.

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 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 Product Blocks, but can't be added to carts. To resolve this issue, enable the Products Page.

How do I change the text and font?

To change the text that displays, go to your Products Page and edit the item information.

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

  • Título: sigue la fuente del cuerpo del texto, pero ligeramente más grande. El color sigue el del vínculo del cuerpo.
  • 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:

Familia de plantillas 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
¿Fue útil este artículo?
Usuarios a los que les pareció útil: 39 de 122