Building PLPs (Product Grids)

Nyla makes building and updating product grids easy.

Introduction

Practically all ecommerce sites have a product grid in one form or another. These tend to have multiple aspects that make these amongst the most complicated aspects of a site. Features such as filtering, pagination, quick add, product ribbons and so on need to be considered.

Thankfully Nyla's grid layout functionality, combined with ready-made templates and blocks to serve as production grade starting points makes building product grids a breeze. 

This article walks you through suggested the steps to build a product grid in Nyla.   

This article covers: 

• Best practices for building Product Listing Pages (PLPs) or Product grids in Nyla
  • Add page source
  • Use a Nyla templates to get started
  • Use blocks to refine your design and add-in functionality out the box
  • Use metafields and properties to link your Shopify data

• • Add pagination, and extra layouts / unique grid items
  • Finish styling your grid

• Nyla blocks and templates
  • Grid Section templates 
  • Blocks
    • Product grid blocks
    • Unique grid items

• • • Product media block
    • Feature blocks
      • Filter blocks
      • Product ribbons

Building a PLP

1. Add your collection page & your page source:
   
   Create a new page within the ‘collections’ folder of your site. Add a blank page, and instead of adding the Title etc, navigate directly to ‘Source’ on the left. Click on ‘Add page source’ and select Collection. This will link your new page directly with your Shopify collection. Select ‘Add page to create your page.
   
   
2. Start from a Nyla Template 
   
   While you can always start from scratch, we suggest that you use a Nyla Template as a starting point. Our templates come with functionality built in, so you can start customising right away - making building your page faster, easier and less error prone.
   
   Nyla has the following PLP layouts to help you get started right aways:
   
   1. Product Grid 001:
      1. A classic simple PLP grid, this templates loads your products in a 4 up grid on desktop, and 2 up on mobile. 
   2. Product Grid 002:
      
      1. A plp grid with horizontal filter and sort at the top.
   3. Product Grid 003: 
      
      1. A plp grid with a left column of filters, as a modal on mobile.

1. 1. Product Grid 004: 
      1. A PLP grid with more of a high fashion feel with more prominent imagery occupying the full width of the screen
2. Use blocks to replace parts of your design
   
   Nyla’s product card blocks come with best practices and UX out of the box so that you can drop them into your template to adapt your design to your needs:
   1. PLP blocks enable you to drop in or replace the grid items commonly used on product listing page layouts.
   2. Unique grid item blocks enable you to drop in featured images, content, and more that can break up a regular product grid to be more interesting.
   3. Feature blocks enable you to add relevant features to your grid items. 
      
      See the list of blocks here.

 

4. Map your product data to Nyla

Once you have added the layout and features that you want, you should map the data that you use on your products to the Nyla fields. 

Each site has different data needs. Using metafields and properties within source collection, you can make sure that your data stored on your product pages is surfaced on your collection pages as needed. 


5. Finalize your grid settings and add more layouts and unique grid items as needed

We suggest to add pagination to grid templates starting at 24 items at most. See here for pagination options and best practices. 

You can also add additional grid layouts or unique grid items in order to further customise the grid items that will display. See more here. 

 

6. Update your styling

Now that you have the layout and the features added to your page in the way you want them you can update the design settings of the section in order to apply the design customizations that you want for your site. 

Common things to update on the template at this stage include: 

• The ratio of your product images and video
  • We recommend watching the video of the PLP grid media block in order to make sure you don't miss any permutations of media. 
• Spacing 
• Alignment
• Background colours
• Adjusting layout widths 

Once you are done, you can save your template and add any overrides as needed. 

Blocks: Summary

Below is a quick summary of the blocks available for use on the PLP

Product grid blocks

Product grid blocks are the layouts for your products within your grid. 

The available blocks are as follows: 

• Product card: Simple:
  • A simple product layout with product title and price
• Product card: Simple with rating:
  • A simple grid layout with the product image, title, price, and rating
• Product card: Centred:
  • A product grid layout with centred title, short description and price.
  • Requirement: Uses the metafield product.metafield.nyla.short_description 
• Product card: Overlay:
  • A product grid layout with title, short description and price overlaid over the product image.
  • Requirement: Uses the metafield product.metafield.nyla.short_description
• Product card: Fashion:
  • A product grid layout with quick add that allows for 2 option quick add to cart. Shows a summary of options available and on hover lets the user add the product to the cart
• Product card: High Fashion:
  • A product grid layout with quick add that allows for 1 option add to cart. This is more specifically tailored to high fashion where products do not have multiple colors - or colors are split between products in Shopify. 
• Product card: Beauty:
  • A fully featured product grid layout with visible add to cart, short description, price, and product options. 
  • Optional: Uses the metafield product.metafield.nyla.short_description to display product taglines

Unique grid item blocks:

Unique grid item blocks can be added to any of the grid templates. They act as a starting point for you to configure custom grids with editorial content. You can add multiple grid items. 

See this video for configuring unique grid items: 

The blocks to serve as starting points for unique grid items are as follows: 

• Unique grid item: Image
• Unique grid item: Image and title
• Unique grid item: Image with text overlay
• Unique grid item: Image with text beneath
• Unique grid item: Video 

Product media block: 

• The PLP grid media block is a key block that: 
  • Ensures that grid items have default and hover states for all permutations for video and images in the first two slots of media without any layout shifts
  • Contains product ribbons by default
  • Ensures all media are linked to the relevant PDP

It's important to use this block if you are intending to mix video and images on your grid or cross sells.  

See this video for a walkthrough of this block and why it is important: 

Filter blocks:

• See here for the list of filter blocks

Product ribbon blocks: 

• See here for blocks for product ribbons