Beyondspace

The problem is the script is called using HTTP protocol, while your Squarespace page is served as HTTPS, you will see this error in console indicated that browser not allow mixed-content, therefore the geoplugin_countryCode method is not usable
To use the HTTPS protocol you need to buy SSL key subscription from them at 24 EUR per year https://www.geoplugin.com/premium

Hi @KC13,
Have you try using this setting

accordion product.mp4 Hope it can help you

More info...

This is interesting! I never noticed this before, please use this custom CSS for fixing this, placing it under Footer injection
<!-- sqs:beyondspace-scrollable-lightbox !--> <style>.sqs-modal-lightbox-content .lightbox-inner { position: fixed; }</style> <!-- /sqs:beyondspace-scrollable-lightbox !-->  
Kapture 2023-11-07 at 11.03.00.mp4

Do you mean like this?

Place this on Footer Injection
<style> .ProductItem-product-price .original-price { display: block; } </style>  

try this
.newsletter-block .newsletter-form-button:hover { color: #fff !important; }

You can try adding to Home > Design > Custom Css
@media only screen and (max-width: 767px) { .header .header-actions, .header .header-actions-action--social, .header .header-actions-action--cta { display: block; } .header-actions.header-actions--right { position: absolute; width: 100%; } .icon.icon--fill { display: none; } } Let me know how it works on your site
Support me by pressing 👍 if this useful for you

You can try adding to Home > Design > Custom Css
#header.shrink .header-border, #header .header-border { background: url(https://images.unsplash.com/photo-1637358650228-76cb3810b46e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80); } footer .section-background { background: url(https://images.unsplash.com/photo-1637358650228-76cb3810b46e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80); } footer * { color: #fff; } Change the url with your photo/color you want to apply
Let me know how it works on your site.
Press 👍 or mark this answer as solution to help another one too

You can try putting your customize in <style> tag inside the page header injection
Per-page code injection
https://support.squarespace.com/hc/en-us/articles/205815908-Using-code-injection?platform=v6&websiteId=615d0bdeb9e47e1e585827d3

Could you try to upload the files to drive using this service and embed it as iframe block?
https://www.drv.tw/

The card element cause this black on the right

You can use the following code to hide the overlap element
@media only screen and (max-width: 767px) { .fluid-engine.fe-63d8cc62ce6221792751a11e { overflow: hidden; } } Support me by pressing 👍  or marking as solution if this useful for you

You'll need powerhouse plan for custom css feature
https://acuityscheduling.com/signup.php#gref

Since you site is US based, I chose the date format "mm-dd-yyyy"
Check the snippet on snapshot mode of your site here
The snippet is originated from https://forum.squarespace.com/topic/207841-freeshare-date-display-format-options-on-all-pages/#comment-506718
<!-- Fix inconsistent blog date format on Squarespace 7.1 template --> <!-- Squarespace Forum Update 06-11-2021 --> <script src="https://stevenlevithan.com/assets/misc/date.format.js"></script> <script> (function(){ document.addEventListener('DOMContentLoaded', function() { const dateformat = "mm-dd-yyyy"; const pubdates = document.querySelectorAll("time[datetime]:not([class*=event-time]), time[pubdate], time.blog-meta-item--date"); pubdates.forEach(pubDate => { let d = new Date(pubDate.getAttribute("datetime") || pubDate.innerText); if (pubDate.classList.contains('blog-meta-item--date') ) { d = new Date(document.querySelector('[itemprop="datePublished"]').getAttribute('content').split("T")[0]); } pubDate.innerHTML = d.format(dateformat); }); }); })(); </script>

Could you give more detail on the demand? can you just enable the lightbox for the blog image?

Please add this to design - custom CSS
@media screen and (max-width: 768px) { section[data-section-id="6450a422340daf0c6eeab839"] .section-background img[srcset] { height: auto !important; } }  

Try adding to Home > Design > Custom Css
#block-yui_3_17_2_1_1659816344610_5889 a:hover .sqsrte-text-color--accent { color: red; } Let me know how it works on your site
Support me by pressing 👍 if this useful for you

Try adding to Home > Design > Custom Css
.site-title h1.logo { font-family: 'Jug'; } Let me know how it works on your site
Support me by pressing 👍  or marking as solution if this useful for you

My bad
You can try the following code
.header-actions--right .header-actions-action { display: flex; } .header-actions-action .sqs-custom-cart { margin-right: 10px; } Support me by pressing 👍 or marking as solution if this is useful for you

Is it fine with this result?

You can try the following code on your Home > Design > Custom Css
.blog-item-content-wrapper { display: flex; flex-wrap: wrap; } .blog-item-content { order: 2; } Support me by pressing 👍 or marking as solution if this is useful for you

Ohh, it 's my bad. You can try the following one
/* stack gallery grid on mobile except About page*/ @media only screen and (max-width: 640px){ body:not(#collection-63f2f994f2c62a3fadc044d3) .sqs-gallery-design-grid-slide { width: 100% !important; clear: none !important; } } Support me by pressing 👍 or marking as solution if this is useful for you

Opps, I realize that you should wrap your code with the <style></style>
The code on header Advance should be
<style> header... </style> Support me by pressing 👍 or marking as solution if this is useful for you

You can try adding to Home > Design > custom css
section[data-section-id="63f578332b5e7c2a34bc0749"] .list-item-content__description * { letter-spacing: 0.05em; } Support me by pressing 👍  or marking as solution if this useful for you

1. You can try adding to Home > Design > Custom Css
@media screen and (min-width: 768px) { #collection-640526cf7bb4393b739ad0a2 .products.collection-content-wrapper .list-grid{ grid-template-columns: repeat(4,minmax(0,1fr)); } #collection-640526cf7bb4393b739ad0a2 .products-flex-container .grid-item { grid-column: span 2; } #collection-640526cf7bb4393b739ad0a2 .products-flex-container .grid-item:last-child:nth-child(2n - 1) { grid-column-end: 4; } } If you have 1, 3, 5, 7 products on this page, it will show the last item center
Support me by pressing 👍 if this is useful for you
 

Try adding to Home > Design > Custom Css
.squarespace-comments .comments-content .comment-list .comment .comment-header .user-info .date { display: none; } Support me by pressing 👍 or marking as solution if this is useful for you

You can try adding to Home > Design > Custom Css
section[data-section-id="63c04ff9a080d51ea28d8172"] .content-wrapper{ padding-top: 0 !important; } Support me by pressing 👍 or marking as solution if this is useful for you