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

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

Matt_Dubinsky
Excursionist
27 0 9

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 themetitle.jpg

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

 

Replies 4 (4)

BSSCommerce-HDL
Shopify Partner
1024 345 412

Hi @Matt_Dubinsky 

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

BSSCommerceHDL_1-1718068199021.png

 

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

BSSCommerceHDL_2-1718068206241.png

 

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: 

BSSCommerceHDL_0-1718068169246.png

 

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


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency

bryan76
Trailblazer
231 4 47

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
Explorer
61 7 23

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.

swym_0-1718089546884.png

 

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:

 

swym_3-1718089810087.png

 

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:

swym_4-1718089870141.png

 

I hope this helps!

Regards,
Abhishek from Swym 

- Appreciate the assistance. Show your approval with a Like! And when your question finds its answer, seal the deal by marking it as an Accepted Solution!
- Our Solutions: Wishlist Plus | Swym Back in Stock Alerts | Swym Gift Lists and Registries
bryan76
Trailblazer
231 4 47

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.