Jump to content

Changing the size of product title and price

Recommended Posts

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 gear-icon-32px.png 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!

 

 

Link to comment
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  ↘️

spacer.png

Edited by paul2009

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment
  • 2 weeks later...
  • 1 year later...
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

 

 

Link to comment
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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:

 

1647372670_ScreenShot2021-11-06at9_21_59PM.thumb.png.dab3c4cd4c3bcbb4b2b239f38aab80fc.png

Link to comment
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:

 

1647372670_ScreenShot2021-11-06at9_21_59PM.thumb.png.dab3c4cd4c3bcbb4b2b239f38aab80fc.png

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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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!

Link to comment
  • 8 months later...
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;
}
Link to comment
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.