serrta

Sorry for distorting coding terms but something like: if url = /store-page?category=Special-category?tag=Any-tag , then div-1 display:none and div-2 display:block, otherwise div-1 display:block and hide div-2 OR: if url contains "Special stop word" (in tag or category), then show one div and hide the other By div I mean a combination of images (or a summary with images) in a store's Intro that I use as category links. And the reason why I want to hide some links is that when it comes to categorizing surgical instruments not by their type but by joints they are used for, some whole categories don't apply to that type of surgery. Yes, two independent parts side by side. One containing category images with links and the other containing products. Similar to Store's Intro but universal for all stores. Like two independent frames. Unfortunately, Index in Brine doesn't support Store pages. And all code that I've ever found for split layout is for text and images, not a whole store page. Another option that I'm thinking about is creating a sticky div overlaying the store page. Something like custom back-to-top button that I have right now. This div will be containing a tree of categories and subcategories, like Brine's native Sorting and filtering block but for ALL store collections. I'm creating this site for a friend and unfortunately Universal filter which is useless without an additional Lazy summary plugin is out of question (((

What about a function analyzing the url instead of category? Do you know if it is possible to implement a split layout with a Store page as one of the sections?

Thank you for the prompt reply! So you mean text only, no chance for images and links? 😞

Ooh, same question here. site: https://rsrtr.squarespace.com/artroskopicheskie-instrumenty Brine 7.0 I have 4 levels of nested categories. Therefore I use Store Pages as level-2 categories, built-in product cats for level-3 and tags for level-4. A page with summaries contains level-1 categories. Each Store has it's own "navigation" to its subcategories in Intro (using categories and tags). It works fine for sorting products as 'instruments / parts / equipment' and I love how it looks. But at the same time 🤯 I need the ability to sort by application: "knee joint / hip joint / etc" within the same Store pages. I was thinking about adding another set of navigation icons for joints to Intro (as a summary block or a div). In this case I need to hide the other set of icons if certain categories or tags are selected. I really hate the idea to have multiple pages with summaries for all my sub-sub-categories. Example here: https://rsrtr.squarespace.com/test-store-page password: password @creedon @tuanphan Do you guys think it is possible? If so, any ideas on how to do it? Thomas, I have a feeling that this comment of yours has something to do with what I want ))) Is it possible to have something like: if category = "1" display div-1 and hide div-2 and vise versa?

I totally agree! This forum is an outstanding resource. My whole site is built based on other people's threads, their experience and help. Even when I don't find an answer, I find some bits of code that when reassembled can do amazing little things. Once again, thank you for the beautiful solution!

I hate the option with a summary as a blog landing page! )))))) see my method in this thread:

My method might seem weird but It's been working in my personal site for over 2 years with no problems. You can see instructions and the result in my blog. - You need to go through all blog posts though to add an empty Code Block in the place where you want your sidebar to be. + The good part is that you don't have to code and style each one of them. They will be filled automatically. Disclaimer: I'm not a coder. I used other people's pieces of code from this forum to implement this method. If you see mistakes or know how to make this method better, please comment 👋🏽 1) Choose a published blog post as a Source. It will contain the initial code. Every time you want to make changes to your sidebar globally you edit only the Source. I use Search in the blog editor to quickly access the Source blog post. 2) Create your sidebar manually 😞 using a Code Block. Make sure the div has a unique id. The code inside the div can be anything you want - images, links, lists, buttons, lines etc. This is just an example: <div id="my-mockup-sidebar"> <img src="https://link-to-your-image.jpg"> <p style="color:grey;font-size:14px;" align="center"> <a href="/blog?category=Puppies">Link to category 1</a><br> <a href="/blog?category=Kittens">Link to category 2</a><br> <a href="/blog?category=Raccoons">Link to category 3</a> </p> </div> ----------------------------------- OPTIONAL, for responsive design: Instead of the code above, I have several div's named #my-mockup-sidebar-1, #my-mockup-sidebar-2, #my-mockup-sidebar-3 containing different elements to have control over what is shown on mobile with stacked layout and what isn't. Example: <!-- contains profile pic and some text--> <div id="my-mockup-sidebar-1"> <a href="/about-me"><img src="https://link-to-profile-photo.jpg"></a> <p style="font-size:14px;line-height:1.3em;">Your text</p> </div> <!-- contains an image and the list of categories --> <div id="my-mockup-sidebar-2"> <img src="https://link-to-image-category-title.png"> <p style="color:grey;font-size:14px;" align="center"> <a href="/blog?category=Puppies">Link to category 1</a><br> <a href="/blog?category=Kittens">Link to category 2</a><br> <a href="/blog?category=Raccoons">Link to category 3</a><br><br> </p> </div> <!-- contains social media links --> <div id="my-mockup-sidebar-3"> <center><img src="https://social-media-title.png"><br> <a href="https://socialmedia.com/afterworkdiy" target="_blank"><img src="https://social-media-logo-1.png"></a></center> <a href="https://socialmedia.com/AfterworkDIY/" target="_blank"><img src="https://social-media-logo-2.png"></a></center> </div> ----------------------------------- 3) Go through all other blog posts and add a Recipient Code Block with the code below. The empty div inside this block also needs to have a unique name, but the same for all Recipient blog posts. This is the dropzone of the sidebar you created earlier: <!--code for the dropzone --> <div id="mockup-sidebar-container"></div> 4) Go to Settings - Advanced - Code Injection - Footer and add this code that forces those Recipient Code Blocks to load the content of the Source: <script> $(document).ready(function() { $('#mockup-sidebar-container').load('/blog/source-post #my-mockup-sidebar'); }); </script> Hit save and all blog posts now have the same sidebar you created only once in the Source blog post. ----------------------------------- OPTIONAL, continued: If you chose to split Source div's to display or hide some of them on mobile, then instead of the code above use the code below. The 640 value is your desired mobile breakpoint and can be changed: <script> $(document).ready(function() { if ($(window).width() > 640) { $('#mockup-sidebar-container').load('/blog/source-post #my-mockup-sidebar-1, #my-mockup-sidebar-2, #my-mockup-sidebar-3'); } else { $('#mobile-sidebar-container').load('/blog/source-post #my-mockup-sidebar-2'); } }); </script> This code loads all 3 div's: profile pic, categories and social media on big screens and on on screens narrower than 640 px it shows only categories (or whatever you will have in #my-mockup-sidebar-2 or whatever you will name it) -----------------------------------

Sure thing! I've just marked it solved. But it needs to be seen here forever))

I'm an idiot))) The link brought me to your last reply and I didn't even scroll to the top to see your answer. OMG! IT WORKS PERFECTLY!!!!!!!!! ABSOLUTELY PERFECT!!!! Thank you soooo much! This thread can be closed as the super right answer is here.

Hey! Bumping the thread to ask if you have time to have a look at the code. If not, no problem, I'll stick with the white-on-white option then))))) But I'm sure the solution would help others too

Luckily it has been fixed by now. Yay!!! I wish SS also added an option to use operators with tags. Like browser search operators))))) I also need this feature for products on the site I'm working on((( One of the options would be using a paid plugin - Universal Filter. Another option I could think of is simple but not optimal because works only if you need to filter by 2 tags, not more. It is duplicating certain tags as categories. In this case you cannot use the Archive block because it will look messy. Let's say you have 2 Categories: dogs, cats and various Tags: different colors, breeds, young/old, long-haired/hairless etc. If you want your summary to show only black bulldogs you will need to duplicate breed Tags (OR colors) as Categories. So instead of selecting Dog-category and Black-tag + Bulldog-tag (which will show you all black dogs and all bulldogs in different colors), you will select Bulldog-category and Black-tag. The problem arises when you want to show all mixed-breed black dogs... Because if you select Mixed-breed-Category and Black-Tag it will also show you black mixed-breed cats. In this case you can probably split Mixed-breed-category into two Categories: 'mixed-breed dogs" and "mixed-breed cats". But then again, if you want to show black mixed-breed dogs with long hair you're stuck(((((

Thank you for your reply @creedon! I guess it will require a pretty long piece of code? I guess I shouldn't overload the site and 'd better stick with making the placeholder text white on white...

OMG, @tuanphan you're fast and helpful as always! Thank you for your prompt reply! 🤍🤍🤍 The Style part works great - the font got smaller. But the Code part doesn't seem to change anything... I pasted the code to the Footer as is, without even changing your text example. But It still says "Type to search..." (( This same code works for the Search Block but somehow not for the Search Page. Any idea why? BUT thanks to you I realized how to implement plan B - hide the placeholder text making it white. Maybe it will help someone: <style> /* Search page placeholder text color */ .sqs-search-page .sqs-search-page-input input::placeholder { color:white; } </style>

I knew I should use another platform to build a store but I like building with SS so much that I risked...(( Is there an option to display product thumbnails on the Search result page with some custom code? I'm using Brine

Hello dear helpful community! I'm building a site for a Russian company using Brine and I managed to localize some of the built-in text. Special thanks to @tuanphan for his Search Block custom code 👍🏽 https://forum.squarespace.com/topic/164077-how-to-edit-customise-search-box-placeholder-text/?do=findComment&comment=375210 What I'm struggling with is the translation of "Type to search..." on the search Page. I'd like it translated OR hidden. I found this thread https://forum.squarespace.com/topic/156697-customise-styling-on-a-search-block/ but it doesn't seem to work, or maybe I'm doing something wrong. Please help! PW: rsrtr2021 Bonus question: How to make the search results fonts smaller?