Reduce Title Text Size of Products on Collection pages

[Gazza18]

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

[BSSCommerce-HDL · 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: 

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 😍

[Anshul_arora · 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

I hope the code helps you.

Please share if you have any queries.

Thank you.

[Gazza18 · 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 🙂

[BSSCommerce-HDL · 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: 

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 😍

[Anshul_arora · 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

I hope the code helps you.

Please share if you have any queries.

Thank you.

[Gazza18 · 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 · 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.

[Gazza18]

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/