How to Add Notices, Promotional Text, or Custom Scripts to Specific Pages with Widgets

How to Add Notices, Promotional Text, or Custom Scripts to Specific Pages with Widgets

This article will guide you through setting up a notice, promotional text, or custom scripts to a specific page.

For example, this article would be useful if you would like to add a banner or custom script on the cart or checkout page.

This article will not cover how to create the HTML for the notice or promotional text.

This article will only cover adding the notice or promotional text just below the header.

Step 1: Creating the Notice, Promotional Text, or Custom Script

  1. Login to your Magento Admin Panel.
  2. Go toContent>Blocks.
    1. 19011534.png
  3. This will bring you to the Blocks page. Click onAdd New Block:
    1. 19011535.png
  4. You should now be on the following page:
    1. 19011536.png
      1. Enable Block- This sets whether the block will show on the website. 
        1. We recommend leaving this setting on. Later in this tutorial we will provide a guide on how to test the block before showing it on the page you want.
      2. Block Title- This is the name of the block. Make note of what you enter here.
        1. As an example of what to name the block, if you are creating a notice for checkout regarding shipping, you could name the block Checkout - Shipping Notice.
      3. Identifier- This is the ID for the block. This will not be used in this tutorial.
        1. While this will not be used in this tutorial. it is best to keep it similar to the block name. For example, if the block title is Checkout - Shipping Notice, you can enter checkout_shipping_notice.
        2. The ID cannot have spaces in it.
      4. Store View- By default, this should be selected as All Store Views. If it is not, click All Store Views.
      5. Text Area- The area surrounded in blue is where you will be entering the HTML for the block.
        1. If you are inserting a script, you will enter it in here.
        2. Below is a template for notices / promotional text:
          1. <div class="notice-custom-block"><h3>Add your custom text here!</h3></div><style>.notice-custom-block {text-align: center;min-height: 90px;background-color: #FFFFFFcolor: #000000;}.notice-custom-block h3 {display: inline-block;margin-top: 2.2rem;font-size: 24px;}</style>

            1. You will need to adjust the design to your preferences, but this should give you a head start.

  5. Once you have configured the settings in Step 4, press Save in the upper right hand corner.

Setting Up a Test Page

If you would like to preview the block you created before setting it up live, you can setup a test page. This will be where we place the block before it is live. We will cover how to place the block on that page in the next step.

  1. Go to Content> Pages.
    1. 19011656.png
  2. Click Add New Page.
    1. 19011657.png
  3. Configure the page. Below is clarification for each setting:
    1. Enable Page- This setting will need to be on to preview the block. After you finish the preview, you can disable the page.
      1. If you do not plan to preview the notice, you can disable this setting.
    2. Page Title- This setting will be the name of the page. We recommend setting this to something rather specific.
      1. For example, "Test Page for CPC - 11.13.2020"
    3. Above the text area, clickInsert Widget.
    4. Change widget type toCMS Static Block.
    5. ClickSelect Block.
    6. Click the block you created.
    7. PressInsert Widget.
  4. PressSave.

While adding the block to the test page will not show the block in the same area as the final promotional or notification text, this should allow you to preview what the promotional content / notification will look like or to confirm the block will add the script.

If you are adding a custom script, you can verify by going to the page and checking in the inspector tool using CTRL + SHIFT + i.

Step 2: Creating the Widget

  1. Go to Content> Widgets.
    1. 19011644.png
  2. Click Add Widget.
    1. 19011645.png
  3. Change the Type to CMS Static Block.
    1. 19011647.png
  4. Change Design Theme to Smartwave Porto CPC.
    1. 19011648.png
  5. Press Continue
  6. You should now see the following form:
    1. 19011649.png
      1. Set the Widget Title to something appropriate such as Checkout - Shipping Notice.
      2. Next to Assign to Store Views, click All Store Views.
      3. You can leave Sort Order blank.
  7. Click Add Layout Update.
    1. Change Display On to Specified Page.
      1. 19011650.png
    2. Change Page to the specific page you would like it to display it on.
      1. For example, if you would like it shown at checkout, select One Page Checkout.
      2. If you are adding a conversion script for checkout, you can select One Page Checkout Success.
      3. This does not support specific CMS pages.
  8. Set Container to Main Content Top. 
    1. This will add it just below the header of the page. 
    2. 19011652.png
  9. On the left under Widget, click Widget Options.
    1. 19011654.png
  10. Click Select Block.
    1. 19011655.png
  11. Choose the block you created.
  12. Press Save.