creedon

Site-wide password so we can see the site?

Please post the URL for a page on your site where we can see your issue. If your site is not public please set up a site-wide password, if you've not already done so. Post the password here. Adding a site-wide password does not allow anyone to alter your site. It only allows those with the password to see your site. Please read the documentation at the link provided to understand how it works. Please read the documentation at the link provided on how to share a link to your site to understand how it works. A link to the backend of the your site won’t work for us, i.e. a url that contains /config/. We can then take a look at your issue.

I don't see any evidence on your home page there is a link to a service page. Can you provide more detail?

Please see the following. You may want to read the follow up posts as there are some clarifications on installation and configuration.

When you create a product you can set a publish schedule. Or you can change a products visibility.

First he value for active should be false or true. category : { // set to false or true, if false then no category is added active : active, prefixText : 'Boost', suffixText : 'Happiness' },

There are no product in this category to hide so it's hard give code for items that don't exist.

SS does not have a way to link products together to create bundles. You have to go to an external service to get this feature. I suggest looking at Trunk first. Although I've not used it, the description of their service look compelling for the kind of bundling you want to do.

It is not a Squarespace site. It appears to have been created with Wix.

I updated my code.

Opps. Forgot the product listing. Give me a bit.

For that you need a little custom code. Add the following to Store Settings > Advanced > Page Header Code Injection for the store page. Please see per-page code injection. <style> .products.collection-content-wrapper .product-mark.sold-out { visibility : hidden; } .products.collection-content-wrapper .product-mark.sold-out::after { content : 'sold'; visibility : visible; } .sold-out .product-details .product-mark.sold-out { visibility : hidden; } .sold-out .product-details .product-mark.sold-out::before { content : 'sold'; visibility : visible; } </style> This is for v7.1 and specific to the posters need. In the future if you have a unique painting (only 1 available) just set the product quantity to 1 and SS will take care of the rest after it is sold. Let us know how it goes.

By the way lovely cat painting! 😺

Not sure this is exactly what you want. I suggest trying to work within the features SS does provide. You can set the product quantity to zero. Doing so will then put the sold out mark on the product. From there if you want something different from Sold Out. Use CSS and/or JavaScript to manipulate the mark. The idea here being take advantage of the underlying elements SS is providing and modify them.

Thanks! Missed that! 🙂

SS's summary blocks are limited to 30 items. To get more you can use the paid Lazy Summaries plug-in. With SS's summary blocks you can do some rudimentary filtering on Categories, Tags, and Featured items but nothing like show the first 30 products, then show 31 - 60, etc.

The code is not meant to go in Design > Custom CSS. You need to find the code that I cited and replace it with my suggested code. I imagine you might have installed it in Page Settings > Advanced > Page Header Code Injection for the home page?. Please see per-page code injection.

Add the following to Store Settings > Advanced > Page Header Code Injection for the store page. Please see per-page code injection. <style> /* hide 2022 prints coming soon */ #categoryNav ul li:nth-child( 3 ) { display : none; } </style> This is for v7.0 using the Avenue template. Let us know how it goes.

Over the last year I've made several "one off" enhancements for folks to the oft discussed TypeWriter code in this thread. Some of them were done via private message. I'm sharing the following unified version plus some additional enhancements. <!-- begin TypeWriter for Squarespace Version : 0.1.0 SS Versions : 7.1, 7.0 License : Copyright (c) 2022 by Arbak (https://codepen.io/arbak/pen/MWaqPJK) Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. Modifications By : Thomas Creedon < http://www.tomsWeb.consulting/ > --> <style> :root { /* 20220721 TC add CSS variables so user doesn't have to dig into code as much to configure */ /* use center, end, start, and etc. values for CSS justify-content */ --typewriter-alignment : center; /* cursor, use CSS border syntax for values */ --typewriter-cursor : 0.08rem solid black; --typewriter-cursor-rgba : 0.08rem solid rgba( 0, 0, 0, 1 ); --typewriter-cursor-rgba-opacity : 0.08rem solid rgba( 0, 0, 0, 0.02 ); } </style> <!-- do not change anything below, there be the borg here --> <style> /* 20220721 TC remove reset to not interfere with SS defaults */ /* align content 20220721 TC change class name to not interfere with SS defaults and simplify */ .typewriter-container { display : flex; justify-content : var( --typewriter-alignment ); } /* add cursor */ .txt-type > .txt { animation : blink 0.6s infinite; /* animating the cursor */ border-right : var( --typewriter-cursor ); padding-right : 2px; } /* animation */ @keyframes blink { 0% { border-right : var( --typewriter-cursor-rgba ); } 100% { border-right : var( --typewriter-cursor-rgba-opacity ); } } </style> <script> /* 20220721 TC change wait to wordWait */ class TypeWriter { constructor ( txtElement, words, wordWait = 3000, wordsWait = 3000, loops = 0 ) { /* 20220721 TC add loops and wordsWait parameters */ this.isDeleting = false; this.loops = 0; this.maxLoops = parseInt ( loops, 10 ); this.txt = ''; this.txtElement = txtElement; this.wordIndex = 0; this.words = words; this.wordsWait = parseInt ( wordsWait, 10 ); this.wordWait = parseInt ( wordWait, 10 ); this.type ( ); } type ( ) { // current index of word const current = this.wordIndex % this.words.length; // get full text of current word const fullTxt = this.words [ current ]; /* 20220721 TC shorten if removing or adding check */ const n = this.isDeleting ? -1 : 1; this.txt = fullTxt.substring ( 0, this.txt.length + n ); // insert txt into element /* 20210714 TC add data-word attribute so words can be targeted with CSS */ this.txtElement.innerHTML = `<span class="txt" data-word="${ fullTxt }">${ this.txt }</span>`; // initial type speed let typeSpeed = 50; if ( this.isDeleting ) typeSpeed /= 2; // increase speed by half when deleting // if word is complete if ( ! this.isDeleting && this.txt === fullTxt ) { /* 20220721 TC add isLastWord */ const isLastWord = current == this.words.length - 1; // make pause at end typeSpeed = ! isLastWord ? this.wordWait : this.wordsWait; this.isDeleting = true; // set delete to true /* 20220721 TC count loops */ if ( isLastWord ) this.loops++; } else if ( this.isDeleting && this.txt === '' ) { this.isDeleting = false; this.wordIndex++; // move to next word typeSpeed = 500; // pause before start typing } /* 20220721 TC bail when maxLoops reached */ if ( this.maxLoops && this.loops >= this.maxLoops ) return; setTimeout ( ( ) => this.type ( ), typeSpeed ); } } // end class TypeWriter // init app const init = ( ) => { document .querySelectorAll ( '.txt-type' ) .forEach ( txtElement => { const loops = txtElement.getAttribute ( 'data-loops' ); const wordWait = txtElement.getAttribute ( 'data-word-wait-ms' ); const wordsWait = txtElement.getAttribute ( 'data-words-wait-ms' ); /* 20220721 TC simplify data structure for user words input */ const words = txtElement .getAttribute ( 'data-words' ) .split ( ',' ) .map ( s => s.trim ( ) ); // init TypeWriter for txtElement new TypeWriter ( txtElement, words, wordWait, wordsWait, loops ); } ); }; // init on DOM load document.addEventListener ( 'DOMContentLoaded', init ); </script> <!-- end TypeWriter for Squarespace --> The code can be added to a code block, Page Settings > Advanced > Page Header Code Injection (see per-page code injection), or Settings > Advanced > Code Injection > FOOTER. Where you install the code determines the scope of where the code is available to run, basically per page or site-wide. Next you need to install the following in a code block. I suggest a different code block than the one you may have used above. <div class="typewriter-container"> <h1> &samhoud | <!-- data attributes data-words : the words that we want to have typerwriter effect, a comma seprated list of words data-word-wait-ms : how long to wait between typing each word data-words-wait-ms : how long to wait between typing all words data-loops : number of times to loop through the words. 0 means infinite --> <span class="txt-type" data-words='consultancy, food, creative tech, ranj' data-word-wait-ms="3000" data-words-wait-ms="6000" data-loops="0"> </span> </h1> </div> With the enhancements in this code you should be able to use the above in multiple code blocks if desired.

I think your first stop should be a Portfolio page. Then for each Project within use a Gallery section with Slideshow Simple. Take is slow to see if you get the effect you are looking for before uploading massive amounts of images. Let us know how it goes.

There is now! 🙂 The first change you need to make is only install the code once. I suggest a code block at the top or bottom of the first or last page section. You may want to hide that specific code block with CSS so it doesn't take up space on the page. Remove the code similar to the following. You will install similar code later. <div class="container"> <h1> We believe the power of listening can transform<br> <!-- The words that we want to have typerwriter effect --> <b> <p1 style="color:#76b6c4;"><span class="txt-type" data-wait="3000" data-words="[&quot;people&quot;, &quot;lives&quot;, &quot;relationships&quot;, &quot;brands&quot;, &quot;the world&quot;]"><span class="txt">the wo</span></span></p1> </b> </h1> </div> Now find the following in the code... // Init App function init() { const txtElement = document.querySelector(".txt-type"); const words = JSON.parse(txtElement.getAttribute("data-words")); const wait = txtElement.getAttribute("data-wait"); // Init TypeWriter new TypeWriter(txtElement, words, wait); } ...and change it to the following... // Init App function init() { document.querySelectorAll(".txt-type").forEach(txtElement=> { const words = JSON.parse(txtElement.getAttribute("data-words")); const wait = txtElement.getAttribute("data-wait"); // Init TypeWriter new TypeWriter(txtElement, words, wait); }); } Now in a new code block, wherever you want a typewriter effect, add the code you removed earlier. Of course alter the phrase and words for each. I haven't tested this extensively but it appears to work. Let us know how it goes.

Illustration of the issue.

Products live only in Store pages. So there must be a Store page somewhere in your site. I suggest looking at the very bottom of your Not Linked pages. Be sure to reload the page in your browser so you get the latest info. Sometimes automatically generated pages don't show up in the list until the page reload.

The code is not designed to be used more than once on a page. For those with technical backgrounds. Only one element is being selected. document.querySelector(".txt-type")

I don't know for sure but I've seen several similar posts on this issue and I've had it happen to me a couple of times. The issue appears to be accessibility features being activated for some reason. I had it happen to me a couple of days back and when I reloaded the page, the issue was gone. I was unable to trigger it again on purpose. This could be an SS issue or it might even be a browser issue. I'm on Chrome (latest)/macOS. Not much help I know but the more data we can gather the better a chance for a solution. 🙂