Adding a second line/subtitle to grid and product detail pages

Site URL: https://falcon-avocado-k4w3.squarespace.com/

Hello!

I'm working on setting up a photography print shop site. Currently using the Palmera template.

I want to be able to add a second line of text (subtitle with artist name) under each item, both in the grid and the product detail pages if possible. It should look like the attached images.

Ideally should also be able to lightly style this line of text, so it's smaller and a different color/opacity than the title.

Any ideas? Thanks so much in advance!

25 minutes ago, paul2009 said:

Palmera is a Squarespace 7.1 template and I provided some code to split product titles over two lines here: https://sf.digital/squarespace-solutions/display-product-titles-on-two-lines-with-squarespace-71

The article doesn't describe how to change the formatting of the two lines, but it is possible to do this with a little CSS. For example, on the Product Details Page:

/* Smaller second line */
.ProductItem .ProductItem-details h1.ProductItem-details-title {
  font-size: 22px;
  line-height: 1.8em;
}
/* Larger first line */
.ProductItem .ProductItem-details h1.ProductItem-details-title:first-line {
  font-size: calc(2.16vw + 1rem);
}

This CSS is just an example; I haven't tested it for your site because it is password-protected and therefore inaccessible.
 

Amazing, thank you Paul! I was able to get this to work for the Product Details Page, but it looks like the CSS will need to be different for the home/grid page. Any ideas?

Thanks again.

9 minutes ago, TrevorBaum said:

I was able to get this to work for the Product Details Page, but it looks like the CSS will need to be different for the home/grid page.

Yes, that's correct. The List page usually has these classes which you can substitute instead of those for the Detail page:

.products.collection-content-wrapper .grid-main-meta .grid-title 

So it would be something like...

.products.collection-content-wrapper .grid-main-meta .grid-title {
  font-size:12px;
  line-height: 1.8em;
}
.products.collection-content-wrapper .grid-main-meta .grid-title:first-line {
  font-size: calc(.36vw + 1rem);
}

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

Got it! Thank you so much Paul 🙏🏼

On 12/3/2020 at 8:42 PM, paul2009 said:

Yes, that's correct. The List page usually has these classes which you can substitute instead of those for the Detail page:

.products.collection-content-wrapper .grid-main-meta .grid-title 

So it would be something like...

.products.collection-content-wrapper .grid-main-meta .grid-title {
  font-size:12px;
  line-height: 1.8em;
}
.products.collection-content-wrapper .grid-main-meta .grid-title:first-line {
  font-size: calc(.36vw + 1rem);
}

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

Hello Paul, this worked perfectly, but the size of the title became tiny on Mobile view.  So I enlarged the text size, but then it was perfect on Mobile view, and huge on Desktop view. Is there some code to allow separate text sizes on Mobile view ?

Jonny

On 1/15/2021 at 5:03 AM, Zelda9090 said:

Hello Paul, this worked perfectly, but the size of the title became tiny on Mobile view.  So I enlarged the text size, but then it was perfect on Mobile view, and huge on Desktop view. Is there some code to allow separate text sizes on Mobile view ?

Jonny

can you share link to product page? We can help easier

On 1/14/2021 at 10:03 PM, Zelda9090 said:

Is there some code to allow separate text sizes on Mobile view ?

As @tuanphan commented above, it will help us if you can provide a working link to the page on your site. If your site isn't live yet, you may need to set a site password and share it with us.
 

Hi there,

I'm also in need of help with my mobile text sizes vs desktop. My desktop is fine, just need help with editing the product text size for mobile. 

My website is https://www.singhbeans.com/shop please take a look on the desktop and mobile and you can see the product size incredibly smaller on mobile. 

Thank you 

On 1/22/2021 at 6:43 AM, juggy15 said:

Hi there,

I'm also in need of help with my mobile text sizes vs desktop. My desktop is fine, just need help with editing the product text size for mobile. 

My website is https://www.singhbeans.com/shop please take a look on the desktop and mobile and you can see the product size incredibly smaller on mobile. 

Thank you 

Add to Design > Custom CSS

@media screen and (max-width:767px) {
.products.collection-content-wrapper .grid-main-meta .grid-title {
    font-size: 50px !important;
    line-height: 1.2em;
}
}

On 1/23/2021 at 9:48 AM, tuanphan said:

Add to Design > Custom CSS

@media screen and (max-width:767px) {
.products.collection-content-wrapper .grid-main-meta .grid-title {
    font-size: 50px !important;
    line-height: 1.2em;
}
}

 

Thank you! This works great with the second line. The first line however remains unchanged. Any ideas? 

On 1/27/2021 at 10:37 PM, juggy15 said:

Thank you! This works great with the second line. The first line however remains unchanged. Any ideas? 

Hi. Sorry for the delay. I was off some days. Do you still need help on this?

On 12/3/2020 at 8:00 PM, paul2009 said:

Palmera is a Squarespace 7.1 template and I provided some code to split product titles over two lines here: https://sf.digital/squarespace-solutions/display-product-titles-on-two-lines-with-squarespace-71

The article doesn't describe how to change the formatting of the two lines, but it is possible to do this with a little CSS. For example, on the Product Details Page:

/* Smaller second line */
.ProductItem .ProductItem-details h1.ProductItem-details-title {
  font-size: 22px;
  line-height: 1.8em;
}
/* Larger first line */
.ProductItem .ProductItem-details h1.ProductItem-details-title:first-line {
  font-size: calc(2.16vw + 1rem);
}

This CSS is just an example; I haven't tested it for your site because it is password-protected and therefore inaccessible.
 

Hi Paul, I have been trying your method to do this but it doesn't seem to be working on my website. I want to use H4 style for the bigger line and P3 style for the 2nd and smaller line. Are you able to help?

https://www.edxulondon.com/shop-1

58 minutes ago, Edwardxu said:

I have been trying your method to do this but it doesn't seem to be working on my website.

The titles will need to be split into two lines before the styling can be added.

Take a look at the guide again (see the notes about Squarespace making changes) as I believe you'll need to use the other selector.

1 hour ago, paul2009 said:

The titles will need to be split into two lines before the styling can be added.

Take a look at the guide again (see the notes about Squarespace making changes) as I believe you'll need to use the other selector.

Hi Paul, Thanks for your reply. I made the additional changes on the codes for the code injection section. But the line still doesn't split. Any advice?

On 3/26/2021 at 7:52 PM, paul2009 said:

The titles will need to be split into two lines before the styling can be added.

Take a look at the guide again (see the notes about Squarespace making changes) as I believe you'll need to use the other selector.

Hi Paul, I managed to make the line split into two. Thank god. But I am having some troubles styling them. I want the larger line in H4 and the smaller line in P3. I could not get it right, would you mind taking a look and see what I have done wrong?

https://www.edxulondon.com/shop

8 hours ago, Edwardxu said:

I am having some troubles styling them. I want the larger line in H4 and the smaller line in P3. I could not get it right

Looks like you may have solved this now? I'm seeing two styles.

7 hours ago, paul2009 said:

Looks like you may have solved this now? I'm seeing two styles.

They are actually not right, as they are both in the Header font and I just adjusted the size. If you look at the mobile version, the size is completely wrong. Attaching A H4 & P3 title/description sample, on page: https://www.edxulondon.com/reimagine/#past-designs 

So I am wondering whether you are able to fix the code? Thanks again in advance!

On 3/29/2021 at 8:39 AM, paul2009 said:

Looks like you may have solved this now? I'm seeing two styles.

Hi Paul, I actually amended the css code and sorted everything. Thanks again for your article and help, it was really helpful!

Hello I am trying to do this on my 7.0 template. I managed to do everything but to edit the size of the second line on the grid page. I suspect the list page class may be different for 7.0 and that's why it doesn't work.

https://www.vine.lu/en/shop

On 5/5/2021 at 9:49 PM, cmancuso said:

Hello I am trying to do this on my 7.0 template. I managed to do everything but to edit the size of the second line on the grid page. I suspect the list page class may be different for 7.0 and that's why it doesn't work.

https://www.vine.lu/en/shop

Did you solve with this code?

.products.collection-content-wrapper .grid-main-meta .grid-title,h1.ProductList-title {
    font-size: 12px;
    line-height: 1.8em;
    font-family: europa;
    color: #525252
}

.products.collection-content-wrapper .grid-main-meta .grid-title:first-line,h1.ProductList-title:first-line {
    font-size: 18px;
    font-family: europa;
    color: #000
}

On 12/3/2020 at 3:00 PM, paul2009 said:

Palmera is a Squarespace 7.1 template and I provided some code to split product titles over two lines here: https://sf.digital/squarespace-solutions/display-product-titles-on-two-lines-with-squarespace-71

Hi Paul, I'm new to coding and don't quite understand how to make this work. I added the code as explained to the footer section in the advanced section but nothing changed on my product page. I too would like to add a second line. Do I need to copy and paste or are there changes I need to do within the code to work on my site? My template is Montauk. Here's a link to the page in question. Ideally I'd like the stuff in parenthesis to be in a second line. Thanks so much! https://www.alejandromerizalde.com/books

Palmera is a Squarespace 7.1 template and I provided some code to split product titles over two lines here: https://sf.digital/squarespace-solutions/display-product-titles-on-two-lines-with-squarespace-71

Hi Paul, I'm new to coding and don't quite understand how to make this work. I added the code as explained to the footer section in the advanced section but nothing changed on my product page. I too would like to add a second line. Do I need to copy and paste or are there changes I need to do within the code to work on my site? My template is Montauk. Here's a link to the page in question. Ideally I'd like the stuff in parenthesis to be in a second line. Thanks so much! https://www.alejandromerizalde.com/books

2 hours ago, Aureliano_bnd said:

I too would like to add a second line. Are there changes I need to do within the code to work on my site? My template is Montauk. Ideally I'd like the stuff in parenthesis to be in a second line.

The code on our site is for Squarespace 7.1 sites, however Montauk is a Squarespace 7.0 template. Unlike Squarespace 7.1, every Squarespace 7.0 template family has a different structure and requires different code which is why the solution didn't work for you.

The code has been specifically written to look for a pipe symbol "|" so you'll need to insert one into your titles instead of parenthesis.

On Montauk you'll probably want to replace the two lines that refer to the List Title and the Detail Title with these:

var sfProdListTitle = '.collection-type-products #productList .product .product-title';
var sfProdDetailTitle = '#productDetails .product-title';

If it works for you please click 'like' below to let me know.

1 minute ago, paul2009 said:

The code on our site is for Squarespace 7.1 sites, however Montauk is a Squarespace 7.0 template. Unlike Squarespace 7.1, every Squarespace 7.0 template family has a different structure and requires different code which is why the solution didn't work for you.

The code has been specifically written to look for a pipe symbol "|" so you'll need to insert one into your titles instead of parenthesis.

On Montauk you'll probably want to replace the two lines that refer to the List Title and the Detail Title with these:

var sfProdListTitle = '.collection-type-products #productList .product .product-title';
var sfProdDetailTitle = '#productDetails .product-title';

If it works for you please click 'like' below to let me know.

Let me give it a shot...