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
  • Block settings

Was this helpful?

Edit on GitHub
  1. Sections

Image comparison

Section overview

The image comparison section showcases before/after images with an interactive slider that allows customers to compare differences between two images.

Common use cases

  • Demonstrating product transformations or results

  • Showcasing renovation or restoration projects

  • Displaying different versions or states of a product

  • Highlighting effects of treatments, services, or product usage

Usage tips

  • Use high-quality images with the same dimensions for best results

  • Choose images that have a clear visual difference to make the comparison meaningful

  • Consider adding descriptive labels for each image to clarify what viewers are seeing

  • For mobile responsiveness, ensure the comparison is still effective on smaller screens

Section settings

Setting
Description

Before image

The image to display in the "before" state

Before label

Text label for the "before" image (default: "Before")

After image

The image to display in the "after" state

After label

Text label for the "after" image (default: "After")

Heading

Section title that appears above the comparison

Content

Rich text description to provide context for the comparison

Button label

Text to display on the optional call-to-action button

Button url

Destination URL when the button is clicked

Top spacing

Amount of space above the section (0-300px)

Bottom spacing

Amount of space below the section (0-300px)

Color scheme

Background and text color combination for the section

Border color

Color style for section borders

Button color

Style and color variant for the call-to-action button

Border position

Where borders appear around the section (none, top, bottom, or both)

Aspect ratio

Proportional relationship between width and height (1:1, 16:9, or 4:3)

Text alignment

Horizontal alignment of text content (left, center, or right)

Enable margin

Toggle horizontal margin on or off

Enable split

Toggle layout between stacked and side-by-side arrangement

Visibility

Control which device types can view the section (all, mobile only, or desktop only)

Block settings

This section does not contain any blocks.

Last updated 26 days ago

Was this helpful?