Tutorial 2: Blocks

The following tutorial illustrates the difference between simple blocks and dynamic blocks, and how to use Page Builder to create each type of block.

Regarding recent interface and terminology changes: What was previously the “Banner” option in the Content menu is now “Dynamic Block”. In addition, Page Builder has a new content type called “Banner,” which is featured in the first tutorial and is unrelated to the previous banner functionality.

Dynamic Block in Storefront

In Part 1 of this tutorial, you will create a simple block, and add it to the page that you created in the first tutorial. In Part 2, you will create a dynamic block with a price rule promotion that appears only to members of a specific customer segment. In Part 3, you will add the dynamic block that you created to the page. In Part 4, you will edit a dynamic block that is live in your store.

Before you begin

Before starting this tutorial, we recommend that you increase the Admin Session Lifetime to prevent the session from timing out while you work.

Verify the required Content Management configuration settings:

Do the following to download the image assets that are needed to complete the examples.

  1. Right-click the simple-page-assenting link, and save the file to your local computer.

  2. Navigate to the file on your computer, and right-click to Extract All files. Then, choose the destination folder, and tap Extract.

    The folder contains the following image files:

    Simple Page Assets

To complete parts 1, 2, and 3 of this tutorial, expand each section and follow the instructions.

PART 1: Create a Simple Block

In this tutorial, you will create a simple block with content from Google Maps. Simple blocks are sometimes called “CMS blocks” and “static blocks,” because the content does not change. A simple block is ideal for content that you might want to reuse.

Step 1: Create a New Block

  1. On the Admin sidebar, choose Content. Then under Elements, choose Blocks.

  2. In the upper-right corner, tap Add New Block. Then, do the following:

    • In the Block Title field, enter “Google Map”.

    • In the Identifier field, enter “google-map”.

    • Choose the Store View where the block is to be available.

      Block Information

    • In the upper-right corner, Save the settings and return to the Page Builder workspace.

Step 2: Add a Google Map

  1. Scroll down to the Page Builder workspace.

  2. In the Page Builder panel, expand the Media section. Then, drag a Map placeholder to the stage.

    Drag Map to Stage

  3. A map to your store location appears if Google Maps is configured for your store.

    Google Maps

    A placeholder map appears if Google Maps isn’t yet configured for your store. Google Maps Placeholder

  4. In the upper-left corner on the Save menu, choose Save & Close.

Step 3: Configure Google Maps

  1. In the Admin sidebar, choose Stores. Then under Settings, choose Configuration.

  2. In the panel on the left under General, choose Content Management.  Scroll down to the Advanced Content Tools section. Then, complete the applicable instructions:

    Have a Google Maps Key

    1. Paste your Google Maps API Key.

    2. Tap Test Key.

    3. Do one of the following:

    • After your key is verified, tap Save Config.
    • If there is a problem with your key, return to the Google Maps site to resolve the problem. Then, try again.

    Need a Google Maps Key

    To set up a Google Maps key, you must be a site administrator with authority to enable billing for your account. If you’re not ready to set up a Google Maps account at this time, you can skip this step and use the Google Maps placeholder for now.

    1. Click Get API Key.

    2. Follow the instructions to configure your Google Maps account and billing.

    3. Copy your API Key. Then, complete the previous instructions to enter and test your key.

Step 4: Add the Block to a Page

  1. On the Admin sidebar, choose Content. Then under Elements, choose Pages.

  2. In the grid, find the Simple Page that you created in the first tutorial. Then in the Action column, select Edit.

  3. Expand the Content section, and scroll down to the Page Builder workspace.

  4. In the Page Builder panel under Layout, drag a row placeholder to the top of the stage.

    Add Row to Top of Stage

  5. In the Page Builder panel, expand the Add Content section. Then, drag a Block placeholder to the new row.

  6. Hover over the empty block container. Then in the toolbox, choose Settings ( ), and do the following:

    Block Toolbox

    • On the Edit Block page, tap Select Block.

      Select Block

    • In the search box, enter “map” and press the Enter key to find the block that you created.

    • In the grid, tap Select to choose the Google Maps block. Then in the upper-right corner, tap Add Selected.

      Find Block in List

    • In the upper-right corner, Save the settings and return to the Page Builder workspace.

  7. In the upper-right corner on the Save menu, choose Save & Close.

    Save Menu

Congratulations! You have completed the Part 1 of the Block tutorial. Make sure to keep your work for reference.

PART 2: Create a Dynamic Block

A dynamic block includes logic that determines where, when, and to whom it appears. In this tutorial, you will create a dynamic block for a promotion that is triggered when price rule conditions are met, and that appears only to a specific customer segment. The end result of this example is similar to the banner that was created in the first tutorial, but with logic that controls when it appears in the storefront.

Luma Tee Promotion

Step 1: Create a Dynamic Block

  1. On the Admin sidebar, choose Content. Under Elements, choose Dynamic Blocks.

    Dynamic Blocks

  2. In the upper-right corner, tap Add Dynamic Block. Then, do the following:

    New Dynamic Block

    • Set Enable Dynamic Block to “Yes”.

    • In the a Dynamic Block Name field, enter “Tee Shirt Promo”.

    • Set Dynamic Block Type to “Content Area”. Then, tap Done.

      The Dynamic Block Type determines where in the page layout the block is to be placed. When setting up a dynamic block for your store, take into consideration both the page layout and the theme, so you can put the available space to good use. Some stores have an active content area that limited to a fixed width, while others extend the full width of the screen.

      Dynamic Block Type

    • In the Customer Segment list, mark the checkbox of each segment that you want to apply to the dynamic block. Then, tap Done to save the setting.

      For this example, we created two customer segments that identify registered customers by gender. This dynamic block appears only to registered female customers who are logged in to their accounts while they shop in your store.

      Choose a Customer Segment

Step 2: Complete the Settings

Expand the Content section. Then, do the following:

Add an Image

  1. In the Page Builder panel under Media, drag an Image placeholder to the row. Tap Select from Gallery, and choose the wide-banner-background.png image.

    Row with Image

  2. Hover over the row container. Then in the toolbox, choose Settings ( ), and scroll down to the Layout section.

  3. In the Minimum Height field enter “400”.

  4. In the upper-right corner, Save the settings, and return to the Page Builder workspace.

  5. In the upper-right corner of the Tee Shirt Promo page, tap Save.

Add Columns

In the Page Builder panel under Layout, drag a Column placeholder to the stage.

Two Equal Columns

The row is now divided into two columns of equal width.

Add Text

  1. In the Page Builder panel under Elements, drag a Text placeholder to the second column.

    Drag Text Box to Column

  2. Enter the following 3 lines of text into the editor:

     Even more ways to mix and match. 
     Buy 3 Luma tees and get a 4th free. 
     Shop Tees >
    

    Enter Text

  3. Select all three lines of text. Then on the toolbar, set Line Height to “40px”.

    Line Height

  4. Set the Font Size for each line as follows:

    Line 1: 28px
    Line 2: 24px
    Line 3: 18px

    Because this block could be placed anywhere on the page, we use the default paragraph style, rather than heading levels. Also, don’t worry that the text doesn’t yet wrap correctly in the column.  

    Formatted Text

Add a Link

In the first tutorial, you learned how to use the Button content type to create a link. This example shows how to insert a link from the editor toolbar.

  1. In the storefront, navigate to the page that is to be the target destination for the link. You can either paste the fully qualified URL, or a relative URL that omits the reference to your store domain.

    Full URL
    https://mystore.com/women/tops-women/tees-women.html
    Relative URL
    ../women/tops-women/tees-women.html
  2. In the text editor, select the “Shop Tees >” text in the third line. Then, on the editor toolbar, choose Bold ( ).

  3. Again select the “Shop Tees >” text in the third line. Then, on the editor toolbar, choose Insert/edit link ( ).

    Formatted Text

  4. In the Url field, enter the relative link that you prepared.

  5. Set Target to “None”.

  6. This setting opens the page in the same browser window, rather than opening a new tab.

  7. In the Title field, enter “Shop Tees”.

    The Title link attribute is used by some browsers as a tooltip.

  8. Tap OK to save the link, and return to the Page Builder workspace.

    Link Detail

  9. In the upper-right corner, tap Save.

Step 3: Add a Price Rule

  1. Expand the Related Promotions section of the New Dynamic Block page. Tap Add Cart Price Rules, and do the following:

    Related Promotions

  2. On the Add Related Cart Price Rules page, mark the checkbox for the “Buy 3 tee shirts and get the 4th fee” price rule. Then, tap Add Selected.

    Add Related Cart Price Rule

    The price rule appears in the Related Promotions section, under Related Cart Price Rule. You can associate multiple price rules with a dynamic block. However, for this simple example, we’ll use just one.

    Selected Cart Price Rule

Step 4: Add the Dynamic Block to a Page

  1. In the Admin sidebar, choose Content. Then under Elements, choose Pages

  2. Open the Simple Page that you created in the first tutorial in edit mode. Then expand the Content section and do the following:

    • In the Page Builder panel, expand the Layout section. Then, drag a Row placeholder to the top of the stage.

    • In the Page Builder panel, expand the Add Content section. Then, drag a Dynamic Block placeholder to the new row.

      Drag Dynamic Block to Row

    • Hover over the dynamic block container. Then in the toolbox, choose Settings ().

      Dynamic Block Toolbox

    • On the Edit Dynamic Block page, tap Select Dynamic Block.

      Select Dynamic Block

    • On the Select Dynamic Block page, find the “Tee Shirt Promo” dynamic block that you created, and tap Select. Then, tap Add Selected.

      Select Dynamic Block

      A summary of the dynamic block information appears below.

      Dynamic Block Information

    • Accept the default Template, “Dynamic Block Block Template”.

  3. When complete, Save the settings and return to the Page Builder workspace.

    Dynamic Block On Page

Congratulations! You have completed the Part 2 of the Block tutorial. Make sure to keep your work for reference.

PART 3: Edit a Dynamic Block

In this final part of the tutorial, you will edit a dynamic block while the page is live in your store. Then, log in to the store as a member of the customer segment to make the block appear.

Dynamic Block in Storefront

Step 1: Edit the Dynamic Block

  1. In the Admin sidebar, choose Content. Then under Elements, choose Dynamic Blocks

  2. Find the Tee Shirt Promo in the Dynamic Blocks grid. Click anywhere on the row to open the block in edit mode. Then, expand the Content section.

  3. To change the column width, do the following:

    • Hover over the border between the two columns.

    • Hold down the mouse button, and drag the border two divisions to the left.

      Grid Divisions

      The first column is now four of twelve (4/12) grid divisions wide, and the second column is eight of twelve (8/12) divisions wide.

      Two Unequal Columns

  4. To change the text color, do the following:

    • Select the first two lines of text.

    • On the Editor toolbar, choose Text Color. Then, click the White swatch.

    Text Color

  5. On the Save menu in the upper-right corner, choose Save & Close.

    Save & Close

Step 2: View the Dynamic Block

Because this dynamic block is visible only to members of a specific customer segment, you must log in as a customer who is a member of the customer segment to see the promotion. In this example, the block appears only to female customers.

  1. Open a browser window to your storefront.

  2. To view your sample page, modify the URL in the address bar as follows:

     mystore.com/sample-page
    

    If your store is configured to include the html suffix, include the suffix as follows:

     mystore.com/sample-page.html
    
  3. Do the following to sign in as a female customer:

    • In the upper-right corner of your home page, click Sign In.

    • If the sample data is installed on your system, use the following credentials:

      Email roni_cost@example.com
      Password roni_cost3@example.com
    • Tap Sign In.

    • Return to the sample page to see the dynamic block that you created with the Tee Shirt Promo.

    Dynamic Block for Customer Segment

Congratulations! You have completed the Part 3 of the Block tutorial. Make sure to keep your work for reference.