tuanphan Posted November 22, 2020 Share Posted November 22, 2020 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? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
CptFeeny Posted November 22, 2020 Share Posted November 22, 2020 (edited) 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 Link to comment
AvinT Posted October 7, 2021 Share Posted October 7, 2021 (edited) 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 WineItaly ------------------ 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 tuanphan and paul2009 2 Link to comment
graciewo Posted June 23, 2022 Share Posted June 23, 2022 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 Link to comment
tuanphan Posted June 25, 2022 Share Posted June 25, 2022 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 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
graciewo Posted June 25, 2022 Share Posted June 25, 2022 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? Link to comment
paul2009 Posted June 25, 2022 Share Posted June 25, 2022 (edited) 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 Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥. Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links. Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional. Would you like your customers to be able to mark their favourite products in your Squarespace store? Link to comment
graciewo Posted June 25, 2022 Share Posted June 25, 2022 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 Link to comment
paul2009 Posted June 25, 2022 Share Posted June 25, 2022 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%; } Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥. Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links. Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional. Would you like your customers to be able to mark their favourite products in your Squarespace store? Link to comment
graciewo Posted June 25, 2022 Share Posted June 25, 2022 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 Link to comment
paul2009 Posted June 25, 2022 Share Posted June 25, 2022 9 minutes ago, graciewo said: Perhaps I should start a new Thread just on Quick View customization That's a good idea. Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥. Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links. Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional. Would you like your customers to be able to mark their favourite products in your Squarespace store? Link to comment
DPruitt Posted January 16, 2023 Share Posted January 16, 2023 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... Link to comment
paul2009 Posted January 16, 2023 Share Posted January 16, 2023 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. Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥. Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links. Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional. Would you like your customers to be able to mark their favourite products in your Squarespace store? Link to comment
DPruitt Posted January 17, 2023 Share Posted January 17, 2023 https://big-crown.squarespace.com/store PW: Bigcrown09! Link to comment
DPruitt Posted January 17, 2023 Share Posted January 17, 2023 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... Link to comment
creedon Posted January 17, 2023 Share Posted January 17, 2023 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. paul2009 1 Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
DeniseRH Posted March 10, 2023 Share Posted March 10, 2023 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 Link to comment
paul2009 Posted March 10, 2023 Share Posted March 10, 2023 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 ⬇️ rhondahymason 1 Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥. Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links. Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional. Would you like your customers to be able to mark their favourite products in your Squarespace store? Link to comment
DeniseRH Posted March 10, 2023 Share Posted March 10, 2023 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! Link to comment
rhondahymason Posted April 8 Share Posted April 8 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! paul2009 1 Link to comment
TheHouseAgency Posted July 3 Share Posted July 3 Was wondering if you could help me with this page https://www.aussieglo.com.au/greeting-cards You can see the very first card '#3 (vitality) | set of 6 cards' is not splitting? Any ideas on what I am doing wrong or does the code not work for product blocks? I have put in the code from https://sf.digital/squarespace-solutions/display-product-titles-on-two-lines-with-squarespace-71 into the footer? Was there anything else needed? Link to comment
paul2009 Posted July 3 Share Posted July 3 27 minutes ago, TheHouseAgency said: Any ideas on what I am doing wrong or does the code not work for product blocks? @TheHouseAgency I wrote the code for store pages; it wasn't designed for Product Blocks. However, I've just updated it for you - please give it a try. 🙂 Did this help? Please give feedback by clicking an icon below ⬇️ TheHouseAgency 1 Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥. Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links. Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional. Would you like your customers to be able to mark their favourite products in your Squarespace store? Link to comment
TheHouseAgency Posted July 12 Share Posted July 12 On 7/3/2024 at 5:05 PM, paul2009 said: @TheHouseAgency I wrote the code for store pages; it wasn't designed for Product Blocks. However, I've just updated it for you - please give it a try. 🙂 Did this help? Please give feedback by clicking an icon below ⬇️ Thanks again for this. You wouldn't happen to have the code for a summary block as well? eg https://www.aussieglo.com.au/greeting-cards-np Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment