abc

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'

I've tried targeting all kinds of CSS selectors but none seems to work. 

URL: https://steven.squarespace.com/search

Thank you in advance.

2FA Autofill still does not work on Squarespace login page. Have to fill in the code manually. It's a PITA at least once every 30 days.

40 minutes ago, tuanphan said:

Use this code under

<style>
  @media screen and (max-width:767px) {
  .header-burger {
    left: -5vw !important;
    position: relative;
}
a.custom-search {
    position: relative;
    left: -3vw;
}
  }
</style>

 

Thank you, Tuan!

7 hours ago, tuanphan said:

Add to Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
  $(document).ready(function(){
    $('<a href="/search" class="custom-search"><i class="fa-solid fa-magnifying-glass"></i></a>').insertBefore('.header-burger');
});
</script>
<style>
  a.custom-search {
    margin-right: 20px;
    display: inline-block;
}
</style>

Hi Tuan, thank you for the code. One slight visual issue though.

It looks fine on desktop, but on mobile, the spacing is a little off.

This is the original without the code:

And this is with the code:

Would it be possible to have it look as close to the original as possible?

As always, thank you for your time.