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

Hi!

I'm working on a site and I am trying to change the product title on the product page. It is currently H1 and I would like it to be H4. 

I am using a custom font for H1, H2 and H3 and Lora for H4 (a preloaded SS font). However the Lora font recently stopped working in some places on my site. 

I tried to following code to adjust the product title on the product page:

++++++++++++

.ProductItem .ProductItem-details .ProductItem-details-title {
  font-family: Lora;
  font-size: 1rem! important;
}

++++++++++++

Website: https://heidihulbigtherapy.com/therapy-resources-shop/p/save-it-for-therapy-journal

@paul2009 @tuanphan or anyone else, I would love your thoughts/suggestions. 

Thank you!
 

@AshM13 Use this code for title

.pdp-layout .pdp-details .pdp-details-title {
    font-size: 1rem !important;
}

@tuanphan That worked great! Thank you!

I have a similar question but am not having luck with the suggestions already listed. 
I am trying to increase the price size as well as center align the product title, price, and add to cart buttons on this page https://www.christmascycle.com/shop/2023-st-nicholas-streaming-access

and this page https://www.christmascycle.com/shop/2023-st-nicholas-premiere-zoom


Do you know a way to do that @tuanphan? Thank you in advance!

On 11/21/2023 at 3:29 AM, Alinart said:

I have a similar question but am not having luck with the suggestions already listed. 
I am trying to increase the price size as well as center align the product title, price, and add to cart buttons on this page https://www.christmascycle.com/shop/2023-st-nicholas-streaming-access

and this page https://www.christmascycle.com/shop/2023-st-nicholas-premiere-zoom


Do you know a way to do that @tuanphan? Thank you in advance!

Add this code to Website > Page > Website Tools (under Not Linked) > Custom CSS

/* Product info center size */
#productDetails .product-price {
    font-size: 30px !important;
    text-align: center;
}
#productDetails .product-title {
    text-align: center;
}
.collection-type-products .sqs-add-to-cart-button-wrapper {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

Thank you so much @tuanphan. That worked perfectly!

Hi! Im trying to make the product title font smaller as well as increase price font. I have put below CSS, but nothing happened.

Could you please help?

And how can I make the product pictures smaller?

/* 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 12/18/2023 at 9:58 PM, Lyuba said:

Hi! Im trying to make the product title font smaller as well as increase price font. I have put below CSS, but nothing happened.

Could you please help?

And how can I make the product pictures smaller?

 

 

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

This code for product block. If you have problem on product individual page, you can share link, we can check easier

On 12/20/2023 at 9:45 AM, tuanphan said:

This code for product block. If you have problem on product individual page, you can share link, we can check easier

Hi! Here is the link on a product page https://snail-wolf-nzdd.squarespace.com/config/pages/65675f54448c624efb7e2856/categories/65675f54448c624efb7e285b

On 12/22/2023 at 12:26 AM, Lyuba said:

Hi! Here is the link on a product page https://snail-wolf-nzdd.squarespace.com/config/pages/65675f54448c624efb7e2856/categories/65675f54448c624efb7e285b

Use this code

.pdp-layout .pdp-details .pdp-details-title {
    font-size: 30px;
}
.product-price {
    font-size: 40px;
}

On 12/23/2023 at 2:39 AM, tuanphan said:

.pdp-layout .pdp-details .pdp-details-title {
    font-size: 30px;
}
.product-price {
    font-size: 40px;
}

Thank you!

Could you please also help making the pictures and font smaller in the front page of the store?

https://gethealthcultivated.com/store-1

One more question where can I change the link not to be https://gethealthcultivated.com/store-1, but to be http://gethealthcultivated/store, without this store-1?

On 1/12/2024 at 12:32 AM, Lyuba said:

Thank you!

Could you please also help making the pictures and font smaller in the front page of the store?

https://gethealthcultivated.com/store-1

One more question where can I change the link not to be https://gethealthcultivated.com/store-1, but to be http://gethealthcultivated/store, without this store-1?

#1. Use this CSS code

div.grid-item {
    width: 50%;
    margin: 0 auto;
}

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

#2. Access your edit mode > Websites > Hover on "Shop" > Click Gear icon > Look at URL Slug, you can remove "1" there

On 1/13/2024 at 9:38 AM, tuanphan said:

#1. Use this CSS code

div.grid-item {
    width: 50%;
    margin: 0 auto;
}

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

#2. Access your edit mode > Websites > Hover on "Shop" > Click Gear icon > Look at URL Slug, you can remove "1" there

Hi! I have also set up a separate shop for wholesalers and those codes are not working for it. Could you please help with getting product name and price font smaller?

https://snail-wolf-nzdd.squarespace.com/config/pages/65a91015b65a793bfbbc88c1/categories/65a91015b65a793bfbbc88ce

Just now, Lyuba said:

Hi! I have also set up a separate shop for wholesalers and those codes are not working for it. Could you please help with getting product name and price font smaller?

https://snail-wolf-nzdd.squarespace.com/config/pages/65a91015b65a793bfbbc88c1/categories/65a91015b65a793bfbbc88ce

 

https://gethealthcultivated.com/wholesale-store/p/probiotic-yogurt-starter-culture-pack-10-units