> For the complete documentation index, see [llms.txt](https://landofcoder.gitbook.io/magento-2-step-recommendation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://landofcoder.gitbook.io/magento-2-step-recommendation/config-and-usage/show-module-block-on-frontend.md).

# Show module block on frontend

The module are using widget block to generate recommendation steps on frontend. You can create CMS Page and add widget type "Lof StepRecomendation" into page content, or create widget instance

### 1. Add Recommendation To CMS Page

Create new CMS page or edit exist page on admin > Content > Elements > Pages

![Create new cms page and insert widget "Lof StepRecommedation"](https://2986529493-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Mgogp6-LLxzONPMFSut%2F-MgtHayzlQioSmBz7zRW%2F-MgtIDicHppoyYzAohgc%2Fcreate_cms_page.png?alt=media\&token=baa841dc-25e5-41a5-b0d4-fd42681cec34)

![Config widget as this, choose rule and input result text as you want](https://2986529493-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Mgogp6-LLxzONPMFSut%2F-MgtHayzlQioSmBz7zRW%2F-MgtIKgqvgcMosxcC8mA%2Finsert_widget_as_this.png?alt=media\&token=161a70de-4ea9-4464-9ca1-4a52517a853c)

After add/edit cms page with widget Lof StepRecommendation, then save the page

Go to frontend view cms page as this:

![Steps with questions of rule 1](https://2986529493-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Mgogp6-LLxzONPMFSut%2F-MgtNtRUMmwLWHRUDA3G%2F-MgtP8GmbYwMBYJ0R0Lb%2FScreenshot%20from%202021-08-12%2015-08-24.png?alt=media\&token=b1571d1a-d89c-424c-ab90-ce1d022409eb)

![Result with multiple products](https://2986529493-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Mgogp6-LLxzONPMFSut%2F-MgtNtRUMmwLWHRUDA3G%2F-MgtPFi_tjDnrAwudVJx%2FScreenshot%20from%202021-08-12%2015-08-53.png?alt=media\&token=5f72f6d5-57e9-492f-b664-7cbe72bf1dd5)

### 2. Add Recommendation Widget instance to show page position as we want

Create widget instance on admin > Content > Elements > Widgets

![Step 1: Choose type and design theme](https://2986529493-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Mgogp6-LLxzONPMFSut%2F-MgtMz3hP1Iv_744SNoU%2F-MgtNaZCiro9JM_HGaVk%2Fcreate_widget_instance.png?alt=media\&token=40c9cd32-52dd-4ab8-b15e-36fd733507bc)

![Step 2: Config title, layout updates](https://2986529493-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Mgogp6-LLxzONPMFSut%2F-MgtMz3hP1Iv_744SNoU%2F-MgtNfvqBiNbHabnXJUW%2Fwidgets.png?alt=media\&token=8c60f641-e495-488d-a3f3-bc3ea523ce01)

![Step 3: Config widget options](https://2986529493-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Mgogp6-LLxzONPMFSut%2F-MgtMz3hP1Iv_744SNoU%2F-MgtNmf8AMXug6r3-5-m%2FScreenshot%20from%202021-08-12%2015-01-48.png?alt=media\&token=0a1d2d08-9fd7-46d9-bd7d-f11f4caa14fb)

Results on frontend (Category Page):

![](https://2986529493-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Mgogp6-LLxzONPMFSut%2F-MgtR9Idon3z_Ovfo-kC%2F-MgtRQMquKqwUQLpQYv8%2FScreenshot%20from%202021-08-12%2015-18-58.png?alt=media\&token=8ca4b4de-c768-4eed-9b76-15ebbd7b308a)

Or we can add Widget into Cms Block content, then load cms block content on frontend to any position and page which you want: Admin > Content > Elements > Blocks