Changing the size of product title and price

Site URL: https://www.amieamie.ca/

Hello, 

How do I go about changing the size of the product title and price on the home page? https://www.amieamie.ca/

Every post I read about it says this...

1. In the Home Menu, click Design, then click Fonts.
2. Choose a font, and click the  to apply the font to specific parts of your site.

... but there is no such thing as a wheel symbol or any product list section where I could change the size of the font.

Any idea what I can do? Moreover, the price style and font are different on the SHOP's page, and I have no idea how to access that either!

Thanks!

1 hour ago, amieamie said:

How do I go about changing the size of the product title and price on the home page? 

On a normal Store page in Squarespace 7.1 you can change the fonts from the Design > Fonts menu. This launches the Fonts panel where you can customise the font sizes and styles.

However, your home page appears to be built using Product Blocks. These use 'Paragraph2' formatting that is used in many places on your site, so if you change this font in the Fonts panel, it will change other areas too.

However, you can change the sizes of titles and prices within Product Blocks using "CSS". Add the styles below to Design > Custom CSS and adjust the sizes to suit you. The current sizes are 1.3em and 1.1em respectively.

/* Product Block Titles */
.product-block .productDetails .product-title {
  font-size: 1.8em;
}
/* Product Block Prices */
.product-block .productDetails .product-price {
  font-size: 1.5em;
}

The current sizes are 1.8em and 1.5em respectively.

By the way, the fonts on the store page and the home page are all the same - Proxima Nova. However, they are shown in different sizes and different weights.

   If a post helps you, please click a "Like" option below  ↘️

I have the same issue. i just tried the CSS from Paul2009 and it said "syntax error".  I am not sure what happened. I copied it directly in to the CSS box. I have ventura. 

@vanessailene Can you post the CSS you pasted into Design > Custom CSS or a screenshot of it with perhaps the error message?

On 9/29/2020 at 3:16 PM, paul2009 said:

On a normal Store page in Squarespace 7.1 you can change the fonts from the Design > Fonts menu. This launches the Fonts panel where you can customise the font sizes and styles.

Hi, 

I followed the instructions to get to Fonts but that changes the product title and price when a product is clicked to go to the product page. 

I want to change the size of the title and price for the shop page where all the products are and their respective categories. https://www.tribeandsol.com/shop

On 11/5/2021 at 6:27 AM, MoonMama said:

Hi, 

I followed the instructions to get to Fonts but that changes the product title and price when a product is clicked to go to the product page. 

 

I want to change the size of the title and price for the shop page where all the products are and their respective categories. https://www.tribeandsol.com/shop

 

 

Try this CSS

.grid-title {
    font-size: 75px !important;
}

.grid-prices * {
    font-size: 10px !important;
}

2 hours ago, tuanphan said:

Try this CSS

.grid-title {
    font-size: 75px !important;
}

.grid-prices * {
    font-size: 10px !important;
}

 

Thank you! One question, how can I get hover with color over the images so that the title and price show clearer. Here is an example of what I would like:

On 11/7/2021 at 12:23 PM, MoonMama said:

Thank you! One question, how can I get hover with color over the images so that the title and price show clearer. Here is an example of what I would like:

 

Add to Design > Custom CSS

.products.collection-content-wrapper .list-grid .grid-item .grid-image:after {
    content: "";
    background-color: yellow;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    opacity: 0;
}
.products.collection-content-wrapper .list-grid .grid-item:hover .grid-image:after {
    opacity: 1;
}
.products.collection-content-wrapper .grid-meta-wrapper {
    z-index: 9999999999 !important;
}

3 hours ago, tuanphan said:

Add to Design > Custom CSS

.products.collection-content-wrapper .list-grid .grid-item .grid-image:after {
    content: "";
    background-color: yellow;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    opacity: 0;
}
.products.collection-content-wrapper .list-grid .grid-item:hover .grid-image:after {
    opacity: 1;
}
.products.collection-content-wrapper .grid-meta-wrapper {
    z-index: 9999999999 !important;
}

 

Thank you so much!

On 11/7/2021 at 3:50 AM, tuanphan said:

Try this CSS

.grid-title {
    font-size: 75px !important;
}

.grid-prices * {
    font-size: 10px !important;
}

 

Hi!

I'm wondering how I can apply/edit this CSS to edit the title and prices size inside the product page details?

I tried the code that was mentioned above (I'm copying it again below), but it's not doing anything when I copy it inside the Custom CSS.

Would you also happen to know how to change the fonts of the title and price inside the product page? I can't seem to make that one work either.

Thank you so much!

/* Product Block Titles */
.product-block .productDetails .product-title {
  font-size: 1.8em;
}
/* Product Block Prices */
.product-block .productDetails .product-price {
  font-size: 1.5em;
}

On 8/3/2022 at 3:30 AM, FreyaBookDesign said:

Hi!

I'm wondering how I can apply/edit this CSS to edit the title and prices size inside the product page details?

I tried the code that was mentioned above (I'm copying it again below), but it's not doing anything when I copy it inside the Custom CSS.

Would you also happen to know how to change the fonts of the title and price inside the product page? I can't seem to make that one work either.

Thank you so much!

/* Product Block Titles */
.product-block .productDetails .product-title {
  font-size: 1.8em;
}
/* Product Block Prices */
.product-block .productDetails .product-price {
  font-size: 1.5em;
}

Hi. Can you share link to a product detail page? We can help easier