Adding a customer greeting to the product collection pages

Store Design
1

Hi I was wondering whether anybody knows if it is possible to add a Greeting for logged in customers in the whitespace on the product collection main pages. We have a couple of category pages and would like to add a “Hi Logged in customer X” kind of message. Any suggestions would be amazing :slightly_smiling_face:

Wildbloomsau_0-1665044445128.png
Wildbloomsau_0-1665044445128.png1492×706 162 KB

Wildbloomsau_1-1665044472598.png
Wildbloomsau_1-1665044472598.png1333×618 348 KB

Wildbloomsau_2-1665044508646.png
Wildbloomsau_2-1665044508646.png1308×712 103 KB

And if possible when viewed on mobile to appear here just below the title. Happy to have it appear underneathe the title on both views if that is the only possible solution. We are using the Dawn theme 2.0

Wildbloomsau_3-1665044556283.png
Wildbloomsau_3-1665044556283.png475×210 12.4 KB

2

@Wildbloomsau - it can be done but it will need code editing where we need to check if user on site is customer logged in and if it is then display its name on the location you want

3

Ok Thanks I had a feeling it was possible, is there anyone that knows how to do this with coding and would be happy to help out?

4

Hi @Wildbloomsau , it’s Layoutbase here.

We would like to provide you with our thoughts on your question.

  1. Go to Online Store->Theme->Edit code
  2. Sections/main-collection-banner.liquid → find h1 tag, after that, replace with code below.

        # 
         {{ 'sections.collection_template.title' | t }}: 
          {{- collection.title | escape -}}
          
         {% if customer %} 
           Hi Logged in customer {{  customer.name }}
         {%  endif  %}
  1. Assets/base.css → add the code below to the bottom of the file.
.title-customer { display: flex; align-items: center;}
.greeting { margin-left: auto;}
  @media screen and (max-width: 749px) {
    .title-customer { flex-flow: column; }
    .greeting { margin-right: auto;}
  }

Hope you find our suggestion helpful.

Best regards,

Layoutbase

1 Like
5

@Wildbloomsau - you can try code given by @layoutbase , it is correct code

6

Thank you so much this works!!