Set up Welcome Message in Magento 2

In Magento 2 Basics Configuration of Storefront Branding, beside Logo, Favicon Copyright notice and Store demo notice, the Welcome Message is very important part. The Welcome Message is on the top right of the header, that extends to include the name of the customer who is signed in. However, with guest customer who do not log in the web store, a message “Default welcome msg” will appear automatically by default Magento 2. Before you launch your store, to make your online store become more friendly and attractive, you must make sure to change the default Welcome content for each store view. This article will show you how to customize your welcome message in Magento 2 webstore.

storefront-welcome-message
Welcome Message

To change the welcome message, you need to follow these steps:

  1. If you are using Magento 2.1 or above, on the Admin sidebar, click Content. After that under Design, choose Configuration.
    If you are using Magento 2.0.x, on the Admin sidebar, click Stores, on Settings option, click Configuration.
  2. In the Design Configuration table, find the store view which you want to configure. After that in the Action column, click Edit. After that, follow these tips:
design-configuration
Design Configuration

a. Under Other Settings, expand the Header section.

b. Enter the Welcome Text that you want to display in the header of your store.

design-configuration-header_thumb_0_0
Header
  1. When everything is complete, click Save Configuration.
  2. After prompted to update the Page Cache, click the Cache Management link at the top of the workspace. After that, follow the instructions to refresh the cache.

Above is an easy tutorial to customize the Welcome Message in your web store. We hove that your online store will have a friendly message to welcome your customers. Thank you for your attention to this article, if you have a question, do not hesistate to ask magexts authors in the comment section or contact directly with email.

How to Add a Favicon for Magento 2 Website

Favicon is short for “favorite icon,” and refers to the little icon on the tab of each browser page. Depending on the browser, the favicon also appears in address bar, just before the URL of the Magento 2 webstore.

Favicons are generally 16 x 16 pixels or 32 x 32 pixels in size. Magento allows ICO, APNG, PNG, JPG (JPEG) and GIF file types, in spite of the fact that not every browser supports these formats. The most widely-supported file format to use for a favicon is ICO. Other image file types can be used, although the format might not be supported by all browsers. There are many free tools available online that you can use to create an ICO image or convert an existing image to the format.

Magento2-Favicon-in-Address-Bar
Favicon in Address Bar

Step 1: Create a Favicon in Magento 2

  1. Create a 16 x 16 or 32 x 32 graphic image of your logo, using the image editor of your choice.
  2. (Optional) Use one of the available online tools to convert the file to the .ico format. After that, save the file to your computer.

Step 2: Upload the Favicon to Your Magento 2 Store

  1. On the Admin sidebar, click Content. After that under Design, choose Configuration.
  2. In the grid, find the store view that you want to configure. After that in the Action column, tap Edit.
  3. Under Other Settings, expand the HTML Head section. After that, follow these tips:
magento2-html-head
Magento 2 HTML Head
  1. click Upload. After that, explore to the favicon file that you prepared, and click Open.
magento2-favicon
favicon magento 2
  1. If you want to delete the current favicon, click Delete in the lower-left corner of the image. After that, upload another.
  1. After completing, click Save Configuration.

Step 3: Refresh the Cache

  1. After prompted to refresh the cache, click the Cache Management link in the message on the top of the workspace.
  2. In the list, mark the Page Cache checkbox that is marked “Invalidated.”
  3. Change Actions to “Refresh.” After that, click Submit.
  4. To view the new favicon, return to your storefront and press F5 to refresh the browser.

Favicon File Formats

FILE FORMAT DESCRIPTION
PNG (Portable Network Graphics) is an improved, replacement for the older GIF format. The lossless compression format proposes a high-quality bitmap image with crisp text, but a larger file size than some formats. This image format is designed to be both streamed online and viewed, also supports transparent layers
APNG (Animated Portable Network Graphics) A file format that similar to PNG and supports simple animation.
GIF (Graphics Interchange Format) an older bitmap and widely supported that is restricted in 256 (8 bit) colors, which is supports transparent layers and simple animation.
JPG (JPEG) (Joint Photographics Expert Group) A compressed bitmap format which is used by most camera with digital technology. Sometimes blurry spots are noticeable in text, because the lossy compression causes some data loss

How to Upload Logo in Magento 2

The first thing you need to do is customize the logo in the header, and change the favicon for the browser. You’ll also want to update the copyright notice in the footer. These are some easy design works that you can deal with right away. When you develope your store, you can turn on the store demo notice, and then remove it later when the store is ready to go live. In this article, we will give you information about uploading your logo in Magento 2.

storefront-home-page-branding
Storefront Branding

Uploading your Logo

The store’s theme will determine the location and the size of the logo in the header . You can save your logo as either a GIF, PNG, or JPG (JPEG) file type, and upload them from the Admin of your store.

storefront-header-logo
Logo in Header

The logo image  is uploaded in the specific location on the server. Any image file with the name “logo.gif” is used as the default theme logo.

Full path: app/design/frontend/[vendor]/[theme]/web/images/logo.gif

Relative path: images/logo.gif

If you don’t know the size of the logo, or any other image that is used in your theme, open the page in a browser, right-click the image, and inspect the element.

Besides the logo in the header, your logo is also displayed on email templates and on PDF invoices and other sales documents. The logos used for email templates and invoices have different size requirements, and must be uploaded individually.

To upload your logo:

  1. On the Admin sidebar, click Content tab. Then under Design, click Configuration.
design-configuration
Design Configuration
  1. Choose the storeview that you want to configure, and in the Action column, switch to Edit mode.
  2. Open the Header section. After that follow theses tips:
design-configuration-header
Header
  1. To upload a new logo, click Upload. Then, pick the image file from your computer.
  2. Input the Logo Image Width and Logo Image Height.
  3. In the Logo Image Alt input field, fullfill the text that you want to display when someone hovers over the image.
  1. After complete, click Save Configuration.

Logo File Formats

FILE FORMAT DESCRIPTION
PNG (Portable Network Graphics) is an improved, replacement for the older GIF format. The lossless compression format proposes a high-quality bitmap image with crisp text, but a larger file size than some formats. This image format is designed to be both streamed online and viewed, also supports transparent layers
GIF (Graphics Interchange Format) an older bitmap and widely supported that is restricted in 256 (8bit) colors, which is supports transparent layers and simple animation.
JPG (JPEG) (Joint Photographics Expert Group) A compressed bitmap format which is used by most camera with digital technology. Sometimes blurry spots are noticeable in text, because the lossy compression causes some data loss

 

How to Configure and Customize The Contact Us Link in Magento 2

In the footer of the store website, the Contact Us link is an easy way to let the customer keep in touch with you. Customer can fill the form and send the message to your online store.

contact-us-in-footer
Contact Us in Footer

A thank you message will appear directly after the form is submitted.

contact-us-page
Contact Us Page

To configure Contact Us:

  • In the Admin sidebar, click Stores. Under Settings tab, click Configuration.
  • On the left of the panel under General tab, click Contacts.
  • Open the Contact Us section, If necessary, config Enable Contact Us to “Yes.”
contact-us
Contact Us
  • Open the Email Options section. After that, follow this tip:
email-options
Email Options
  • In the Send Emails To input field, input the receiver email so the Contact Us form can send email to.
  • Set up Email Sender to the online store identity that represents for sender of the message from the Contact Us form. In example: Custom Email 2.
  • Set up Email Template to the template that is specialized for messages sent from the Contact Us form.
  • After complete, click Save Config

To customize the content:

The Luma sample data provides a Contact Us Info block that can be modified for your online store. The contact-us-info block can be easily customized to add your info to the Contact Us page.

  • On the Admin sidebar, click Content. After that in Elements tab, click Blocks.
  • Find Contact Us Info block in the list, then change Action to Edit mode
contact-us-info
Contact Us Info
  • Scroll down to the Content input field, and make any modify in need.

The text can be formatted, and add image and links through the editor toolbar.

To work directly with HTML script, click Show/Hide editor tab.

contact-us-content
Contact Us Content
  • After complete, click Save Block