Brickspace Lab
Contact usContact ShopifyTry a theme
Paper
Paper
  • Paper documentation
  • Getting started
    • Theme colors
    • Theme typography
  • Guides
    • Color and option swatches
  • Using device specific visibility
  • Dynamic discount popups
  • Adding product subtitles
  • Adding product badges
  • Replacing “Add to cart” for a product
  • Disabling "quick-add" for a product
  • Fixed buy buttons
  • Disabling default ratings when using a third party app
  • Migrateing custom changes
  • Different ways to display option blocks
  • Creating a Mapbox API key
  • Templates
    • Collection template
  • Product template
    • Dynamic variant images
    • Gift cards
    • Quantity picker
    • Subscription options
    • Sibling products
    • Bundled products
    • Custom fields
    • Content drawers
  • Blog template
  • Sections
  • Sections
    • Featured product
    • Slideshow
    • Email sign-up
    • Video
    • Alternative banner
    • Alternative collection grid
    • Banner
    • Blog posts grid
    • Collage
    • Collapsible content
    • Collection list grid
    • Collection list slider
    • Comparison table
    • Contact form
    • Countdown
    • Custom liquid
    • Discount banner
    • Featured collection grid
    • Featured collection slider
    • Icon grid
    • Image comparison
    • Image hotspot
    • Logo list
    • Navigation slider
    • Recently viewed
    • Rich text
    • Slider
    • Store locator
    • Testimonials
    • Cart drawer
    • Header
  • General
    • Changelog
      • v8.0.1
      • v8.0.0
      • v7.6.2
      • v7.6.1
      • v7.6.0
      • v7.5.0
      • v7.4.0
      • v7.3.0
      • v7.2.1
      • v7.2.0
      • v7.1.2
      • v7.1.1
      • v7.1.0
      • v7.0.0
      • v6.2.0
      • v6.1.7
      • v6.1.6
      • v6.1.5
      • v6.1.4
      • v6.1.3
      • v6.1.2
      • v6.1.1
      • v6.1.0
      • v6.0.1
      • v6.0.0
      • v5.2.0
      • v5.1.0
      • v5.0.1
      • v5.0.0
      • v4.1.1
      • v4.1.0
      • v4.0.0
      • v3.0.2
      • v3.0.1
      • v3.0.0
      • v2.0.0
      • v1.2.2
      • v1.2.1
      • v1.2.0
      • v1.0.0
    • Known issues and troubleshooting
      • v8.0.1
    • Cloning a demo theme
      • Poster
      • Parts
      • Pastel
      • Page 3
      • Page 4
Powered by GitBook
On this page
  • Section overview
  • Section settings

Was this helpful?

Edit on GitHub
  1. Sections

Alternative collection grid

Section overview

The Product Featured section displays a grid of highlighted products from a collection, each showcasing multiple product images in an attractive layout.

Common use cases

  • Featured collections showcase on homepage

  • Highlighting products with rich imagery (products with multiple photos)

  • Creating visually appealing product displays that draw attention

  • Promotional sections highlighting seasonal or special products

Usage tips

  • Best practices:

    • Ensure selected products have at least 4 product photos for optimal display

    • Use this section for products with high-quality images to maximize visual impact

    • Add a compelling heading and description to provide context

    • Include a call-to-action button to direct customers to the full collection

  • Common pitfalls:

    • Using products with fewer than 4 images will result in duplicated images in the grid

    • Overcrowding the page with too many products (3-4 products is usually optimal)

    • Not customizing the heading and content to match your promotional intent

  • Mobile responsiveness:

    • Configure appropriate row size settings for mobile displays

    • Consider using a single column layout on mobile for better product visibility

    • Test how the multi-image layout appears on smaller screens

Section settings

Setting
Description

Products

Header section for product-related settings

Collection

Select the collection to feature products from

Total items

Set the number of products to display (default: 3)

Content

Header section for content-related settings

Heading

Add a title for the section

Content

Add descriptive text for the section

Button label

Add text for the call-to-action button

Button URL

Set the destination URL for the button

Spacing

Header section for spacing settings

Top spacing

Adjust the padding above the section (0-300px)

Bottom spacing

Adjust the padding below the section (0-300px)

Color

Header section for color settings

Color scheme

Select the background and text color combination

Border color

Choose the color for section borders

Button color

Select the style and color for the button

Style

Header section for style settings

Border position

Choose where borders appear around the section

Layout

Header section for layout settings

Row desktop

Set the number of products per row on desktop (2-4)

Row mobile

Set the number of products per row on mobile (1-2)

X alignment

Set the horizontal alignment of section content

Display

Header section for display settings

Visibility

Control section visibility on different devices

Last updated 27 days ago

Was this helpful?