tuanphan

Hi, You can use Scrolling Block to achieve this.

Sound autoplay is not possible. You can consider adding a Gif Image. If video, you will need to code a custom promotional or use 3rd party plugin

Hi, Try access Design > Site Styles > Disable Ajax Loading

Use some code like this .pdp-layout .pdp-details .pdp-details-title { font-size: 1.8em !important; } .product-price { font-size: 2.2em !important; }

#1. Add to Design > Custom CSS .product-mark.sold-out { text-transform: uppercase; } #2. Move it to after name like this?

Do you use Premium feature or? If Premium, I will try testing some code (I'm not sure I will work or not, I never worked with Acuity yet) https://support.squarespace.com/hc/en-us/articles/115015517328

Which page are you referring to? I don't see it on main page

Add a Code Block > Use this code <div id="multiscroll"> <div class="ms-left"> <div class="ms-section"> <img src="https://images.squarespace-cdn.com/content/v1/630662594ba9aa3a6ab842d4/1664508563055-5JMZVUYDG0AIJLBIM4Y1/L-01.png" width="100%" height="auto"> </div> <div class="ms-section"> <img src="https://images.squarespace-cdn.com/content/v1/630662594ba9aa3a6ab842d4/1664508564710-OATKV52BM9OD406VWX1M/L-+02.png" width="100%" height="auto"> </div> <div class="ms-section"> <img src="https://images.squarespace-cdn.com/content/v1/630662594ba9aa3a6ab842d4/1664508566964-XJFAGKATFSXCVY7WS5TS/L-03.png" width="100%" height="auto"> </div> <div class="ms-section"> <img src="https://images.squarespace-cdn.com/content/v1/630662594ba9aa3a6ab842d4/1664508569047-PDBH7W76QCQIL7WGZZ1E/L-04.png" width="100%" height="auto"> </div> <div class="ms-section"> <img src="https://images.squarespace-cdn.com/content/v1/630662594ba9aa3a6ab842d4/1664508571291-I1SSFFOCPLSFZXR2PROD/L-05.png" width="100%" height="auto"> </div> <div class="ms-section"> <img src="https://images.squarespace-cdn.com/content/v1/630662594ba9aa3a6ab842d4/1665200158410-F2LOFISZQT4XIBBS0NJH/L-06.png" width="100%" height="auto"> </div> </div> <div class="ms-right"> <div class="ms-section"> <img src="https://images.squarespace-cdn.com/content/v1/630662594ba9aa3a6ab842d4/1664508637479-LST4EO692RGEI39QDIEK/R-01.png" width="100%" height="auto"> </div> <div class="ms-section"> <img src="https://images.squarespace-cdn.com/content/v1/630662594ba9aa3a6ab842d4/1664508639978-I9U0ULCJN85PIA437B3X/R-02.png" width="100%" height="auto"> </div> <div class="ms-section"> <img src="https://images.squarespace-cdn.com/content/v1/630662594ba9aa3a6ab842d4/1664508642051-BJGWW3DBZP5EDVZKU8TU/R-03.png" width="100%" height="auto"> </div> <div class="ms-section"> <img src="https://images.squarespace-cdn.com/content/v1/630662594ba9aa3a6ab842d4/1664508644298-CW7YX9PU09HH8WHXUH77/R-04.png" width="100%" height="auto"> </div> <div class="ms-section"> <img src="https://images.squarespace-cdn.com/content/v1/630662594ba9aa3a6ab842d4/1664508647971-IU415NXNZWLPCOLQ59EZ/R-05.png" width="100%" height="auto"> </div> <div class="ms-section"> <img src="https://images.squarespace-cdn.com/content/v1/630662594ba9aa3a6ab842d4/1664508650991-4RBNNCXFOZC1S52CICNG/R-06.png" width="100%" height="auto"> </div> </div> </div> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/multiscroll.js/0.2.3/jquery.multiscroll.css"/> <style> .ms-section{ width: 100%; padding: 0%; text-align: center; color: #ededed; } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script> <script src="https://unpkg.com/multiscroll.js/vendors/jquery.easings.min.js"></script> <script src="https://unpkg.com/multiscroll.js/jquery.multiscroll.js"></script> <script> $(document).ready(function() { $('#multiscroll').multiscroll({ licenseKey: 'A8673A58-4F004189-B94C8567-332622B6', verticalCentered : true, scrollingSpeed: 1222, easing: 'easeInQuart', easingcss3: 'ease-out', menu: false, sectionsColor: [], navigation: false, loopBottom: true, loopTop: true, css3: true, paddingTop: 0, paddingBottom: 0, normalScrollElements: null, scrollOverflow: false, scrollOverflowOptions: null, keyboardScrolling: true, touchSensitivity: 5, //responsive responsiveWidth: 0, responsiveHeight: 0, responsiveExpand: false, // Custom selectors sectionSelector: '.ms-section', leftSelector: '.ms-left', rightSelector: '.ms-right', //events onLeave: function(index, nextIndex, direction){}, afterLoad: function(anchorLink, index){}, afterRender: function(){}, afterResize: function(){}, }); }); </script> This seems to be an effect with a lot of complicated code, you may need to tweak it further to make it work.

It looks like you solved? I see scroll bar appears here

Hi, Can you share link to page where you use Masonry + Filter Plugin? We can take a look

If you want to apply to 2 Code Blocks on same page, & paste same code, they will conflict together With second Code Block, use this new code <div class="container"> <h1> typewriter01 | <!-- The words that we want to have typerwriter effect --> <span class="txt-type2" data-wait="3000" data-words='["consultancy", "food", "creative tech", "ranj"]'></span> </h1> </div> <style> /* CSS RESET */ /* ALIGN CONTENT */ .container { display: flex; /* Remove horizontal 'justify-content' center if you want the base text not to move */ justify-content: center; align-items: center; } /* ADD CURSOR */ .txt-type2 > .txt { border-right: 0.08rem solid #fff; padding-right: 2px; /* Animating the cursor */ animation: blink 0.6s infinite; } /* ANIMATION */ @keyframes blink { 0% { border-right: 0.08rem solid rgba(255, 255, 255, 1); } 100% { border-right: 0.08rem solid rgba(255, 255, 255, 0.2); } } </style> <script> class TypeWriter2 { constructor(txtElement, words, wait = 3000) { this.txtElement = txtElement; this.words = words; this.txt = ""; this.wordIndex = 0; this.wait = parseInt(wait, 10); this.type(); this.isDeleting = false; } type() { // Current index of word const current = this.wordIndex % this.words.length; // Get full text of current word const fullTxt = this.words[current]; // Check if deleting if (this.isDeleting) { // Remove characters this.txt = fullTxt.substring(0, this.txt.length - 1); } else { // Add charaters this.txt = fullTxt.substring(0, this.txt.length + 1); } // Insert txt into element this.txtElement.innerHTML = `<span class="txt">${this.txt}</span>`; // Initial Type Speed let typeSpeed = 50; if (this.isDeleting) { // Increase speed by half when deleting typeSpeed /= 2; } // If word is complete if (!this.isDeleting && this.txt === fullTxt) { // Make pause at end typeSpeed = this.wait; // Set delete to true this.isDeleting = true; } else if (this.isDeleting && this.txt === "") { this.isDeleting = false; // Move to next word this.wordIndex++; // Pause before start typing typeSpeed = 500; } setTimeout(() => this.type(), typeSpeed); } } // Init On DOM Load document.addEventListener("DOMContentLoaded", init); // Init App function init() { const txtElement = document.querySelector(".txt-type2"); const words = JSON.parse(txtElement.getAttribute("data-words")); const wait = txtElement.getAttribute("data-wait"); // Init TypeWriter new TypeWriter2(txtElement, words, wait); } </script> (I adjusted some IDs) If it still doesn't work, please send code in both Code Blocks, I will try test it again on my demo site

I think you can add form field then we can try code to move it into Accordion? If you share link to a product, we will check easier

A member just asked me via email, she sent this thread so I posted below Each theme style, it has some variant style For example Lightest 1 It has some already variant about 200+ variant attributes You can also create custom variant, something like this @linkBGColor: red; @linkTextColor: #fff; then when use CSS, just declare h1 {color: @linkBGColor;}

Try adding to Design > Custom CSS /* align right project info */ .project-meta * { text-align: right !important; }

You mean like this section?

Use this CSS body[class*="type-products"].view-item header#header img { filter: invert(1); -webkit-filter: invert(1); }

Add this to Design > Custom CSS (Your Personal Plan supports CSS) h2.list-item-content__title { font-family: monospace !important; } if you want to change color, size...add more attributes h2.list-item-content__title { font-family: monospace !important; font-size: 10px !important; color: #f1f !important; }

Currently SS offer 2 editors, when you add a section, you can scroll down > Choose Classic Editor, you can find another editor.

Add to Design > Custom CSS /* Cart page image */ body#cart div#bannerImage { display: none !important; }

You mean it works on homepage only, & show 1 on other pages?

What is your site url? We can check easier

Add this to Design > Custom CSS /* Auto Photography */ body#collection-634bf167cb4d9e41d6ae8574 { figure.gallery-masonry-item { position: relative; } /* title */ figcaption.gallery-caption .gallery-caption-wrapper p.gallery-caption-content { position: absolute !important; left: 0; top: 0; right: 0; bottom: 0; display: flex; justify-content: center; align-items: center; z-index: 999; padding: 7%; transition: opacity ease 200ms !important; opacity: 0 !important; pointer-events: none; } .gallery-masonry-item:hover .gallery-caption-wrapper p.gallery-caption-content, .gallery-masonry-item:hover .gallery-caption { opacity: 1 !important; } /* overlay */ .gallery-masonry-item-wrapper a:after, .gallery-masonry-item-wrapper:after { background: rgba(0,0,0,0.5); /* overlay color */ content: ""; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0; transition: opacity ease 200ms !important; pointer-events: none; } .gallery-masonry-item:hover .gallery-masonry-item-wrapper a:after, .gallery-masonry-item:hover .gallery-masonry-item-wrapper:after { opacity: 0.75; } /* remove gap */ figcaption { padding: 0 !important; } /* image zoom */ .gallery-masonry-item-wrapper{ transition: transform 0.5s ease; } .gallery-masonry-item:hover .gallery-masonry-item-wrapper img{ transform: scale(1.3); transition: transform 0.5s ease; }}}

This is possible, depends on your template What is site url? We can help easier

It looks fine to me, it shows white, not black.

Sorry for delay. Just had some days off The image itself has a top padding, you can add this to Design > Custom CSS to unset it @media screen and (max-width:767px) { .gallery-slideshow-item img { top: 0 !important; } }