Line break with product titles

On 11/19/2020 at 2:35 PM, CptFeeny said:

 

https://www.brendanalexphoenix.com/prints-oregon

Hi. Sorry for the delay. Do you still need help on this?

34 minutes ago, tuanphan said:

Hi. Sorry for the delay. Do you still need help on this?

Yes, please. 
 

Would you be able to help?

Edited November 22, 2020 by CptFeeny

Hey y'all

took some tinkering and found another code from the original solution provider (Paul 2009)

There's a simpler, more elegant solution, that worked for my site (Taki Pets). We're on Bedford, Squarespace version 7.0.

Note : This solution only works if you have a Business or Commerce Plan.

------------------

Here's the link to the solution, since the author have requested that we don't repost without his permission (only fair).

It's a simple piece of code that replaces a space hyphen space e.g. Red Wine - Italy with a line break so on the website it appears as
Red Wine
Italy

Using the CSS code provided in this tutorial, I was able to combine both and achieve the look, where the name title is featured more prominently than the descriptive information that follow. 
example:

Red Wine
Italy

------------------

I've selected the third option from the link (solution) above as it works best for product pages. Copy the codes there and paste it in the footer (as suggested, though I found that it worked better in the header.)

Dashboard -> Setting (left menu) -> Advanced (all the way at the bottom) ->Code Injection

For this to work in Bedford, you'll have to replace the code 

'.ProductList-title, .ProductItem-details-title'

with

.product-title

Note that this is case sensitive.

For other templates, you'll want to fire up your site, right click anywhere on your page, and select view source. Then do a quick search for the keyword product name. scroll till you find something that looks like this. use the class right before the name of your product.

<a href="/order/signature-king-salmon" class="product hentry category-signature-series category-new-product tag-king-salmon tag-signature-series author-junchen-hong post-type-store-item article-index-1 featured on-sale clear" id="thumb-signature-king-salmon" data-item-id="614405c8047c7b2987b721d3">
      <div>

        <div class="product-image sqs-pinterest-image">
          <div class="intrinsic">
            <div>
              
                <img data-src="https://images.squarespace-cdn.com/content/v1/597adfce1b631b892b8cd3b5/1632998527604-JRAN79XLUY94ATD2XTU3/Taki+web-10.jpg" data-image="https://images.squarespace-cdn.com/content/v1/597adfce1b631b892b8cd3b5/1632998527604-JRAN79XLUY94ATD2XTU3/Taki+web-10.jpg" data-image-dimensions="3317x4975" data-image-focal-point="0.5,0.5" alt="Taki web-10.jpg"  data-load="false" />
              
            </div>
          </div>
        </div>

        <div class="product-overlay">
          <div class="product-meta">
            <div class="product-title">King Salmon - 10 individual packs - free islandwide delivery</div>

------------------

Now to style it

There's two section of style, the product collection page, where the page list all your products, and the product detail page, the page after you click on a product, where it will list all the details, write up and add to cart option.

Paste the codes in the CSS section of your site not page.

Dashboard -> Design (left menu) -> Custom CSS 

Part 1 - Product collection page

Make sure you're referencing the same parameters as above. 

For example, if you changed .ProductItem-details-title to .product-title, then make sure you change it here too.

The little addition :first-line will automatically change your product title to a larger font. So make sure it isn't too long.

#productList .product .product-title, .no-touch .product-list-titles-overlay #productList .product {
  font-size: 1em;
}
#productList .product .product-price, .no-touch .product-list-titles-overlay #productList .product .product-price {
  font-size: 1em;
}

.product-title:first-line {
  font-size: 1.4em;
  line-height: 1.6em;
}

Part 2 - Product detail page

This code will define the text styling on your individual product page.

#productSummary .product-title {
  font-size: 1.1em;
}
#productDetails .product-price {
  font-size: 0.9em;
}

Save all your settings, and hopefully your page will look the way you want it.

This works on mobile platform too.

Edited October 7, 2021 by AvinT

Hi there, 

I tried using the code in https://sf.digital/squarespace-solutions/how-can-i-add-line-breaks-to-gallery-grid-titles , however I had no luck. I'm not sure if my items are under ".ProductList-title, .ProductItem-details-title" or ".grid-title". Or if it's an entirely different issue all together? 

Here is my site: https://trombone-seahorse-afp9.squarespace.com/historic-show

pw: carmelart

My products are paintings, and I would like to create a different line for the artist name of the piece and the title of the piece. 

Any ideas? 

Thanks!

Grace

 

On 6/24/2022 at 4:16 AM, graciewo said:

Hi there, 

I tried using the code in https://sf.digital/squarespace-solutions/how-can-i-add-line-breaks-to-gallery-grid-titles , however I had no luck. I'm not sure if my items are under ".ProductList-title, .ProductItem-details-title" or ".grid-title". Or if it's an entirely different issue all together? 

Here is my site: https://trombone-seahorse-afp9.squarespace.com/historic-show

pw: carmelart

My products are paintings, and I would like to create a different line for the artist name of the piece and the title of the piece. 

Any ideas? 

Thanks!

Grace

 

Use this code

<script>
window.Squarespace.onInitialize(Y, () => {
  var title = document.querySelectorAll('.grid-title');
  for (var sf = 0; sf < title.length; ++sf) {
    var item = title[sf]; 
    item.innerHTML = item.innerText.replace(/#/g, '<br>');
  }
});  
</script>

Next, edit your title use guide format

Quote

 

Allan, Ruth Jordan # Slumbering Tiger

 

Hi @tuanphan

I tried that, didn't work. I pasted the code into Settings>Advanced>Code Injection in both the Header sections, and then the Footer section– both didn't work. What could be the issue there? 

On 6/23/2022 at 10:16 PM, graciewo said:

I tried using the code in https://sf.digital/squarespace-solutions/how-can-i-add-line-breaks-to-gallery-grid-titles , however I had no luck. I'm not sure if my items are under ".ProductList-title, .ProductItem-details-title" or ".grid-title". Or if it's an entirely different issue all together? 

Hi Grace

I wrote the guide that you are trying to use. Unfortunately that's a guide specifically for Galleries, whereas you are trying to split titles on product pages. For that, you'll want to use my other guide that is specifically for products: 

Split product titles onto two lines.As explained in the guide, you'll need to add the code to Settings > Advanced > Code Injection > Footer.

Let me know how you get on. If you experience any issues, please leave the code in place and post back.

Paul

Example with code:

 

Edited June 25, 2022 by paul2009

Hi @paul2009,

This worked perfectly! Thank you so so much for this redirect and insight to formatting my product page. 

While I have you, do you think you could help me out with another issue concerning my Quick View Page? (Or link me to a thread where this is discussed?) 

My Quick View content is super narrow - I'll attach a screenshot of what I mean. Is there a way to widen the section? Enough to where the product title doesn't get stacked like that. There's just so much white space around it, and I would like for the image to be enlarged. 

Thanks again for all your help!

Grace

6 minutes ago, graciewo said:

My Quick View content is super narrow - I'll attach a screenshot of what I mean. Is there a way to widen the section? Enough to where the product title doesn't get stacked like that.

Squarespace adjusts the width of the product details column from 40% to 52% depending on the device/browser width (known as the 'viewport').

You can increase this with some CSS (add to Design > Custom CSS) but take care to ensure that it doesn't cause issues at some resolutions 🙂

.sqs-product-quick-view-lightbox .ProductItem-details {
    width: 80%;
}

Hi @paul2009,

The code you provided did help with the text staggering – thank you so much! However my image still appear small/unchanged when in Quick View. Preferably I would like the images to be larger in the Quick View than they appear in the product grid. All my images are 1200px in the longest dimension, with 72 dpi. 

Any suggestions? Perhaps I should start a new Thread just on Quick View customization 😅

Thanks!  

Grace

9 minutes ago, graciewo said:

Perhaps I should start a new Thread just on Quick View customization

That's a good idea.

Hey everyone!~

Anyway to get this to work on a 7.1 Store index past 200 products?
It seems to stop working (creating a line break) at 200...

2 hours ago, DPruitt said:

Anyway to get this to work on a 7.1 Store index past 200 products?
It seems to stop working (creating a line break) at 200...

Can you be more specific about the solution you are trying to use?

Existing solutions should work, even with more than 200 products. When the store initially loads, it shows the first 200 products. When the users clicks the 'Next' pagination link, the page reloads and the next 200 products are shown.

https://big-crown.squarespace.com/store

PW: Bigcrown09!

I think I see the issue, customFilterSettings pagination enabled: false which pushed it beyond 200 products to display/load on the same page.  Anyway to get this to work when pagination is disabled, displaying more than 200 products on a page or will this only work on 200 or less?

I ran a test and set enabled: true which set pagination to 40 per page; the last page still had the the original format and did not create the break.

It could be that this has small conflictions with the Universal Filter from Squarewebsites and it's pagination functionality...

6 minutes ago, DPruitt said:

It could be that this has small conflictions with the Universal Filter from Squarewebsites and it's pagination functionality...

I think you've touched on the issue. It appears you are using Universal Filter and @paul2009's Wrap Product titles code.

I'm not speaking for the two author's code but I think in general that those of us who do custom code for SS are generally not designing our code to work with other's custom code, unless we specifically call that out as a feature. In other words our code is designed to work against SS's base products and not with custom code in mind.

When you start trying to mix and match there can be issues.

From what I know of UF it has extensive custom callback functionality and that would probably be the best place to approach your title issue, if you want to continue to use UF.

Hi there,

 

I used this code: https://sf.digital/squarespace-solutions/display-product-titles-on-two-lines-with-squarespace-71

 

However, the product title only appears across two lines as intended after one refreshes the page.

 

This is my site: https://www.lollieditions.com

 

The issue is there both on the main page and on the individual books' pages.

 

Any ideas on how to fix this? 

 

Thanks,

Denise

2 minutes ago, DeniseRH said:

I used this code: https://sf.digital/squarespace-solutions/display-product-titles-on-two-lines-with-squarespace-71

 

However, the product title only appears across two lines as intended after one refreshes the page.

Hi Denise. I wrote that guide primarily for Squarespace 7.1 so, as you are using a Brine family template (Squarespace 7.0) you’ll need to disable Ajax Page Loading in the Site Styles panel for it to work without a refresh.

Did this help? Please give feedback by clicking an icon below  ⬇️

4 minutes ago, paul2009 said:

Hi Denise. I wrote that guide primarily for Squarespace 7.1 so, as you are using a Brine family template (Squarespace 7.0) you’ll need to disable Ajax Page Loading in the Site Styles panel for it to work without a refresh.

Did this help? Please give feedback by clicking an icon below  ⬇️

Wow, instant fix. Genius. Thanks so much!

On 3/25/2020 at 12:27 AM, paul2009 said:

The code referred to was for 7.0 and needed to be modified for Squarespace 7.1. Here's a version that should work in your situation. 

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

Let me know how you get on.

Sweet! This is amazing! Exactly what I was looking for! Thank you @paul2009!