spongebob-smc

That worked PERFECTLY! Thank you so much! 

@tuanphan

Okay I have added it to footer. Here is a link to product:

https://mouse-trout-epjy.squarespace.com/shop-all/p/alasdair-nicolson-42nd-street-stomp-download

The markdown starts with 'shipping information' and I'd like to position it under product details and before related products. 

Thank you!

21 hours ago, tuanphan said:

All products use same accordion dropdown or different?

If same, we can add it in Footer, then use script code to move it into Product

Same dropdown yes. This is a good idea to add it to footer but I don't know how to move it to product?

@tuanphan any ideas? 

12 hours ago, bangank36 said:

You can use javascript to load the content from external page and append it into product description, or place the markdown block in footer (hidden) and move it to content using javascript

Okay thanks, but the part I am unsure about is how to append it to all product descriptions? 

I am new to JS so not quite sure yet 🙂

Site URL: https://mouse-trout-epjy.squarespace.com/shop-all/p/thomas-wilson-cello-sonata-download

OK, this is the problem I have: 

I have 300+ products on this site and I would like to add an accordion dropdown showing delivery info to all product pages. I have this code already working on other pages using JS and a markdown block: 

<script>
$(document).ready(function(){
$('.markdown-block .sqs-block-content h3').css('cursor','pointer');
$(".markdown-block .sqs-block-content h3").nextUntil("h3").slideToggle();
$(".markdown-block .sqs-block-content h3").click(function() {$(this).nextUntil("h3").slideToggle();});
});
</script>

I know that I can do this via the additional info section on products but obviously would need to do that 300+ times which is a pain. So I'm trying to figure out if there's a way I can add a markdown/code block class to all product pages so that every product page will automatically have it. It also means that my client will not have to add the code block when they add products. 

Any ideas? Thanks in advance 🙂

site pw: spong123

@WillMyers that worked! thank you so much you are amazing 😊 

@WillMyers is it possible I haven't loaded libraries correctly? I have the following already: 

<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

21 hours ago, WillMyers said:

Great question, Spongebob!  (that's a fun sentence to write)

I couldn't find any unique classes on the search page we can target, so we'll have to add one through Javascript. Add this to your  Settings » Advanced » SITE Header Code Injection area

<script>
  if (window.location.pathname == '/search'){
    document.querySelector('body').classList.add('sqs-search-page')
  }
</script>

What this code is doing is checking the URL of the page and if it ends in '/search' then we're going to run that function below which adds a class of 'sqs-search-page' to the body of the HTML. So make sure you have this in your Custom CSS area. 

.sqs-search-page .header-title-logo img {
  filter: invert(1);
  -webkit-filter: invert(1);
}
.sqs-search-page .header-actions-action a {
  color: #000 !important;
}

Let me know if that does it!

Aha! that seems like a great solution...unfortunately it hasn't worked 😞 any ideas? 

ps. spongebob name comes from a client who typed it instead of squarespace 😂

Site URL: https://mouse-trout-epjy.squarespace.com/search

Hi, 

I am trying to invert colour of the logo on my header on the search page (I have managed it on other pages eg cart, products etc) and also invert the CTA text colour in header too. 

this is the code I have for changing both on cart page: 

body#cart .header-title-logo img {
	filter: invert(1); 
	-webkit-filter: invert(1); }

body#cart .header-actions-action a {
     color: #000000 !important;

}

so I know this works on the cart page but I can't get it to work on the search page, have tried targeting .sqs-search-page and body#search but those don't work. am I just targeting the wrong thing? 

does anyone know how to solve this? 

site: https://mouse-trout-epjy.squarespace.com/search

pw: spong123

8 minutes ago, Bobblehead said:

Many thanks for this solution; the desktop versions works great.

I've tried the updated code for mobile, but it does not work correctly. Specifically, the icon does display properly, but I can't actually click it. I've tested this on a resized desktop window as well as an actual mobile device.

I'm having the exact same problem. 

@tuanphan oh that's weird! it took days to make that change 🤔 so I assumed it wasn't working. must be caching or something i guess - thanks anyway!

Hey @tuanphan tried that code and it hasn't worked - any ideas? 

https://mouse-trout-epjy.squarespace.com/cart

password: spong123

Found a fix: 

.gallery-caption{
    pointer-events: none;
}

Site URL: https://mouse-trout-epjy.squarespace.com/members

Hello, 

I have a gallery grid with an overlay on hover to display the caption on each image. However, each image also needs to link to a page. It seems that when I add an overlay it disables the clickthrough link on the image.

Anyone got any ideas on how to solve this?

https://mouse-trout-epjy.squarespace.com/members

site password: spong123

This is my code:

.gallery-caption { 
position: absolute; 
top: 0; 
left: 0; 
background: 
rgba(0,0,0,0.4); 
height: 100%; 
padding: 0; 
opacity: 0; 
} 

.gallery-caption-wrapper { 
display: flex; 
align-items: center; 
justify-content: center; 
} 

.gallery-caption-content { 
font-size: 1rem !important; 
color: white; 
 } 

.gallery-grid-item { 
position: relative; 
} 

.gallery-grid-item:hover .gallery-caption { 
opacity: 1; 
} 

.gallery-caption-grid-simple { 
transition-delay: 0ms; 
}

I am having the same issue. I have tried it with a gallery block and image block.

I tried adding the JS from @jpeter but that didn't work. 

I know I could just add the link as the overlay caption as OP has done, but I want static text underneath the image, not on the overlay, and just have a blue colour overlay on the image on hover. Can anyone help?

https://mouse-trout-epjy.squarespace.com/members 

password: spong123