Product & Collection Sections
      Back to home
      1. Knowledge Base
      2. Building in Nyla
      3. Product & Collection Sections

      Building PLPs

      Nyla makes building and updating product grids easy.

      Introduction


      This article outlines: 

      • Best practices for building PLPs in Nyla
      • The blocks and templates available for you to choose from

      Building a PLP

      Follow the video to build a PLP from scratch:

      Using blocks to customize the Grid Layout: 

      Adding unique grid layouts to your 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 (choose from these starting points)
        While you can always start from scratch, we suggest that you use a Nyla Template as a starting point. Our templates come with a lot of great functionality built in, so you can start customising right away - making building your page faster and easier!.

        Nyl has the following PLP layouts to help you get started right aways:
        1. PLP 1: A classic simple PLP grid, this templates loads your products in a 3 up grid on desktop, and 2 up on mobile. 
        2. PLP 2: A plp grid with horizontal filter and sort at the top
        3. PLP 3: A plp grid with a left column of filters, as a modal on mobile

      3. Use pre-made 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. Filter blocks enable you to drop in or replace the filters. 

          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 and existing setups. Using metafields and properties within source product, you can make sure that your data stored on your product pages is surfaced on your product and collection pages. 
      5. 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
      6. Before launching your PLP, make sure to look at adding: 
      1. Image filtering
      2. Product defaults

      Blocks: Summary

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

      Product grid blocks

      • PLP grid layout: Simple
      • PLP grid layout: Consumable
      • PLP grid layout: High fashion
      • PLP grid layout: Simple with rating
      • PLP grid layout: Centered
      • PLP grid layout: Overlay
      • PLP grid layout: Fashion

      Unique grid 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:

      • Coming soon

      Blocks: A detailed breakdown

      Different grid layouts

      These blocks need to be added to the Source collection > Grid content item. If a grid layout already exists, either delete the layout, or add a layout condition to hide it. You can have multiple layouts in a grid - for example a layout for different product types.

      Some grid layouts have suggested grid settings, for example, consumable grid item should be used in a grid with the vertical placement set to fill. This will make all grid items the same height.


      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