Banner w/ Centered Tag for Specific Customers

codynew
New Member
6 0 0

Hello,

I am having trouble with this one. I would like a banner to appear under the header for customers logged in that have a "Dealer" tag on their customer account. I have figured out how to get the text to show up if they have that tag with the code below.

{% if customer and customer.tags contains 'Dealer' %}
  <p><strong>Hello {{ customer.first_name }} {{ customer.last_name }}!</strong></p>
  <div><p class-"cm_center"><em>Thanks for being a valued Mammoth dealer! Please keep in mind; to be eligble for the dealer discount, 3 or more items (Sled/ATV Decks, UTV Racks) must be purchased. </em></p></div>
  <p class-"cm_center">For questions please call 888-999-2076</p>
  {% else %}
  <p class-"cm_center">Thanks for stopping by. To create an account, <a href="https://shop.mammothdecks.com/account/register" title="Create Account">click here!</a></p>
  {%endif %}

 

This works, however; I would like it to appear in a proper banner, and be centered on the customers screen.  Can anyone help me out? Attached is a screenshot of what it looks like right now.

 

Screenshot_4.png

 

Thanks!

Replies 9 (9)

oscprofessional
Shopify Partner
15846 2371 3074

Hello @codynew ,
Welcome to the Shopify community!
Share your store url with password.

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing
codynew
New Member
6 0 0

The store URL is http://shop.mammothdecks.com/

 

No password required.

codynew
New Member
6 0 0

Did you get the login?

oscprofessional
Shopify Partner
15846 2371 3074

@codynew ,

I have applied test dummy credentials.

Add this css at the bottom of
Online Store->Theme->Edit code->Assets->theme.scss.liquid

 

.customer-logged-in p {
    text-align: center;
}

 

If it will not work then you can send the login details in private

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing
codynew
New Member
6 0 0

That seemed to work. But, i would like more of an official banner like Shopify offers. Is this possible?

oscprofessional
Shopify Partner
15846 2371 3074

@codynew ,

Do you want to add banner image or background color ?

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing
codynew
New Member
6 0 0

Thanks for your help! I would like the banner to be the same color as the header on my website, and the front to be white.

oscprofessional
Shopify Partner
15846 2371 3074

I did not find my account login with text you can try this

Update the css please!

.customer-logged-in p {
    text-align: center;
    background-color: #1f96ff;
}

 

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing
codynew
New Member
6 0 0

Thank you! The color worked, but I would like the font to be white. Also, for some reason each line of text is making its own banner. How can i fix that? Also, it is making the background of "Account Details" blue, which I do not want.

Thanks,

Cody

Screen Shot 2021-09-29 at 8.01.34 AM.png