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

• • • Feature blocks

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 and easier.
   
   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.
         
         
3. Use blocks to replace parts of your design
   
   Nyla’s PLP 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: 

• Spacing 
• Alignment
• Background colours
• Setting Image Ratios 
• Adjusting column widths 
• Slider settings 
• Animations and transition

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: 

• PLP grid item: Simple:
  • A simple product layout with product title and price
• PLP grid item: Simple with rating:
  • A simple grid layout with the product image, title, price, and rating
• PLP grid item: Centred:
  • A product grid layout with centred title, short description and price.
  • Requirement: Uses the metafield product.metafield.nyla.short_description 
• PLP grid item: 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
• PLP grid item: 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
• PLP grid item: 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. 
• PLP grid item: Beauty:
  • A fully featured product grid layout with visible add to cart, short description, price, and product options. 
  • Requirement: Uses the metafield product.metafield.nyla.short_description

Unique grid item blocks:

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

Filter blocks:

• See here for the list of filter blocks