Salon Beauty/ Barber Shop app💈

[Lucas_Pires]

Hey hey, Gliders!

First topic here! I’ve been using and abusing glide all over my days for months. And to open this topic, I wanna introduce you my new brand Salon Beauty/ Barber Shop app!

What will you see here?

• Circle Profile Image using Rich Text (not tiles);
• Screens and Font Color totally personalized by the theme and for each person.
• And much more.

Let’s take a look.

I made two apps for Salon Beauty/ Barber Shop app! :

1. Admin
2. Clients

Admin

https://sallonadmintemplate.glideapp.io

First thing we see is beautiful circle profile pic.

I know, Lucas, using the new update of inline list… ugh

Nah. Rich Text.

What?

Exactly

Here’s the code.

<center><div style="background-image: url('URL'); -moz-border-radius: 50%; -webkit-border-radius: 50%; border: 1px solid white; width:150px; height:150px; background-repeat: no-repeat, center;  background-attachment:scroll;   background-size: cover; background-position: center center;">

Basically, what you have to do is:

Separate into 3 partes in the columns

1. Code till URL
2. Profile URL Link
3. Rest of the code.

You’ll have to concatenate them. I separated in google sheet like above and used Data from Glide to join them.

Afterwards, take a Rich Text component and select the concatenate text. Done.

---

Edit¹: Compatible with square and rectangular photos, yay! Always centralized.

---

Second thing you’ll realise this customized screen and font color kindly matching with the app theme and the rest of it.

Rich Text: Font color code.

<h1><font color=COLOR> Color Text </font></h1>

• You just have to change “COLOR” with the name of the color, e.g. “red”, or hex color like “#8D0C01”

• And when is H1, is like the # on markdown text.

Simple. Just copy and paste. Try it.
(Even I spent a few hours to discover it and make it excellente for all of you )

Third thing we see how the Salon Tab looks like. Take a look

Clients

https://sallonbeautytemplate.glideapp.io

You’ll note:

• Header using the app theme color and making a gradient effect. Just perfect. Love it.

• A “Hey, NAME!” customized in Data and font color changed.

• Header easy-access button to Book, Send Whatsapp to the client, and Add a New Client, directly by the first screen - made with Inline List.

  • Book screen: Header Button (image) and Calendar with clients already booked.
  • Whatsapp screen: Choice to select the cliente, and directly pick its whatsapp number and concatenate to send the msg.
  • Add Client screen: Header button to add; List of clients already added.

• And more tabs like:

  • Team: easy acess to team profiles.
  • Clients: easy acess to clients profiles.
  • Profile: easy acess to your profile.

---

Edit²: Like Walt Disney said

“There is no magic in magic , it’s all in the details .”

---

Play with colors and customize the images to take your app to another level

Now, it’s all about use these two apps and tell me here down in comments what you think.

Hope you liked it, enjoy it, and try it out!

[Krivo]

Thanks for sharing. I really like your design. It just looks cool I got inspired

[Lucas_Pires]

@Krivo thanks!

[gila]

Very nice.

Do you have clients for this? I can’t imagine downloading an app for the barbershop that I go to. Maybe if there was a guaranteed discount on my next cut or something.

[Christophe_HK]

Very nice app! But take care guys using html tags in rich text component, they are not supported. Today it works, tomorrow they will perhaps not work, we have been advised to not use them.

[Lucas_Pires]

I already have some projects for them, but it’s important to say that my focus when i do an app to a company is for the “admin” one.

In this case in made two apps if the salon prefers to take them two. But I’d sell only the first one. More productive, mobility and agile.

[Lucas_Pires]

We take care of them @Christophe_HK . As i said all the topic above is, it’s just a model.

We’re gonna improve and make it better as glide will also do it. I was just testing some feature, and as you said, by now it works.

The focus here isn’t the HTML tags or something, but the way you can make better apps with images and paying attention in some little details.

If you take a look in the pics, or playing the app around, you will see.

[Christophe_HK]

Yep for sure, I am also working on a similar project

[Robert_Petitto]

Wow…I’m floored. I honestly had no idea you could use html tags in Glide (even if unsupported). Absolutely beautiful.

[Lucas_Pires]

Thank you @Robert_Petitto! Even if unsupported, I recommend use all the image features, as you see there!

[Jeff_Hager]

I use a small amount of html (mostly font color and tables). I wouldn’t be heartbroken if I lost font colors, but the html tables would be a big loss (mostly because I can’t span 100% width with markdown to make the tables look good). However, I do have a contingency plan in place. In addition to my dynamic html tables, I also have dynamic markdown tables in an unused column, so I’m ready to switch if html support is ever completely dropped. I only recommend to have a backup plan if the html ever stops working.

[eltintero]

Nice apps! Definitely the more images you use, the better the UX. Will implement some tips.
Well done!

[Lucas_Pires]

Yes! I definitely agree with you! I wouldn’t be heartbroken also if font color in rich text wouldn’t support any more, or even this test with circle profile pics.

But a thing I was really wishing and now glide support is to be to image get actions like url links!

That’s wonderful! Looking the design I used to do, simply match to what I wanted

[Lucas_Pires]

Thank you @eltintero! I definitely agree with you! UX for me, it’s most important after a good performance. Let’s improve ourselves!

[jorge_butron]

hello @Lucas_Pires , great stuff on this!love it.
I have some questions for you, keep in mind im fairly new to glide and im still learning more about it. So im a barber as my hobby in my evenings for example monday-sunday and i have 5pm-9pm slots open give or take 3-4 clients a day. so how do i create this active calendar where my clients can see whats open out of the few slots daily. hope this makes sense. thank you!!!

[zzoldan]

I’m having trouble copying both of these apps. Is anyone else also experiencing the loading icon for 5+ minutes, and then a “An error occurred duplicating the app.”? cc @Mark @david

[Jeff_Hager]

There’s some good info here about creating a booking system in your app. Could probably be modified to show availability of time slots.

Room Booking that prevents conflicts

I’m starting to work on a room booking app and was wondering if anyone has figured out a good way to create a way to prevent conflicting days/times (so that if I book a meeting on Monday from 9-10AM, this time slot can’t be booked by someone else). I know I could create a choice component that lists the possible days/times and then can probably figure out a way to remove choices as they are taken, but this doesn’t take into account all possible time choices (sometimes people will book on the 15…

[GoMobile]

Hi, @Lucas_Pires I have 20 salons and 3 beauty schools that would love for me to build them an app. I’m thankful for this app that u created but I’m not able to get the templates?

[Lucas_Pires]

Thanks @GoMobile!
I let available to copy the templates Idk why the people can’t do it

[GoMobile]

It’s just loading then give and error