Instructions

Welcome to the Masonry Grid setup! This fantastic feature will replace the Featured Callouts on the Homepage of the Lionheart theme. Just follow a few simple steps, and you'll be good to go!

Keep in mind that the images in the grid will appear in the order they are uploaded into Records. So, their orientation and size will change depending on their position in the grid. Don't fret too much about the exact placement of each image. It's best to use images that can be used interchangeably in different spots. And if something doesn't quite work, just reupload the image in a different record, and voila! Different position, different size, problem solved!

Oh, and speaking of images, it's best to use "lifestyle" images instead of standard product images. You know, those images of a single product with a plain background? Avoid those and try to use images with some variety. Trust me, it'll make the grid look awesome!

Pro tip: Be mindful of your image file sizes for faster page loading. You can even use a handy service like tinypng.com to minify your images before uploading them into the records. Efficiency for the win!

Now, let's get started with replacing the Featured Callouts with the Masonry Grid!

Step 1: Setting up your Account

First, ensure your account is configured correctly to display these records.

1. Navigate to Website > Records > Default Hero Units
2. Click on "+Add A New Record"
3. Upload your images. You can optionally add a Title, Subtitle, Message, and Link. Note: In this demo Masonry Grid, the images are sized at 1000px wide with varying heights. The grid can handle images of any size and orientation, stretching the content to fit each panel. However, it's a good idea to test if your images fit nicely in each placement. It's easier to resize or replace the image than to force the grid to fit a specific image. So, approach it with openness and have fun experimenting!

Also, keep in mind that long descriptions and subtitles will be truncated on mobile devices. If there's vital information, it's best to keep it short and sweet to fit any screen size.

Step 2: Copy and Paste the Home Page Layout

1. Copy the Masonry Grid here:

    <!-- MASONRY GRID -->
    <div class="homepage__callouts">
      <h2>Featured Collections</h2>
      <div class="masonry-container">
        {{#each records.defaultHeroUnits_created_asc_all}}
        <div class="panel">
          <div class="panel-wrapper">
            {{#if linkURL}}<a href="{{linkURL}}">{{/if}}
              <div class="panel-overlay">
                <div class="panel-text">
                  {{#if title}}<div class="panel-title">{{title}}</div> {{/if}}
                  {{#if subtitle}}<div class="panel-subtitle">{{subtitle}}</div> {{/if}}
                  {{#if message}}<div class="panel-message">{{message}}</div> {{/if}}
                </div>
              </div>
            {{#if linkURL}}</a>{{/if}}
            <img class="panel-img" src="{{@root.layout.imgixBaseURL}}/{{image}}" alt="" />
          </div>
        </div>
        {{/each}}
      </div>
    </div>
    <!-- END OF MASONRY GRID -->
  

2. In your Liftoff account, navigate to Website > Design > Layouts > Home Page Layout > Edit
3. Scroll down to line XX and look for the line that contains:
4. Select everything from line around line XX-XX labeled Featured Callouts
5. Replace that section with the code you just copied.

Step 3: Copy and Paste the CSS Override

1. Copy the CSS here:
Copy the Masonry Grid CSS to your clipboard!
2. Navigate to Website >Design > CSS Override
3. Paste the CSS code you copied, ensuring it comes after any existing styles.