Using a Widget to Place Static Block Frontend App in Magento 2

Using a Widget to Place Static Block Frontend App in Magento 2

Posted by

Step 1: Choose the Type

1.Open the Admin homepage. Then, on the sidebar, tap Content. Next, under Elements, choose Widgets.

2. Take a look at the top-right corner and click on Add Widget button. Next, do the following:

a. In the Setting sector, choose “CMS Static Block” for Type field. Next, click Continue.

b. Certify that Design Theme is in form of the current theme.

c. Click on Continue.

null

3. In Storefront Properties section, do the following:

a. Write down a descriptive title for internal reference in Widget Title field.

b. In Assign to Store Views, choose All Store View or the view where the app is supposed to be available. In order to select more than one option, hold the Ctrl key down and select each option.

c. In Sort Order field, enter a number that is used to determine the order of the block when it is assigned to be displayed in the same place on the page as other content elements. Enter “0” for the top position.

null

Step 2: Complete the Layout Updates

  1. In the Layout Updates sector, click on Add Layout Update. Next, do the following:
  2. In Page field, choose the page where the block will be display.
  3. In Block Reference field, choose one that decides the block position on the page.
  4. Set Template to CMS Static Block Default Template.

null

Step 3: Place the Block

  1. In the board on the left, select Widget Options.
  2. Click on Select Block. Next, choose the block which you want to place from the list.
  3. When complete, tap Save. After that, the app will appear in the list.
  4. Follow the instructions at the top of the workspace to update the index and page cache.
  5. Backtrack to your storefront to confirm that the block appears in the exact location. In order to move the block, you can reopen the frontend app try a different page or block reference.

If you find it helpful for you, please Like, Share and Subscribe to keep updating on our next blogs!

Leave a Reply

Your email address will not be published. Required fields are marked *