Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
rkeep

7.1 change mobile store category to drop down?

Question

Site URL: http://www.bighousecards.com

Trying to find a little code to change the 7.1 store mobile or both view to be a category dropdown vs. a scrolling list to the right or left.  The average person wouldn't know to scroll categories.  Took me a while to figure it out thinking my categories were not being displayed.  

Really appreciate any assistance as this is an annoying issue and I really don't want to change versions just for this. 

Thank you

Ryan

Screenshot_20200715-170147.png

Share this post


Link to post

11 answers to this question

Recommended Posts

  • 0

I tested this on another 7.1 site, and have it figured out, I just need the password to test on yours and then I can share.


Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Share this post


Link to post
  • 0
10 hours ago, rwp said:

I tested this on another 7.1 site, and have it figured out, I just need the password to test on yours and then I can share.

I am having the same problem (one member emailed me), can you share the code? Thank you.


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


Link to post
  • 0
30 minutes ago, tuanphan said:

I am having the same problem (one member emailed me), can you share the code? Thank you.

@tuanphan sent you a message.


Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Share this post


Link to post
  • 0
19 hours ago, bbarinaga said:

Hello.

I'm having the same issue and would love to use a drop down for categories on mobile.

Can you help me with the code @tuanphan?

https://mistoa.squarespace.com/tienda

password: 1234

This is complex. @rwp has this code


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


Link to post
  • 0
Posted (edited)

Sorry I missed this.

If you are on 7.1, head to my webpage (link below).

Click the code pen link and the code is "Product Cat to Dropdown"

Follow the directions in my signature to set up the jquery scripts, and you can put the code in the shops page code injection. Let me know if it gives you any issues.

This isn't a turnkey solution usually, it takes some tweaking for each website. Special characters in the categories also need attention.

You will also need to use CSS to style the drop down, and locate it, as well as show/hide it, and the original menu, on desktop/mobile.

Edited by rwp

Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Share this post


Link to post
  • 0
On 8/4/2020 at 6:01 PM, rwp said:

Sorry I missed this.

If you are on 7.1, head to my webpage (link below).

Click the code pen link and the code is "Product Cat to Dropdown"

Follow the directions in my signature to set up the jquery scripts, and you can put the code in the shops page code injection. Let me know if it gives you any issues.

This isn't a turnkey solution usually, it takes some tweaking for each website. Special characters in the categories also need attention.

You will also need to use CSS to style the drop down, and locate it, as well as show/hide it, and the original menu, on desktop/mobile.

rwp,

First off, this is a MUST HAVE. The horizontal Cat scroll is a ux nightmare.

I tried exactly what you laid out. Tested on mobile. Unfortunately, no effect. 

- Added Jquery to global header
- Added your JS script to global header

To be clear, I am supposed to put the Jquery in the header code injection area, correct? And same with your script?

I made sure to add <script>and</script> tags

See attached screenshot to confirm.

Any further guidance would be very much appreciated.

007.png

Share this post


Link to post
  • 0
Posted (edited)

@birdmade whats the link to your page?

Edit, just noticed, this needs to be one line, without the > after script

<script src=.....................................></script>

image.thumb.png.79e9c2376bb382892b6b6285f62e98f0.png

Edited by rwp

Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Share this post


Link to post
  • 0

@birdmade Apparently squarespace uses a few different layouts for the categories.

This one is more complex, with the items and sub items. Head to my codepen and check out "Product Cat to Dropdown Alternate".

This will only work with the parent categories and will ignore the sub items. Drop me an email if you would like me to dig into this deeper.


Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...