abc

On 11/14/2021 at 10:40 PM, Beyondspace said:

add to footer

<script>
document.addEventListener('DOMContentLoaded', function() {
    const productGrid = document.querySelector('.products-flex-container .list-grid');
    if (productGrid) {
        var productItems = productGrid.querySelectorAll('.grid-item');
        for (var i = productItems.length; i >= 0; i--) {
            productGrid.appendChild(productItems[Math.random() * i | 0]);
        }
    }
});
</script>

 

Sorry, forgot to mark as solution. Done, and thank you.

On 9/24/2024 at 2:32 AM, Spark-Plugin said:

Hi again @abc.

 

As far as I know, disabling just the Squarespace loading animations would likely require using JavaScript, not just CSS. This question has come up plenty of times on the Squarespace forum, and the typical solution is a CSS approach similar to the one I shared with transition: unset.

At this point, I’d recommend hiring a developer or scheduling a consultation with one to see if it's possible and to ensure it won’t cause any issues on your website.

I understand. Thank you. Also, I've marked your original reply as solution anyway since it CAN work in certain cases. As for me, I'll just have to wait for Squarespace to allow us to enable animations on a per-page basis.

1 hour ago, Spark-Plugin said:

Hello, @abc.

I imagine you're having an awesome day! I'll be helping you out with your question. Yes, it’s definitely possible to enable animation for just one page. Although it’s not recommended, as it might cause issues on certain devices, here’s how you can do it:

1. Make sure animations are enabled across your site.

2. Go to Squarespace ID Finder and install it on your browser.

3. Navigate to the page where you want to enable animations, and enter edit mode.

4. Turn on the Squarespace ID Finder extension.

5. Look for the Collection ID at the top of the page. Click it, and it will automatically copy the ID.

6. Now, navigate to Pages > Website Tools > Custom CSS.

7. Paste the code below into the CSS editor.

8. Replace the (#Collection-ID) part of the code with the ID you copied, hit Save and you're all set!

This custom code will make sure animations only appear on the targeted page with the Collection ID, and not across your whole site. You can also add more Collection IDs by simply separating them with a comma.

body:not(#collection-66f138068b7b8a554cc76cae) * {

  transition-delay: unset !important;
  transition: unset !important;

}

Let me know if that works, thank you!

I appreciate your detailed reply, but I'd rather not use transition: unset since it disables all transitions on a page, and I use a lot of them. Is there a way to disable ONLY the Squarespace loading animations shown in the screenshot of my original post?

I would like to enable Animations only for one specific page. Is it possible? Thank you.

2 hours ago, Spark-Plugin said:

Hello @abc I hope you're having a great day!
 

Here’s a code you might find useful, 

1. Navigate to: Settings > Advanced > Code Injection.
2. Scroll down to the "Header" section and paste the code above.
3. Replace /store/category with the actual path of the category page you want to send visitors to.
    

   <script>
     if (window.location.pathname === '/store') {
      window.location.href = '/store/category';
     }
   </script>

    

Thank you so much!

Hello, I would like to achieve the following (I assume, JavaScript is needed):

When visitors visit my online store at example.com/store, I want my visitors to be automatically redirected to one of the store categories at example.com/store/category.

Thank you in advance.

4 hours ago, Ziggy said:

This would be a different approach:

@media only screen and (min-width: 940px) {
  .sqs-block-accordion .accordion-items-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
  }
  .sqs-block-accordion .accordion-item {
    width: 50%;
  }
}

 

Perfect! Thank you so much!

Notice how when you expand the first dropdown, it affects the second one because categories in the first dropdown can't all fit inside its container. In its current state, it would need a lot of fixing.

4 minutes ago, Ziggy said:

In what way?

Width, height, padding, margins, all off.

1 hour ago, Ziggy said:

Try this Custom CSS:

@media only screen and (min-width:940px) {
  .sqs-block-accordion .accordion-items-container {
    columns: 2;
    -webkit-columns: 2;
    -moz-columns: 2;
  }
}

Right, it split it into two columns, but everything else is messed up. I don't think I have the energy or the expertise to fix it. Been working on my main product list for the last 72 hours. Thanks anyway.

11 minutes ago, Ziggy said:

You would simply need two accordion blocks.

Tried that before. It's not perfect. Two separate accordions do not communicate with each other, in other words, one does not collapse when another opens, etc.

Is there no way to display accordion titles in a row instead of a column?

Figured it out:

.accordion-item__description p a {
display: flex;
}

In my accordion, I have a description, which is a clickable hyperlink. The problem is that only the description text itself is clickable, not the entire line that the description is in.

Is there a way to make the entire line clickable?

Take a look at my URL. Notice how hovering the description line is not clickable unless you hover the description text itself.

Squarespace accordion only allows vertical layout, no matter the screen size.

I was wondering if it's possible to change the accordion layout to horizontal on wider screens (e.g. desktops).

Here's what I'm trying to achieve:

For mobile screens:

For desktop screens:

Wow, had no idea. Thank you!

As you can see, Squarespace store preview pic clearly shows nested navigation when you try to create a new store or a new category. But how do I actually achieve it? Surely, they wouldn't advertise it if it wasn't possible, otherwise it'd be considered false advertisement. Does anyone know how to nest store navigation just like Squarespace shows in the pic? Thanks.

@creedon

Hmm, I was looking for it under Sources, not Elements.

Yep, I see it under Elements. Not sure why searching for it under Sources yields no results. Thank you so much!

P.S. Tried donating twice using CC, but got error every time.

On 5/8/2021 at 10:16 PM, creedon said:

Please see Add Category Attribute to a Store Category Page.

Let us know how it goes.

Hi @creedon

I have carefully followed all the instructions, however [data-store-category] is still not found anywhere in the body. Not sure what I'm doing wrong.

Every month, there are fewer and fewer and fewer updates for Websites. Disappointing.

I guess that's the reason Squarespace got rid of versions; no pressure to release new features or updates.

@sydneyg

Here you go:

/* Opening Remarks */
#block-d336c4f5471b3b8037bc li:nth-child(1) .accordion-item__dropdown, #block-d336c4f5471b3b8037bc li:nth-child(1) .accordion-icon-container,
/* Coffee Breaks */
#block-d336c4f5471b3b8037bc li:nth-child(4) .accordion-item__dropdown, #block-d336c4f5471b3b8037bc li:nth-child(4) .accordion-icon-container,
#block-d336c4f5471b3b8037bc li:nth-child(10) .accordion-item__dropdown, #block-d336c4f5471b3b8037bc li:nth-child(10) .accordion-icon-container,
/* Lunch */
#block-d336c4f5471b3b8037bc li:nth-child(7) .accordion-item__dropdown, #block-d336c4f5471b3b8037bc li:nth-child(7) .accordion-icon-container,
/* Closing Remarks */
#block-d336c4f5471b3b8037bc li:nth-child(13) .accordion-item__dropdown, #block-d336c4f5471b3b8037bc li:nth-child(13) .accordion-icon-container,
/* Networking Cocktails */
#block-d336c4f5471b3b8037bc li:nth-child(14) .accordion-item__dropdown, #block-d336c4f5471b3b8037bc li:nth-child(14) .accordion-icon-container {
	display: none !important;
}

In the next update, without using custom code, it would be nice to:

1. Be able to set a custom speed for scrolling marquee. Sometimes 0.5x is not slow enough and 2x not fast enough.

2. Have more design options for scrolling marquee (not just linear and wave). For example, angled, circular, L-shape, or any shape, etc. 

3. Be able to display an image or text at an angle.

4. Be able to upgrade blog posts from 7.0 to 7.1

5. Be able to display social icons with custom links anywhere on the site. For example, a business with 100 team members has an individual team page for each team member. Each team member would like to display an instagram icon that links to their personal instagram profile. Can't.

6. Be able to force mobile nav menu on desktop.

7. Have some creative link hover effects.

8. Have some creative text effects on scroll.

9. Have a much faster site-wide Search. For example, on Apple's website, it's instantaneous.

10. Be able to upload static or animated SVG logo to header.

11. Be able to upload SVG, PDF, WebP, HEIC files to Asset Library and be able to display them anywhere on the site.

Thank you, SQSP, for fixing this at long last.

Try this:

.primary-button-style-outline .sqs-button-element--primary {
  border-color: #F4B032 !important;
  color: #F4B032 !important;
}

.primary-button-style-outline .sqs-button-element--primary:hover {
  color: #fff !important;
  background: #F4B032 !important;
}

4 minutes ago, Web_Solutions said:

Add these code on Custom CSS panel in Website > Utilities > Website Tools > Custom CSS.

body:has(.sqs-search-page) footer {
    display: none !important;
}

 

Thank you so much!

Use

p a

instead of just 'a'