tuanphan

You can remove code from Site wide Code Injection to Homepage Header Code Injection

updated code, I added some attributes, you try adding it again, if it still doesn't work, try moving the code to Code Injection > Header,
if it still doesn't work, you can keep the code, I can check again easier
 

You can use a CSS code like this (Website > Website Tools > Custom CSS)
[data-slide-url]:after { display: block; color: black; z-index: 99999; position: fixed; bottom: 10px; left: 50%; transform: translateX(-50%); } [data-slide-url="u912u88ef4rhh05pptrzi3tazv1pr4"]:after { content: "Feral Goats on Slievecarran"; } [data-slide-url="1kv0c7bmb7tf9i671nq7zlvzvor0nf"]:after { content: "Bouleevin-Sunrise"; } [data-slide-url="9fdxxom6mdst2k89vrmsk0tph2qbgg"]:after { content: "Doonties-Gateway-Dingle-Peninsula.jpg"; } Result

To find data-slide-url, you can open lightbox > right click anywhere on the page > Inspect
It will show a box on right or under screen > You can search data-slide-url
it will show all

 

You mean
You have a Masonry Grid with 30+ images
You want: when users hover on each image >> change it to another image?
If yes, it is possible, you can share link to page where you use Masonry, I will give some code to achieve this

Squarespace provided a solution 1-2 months ago (Please check in Circle Forum to see detail)

Add to Page Header
<style> @media screen and (max-width:767px) { #page>article>section:first-child { min-height: 50vh !important; } } </style>

SS bring back Gallery Block in 7.1

Have you found the solution yet?

See this guide. https://support.squarespace.com/hc/en-us/articles/206543407-Gallery-Blocks

Add to Home > design > Custom CSS
@media screen and (max-width:767px) { .homepage section:first-child { height: 30vh !important; min-height: unset !important; } }  

Hi,
I don't see button in Additional Info.
You can add it then 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> jQuery(document).ready(function($){ $('section.ProductItem-additional .button-block').appendTo('.sqs-add-to-cart-button-wrapper'); }) </script>  

Don't remove any code in your current code.
Add this code to Last Line in Code Injection > Footer
<script> $(".summary-item").click(function(){ window.location=$(this).find(".summary-title a").attr("href"); return false; }); </script>  

Add to Home > design > Custom CSS
/* Shopping cart title */ .cart-title { visibility: hidden; } .cart-title:before { visibility: visible; content: "tuanphan"; } /* Checkout */ .checkout-button { background: green !important; color: red !important; font-family: monospace !important; }  

Solved my problems again, thank you!

Sorry for theslow response, unfortunatel it didn't appear to work.
I have another similar "shop" on the site which it doesn't happen to so think it must be a localised issue.
I'm closing the shop in a couple of days so don't worry.
Thanks for your assistance

Thanks, it was Gallery Section, but I've abandoned the project in the meantime!

You are the best!! Thank you! I didn't even know that margin section existed. That was the missing piece that i have been struggling with. 
My website is looking much better now thank you. 

You can use Lightbox Plugin to achieve this. I will write a quick guide on how to do this & send soon

Awesome! Thanks @tuanphan 😃

Edit your site Footer > Add a Block > Choose Markdown > Paste the code.
In case you can't make it work, let me know, I will give another approach

I usually insert CSS code into the Page Header if the code only affects one page. (or use Code Block, if use Personal Plan) Use CSS in CSS boxes if it affects all pages Sometimes I use CSS in Code Injection, if the code is directly related to the script code already inserted there. For example, if I use script code to insert the Second Logo, and I need CSS to resize the logo, I will insert the CSS there too. If the CSS code is too long, I'll usually create a CSS file, paste all CSS there, and then declare it to Code Injection Header via <link rel="stylesheet" href="link to css file"/> For all code, I will add a Comment line, so I know what the code will do, for easy editing.  

After some discussion with ChatLive's support, it appears that the solution was to check if the Chat Widget is enabled in Settings > Manage apps > Squarespace: https://my.livechatinc.com/settings/applications/squarespace in the agent app. 
I hope it will help someone. 

The issue is you have syntax errors in your code. In Website > Website Tools > Code Injection > HEADER remove the following.
<!DOCTYPE html> There should be only one of these on a page and Squarespace already adds that for you. This doesn't manifest the issue you are seeing but you don't want this error to bite you later.
You need to reinstall my Fluid Engine Page Section Upgrade Button Hide code as it is incomplete. Incomplete code is a syntax error and will cause issues.

Lightbox of Image Block, Gallery Section, Form Lightbox, Quick View Lightbox or? If you share link to page where you want to do this, we can help easier

Change code to this
body.view-item .product-mark.sold-out { display: none !important; } body.view-item .sold-out .product-price:after { content: "Sold Out"; margin-left: 20px; text-transform: uppercase; font-weight: bold; } @media screen and (max-width:767px) { h1.ProductItem-details-title { margin-bottom: 5px !important; } }