How to: Small front end changes

Hey Craig,

I have followed your channel for some time now, and I love it, I truly appreciate what you are doing.

I have seem almost all of the let’s build series. I’m currently building a site with my cousin, and he did the designs and everything, while I setup AWS, and everything regarding Magento. But now I just hit a wall. I can’t understand how to customise our store to make it look like our designs. I considered getting a theme, and I saw at the documentation, trying not to bother you with this. Unfortunately, I can’t find a theme that would actually do what I want, and in the end it feels like I would just have to create a child theme for that and basically add the custom things I want.

In short, I wanted to make the Login and Register buttons appear in a different order, and also change the text of the buttons. And I wanted to move the logo to be inside the same level as the navigation, and move the search and cart buttons in there as well. If it would help you understand what I mean, I could share a screen of the navigation we have for our designs.

Kind regards,

Javier :smile:

Hi Javier, I appreciate having you with us.

At this moment in time, I’ve not come across any decent sources that really explain Frontend Development on a level that I’m personally able to absorb properly. Like many other sources of Magento 2 information I guess. Everything seems aimed towards individuals more experienced than me.

If you’re willing to cough up some cash, the Official Magento University has a course for $375. But I can’t remember how advanced it is. I had a flick through it last year when it was free for 3 months.

I can kind of assist you with your 3 objectives though. I’ll have to update my answer as time goes on, because I’ll struggle with time to investigate this week. So you need to:

  1. Swap order of Login and Register buttons
  2. Rename Login and Register buttons
  3. Move Logo to Menu

:white_check_mark: Objective 2
Objective 2 is pretty straightforward, so I can help with that now.

In order to change most labels in Magento, you can use translations. In Magento 1.x it is referred to as “locale”. In Magento 2 it is referred to as “Internationalisation”, AKA “i18n”. (I love this abbreviation. The letter “i” followed by 18 letters and finished with “n”).

You can implement i18n to both Modules and Themes. As you’re working on a child theme, just follow these steps:

  1. Create a folder named “i18n” in your theme folder. E.g. Vendor/theme/i18n
  2. Create a csv with a filename relating to the language you’re using E.g. default is ‘en_US.csv
  3. Add any lines you wish to translate into your csv file (ref below)
  4. Clear your cache & Refresh page to see changes

Example Contents of en_US.csv

“Create an Account”,“Register”
“Sign In”,“Log In”

I’ll let you know about Objective 1 & 3 later in the week if I get a chance.

Hey Craig!

doing the Internationalisation worked perfectly. I thought about doing it that way at first, but I wasn’t sure if we wanted that text change in all the platform or just on that navigation button. In the end we liked to have it translated across all the platform so we did it like that, thanks. We used ‘en_GB’ since that’s our locale.

Also, this week playing around I did manage to just change the text in that navigation button, in case someone would like to know it, I did it by extending the Magento -> Customer -> layout -> default.xml file in my child theme, adding this:

    <referenceBlock name="register-link">
      <arguments>
        <argument name="label" xsi:type="string" translate="true">Register</argument>
      </arguments>
    </referenceBlock>

hope it helps someone :slight_smile:! I’m still trying to figure out how to properly move stuff in the layout haha. The order of the navigation links is the same as what we have in category list right?

I’ll write here if I manage to find a solution for 1 and 3 before you haha. Thanks again :smiley:

I’m glad to see the i18n solution worked out for you. I’ll give you bonus points for “extending” rather than changing the cost code on your alternative solution :smiley:

Sorry, I didn’t get a chance to revisit the 1st and 3rd point. I had consumed by my own Magento challenges last week. From what I did manage to look at, the Register and Login links are buried deep within the layouts. I’m actually working with a Magento developer this week, I’ll ask her opinion when I speak to her. I don’t think it’ll be that difficult, it’s just ravelled in mystery right now.