Ürün Izgarası

Bu bölüm ne yapar

Filtreleme ve sıralama ile ızgara düzeninde ürünleri görüntüleyin

Nereye konulur

• Bir sayfada istediğiniz kadar kullanabilirsiniz.
• Bu bölüm her pakette vardır, ayrıca eklenti gerekmez.

Stiller

Aynı bölümün farklı görünümleri. Stili sonradan da değiştirebilirsiniz; içeriğiniz olduğu gibi kalır.

Her bölümün ilk 2 stili her mağazada açıktır. Sonrakiler Sayfa Düzenleyici eklentisiyle açılır — stil stil değil, hepsi birden.

• Varsayılan

  Ücretsizdefault

  Standart ızgara düzeni

  Bu stile özel: 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

• Kompakt

  Ücretsizcompact

  Daha küçük kartlar, daha fazla görünür ürün

  Bu stile özel: 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

• Öne Çıkan + Izgara

  Sayfa Düzenleyicifeatured

  Daha büyük kartlar ile daha fazla detay

  Bu stile özel: 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

  Sayfa Düzenleyiciminimal

  Temiz, minimal ürün kartları

  Bu stile özel: 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

• Karusel

  Sayfa Düzenleyicicarousel

  Yatay kaydırılabilir karusel

  Bu stile özel: 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

• Sekmeli Karusel

  Sayfa Düzenleyicitabbed-carousel

  Yeni Gelenler, Öne Çıkanlar ve İndirimli sekmeli ürün karuseli

  Bu stile özel: 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

• Sekmeli Izgara

  Sayfa Düzenleyicitabbed-grid

  Ürün ızgarasını değiştiren kategori sekmeleri. Spor mağazaları için ideal.

  Bu stile özel: 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 Sekmeler

  Sayfa Düzenleyiciconcept-tabs

  Premium "Concept" tasarım dilinde sekmeli ürün karuseli — hap kategori sekmeleri, dairesel oklu başlık, yumuşak yüzeyde kenara taşan kartlar.

  Bu stile özel: eyebrow, title, subtitle, titleAlignment, tabs, showPrice, showVariantName, imageAspectRatio, hoverImageAnimation, hoverImageAnimationDuration

• Bento Vitrin

  Sayfa Düzenleyicibento-feature

  İlk ürün büyük 2×2 kahraman karo, diğerleri dönüşen bento duvarını doldurur

  Bu stile özel: title, subtitle, selectionMode, filterByCategory, selectedProductIds, searchQuery, displayCount, sortBy, titleAlignment, showPrice, showAddToCart, showCategory, hoverImageAnimation, hoverImageAnimationDuration

• Dergi Mozaiği

  Sayfa Düzenleyicimagazine-mosaic

  Ürün bağlı editoryal mozaik — gerçek ürün fotoğrafları 12 sütunlu değişken boyutlu kolajda, isim/fiyat ve rozetle

  Bu stile özel: eyebrow, title, subtitle, selectionMode, filterByCategory, selectedProductIds, searchQuery, displayCount, sortBy, titleAlignment, spanPattern, rowHeight, captionStyle, showPrice, showBadges, cardVariant, hoverImageAnimation, hoverImageAnimationDuration

• Odak Karusel

  Sayfa Düzenleyicifocus-carousel

  Ortaya odaklı coverflow şeridi — ortadaki kart büyür ve hızlı ekleme gösterir

  Bu stile özel: title, subtitle, selectionMode, filterByCategory, selectedProductIds, searchQuery, displayCount, sortBy, titleAlignment, showPrice, showAddToCart, showCategory, hoverImageAnimation, hoverImageAnimationDuration

Ayarlar

Bir bölümü seçtiğinizde sağdaki Bölüm Ayarları panelinde görebileceğiniz alanlar.

Tüm stillerde ortak

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