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

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!

Hi Paul, I have followed the instruction from your website, and the store title has successfully split to different lines using" | ", but the product detail page title is all mess up like my below pic, could you kindly help out? thank you. 

Also, how can I change the product details fonts without interfering store title font?

44 minutes ago, ZackYen said:

The product detail page title is all messed up like my below pic, could you kindly help out?

It looks like you've incorrectly set the line-height for this title. Try changing it in Site Styles, or if you've added a line of Custom CSS to set the line-height, adjust it to be at least 1.3em.

Hello there, 

Very new to coding, have been following along and making the line break for the product detail page and list view... until I try adding product blocks to the page, the line break did not translate, it still shows " | " instead of breaking to the subtitle.  Do you mind taking a look at it. https://www.mcwu.store/shop/p/icanread100books 
Thank you so much.

On 9/29/2021 at 2:20 PM, peaberry said:

Hello there, 

Very new to coding, have been following along and making the line break for the product detail page and list view... until I try adding product blocks to the page, the line break did not translate, it still shows " | " instead of breaking to the subtitle.  Do you mind taking a look at it. https://www.mcwu.store/shop/p/icanread100books 
Thank you so much.

It looks fine to me. Did you solve it?

Hi, I've managed to get the lines to break where I need them in my Product grid however the '|' symbol appears when that item is selected and appears in checkout. Is there an additional workaround for making sure that it doesn't appear there either?

@CMBorgman

The checkout page can not be altered. It is a SS security feature. Also we do not have access to the backend of SS so there is no code that can change the text of an ordered item in the backend and how it is stored.

The changes that can be made, where they can be made, are literally skin deep. It is a visual change on the client side not a storage change server side.

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

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.
 

I can't adjust the size of the second line that should be smaller, also how do I get the code to apply to a single product listing like one I've added to the homepage

On 7/30/2022 at 4:30 AM, nahlah said:

I can't adjust the size of the second line that should be smaller, also how do I get the code to apply to a single product listing like one I've added to the homepage

Can you share link to a product? We can check easier

I would also like to separate the title into two lines so that "set of six notecards" is on a line below the title. When I go to the "advanced" section on this page, all I see is Page Header Code Injection. Can someone tell me where to find the Footer Code Injection?

14 minutes ago, brendacornett11 said:

When I go to the "advanced" section on this page, all I see is Page Header Code Injection.

Page Settings don't have a footer injection.

Quote

Can someone tell me where to find the Footer Code Injection?

Add the code to Website > Pages > Website Tools > Code Injection > FOOTER.

Awhile back Squarespace changed their editing panel menus around. If you see articles that refer to the old locations then you need to mentally adjust the instructions.

Let us know how it goes.

Thank you, Creedon!!!!

On 1/24/2021 at 1: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;
}
}

 

On 1/28/2021 at 4:37 PM, juggy15 said:

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

On 2/3/2021 at 1:36 AM, tuanphan said:

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

The first line is still tiny for me on mobile site, is there a solution to this. My website URL is rubabachaart.com

On 12/4/2020 at 7:42 AM, 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);
}

Hi   @paul2009 @creedon I have tried adding this to my website and I have a few issues. 

1. The product grid page is ok except when I resize the page on screen the font on both line changes and does not stay in proportion to each other. Can you stop this from occuring with CSS?

2. The product grid page on mobile the top title is extremely tiny - please provice custom CSS for both desktop and mobile? 

3. Inside the product description there is no change for the title 1 and 2 on both desktop and mobile - can you provice CSS for each?

website: missgray.com/services password: hello

DESKTOP GRID>

MOBILE GRID >

11 hours ago, missgray said:

DESKTOP GRID>

 

MOBILE GRID >

 

I used

Custom CSS:

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

and also https://sf.digital/squarespace-solutions/display-product-titles-on-two-lines-with-squarespace-71

On 6/21/2024 at 5:35 AM, SocialStar said:

 

 

The first line is still tiny for me on mobile site, is there a solution to this. My website URL is rubabachaart.com

 

Can you take a screenshot? I tried checking shop/detail page and both look fine

https://www.rubabachaart.com/shop/p/interior-one

On 6/23/2024 at 6:59 PM, tuanphan said:

Can you take a screenshot? I tried checking shop/detail page and both look fine

https://www.rubabachaart.com/shop/p/interior-one

On 6/22/2024 at 1:33 PM, missgray said:

I used

Custom CSS:

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

and also https://sf.digital/squarespace-solutions/display-product-titles-on-two-lines-with-squarespace-71

Hi @paul2009 @creedon @tuanphan just checking in if someone can help with the above posts I made. So sorry I am new to using Forums and I have made two posts above with information about my issue. Please help.

5 hours ago, missgray said:

 

Hi @paul2009 @creedon @tuanphan just checking in if someone can help with the above posts I made. So sorry I am new to using Forums and I have made two posts above with information about my issue. Please help.

I have tried editing this code again to see if I can make anything work. Both the desktop view for the product grid and the product details page look good however, both mobile versions are terrible. The top line is TINY.

1. Is there a code specifically for increasing the font size of the top line for both the grid and details pages for mobile?

2. I'd also like to manually increase the font size of the top line on the desktop. It seems the line height can be changed with 'font-size: calc' but nothing is changing the actual size of the font.

https://missgray.com/styling-services

Password: hello

Code:

/* 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);
}
.products.collection-content-wrapper .grid-main-meta .grid-title {
  font-size: 14px;
  line-height: 1.8em;
}
.products.collection-content-wrapper .grid-main-meta .grid-title:first-line {
  font-size: calc(.36vw + 1rem);
}
@media screen and (max-width:767px) {
.products.collection-content-wrapper .grid-main-meta .grid-title {
    font-size: 16px !important;
    line-height: 1.2em;
}
}

@missgray Use this code to Custom CSS for mobile size

@media screen and (max-width:767px) {
.products.collection-content-wrapper .grid-main-meta .grid-title:first-line, .ProductItem .ProductItem-details h1.ProductItem-details-title:first-line  {
    font-size: 30px !important;
}
}

14 hours ago, tuanphan said:

@missgray Use this code to Custom CSS for mobile size

@media screen and (max-width:767px) {
.products.collection-content-wrapper .grid-main-meta .grid-title:first-line, .ProductItem .ProductItem-details h1.ProductItem-details-title:first-line  {
    font-size: 30px !important;
}
}

 

Hi @tuanphan is there a code line I can add that just adds line spacing to the mobile version of both grid and product description? it just looks a bit squashed to the product photo and the smaller 2nd line font. See attached.

On 6/27/2024 at 6:30 AM, missgray said:

Hi @tuanphan is there a code line I can add that just adds line spacing to the mobile version of both grid and product description? it just looks a bit squashed to the product photo and the smaller 2nd line font. See attached.

 

You mean increase space between Title - Image, Title - text under title?

On 6/29/2024 at 5:53 PM, tuanphan said:

You mean increase space between Title - Image, Title - text under title?

Yes correct, in these 3 spaces on the grid page as the product description page looks fine.