Product Grid

Qué hace esta sección

Display products in a grid layout with filtering and sorting

Dónde se coloca

• Puedes usarla tantas veces como quieras en una página.
• Esta sección está en todos los planes: no necesita ningún complemento.

Estilos

Distintos aspectos para la misma sección. Puedes cambiar el estilo más tarde; tu contenido se mantiene.

Los primeros 2 estilos de cada sección están abiertos en todas las tiendas. El resto se desbloquea con el complemento Editor de páginas, todos a la vez.

• Default

  Gratisdefault

  Standard grid layout

  Propios de este estilo: title, subtitle, selectionMode, filterByCategory, selectedProductIds, searchQuery, displayCount, sortBy, columns, titleAlignment, showQuickView, showCompare, showSecondImageOnHover, hoverImageAnimation, hoverImageAnimationDuration, showArBadge, showAddToCart, showPrice, showDiscountBadge, showVariantName, showCategory, showRating, showStock, showPagination, showPromoBand, promoBandText, orderNowText, showTagChips, cardVariant, imageAspectRatio, equalHeight, cardBg, cardTitleColor, cardPriceColor, cardDiscountPriceColor, cardOriginalPriceColor, cardCategoryColor, cardVariantColor, cardStockColor, cardBadgeBg, cardBadgeTextColor, cardButtonBg, cardButtonTextColor, menuPanelBg, promoBandBg, cardTitleFont, cardTitleWeight, cardPriceFont, cardPriceWeight, cardCategoryFont, cardCategoryWeight, cardVariantFont, cardVariantWeight, cardStockFont, cardStockWeight, buttons

• Compact

  Gratiscompact

  Smaller cards, more products visible

  Propios de este estilo: title, subtitle, selectionMode, filterByCategory, selectedProductIds, searchQuery, displayCount, sortBy, titleAlignment, showQuickView, showCompare, showSecondImageOnHover, hoverImageAnimation, hoverImageAnimationDuration, showArBadge, showAddToCart, showPrice, showDiscountBadge, showVariantName, showCategory, showRating, showStock, showPagination, showPromoBand, promoBandText, orderNowText, showTagChips, cardVariant, equalHeight, cardBg, cardTitleColor, cardPriceColor, cardDiscountPriceColor, cardOriginalPriceColor, cardCategoryColor, cardVariantColor, cardStockColor, cardBadgeBg, cardBadgeTextColor, cardButtonBg, cardButtonTextColor, menuPanelBg, promoBandBg, cardTitleFont, cardTitleWeight, cardPriceFont, cardPriceWeight, cardCategoryFont, cardCategoryWeight, cardVariantFont, cardVariantWeight, cardStockFont, cardStockWeight, buttons

• Featured + Grid

  Editor de páginasfeatured

  Larger cards with more details

  Propios de este estilo: title, subtitle, selectionMode, filterByCategory, selectedProductIds, searchQuery, displayCount, sortBy, titleAlignment, showQuickView, showCompare, showSecondImageOnHover, hoverImageAnimation, hoverImageAnimationDuration, showArBadge, showAddToCart, showPrice, showDiscountBadge, showVariantName, showCategory, showRating, showStock, showPagination, showPromoBand, promoBandText, orderNowText, showTagChips, cardVariant, equalHeight, cardBg, cardTitleColor, cardPriceColor, cardDiscountPriceColor, cardOriginalPriceColor, cardCategoryColor, cardVariantColor, cardStockColor, cardBadgeBg, cardBadgeTextColor, cardButtonBg, cardButtonTextColor, menuPanelBg, promoBandBg, cardTitleFont, cardTitleWeight, cardPriceFont, cardPriceWeight, cardCategoryFont, cardCategoryWeight, cardVariantFont, cardVariantWeight, cardStockFont, cardStockWeight, buttons

• Minimal

  Editor de páginasminimal

  Clean, minimal product cards

  Propios de este estilo: title, subtitle, selectionMode, filterByCategory, selectedProductIds, searchQuery, displayCount, sortBy, columns, titleAlignment, showQuickView, showCompare, showSecondImageOnHover, hoverImageAnimation, hoverImageAnimationDuration, showArBadge, showAddToCart, showPrice, showDiscountBadge, showVariantName, showCategory, showRating, showStock, showPagination, showPromoBand, promoBandText, orderNowText, showTagChips, cardVariant, imageAspectRatio, equalHeight, cardBg, cardTitleColor, cardPriceColor, cardDiscountPriceColor, cardOriginalPriceColor, cardCategoryColor, cardVariantColor, cardStockColor, cardBadgeBg, cardBadgeTextColor, cardButtonBg, cardButtonTextColor, menuPanelBg, promoBandBg, cardTitleFont, cardTitleWeight, cardPriceFont, cardPriceWeight, cardCategoryFont, cardCategoryWeight, cardVariantFont, cardVariantWeight, cardStockFont, cardStockWeight, buttons

• Carousel

  Editor de páginascarousel

  Horizontal scrolling carousel

  Propios de este estilo: title, subtitle, selectionMode, filterByCategory, selectedProductIds, searchQuery, displayCount, sortBy, titleAlignment, showQuickView, showCompare, showSecondImageOnHover, hoverImageAnimation, hoverImageAnimationDuration, showArBadge, showAddToCart, showPrice, showDiscountBadge, showVariantName, showCategory, showRating, showStock, showPagination, showPromoBand, promoBandText, orderNowText, showTagChips, cardVariant, imageAspectRatio, equalHeight, cardBg, cardTitleColor, cardPriceColor, cardDiscountPriceColor, cardOriginalPriceColor, cardCategoryColor, cardVariantColor, cardStockColor, cardBadgeBg, cardBadgeTextColor, cardButtonBg, cardButtonTextColor, menuPanelBg, promoBandBg, cardTitleFont, cardTitleWeight, cardPriceFont, cardPriceWeight, cardCategoryFont, cardCategoryWeight, cardVariantFont, cardVariantWeight, cardStockFont, cardStockWeight, buttons

• Tabbed Carousel

  Editor de páginastabbed-carousel

  Tabbed product carousel with New Arrivals, Featured, and On Sale tabs

  Propios de este estilo: badge, title, subtitle, titleAlignment, tabs, showQuickView, showCompare, showSecondImageOnHover, hoverImageAnimation, hoverImageAnimationDuration, showArBadge, showAddToCart, showPrice, showDiscountBadge, showVariantName, showCategory, showRating, showStock, showPagination, showPromoBand, promoBandText, orderNowText, showTagChips, cardVariant, imageAspectRatio, equalHeight, cardBg, cardTitleColor, cardPriceColor, cardDiscountPriceColor, cardOriginalPriceColor, cardCategoryColor, cardVariantColor, cardStockColor, cardBadgeBg, cardBadgeTextColor, cardButtonBg, cardButtonTextColor, menuPanelBg, promoBandBg, cardTitleFont, cardTitleWeight, cardPriceFont, cardPriceWeight, cardCategoryFont, cardCategoryWeight, cardVariantFont, cardVariantWeight, cardStockFont, cardStockWeight

• Tabbed Grid

  Editor de páginastabbed-grid

  Category tabs that switch a full product grid. Perfect for sports stores that filter by product type.

  Propios de este estilo: badge, title, subtitle, columns, titleAlignment, tabs, showQuickView, showCompare, showSecondImageOnHover, hoverImageAnimation, hoverImageAnimationDuration, showArBadge, showAddToCart, showPrice, showDiscountBadge, showVariantName, showCategory, showRating, showStock, showPagination, showPromoBand, promoBandText, orderNowText, showTagChips, cardVariant, imageAspectRatio, equalHeight, cardBg, cardTitleColor, cardPriceColor, cardDiscountPriceColor, cardOriginalPriceColor, cardCategoryColor, cardVariantColor, cardStockColor, cardBadgeBg, cardBadgeTextColor, cardButtonBg, cardButtonTextColor, menuPanelBg, promoBandBg, cardTitleFont, cardTitleWeight, cardPriceFont, cardPriceWeight, cardCategoryFont, cardCategoryWeight, cardVariantFont, cardVariantWeight, cardStockFont, cardStockWeight

• Concept Tabs

  Editor de páginasconcept-tabs

  Tabbed product carousel in the premium "Concept" design language — pill category tabs, a heading with circular arrows, and edge-bleed cards on a soft surface.

  Propios de este estilo: eyebrow, title, subtitle, titleAlignment, tabs, showPrice, showVariantName, imageAspectRatio, hoverImageAnimation, hoverImageAnimationDuration

• Bento Feature

  Editor de páginasbento-feature

  First product as a large 2×2 hero tile, the rest fill a rotating bento wall

  Propios de este estilo: title, subtitle, selectionMode, filterByCategory, selectedProductIds, searchQuery, displayCount, sortBy, titleAlignment, showPrice, showAddToCart, showCategory, hoverImageAnimation, hoverImageAnimationDuration

• Magazine Mosaic

  Editor de páginasmagazine-mosaic

  Product-bound editorial mosaic — real product photos on a 12-column mixed-size span collage with name/price and badges

  Propios de este estilo: eyebrow, title, subtitle, selectionMode, filterByCategory, selectedProductIds, searchQuery, displayCount, sortBy, titleAlignment, spanPattern, rowHeight, captionStyle, showPrice, showBadges, cardVariant, hoverImageAnimation, hoverImageAnimationDuration

• Focus Carousel

  Editor de páginasfocus-carousel

  Center-focused coverflow rail — the middle card scales up and reveals quick-add

  Propios de este estilo: title, subtitle, selectionMode, filterByCategory, selectedProductIds, searchQuery, displayCount, sortBy, titleAlignment, showPrice, showAddToCart, showCategory, hoverImageAnimation, hoverImageAnimationDuration

Ajustes

Los campos que aparecen en el panel Ajustes de sección, a la derecha, al seleccionar esta sección.

Comunes a todos los estilos

• bg
• contentMaxWidth
• sectionMaxWidth
• horizontalPadding
• verticalPadding
• verticalAlignment
• horizontalAlignment
• horizontalMargin
• verticalMargin
• spacingOverrides
• animationType
• animationDuration
• animationDelay
• animationEasing
• animationStagger
• animationRepeat
• animationParallax
• imageParallax
• animationScrollEffect
• height