Add Subtitle to product page

Site URL: https://teal-oboe-kfw9.squarespace.com

Hi guys

Hope that all is well. 

Is there a way to add a subtitle to a product page? I have attached a screenshot. 

I would like the first line in my product description to be above the price and under my title. 

Password for website is: tyst1234

Thanks in advance!

Alastair

Hi. You can see this guide to achieve it.

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

Hi Tuanphan

Thank you so much! It worked!

I have another questions, if it's ok. Is there anyway I can stop the Add to Cart-button becoming smaller, after I have clicked on it? 

Thanks. Alastair

On 7/26/2022 at 2:23 PM, halfhide said:

Hi Tuanphan

Thank you so much! It worked!

I have another questions, if it's ok. Is there anyway I can stop the Add to Cart-button becoming smaller, after I have clicked on it? 

Thanks. Alastair

 

Add to Design > Custom CSS

div.sqs-add-to-cart-button {
    width: 100% !important;
}

Thanks for the quick reply. 

I can see that it doesn't change size now, but it is now way too big?

My client wants the width smaller than the quantity button, around half the size of it now.  

Try this new code

div.sqs-add-to-cart-button.cart-added {
    width: 100% !important;
}

Thanks mate! 

I hope it's okay I keep asking 🙂 

Now that I have used the code from: https://sf.digital/squarespace-solutions/display-product-titles-on-two-lines-with-squarespace-71 , I cant change the font size on the shop page, and it is way to large now. 

Is there any way to solve this?

Thanks! 

On 8/9/2022 at 4:45 PM, halfhide said:

Thanks mate! 

I hope it's okay I keep asking 🙂 

Now that I have used the code from: https://sf.digital/squarespace-solutions/display-product-titles-on-two-lines-with-squarespace-71 , I cant change the font size on the shop page, and it is way to large now. 

Is there any way to solve this?

Thanks! 

You mean change font of title?

https://teal-oboe-kfw9.squarespace.com/shop

That is correct - I can't change it now, after I inserted the code. My client wants it smaller, like a paragraph.

On 8/11/2022 at 2:35 PM, halfhide said:

That is correct - I can't change it now, after I inserted the code. My client wants it smaller, like a paragraph.

Add to Design > Custom CSS

[data-section-id="6239b64182f2c326a6595b18"] .grid-title,
[data-section-id="6239b64182f2c326a6595b18"] .grid-title:first-line  {
    font-size: 20px !important; 
    line-height: 1em !important
}

Worked a treat! As usual! Amazing!

And can you see why the Navigation on the last step is so close to the images? See the attached. 

On 8/17/2022 at 12:31 AM, halfhide said:

Worked a treat! As usual! Amazing!

And can you see why the Navigation on the last step is so close to the images? See the attached. 

Which page are you referring to? 

Sorry, under the Shop -> Tea -> Matcha

It is like this on all 3rd tier categories. 

On 8/19/2022 at 2:44 PM, halfhide said:

Sorry, under the Shop -> Tea -> Matcha

It is like this on all 3rd tier categories. 

 

Try adding to Design > Custom CSS

nav.nested-category-breadcrumb {
    padding-bottom: 20px;
}

Worked amazingly, thanks a lot! 

On our front page we are using summary-blocks. They center fine with 3 or 4 images, but when I choose 2 images it will not center. I have tried everything. Why is that? 

It looks fine. Can you explain clearly?

The titel Recommendations is in the middle, but the Summarary-block with two images won't center. You can see it on the gutter which sleightly leans to the left. Does the screenshot here help?

On 8/25/2022 at 5:39 PM, halfhide said:

The titel Recommendations is in the middle, but the Summarary-block with two images won't center. You can see it on the gutter which sleightly leans to the left. Does the screenshot here help?

 

 

Try adding to Design > Custom CSS
 

@media screen and (min-width:992px) {
div#block-62ebde00779af3b13b5f6022 .summary-item {
    margin-right: 0.98425% !important;
    margin-left: 0.98425% !important;
}
}

So good! It works perfectly! 

I have a little trouble with my customized header navigation. I have split it between the logo with some css coding and it looks great on bigger screens. But it doesn't work at all when the screen is smaller. 

Is there a smart way I can make i responsive, so the right side doesn't go down in the logo? See screenshot. 

Thanks a lot! 

tyst1234

https://teal-oboe-kfw9.squarespace.com/

You can remove code you used to make split nav. Then adjust header layout to

Left nav - Middle Logo

Then we will give new code to make split nav, work on all devices

Fantastic Tuan - it is done now 🙂  

It is meant to look like this, but without UK, Search and burger. Just the Cart on right side. 

Thank you very much!!! 

17 hours ago, halfhide said:

Fantastic Tuan - it is done now 🙂  

It is meant to look like this, but without UK, Search and burger. Just the Cart on right side. 

Thank you very much!!! 

Add to Settings > Advanced > Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  jQuery(document).ready(function($){
  $('.header-display-desktop nav.header-nav-list').clone().insertAfter('.header-actions.header-actions--right>.showOnMobile');
})
</script>
<style>
  .header-display-desktop .header-actions--right .header-nav-list .header-nav-item:nth-child(-n+2) {display: none;}
.header-display-desktop .header-title-nav-wrapper .header-nav-list .header-nav-item:nth-child(n+3) {display: none;}
  .header-nav-item:nth-child(n+3) {
    margin-right: 1.5vw;
}
.header-actions.header-actions--right * {
    opacity: 1;
    transform: unset;
}
</style>

Thanks so much! 

and do you know how I can align the nav same height as the cart? Right at the top of the page. 

and now it actually comes up on the mobile version as well, not so good. Se here. 

On 8/31/2022 at 4:18 PM, halfhide said:

and now it actually comes up on the mobile version as well, not so good. Se here. 

It looks fine to me. Can you check it again?