Create Static and Dynamic Blocks

Transcript

Creating engaging content at Web scale is difficult for anyone. And it’s much more difficult if you aren’t a front end developer. Today I’ll show you how Adobe Commerce’s Page Builder enables anyone to create engaging experiences, leveraging two elements of Page Builder, static and dynamic blocks. So starting with static blocks also called simple blocks or CMS blocks. This is because the content doesn’t change. A static block is ideal for content that you might want to reuse. So following the dry principle, don’t repeat yourself. If you plan on using content on multiple pages a static block is great for that use case. So under this block, I can see the title, the identifier, as well as the editing interface with Page Builder. So this is a footer here. What I’m trying to say is, you know this is the information about my company. I want to have this on multiple pages. So I can see here under the tabs, this is various information about my Luma store front. So what I’m going to do is I can add another block here and I can hit Save.

And when I want to use this block I’m going to go again under Content, Pages, I can select a random page here. Let’s say even under the access denied page I want to list some information about us. I’m going to hit Edit in Page Builder. And when I go to add content, I can just drag a block in here.

And now I can select that block that I just created, that footer, I hit Save. And now it’s on my Access Denied page. So now on multiple pages, I can easily drag and drop that block to show the right content. Now blocks are elements that you show to every user. I now want to show dynamic blocks, and dynamic blocks are very interesting because they allow you to do personalization. Showing the right content to the right people to increase relevancy and personalize the experience. So say I’m a merchandiser and I want to increase people’s average size of their purchase. I want to incentivize them by offering free shipping but I only want to offer free shipping to those customers who have, you know more than $100 in their cart. So I’m going to create a new dynamic block here as a header.

And I’ve already created a customer segment for those users who have less than $100 in their cart. So now I’m going to drag in some elements here and I’m going to say, you need to spend $100 to get free shipping. When I hit save, I have now created this dynamic block and I can use it on a page.

I’m going to go to my pages and I’m going to go to my homepage.

Edit my homepage and go back to that Page Builder interface. And I’m going to drag in my dynamic block here. Edit and select my dynamic block. I can now choose that spend $100 block. Hit Save. And now I have this conditional that says if the user has $100 in their cart show them that they have free shipping. If they don’t, incentivize them to get free shipping. So I’m back here in my storefront and I can see a really ugly page but the value here is that Art Vandelay my user has not put $100 worth of products into his cart. Let’s change that. I’m going to go to jewelry. I’m going to add this item to my cart and I’m going to make sure that I have $100 in my cart. When I flip back to the storefront I can see free shipping has been received. So this is a simple example of using dynamic blocks but it allows me to do personalization. I can create blocks by gender, by address, by geography, by all of these different types of user attributes to create customized, personalized experiences without having to bring in a front end developer or install an extension. To learn more about how static and dynamic blocks work, you can go to our Commerce user guide. -