0

I need to add a extra container to page header.

https://prnt.sc/dq9LDPcioxvJ

please check attached screenshot.

2 Answers 2

1

Vendor/Module/view/frontend/layout/default.xml

<?xml version="1.0"?>
<!--
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
-->
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="header.container">
            <container name="extra.container" htmlTag="div" htmlClass="free-shipping-container-class" after="header.panel.wrapper">
                <block class="Magento\Framework\View\Element\Template" name="free-shipping" template="Vendor_Module::freeshipping.phtml" />
            </container>
        </referenceContainer>
    </body>
</page>

Vendor/Module/view/frontend/templates/freeshipping.phtml

<h3 style="text-align: center;">Free Shipping</h3>
1
  • Using Module (app/code)

1.you can create Vendor/Module/view/frontend/layout/default.xml

<?xml version="1.0"?>
  <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
     <referenceContainer name="header.container">
          <block class="Magento\Framework\View\Element\Template" name="header.mini.container"
           template="Vendor_Module::freeshipping.phtml" before="header.panel.wrapper" />
     </referenceContainer>
  </page>

2.Vendor/Module/view/frontend/templates/freeshipping.phtml

<div class="custom-container">
    <div style="border:1px solid red; text-align: center" id="test123"><p>Free Shipping</p></div>
</div>

image here

  • Without module if you need to add in your theme do like this.

    Create following file under your theme

  1. create defualt.xml file:

app/design/frontend/VENDOR/THEME/Magento_Theme/layout/default.xml And add above code of defualt.xml file (app/code) in your xml

  1. create freshipping.phtml file:

app/design/frontend/VENDOR/THEME/Magento_Theme/templates/freshipping.phtml And add above code of freshipping.phtml file (app/code) in your phtml

please let me know it's working or not

8
  • Custom module or we can add above files in custom theme
    – kiran
    Commented Jun 29, 2023 at 12:06
  • above example for custom module(app/code/vender/module) you can also add in custom theme if you need add in custom theme then please let me know Commented Jun 29, 2023 at 12:27
  • I tried above example but container not showing.
    – kiran
    Commented Jun 29, 2023 at 18:26
  • flush the cache and check it's working on my side you can see the attached screenshot Commented Jun 30, 2023 at 4:31
  • I am using Rubix theme. Can I add code in custom theme instead of module.
    – kiran
    Commented Jun 30, 2023 at 11:07

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.