Guru's Verification engine ensures consistency, confidence, and trust in the knowledge your organization shares. Learn more.

How to set up a new PLP Page

The best practice will be in the DEV Sites - Once confirmed layout is okay but the appropriate person, then can be copied over to live site.

  1. Finding the content block you need. LOCATION: CONTENT > ELEMENT > BLOCKS
    1. Locate a block in which will be similar to the layout you will need so for example, most PLP (product landing page) pages will need the Payment blocks under the products or even on the CLP (central landing page) pages.
    2. Using the example from shutters we would locate the block id for payment "clp-shutters-payment-block"
    3. Once this has been located (or the block you need to copy from is located) we will open and edit the block:
      image.png
    4. Once block is open we will go to the save and duplicate section as seen:

      image.png
    5. The block will duplicate and therefore will be the same layout as we need for our new layout or content required.
    6. All we will need to do is change the headings or content within the HTML code inside the block to correspond with the new content we are looking to add.
  2. NOTE: Imagery will need to be saved in a suitable folder that will make sense to add from. This will be found in the HTML code for the blocks : When wanting to replace the imagery and to add in a new image we want to removed the part that states: <img src="{{media url=wysiwyg/clp-shutters/klarna.svg}}" alt="" and use the space that this code had been in to insert a new image.
    image.png
    1. In order to add imagery to the folders when we need them - this will mean we need to go into insert image:
      image.png
      we need to make sure we pick an appropriate folder pathway that makes sense, and press the choose files button shown at the top of the folder and we import from there. Please make sure the imagery has been compressed before uploading.
  3. After we have collectively gathered and set up all the different blocks we have created using step 1. we will then need to write the Ajax content to correspond with he correct page and the correct block ids for the layout to work.
    1. LOCATION: MZURI > AJAX CONTENT
    2. Using the shutter example again we want to have a record of all the block id names we have just created for the new steps.
      1. We ar going to add a new record as seen:
        image.png
      2. I would open another record to help with you on how the layout of the record should be so using the Shutter/full-height/ URL example from MMB, we are looking at the bottom content section here:
        image.png
        Code will be like this:
        image.png
      3. Using the references of our last step of building the blocks we will replace the block id name within the quotes and this will be the page layout.

You must have Author or Collection Owner permission to create Guru Cards. Contact your team's Guru admins to use this template.