how can I edit the font size or font weight of product titles on product pages

[Matt_Dubinsky]

Looking to see where i can change the font weight or font size of product titles on the product pages like the one circled in the attached image in debut theme

you can find this page here: https://chelseasbeads.com/collections/carnelian

i'd also want the same changes to be applied on search pages here: https://chelseasbeads.com/search?type=product&q=carnelian

[BSSCommerce-HDL]

Hi @Matt_Dubinsky 

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

Step 2: Search file base.css, theme.css, styles.css, custom.css or theme.scss.liquid

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

#shopify-section-collection-template .grid-view-item__title {
    font-size: 20px !important;
    font-weight: 600 !important;
}

Here is result: 

[bryan76]

go into the custom css box and add a little code:

h3 {
font-weight: bold;

font-size: 99.6%;
}

assuming it is H3 but could try div or h2 etc. 

[swym]

Hey @Matt_Dubinsky, 

It's good practice to create a copy of your theme and work on that to preview the changes before applying, especially if you are editing the raw code. Alternatively, you can also use the Shopify theme editor’s versions to revert to previous versions, but it is not recommended if you are making multiple changes.

To address your query about shifting the desktop logo and social icons on the header to the right-hand side, kindly follow the steps outlined below:

1. Open the code editor, as shown in the screenshot below.

2. Create a snippet called ‘custom-collection-styles’ and add the below code:

  <style>

    /* NOTE YOU CAN ADJUST THESE NUMBERS AS PER YOUR STORE REQUIREMENT */

    .grid__item .h4.grid-view-item__title {
       font-weight: 600;
       font-size: 20px;
    }
  </style>

3. Include the ‘custom-collection-styles.liquid’ file in your “theme.liquid” file.
Add the following include code to your theme.liquid file.

{% render 'custom-collection-styles' %}

It would look something like below:

4. Done? Save the file, and try previewing to confirm if the changes work for you.  In the reference above, it looks something like below:

I hope this helps!

Regards,
Abhishek from Swym 

[bryan76]

I do not suggest editing your theme's code for something like this.  if you use the custom css box in your theme editor it will carry over if you update your theme.