rkeep Posted July 16, 2020 Share Posted July 16, 2020 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 Link to comment
rwp Posted July 16, 2020 Share Posted July 16, 2020 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. Link to comment
tuanphan Posted July 16, 2020 Share Posted July 16, 2020 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. Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
rwp Posted July 16, 2020 Share Posted July 16, 2020 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. Link to comment
bbarinaga Posted July 23, 2020 Share Posted July 23, 2020 (edited) 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 Edited July 23, 2020 by bbarinaga Link to comment
tuanphan Posted July 24, 2020 Share Posted July 24, 2020 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 bbarinaga 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Guest Posted August 4, 2020 Share Posted August 4, 2020 @rwp Im having this issue, do you think you can help me out too? It would be greatly appreciated! Link to comment
rwp Posted August 4, 2020 Share Posted August 4, 2020 (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 August 4, 2020 by rwp Link to comment
birdmade Posted August 16, 2020 Share Posted August 16, 2020 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. Link to comment
rwp Posted August 16, 2020 Share Posted August 16, 2020 (edited) @birdmade whats the link to your page? Edit, just noticed, this needs to be one line, without the > after script <script src=.....................................></script> Edited August 16, 2020 by rwp birdmade 1 Link to comment
birdmade Posted August 22, 2020 Share Posted August 22, 2020 rwp, still no go unfortunately. I fixed the <script> tag. Good catch. I also tried adding your script to site-wide injection, and "Shop" page injection (not at the same time) but neither worked. Here's the bare-bones staging site: https://poodle-dandelion-3fkk.squarespace.com/shop pswd: interwebs Would appreciate any other thoughts if you have them. Link to comment
rwp Posted August 22, 2020 Share Posted August 22, 2020 @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. birdmade 1 Link to comment
Alow Posted October 5, 2020 Share Posted October 5, 2020 @rwp This works great for me, big thanks. New to jquery though, how do I use CSS to style it? Very thankful for any pointers! Link to comment
rwp Posted October 5, 2020 Share Posted October 5, 2020 You can target it just like any other element. select.catDrop { If I remember correctly. Link to comment
Alow Posted October 5, 2020 Share Posted October 5, 2020 Worked very well, big thanks! Link to comment
Kkaarrllyy Posted November 25, 2020 Share Posted November 25, 2020 Hi rwp I would like to change this on my site too and have no idea how to do it, would you be able to help? https://www.purecandlesupplies.com.au/shop Thanks Karly Link to comment
xspxsp Posted December 3, 2020 Share Posted December 3, 2020 Sorry I think I missed out whatever code was shared here. I have the same theme and issue as the threadstarter. I have more than 6 categories, the last few get hidden with the horizontal scrolling. I have added categories links under menu as a solution but visitors have to click on the hamburger menu icon. Is there a better way to display categories for mobile view? @rwp @tuanphan if you're able to help please. Thank you. Link to comment
tuanphan Posted December 3, 2020 Share Posted December 3, 2020 On 11/26/2020 at 6:19 AM, Kkaarrllyy said: Hi rwp I would like to change this on my site too and have no idea how to do it, would you be able to help? https://www.purecandlesupplies.com.au/shop Thanks Karly 7 hours ago, xspxsp said: Sorry I think I missed out whatever code was shared here. I have the same theme and issue as the threadstarter. I have more than 6 categories, the last few get hidden with the horizontal scrolling. I have added categories links under menu as a solution but visitors have to click on the hamburger menu icon. Is there a better way to display categories for mobile view? @rwp @tuanphan if you're able to help please. Thank you. Have you solved it yet? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
sharine Posted January 8, 2021 Share Posted January 8, 2021 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. Hi, what's the website where we are to get this code? I don’t see the link below. Link to comment
tuanphan Posted January 10, 2021 Share Posted January 10, 2021 On 1/8/2021 at 11:17 PM, sharine said: Hi, what's the website where we are to get this code? I don’t see the link below. He removed his signature. Not sure why ☘️ I access his code on jsfiddle, but it also says 404 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
paul2009 Posted January 20, 2021 Share Posted January 20, 2021 On 11/25/2020 at 11:19 PM, Kkaarrllyy said: I would like to change this on my site too and have no idea how to do it, would you be able to help? You can change the mobile product category slider into a centered list of categories by adding some CSS like this. I've posted the code here: noblestudio and tuanphan 2 About: SQSP User for 17 yrs. Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥. Work: Founder of SF Digital, building Squarespace Extensions to supercharge your commerce website. Content: Links in my posts may refer to SF Digital products or may be affiliate links. If my advice helped, you can thank me by clicking one of the feedback emojis below. I love coffee too. Link to comment
resonancemktg Posted August 12, 2021 Share Posted August 12, 2021 Could someone please help me change the mobile store category to drop down as well? Happy to share URL and password privately. Gratefully, Kelly Link to comment
tuanphan Posted August 14, 2021 Share Posted August 14, 2021 On 8/13/2021 at 2:01 AM, resonancemktg said: Could someone please help me change the mobile store category to drop down as well? Happy to share URL and password privately. Gratefully, Kelly Hi. What is site url? We can help easier Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
moonandstone Posted May 19, 2022 Share Posted May 19, 2022 On 1/20/2021 at 10:32 AM, paul2009 said: You can change the mobile product category slider into a centered list of categories by adding some CSS like this. I've posted the code here: Any chance someone can help me with this as well? I am not very good with web stuff and definitely need the drop down option. www.moonandstone.com Link to comment
moonandstone Posted May 19, 2022 Share Posted May 19, 2022 On 8/14/2021 at 5:38 PM, tuanphan said: Hi. What is site url? We can help easier Could someone help me as well?? Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment