Solved

Reduce Title Text Size of Products on Collection pages

Gazza18
New Member
4 1 0

Hi there

How do I reduce the text size of the products of the titles on my collection pages ? Pls see screenshot below, the text of these titles is much too big. If someone can help me with the exact CSS code and where to place this code, I will be very appreciative. Below are the URL's some of the collection pages I have :-

 

https://7fb06d-13.myshopify.com/pages/9kt-gold-necklaces

https://7fb06d-13.myshopify.com/pages/9kt-gold-bracelets

 

Collection page screenshot titles too large.PNG

Accepted Solutions (4)

BSSTech-Venture
Shopify Expert
379 88 98

This is an accepted solution.

Hi @Gazza18 ,

You can try this code by following these steps:

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file base.css or theme.css 

Step 3: Insert the below code at the bottom of the file -> Save

 

 

h3.pe-product-title a {
    font-size: 15px !important;
}

 

 

 

Here is result: 

BSSTechVenture_0-1715858975365.png

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

 

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

View solution in original post

Anshul_arora
Navigator
375 107 74

This is an accepted solution.

Hello @Gazza18 ,

I understand you are looking to reduce the text size of Product names in the Product Listing Page.

Please add the below-mentioned code at the bottom of the theme.liquid file before </body> tag and save.

<style>

.pe-pirate.pe-lg a {
font-size: 20px !important;
}

</style>

 

While reviewing your store, I feel the products are not listed in the proper manner, there is no spacing between them https://prnt.sc/BAkNYH9LRhRt , to fix this please add the below-mentioned code with the above code.

<style>

.pe-product-children {
margin-left: 25px;
}

</style>

 

After applying the code output will be like this -: https://prnt.sc/PJ69RED1qZQU

Anshul_arora_0-1715861294507.png

 


I hope the code helps you.

Please share if you have any queries.

Thank you.

Please remember to like and accept the solution to help other store owners.

For Shopify Design & Development | Custom Coding -Visit Here

View solution in original post

Gazza18
New Member
4 1 0

This is an accepted solution.

wow, thank you so so much, worked like a charm 🙂

Any other CSS you think I should add to make these collection pages look slicker ? If you have any other suggestions/code, pls share , I would be extremely grateful - my CSS knowledge is terrible 🙂

View solution in original post

Anshul_arora
Navigator
375 107 74

This is an accepted solution.

Hello @Gazza18 ,

Thank you for your kind response.

If my previous solution helps you, please like & accept the solution.

In regards to other CSS code, please let me know what are the other changes you are looking to implement, I can suggest the code accordingly.

Thank you.

Please remember to like and accept the solution to help other store owners.

For Shopify Design & Development | Custom Coding -Visit Here

View solution in original post

Replies 5 (5)

BSSTech-Venture
Shopify Expert
379 88 98

This is an accepted solution.

Hi @Gazza18 ,

You can try this code by following these steps:

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file base.css or theme.css 

Step 3: Insert the below code at the bottom of the file -> Save

 

 

h3.pe-product-title a {
    font-size: 15px !important;
}

 

 

 

Here is result: 

BSSTechVenture_0-1715858975365.png

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

 

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

Anshul_arora
Navigator
375 107 74

This is an accepted solution.

Hello @Gazza18 ,

I understand you are looking to reduce the text size of Product names in the Product Listing Page.

Please add the below-mentioned code at the bottom of the theme.liquid file before </body> tag and save.

<style>

.pe-pirate.pe-lg a {
font-size: 20px !important;
}

</style>

 

While reviewing your store, I feel the products are not listed in the proper manner, there is no spacing between them https://prnt.sc/BAkNYH9LRhRt , to fix this please add the below-mentioned code with the above code.

<style>

.pe-product-children {
margin-left: 25px;
}

</style>

 

After applying the code output will be like this -: https://prnt.sc/PJ69RED1qZQU

Anshul_arora_0-1715861294507.png

 


I hope the code helps you.

Please share if you have any queries.

Thank you.

Please remember to like and accept the solution to help other store owners.

For Shopify Design & Development | Custom Coding -Visit Here
Gazza18
New Member
4 1 0

This is an accepted solution.

wow, thank you so so much, worked like a charm 🙂

Any other CSS you think I should add to make these collection pages look slicker ? If you have any other suggestions/code, pls share , I would be extremely grateful - my CSS knowledge is terrible 🙂

Anshul_arora
Navigator
375 107 74

This is an accepted solution.

Hello @Gazza18 ,

Thank you for your kind response.

If my previous solution helps you, please like & accept the solution.

In regards to other CSS code, please let me know what are the other changes you are looking to implement, I can suggest the code accordingly.

Thank you.

Please remember to like and accept the solution to help other store owners.

For Shopify Design & Development | Custom Coding -Visit Here
Gazza18
New Member
4 1 0

ok i do have another CSS question 🙂

you will see on all my product pages, the descriptions are EXTREMELY long. This is because when I imported the products from woocommerce, the descriptions were very detailed. Is there any way to hide all these very long product descriptions from the enduser via css? I think it would be good for Google to "see" the descriptions from an SEO point of view, but the end user does not need to see these product descriptions?

Thanks again for your help/