Property Grid Block User Guide

Basic Settings

Section Padding

Controls the space around the entire block.

• Options: None, Small (space--sm), Medium (space--md), Large (space--lg)
• Usage: Choose based on how much breathing room you want around the grid. Medium is typically a good default.

Background

Sets the background color of the entire section.

• Options: None, Light Gray (bg-light), Dark (bg-dark), Primary Color (bg-primary)
• Usage: Light Gray works well for most designs, Dark creates more contrast, and Primary uses your brand color.

Margin Top/Bottom

Controls the vertical spacing before and after the block.

• Options: None, Small (mt-1/mb-1), Medium (mt-3/mb-3), Large (mt-5/mb-5)
• Usage: Adjust these to control how close this block sits to the blocks above and below it.

HTML ID

Optional identifier for the section, useful for linking directly to this block.

• Usage: If you want a menu item to link directly to this section, enter a value like "properties" and the URL will be your-page-url#properties.

Property Settings

Market ID

Restricts property listings to a specific market area.

• Type: Numeric ID
• Usage: Leave blank to show properties from all markets, or enter a market ID to focus on a specific area.

Filter

Determines which properties to display based on specific criteria.

• Format: JSON string with filter conditions
• Common options:
  • Show only active listings: {"listing_status": {"value":"Active"}}
  • Show only properties from your brokerage: {"broker":{"value":true}}
  • Price range: {"price_in_dollars":{"min":300000,"max":800000}}
  • Bedrooms: {"bedrooms":{"min":3}}
  • Bathrooms: {"bathrooms":{"min":2}}
  • Square footage: {"square_feet":{"min":1500}}
  • Property type: {"property_type":{"value":"Single Family"}}
• Combining filters: You can combine multiple filters with commas, for example: {"broker":{"value":true}, "listing_status":{"value":"Active"}, "bedrooms":{"min":3}}
• Usage: Start with the default filter and modify as needed for your specific requirements.

Sort

Controls the order in which properties are displayed.

• Format: Property field name with optional minus sign for descending order
• Common options:
  • Newest first: created_at or -created_at
  • Price (low to high): price_in_dollars
  • Price (high to low): -price_in_dollars
  • Bedrooms (most first): -bedrooms
  • Square footage (largest first): -square_feet
• Usage: Choose a sort option that makes the most sense for your visitors. Price sorting is most commonly used.

Suggestion ID

Links to saved property searches (suggestions).

• Format: Comma-separated list of suggestion IDs
• Usage: If you have pre-configured property searches in the RealSavvy platform, you can enter their IDs here to display those results.

Properties Per Page

Sets how many properties appear before pagination.

• Default: 8
• Usage: Balance between showing enough options and page load speed. 8-12 is typically a good range.

Cards Per Row

Determines how many property cards appear in each row.

• Options: 3 or 4
• Usage: 3 cards per row show larger property images, while 4 cards per row display more properties in the same space.

Show Pagination

Enables or disables pagination controls at the bottom of the grid.

• Default: Enabled (true)
• Usage: Enable for larger property sets, disable for showcasing just a few featured properties.

Show Broker

Toggles display of the listing broker information on property cards.

• Default: Enabled (true)
• Usage: Required in many markets for MLS compliance.

Show MLS

Controls whether to display MLS numbers and information.

• Default: Enabled (true)
• Usage: Often required for MLS compliance.

Show MLS Image

Toggles display of the MLS logo on property cards.

• Default: Disabled (false)
• Usage: Enable if required by your local MLS rules.

MLS Image

The image to use when "Show MLS Image" is enabled.

• Format: Image URL
• Usage: Upload your local MLS logo or use the provided URL.

Common Use Cases

Featured Properties

Sort: -price_in_dollars
Filter: {"featured":{"value":true}, "listing_status":{"value":"Active"}}
Properties Per Page: 4
Show Pagination: false

Agent Listings

Filter: {"agent_profile":{"unlock-mls":{"key":["ACT465623"],"relationships":["listing"]}}}

Agent Sold Properties

Filter:{"agent_profile":{"unlock-mls":{"key":["ACT465623"],"relationships":["listing"]}},"listing_status":{"value":["Sold"]}}

New Listings

Sort: -created_at
Filter: {"listing_status":{"value":"Active"}}
Properties Per Page: 8

Luxury Properties

Sort: -price_in_dollars
Filter: {"price_in_dollars":{"min":1000000}, "listing_status":{"value":"Active"}}
Properties Per Page: 6

Affordable Homes

Sort: price_in_dollars
Filter: {"property_type":{"value":"Single Family"}, "price_in_dollars":{"max":350000}}
Properties Per Page: 8

Family Homes (3+ Bedrooms)

Sort: -square_feet
Filter: {"bedrooms":{"min":3}, "property_type":{"value":"Single Family"}, "listing_status":{"value":"Active"}}

Tips for Best Results

1. Always test your filters: After setting up filters, check that properties are displaying correctly.

2. Balance the number of properties: Too many properties without pagination can slow down page loading.

3. Keep mobile users in mind: While you might show 4 cards per row on desktop, these will stack on mobile.

4. Use clear sorting: Choose a sort option that makes sense for the context (e.g., sort by price for luxury homes).

5. Combine with other blocks: Property Grids work well when paired with search blocks above them.

6. Market-specific considerations: Different real estate markets may require different display settings to highlight the most important features.

7. MLS compliance: Always ensure your property displays comply with your local MLS regulations regarding attribution and display requirements.

Troubleshooting

• No properties showing: Check your filter settings, they might be too restrictive.
• Wrong properties: Verify your Market ID setting.
• Slow loading: Consider reducing the Properties Per Page setting.
• MLS issues: Ensure Show Broker and Show MLS settings comply with your local MLS rules.