How to change breadcrumbs to sentence case

Solved

How to change breadcrumbs to sentence case

carla_5
Excursionist
58 0 6

Hi there

 

I am using Dawn Theme. I would like to change my breadcrumbs to be in sentence case.

 

Can someone please assist me. Find attached what it currently looks like.

 

Thanks

WhatsApp Image 2024-04-03 at 11.33.09_114d2208.jpg

Accepted Solution (1)
sahilsharma9515
Shopify Partner
1076 132 203

This is an accepted solution.

Hi @carla_5 The way you have mentioned is little complicated and you need to add more custom code for that. instead you can use this.

 

Please add the code in your theme.css/base.css/style.css file which is available in your theme.

 

.page-width.breadcrumbs>a {
    text-transform: lowercase;
}

 

sahilsharma9515_0-1712147282895.png

 

 

If you want all of it to be in Capital Letter then add this code:

.page-width.breadcrumbs>a{
    text-transform: uppercase !important;
}

 

sahilsharma9515_1-1712147363792.png

 

Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!

 

Best Regards

Sahil

 

- Your

 Coffee Tip 

can create magic in coding ❤️❤️

- Need a Shopify Developer? CHAT ON WHATSAPP or EMAIL ME !


- Hopefully the solution will help you. If yes then Please hit

 Like 

and

 Mark it as solution! ❤️


View solution in original post

Replies 9 (9)

sahilsharma9515
Shopify Partner
1076 132 203

Hi @carla_5 

Can you please provide your store URL and password as well if applicable, so that I can provide you solution that can work for your store.

 

Also did you want to change the font of the breadcrumb as same as the Sentence? Hopefully I understand your question if not then can you please explain your requirement?

 

Best regards

Sahil

- Your

 Coffee Tip 

can create magic in coding ❤️❤️

- Need a Shopify Developer? CHAT ON WHATSAPP or EMAIL ME !


- Hopefully the solution will help you. If yes then Please hit

 Like 

and

 Mark it as solution! ❤️


carla_5
Excursionist
58 0 6

Hi there, thank you for reply. 

 

I am looking to change the breadcrumbs on my page to just sentence case. I will attach 2 pictures, one how my page is curently looking, and the second one how I want it to look, for clarity 🙂

 

This is what it looks like, uppercase and sentence case mixed.

WhatsApp Image 2024-04-03 at 11.33.09_114d2208.jpg

This is How I want it to look like - Only Sentence Case

Screenshot 2024-04-03 125028.png

sahilsharma9515
Shopify Partner
1076 132 203

Hi @carla_5 Got it, understood your point, Can you now please provide your store URL and password as well if applicable, so that I can provide you solution that can work for your store.

 

Best Regards

Sahil

- Your

 Coffee Tip 

can create magic in coding ❤️❤️

- Need a Shopify Developer? CHAT ON WHATSAPP or EMAIL ME !


- Hopefully the solution will help you. If yes then Please hit

 Like 

and

 Mark it as solution! ❤️


carla_5
Excursionist
58 0 6

Yes sure, thank you so much 🙂

 

Password: saipru

URL: https://9a0bad-3.myshopify.com/

sahilsharma9515
Shopify Partner
1076 132 203

Hi @carla_5 Please add the code in your theme.css/base.css/style.css file which is available in your theme.

 

span.breadcrumb-delimeter {
    font-size: 10px !important;
}
.breadcrumb-delimeter:not(:last-child):after {
    font-size: unset !important;
}

 

If you are not sure where is your theme.css/base.css/index.css/style.css file please follow the steps:

  1. Login in shopify admin.
  2. Click on the Online Store.
  3. Then click on the button next to Customize in live Theme.
  4. Click Edit Code.
  5. Search theme.css/base.css/index.css/style.css in the code in left hand side which ever is available in your theme.
  6. You can add the above code at the bottom of the file.

Result:

sahilsharma9515_0-1712143956033.png

If you will unable to implement the same then I'm happy to do this for you, let me know. I can implement the code changes so that this will work well for you.

 

Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!

 

Best Regards

Sahil

- Your

 Coffee Tip 

can create magic in coding ❤️❤️

- Need a Shopify Developer? CHAT ON WHATSAPP or EMAIL ME !


- Hopefully the solution will help you. If yes then Please hit

 Like 

and

 Mark it as solution! ❤️


carla_5
Excursionist
58 0 6

Thank you so much. It looks better now. However, is it also possible for the words to be in the same letter case? For example, mine looks like this: Home / SHOP / BY PRODUCT / Leggings.

 

I would like it to look like this: Home / Shop / By Product / Leggings

sahilsharma9515
Shopify Partner
1076 132 203

This is an accepted solution.

Hi @carla_5 The way you have mentioned is little complicated and you need to add more custom code for that. instead you can use this.

 

Please add the code in your theme.css/base.css/style.css file which is available in your theme.

 

.page-width.breadcrumbs>a {
    text-transform: lowercase;
}

 

sahilsharma9515_0-1712147282895.png

 

 

If you want all of it to be in Capital Letter then add this code:

.page-width.breadcrumbs>a{
    text-transform: uppercase !important;
}

 

sahilsharma9515_1-1712147363792.png

 

Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!

 

Best Regards

Sahil

 

- Your

 Coffee Tip 

can create magic in coding ❤️❤️

- Need a Shopify Developer? CHAT ON WHATSAPP or EMAIL ME !


- Hopefully the solution will help you. If yes then Please hit

 Like 

and

 Mark it as solution! ❤️


carla_5
Excursionist
58 0 6

Hi there thank you so much for the above, will this code work if I change the text-transform to capitalize?  So that I can make the first character of a string capitalized and converts the remaining characters to lowercase?

sahilsharma9515
Shopify Partner
1076 132 203

Hi @carla_5 you can try but it will not work, as mentioned it need little complex coding to accomplish this and I will need to look into your theme code to provide you the exact solution.

 

There is a workaround if you are good to go with that, I have just looked your site and you have already figured the workaround that I am suppose to suggest you, great.

 

Hopefully I was able to help you, If yes then Please don't forget hit Like and Mark it as solution!, So that if some other person have the same issue then this post will help them.

 

Best Regards

Sahil

- Your

 Coffee Tip 

can create magic in coding ❤️❤️

- Need a Shopify Developer? CHAT ON WHATSAPP or EMAIL ME !


- Hopefully the solution will help you. If yes then Please hit

 Like 

and

 Mark it as solution! ❤️