missgray

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.

3 hours ago, tuanphan said:

You can use this code to Website > Website Tools > Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $('.product-price:contains("$0.00")').addClass('zero-product');
});
</script>
<style>
div.add-on-card:has(.zero-product) .product-price {
    display: none !important;
}
</style>

 

Thank you SO much it worker perfectly and looks amazing. Appreciate your help!

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.

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;
}
}

On 6/23/2024 at 2:42 AM, creedon said:

The code you show is not related to your original question.

Please point to or provide the code you tried for this effect you posted about above.

Hi @creedon I did more research online and found this https://github.com/tomsWebConsulting/twcsl/tree/main/Page/Store/Detail/Store Product Detail Add to Cart Button Url Redirect

I have added all the codes and FINALLY got it to work as a button re direct.

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.

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

Can you provide password?

Hi @Tuanphan I added my password in my notes above. the Password is: Hello

On 6/13/2024 at 5:39 AM, enjoysnacks808 said:

The solution I use is code injection via Javascript in the footer. For the specific product I want to limit to 5 items, I use the following:

document.addEventListener('DOMContentLoaded', (event) => { 
  // data-item-id = the product page's qty div
  // If someone enters more than 5, the value will revert to 5.
  // Be sure to add instructions for the qty limit in the product description.
  const quantityInput = document.querySelector('.product-quantity-input[data-item-id="6669115df767f5244f9d1f8d"] input[type="number"]');       quantityInput.addEventListener('input', () => { 
    if (quantityInput.value > 5) { quantityInput.value = 5; } 
  }); 
});

Please help.

Hi I need to do this for a complimentary add-on and do not want them to be able to add more than 1. I tried this code in the footer however nothing changed. Can you please provide an update?

You can test this by adding the Complimentary add-on to cart in this product link and viewing in the cart.

https://missgray.com/shop/p/all-attitude-baroque-blouse

password: hello

On 6/13/2024 at 5:39 AM, enjoysnacks808 said:

The solution I use is code injection via Javascript in the footer. For the specific product I want to limit to 5 items, I use the following:

document.addEventListener('DOMContentLoaded', (event) => { 
  // data-item-id = the product page's qty div
  // If someone enters more than 5, the value will revert to 5.
  // Be sure to add instructions for the qty limit in the product description.
  const quantityInput = document.querySelector('.product-quantity-input[data-item-id="6669115df767f5244f9d1f8d"] input[type="number"]');       quantityInput.addEventListener('input', () => { 
    if (quantityInput.value > 5) { quantityInput.value = 5; } 
  }); 
});

 

On 9/26/2021 at 6:42 PM, tuanphan said:

Edit Additional Info >> Add a Code Block >> Insert this code

<style>
  div.product-quantity-input, div.sqs-add-to-cart-button-wrapper, .product-price {
    display: none !important;
}
</style>

 

Hi I did this on a single product and it has removed the price from the product description page, however, this item is only going to be displayed as an 'add-on' inside all my product listings and it is still showing the $0 how can I remove this?

https://missgray.com/shop/p/miss-gray-perfume-card

Website password: hello

Here is another product with the Complimentary add-on added. Once the $0 is removed I will add this to all of my products in this shop.

https://missgray.com/shop/p/all-attitude-baroque-blouse

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

1 hour ago, creedon said:

Could you give us a clue which code you tried to use? A post date and perhaps the person who provided the code? There are lots of posts in this thread with code in them.

SO sorry I just took a while to find the code I finally used as I tried so many things I could not remember. Ill make sure I note this for every edit I make. 

I tagged the single product with 'no-cart' which I have taken off for now for you so you can see the button style. I can add this tag back later if needed. The CSS code is still there.

.tag-no-cart .sqs-add-to-cart-button, .tag-no-cart .product-quantity-input {
  display: none !important;
}

Just now, missgray said:

So sorry there was no password when I posted and then I was working on another problem and had to set this to private. you should see the password on my other forum post about sub titles in product lisitngs 🙂

7 hours ago, creedon said:

Password is - hello

Sorry I am in Australia so I think there is a time difference which is why I responded so late to this.

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 >

Hi @creedon

I have added a link to a single product as its made-to-order I need an 'ENQUIRE'  button linking to my contact page, however, I am struggling to turn this single link a button. I tried the code above however ALL of the links on ALL of my products turned into buttons which I do not want. I would like this 'ENQUIRE' button to look like the buttons on the rest of my products same style and colour. Ant assistance would be amazing 🙂

Single product: https://missgray.com/shop/p/legacy-leather-pant

www.missgray.com

Hi is there a way to change the white promotional pop up background on mobile to a hex colour of my choice? Currently, it' is just white.

Also is there a code for each other element such as the Title, paragraph, each form field, button and disclaimer for mobile only?