Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 1

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


TrevorBaum

Question

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!

Ideal.png

PDP_ideal.png

Link to comment

Recommended Posts

  • 1
1 hour ago, TrevorBaum said:

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.

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.
 

sf-digital-signature-logo-email145.png.46606a2288a2847f44d81b9b7b58f3a5.png
Hi! I'm Paul, an independent Squarespace Consultant since 2007 and founder of SF Digital,¬†building¬†the features that Squarespace didn't include‚ĄĘ. Our mini-extensions allow you to¬†pick dates in any format, show¬†prices in other currencies, take orders without payment or improve your cart.¬†I value¬†honesty, integrity, transparency and respect ‚ô•.¬†Links in my posts may refer to SF Digital products or may be affiliate links.

Link to comment
  • 1
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¬†¬†‚ÜėÔłŹ

sf-digital-signature-logo-email145.png.46606a2288a2847f44d81b9b7b58f3a5.png
Hi! I'm Paul, an independent Squarespace Consultant since 2007 and founder of SF Digital,¬†building¬†the features that Squarespace didn't include‚ĄĘ. Our mini-extensions allow you to¬†pick dates in any format, show¬†prices in other currencies, take orders without payment or improve your cart.¬†I value¬†honesty, integrity, transparency and respect ‚ô•.¬†Links in my posts may refer to SF Digital products or may be affiliate links.

Link to comment
  • 0
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.

Link to comment
  • 0
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

Edited by Zelda9090
Link to comment
  • 0
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

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0
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.
 

sf-digital-signature-logo-email145.png.46606a2288a2847f44d81b9b7b58f3a5.png
Hi! I'm Paul, an independent Squarespace Consultant since 2007 and founder of SF Digital,¬†building¬†the features that Squarespace didn't include‚ĄĘ. Our mini-extensions allow you to¬†pick dates in any format, show¬†prices in other currencies, take orders without payment or improve your cart.¬†I value¬†honesty, integrity, transparency and respect ‚ô•.¬†Links in my posts may refer to SF Digital products or may be affiliate links.

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0
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? 

Link to comment
  • 0
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?

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0
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

 

Link to comment
  • 0
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.

sf-digital-signature-logo-email145.png.46606a2288a2847f44d81b9b7b58f3a5.png
Hi! I'm Paul, an independent Squarespace Consultant since 2007 and founder of SF Digital,¬†building¬†the features that Squarespace didn't include‚ĄĘ. Our mini-extensions allow you to¬†pick dates in any format, show¬†prices in other currencies, take orders without payment or improve your cart.¬†I value¬†honesty, integrity, transparency and respect ‚ô•.¬†Links in my posts may refer to SF Digital products or may be affiliate links.

Link to comment
  • 0
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?

Link to comment
  • 0
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

Link to comment
  • 0
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.

1012200068_Screenshot2021-03-29at08_38_25.png.b3eabb7708434d5e8e4f053a94aee40c.png

sf-digital-signature-logo-email145.png.46606a2288a2847f44d81b9b7b58f3a5.png
Hi! I'm Paul, an independent Squarespace Consultant since 2007 and founder of SF Digital,¬†building¬†the features that Squarespace didn't include‚ĄĘ. Our mini-extensions allow you to¬†pick dates in any format, show¬†prices in other currencies, take orders without payment or improve your cart.¬†I value¬†honesty, integrity, transparency and respect ‚ô•.¬†Links in my posts may refer to SF Digital products or may be affiliate links.

Link to comment
  • 0
7 hours ago, paul2009 said:

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

1012200068_Screenshot2021-03-29at08_38_25.png.b3eabb7708434d5e8e4f053a94aee40c.png

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!

IMG_2172.PNG

Screenshot 2021-03-29 at 12.34.51.png

Edited by Edwardxu
Link to comment
  • 0
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
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0
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

 

Edited by Aureliano_bnd
added link info
Link to comment
  • 0

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

Edited by Aureliano_bnd
added link info
Link to comment
  • 0
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.

Edited by paul2009

sf-digital-signature-logo-email145.png.46606a2288a2847f44d81b9b7b58f3a5.png
Hi! I'm Paul, an independent Squarespace Consultant since 2007 and founder of SF Digital,¬†building¬†the features that Squarespace didn't include‚ĄĘ. Our mini-extensions allow you to¬†pick dates in any format, show¬†prices in other currencies, take orders without payment or improve your cart.¬†I value¬†honesty, integrity, transparency and respect ‚ô•.¬†Links in my posts may refer to SF Digital products or may be affiliate links.

Link to comment
  • 0
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...

Link to comment
  • 0
8 minutes 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.

Hi Paul, Magic! that worked perfectly, thank you so very much!

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