3

I am working on a Magento 2.1.7 shop. To achieve this, I have created a child-theme of Magento Blank.

My top links (above the logo) are:

  1. Compare Products
  2. Default welcome msg!
  3. My Account
  4. My Wish List
  5. Create an Account
  6. Sign In

I need to remove all the links except:

  1. My Account
  2. My Wish List
  3. Sign In

I want to move the 3 links above on the same block - <div class="header content"></div> - as the logo.

The logo will be floated to the left, while the 3 links will be floated to the right.

What files must I edit to achieve this?

5
+50
  1. Remove Compare Products link:

Theme_Root/Magento_Catalog/layout/default.xml

<referenceBlock name="catalog.compare.link" remove="true" />
  1. Remove Default welcome message:

Theme_Root/Magento_Theme/layout/default.xml

<referenceBlock name="header" remove="true" />
  1. Remove Create an Account link:

Theme_Root/Magento_Customer/layout/default.xml

<referenceBlock name="register-link" remove="true" />
  1. Move Top Links to the right container:

Theme_Root/Magento_Theme/layout/default.xml

<move element="top.links" destination="header-wrapper" after="logo" />

After these manipulations you need align blocks logo and links via CSS, with float.

  1. Create block with My Wish List:

Theme_Root/Magento_Theme/layout/default.xml

<referenceContainer name="header.panel">
    <block name="panel.top.links" class="Magento\Framework\View\Element\Html\Links" after="-">
        <arguments>
            <argument name="css_class" xsi:type="string">header links</argument>
        </arguments>
    </block>
</referenceContainer>

Theme_Root/Magento_Wishlist/layout/default.xml

<move element="wish-list-link" destination="panel.top.links" />

Write me if you need any help.

  • Great, but I want to keep My Wish List at the top, in its initial place. How can I do that? – Razvan Zamfir Dec 18 '17 at 16:02
  • I updated my answer. Check it, please – Evgeny Levinsky Dec 18 '17 at 16:16
  • I want to turn <ul class="clearfix header links"> <li><a href="/customer/account/">My Account</a></li> <li class="authorization-link" data-label="or"><a href="/account/login/">Sign In</a> </li> </ul> into <ul class="clearfix header links"> <li><a href="/customer/account/"><i class="fa fa-user-o" aria-hidden="true"></i> My Account</a></li> <li class="authorization-link" data-label="or"><a href="/account/login/"><i class="fa fa-sign-in" aria-hidden="true"></i> Sign In</a> </li> </ul> In other words, how do I add icons? – Razvan Zamfir Dec 19 '17 at 10:03
  • In first link you can add css class on block via <argument name="class" xsi:type="string"> ... </argument> in Theme_Root/Magento_Customer/layout/default.xml. In second link you need override vendor/magento/module-customer/view/frontend/templates/account/link/authorization.phtml in your theme and adjust it. – Evgeny Levinsky Dec 19 '17 at 17:12

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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