Solved

how to change the font size on collection list titles in brooklyn theme?

lonniefryer
Tourist
9 0 1

I'm trying to minimize the font size of collection list titles on brooklyn theme, but im stuck, can someone please guide me through this?

Accepted Solution (1)
KetanKumar
Shopify Partner
36839 3635 11972

This is an accepted solution.

@lonniefryer 

Thanks for revert code now look proper 

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

.collection-grid__item-title {
    font-size: 24px; /* change font size as you like.*/
} 

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

View solution in original post

Replies 19 (19)

KetanKumar
Shopify Partner
36839 3635 11972

Hello, @lonniefryer 

Welcome to the Shopify community!
and Thanks for your Good question.

Please share your site URL,
So I will check and provide a solution here.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
lonniefryer
Tourist
9 0 1

https://just-ensemble.myshopify.com/?_ab=0&_fd=0&_sc=1&key=92cf3248ba95cbe1e6f80919df68b4d346ea25277...

 

this is the URL but my store isnt published yet. I'm attaching pictures so that its more clear.Capture 1.JPGtheme.scss,liquidtheme.scss,liquid

KetanKumar
Shopify Partner
36839 3635 11972

@lonniefryer 

Thanks for URL sorry but I can't see a view

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
lonniefryer
Tourist
9 0 1

Hi Ketan,

 Please try this one, https://just-ensemble.myshopify.com/      

QuangN
Pathfinder
100 12 36

Hi @lonniefryer,

 

You can inspect the live page and adjust the font size of the collection grid item title to your liking:

july28.png

 

 Then when you find the font size you like, just add this code to your theme.scss.liquid file:

 

@media screen and (min-width: 591px)
.collection-grid__item-title {
    font-size: 2.42857em;
}

 

Dont forget to change the font size value.

By the way, you should add more product images. It's essential, especially for visually-driven products like clothings. You can take a look at this article about the types of product images you need to add to product pages.

- Tips to optimize website loadspeed: academy.pagefly.io/how-to-speed-up-website

- Do you need to customize your landing page, product page, blog, coming soon, FAQ, about us pages? Check out PageFly - Advanced Shopify Page Builder.
lonniefryer
Tourist
9 0 1

Hi Quang,

 First of all, thank you for your positive response. But by doing as you mentioned, it is disturbing the whole layout of the store. I've attached the pictures, please see.edited codeedited codedisturbed layoutdisturbed layout

KetanKumar
Shopify Partner
36839 3635 11972

This is an accepted solution.

@lonniefryer 

Thanks for revert code now look proper 

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

.collection-grid__item-title {
    font-size: 24px; /* change font size as you like.*/
} 

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
lonniefryer
Tourist
9 0 1

Works Perfect, Thank you Ketan!

lykia
Tourist
5 0 2

Hi is this possible to change only mobil version and not desktop version. If i change font size my my mobil version look very nice and i can read the all collection name but the problem is the font size is very small if i change to desktop version. Is there any solution ? thank you

KetanKumar
Shopify Partner
36839 3635 11972

@lykia 


Welcome to the Shopify community!
and Thanks for your question.

Please share your site URL,
So I will check and provide a solution here.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
lykia
Tourist
5 0 2

Hi Ketan 

 

my site is not published yet but will you log in if I give password or what do you prefer? 

KetanKumar
Shopify Partner
36839 3635 11972

@lykia 

if you have front end password is confidential so please to a personal message as you like.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
lykia
Tourist
5 0 2
Hi

Www.lykia.dk

Kode 1980Aksu
lykia
Tourist
5 0 2

Www.Lykia.dk

code 1980Aksu

KetanKumar
Shopify Partner
36839 3635 11972

@lykia 

Thanks for it 

can you please share a screenshot further issue

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
lykia
Tourist
5 0 2

2561B0DD-E956-42CD-8116-82814E3FC9B4.jpeg

 see please mobil version is fine because i chance theme grid coding as you show so it is very fine  but on desktop version the text is very little  

774D535A-723D-41DD-A08E-4911B7E6D3A4.jpeg

KetanKumar
Shopify Partner
36839 3635 11972

@lykia 

Thanks for more details 

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

.collection-grid__item-title {
    font-size: 14px;
}
@media only screen and (min-width: 769px) {
.collection-grid__item-title {
    font-size: 24px;
}
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Aayushi
Visitor
1 0 1

Thank you so much !!

KetanKumar
Shopify Partner
36839 3635 11972

@Aayushi 

it's my pleasure to help us

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing