Jump to content

Keyo

Member
  • Posts

    8
  • Joined

  • Last visited

Everything posted by Keyo

  1. Ok, issue resolved! Many thanks to @tuanphan for the help. This thread follow up is based on this original forum thread. Basically we had to inject code into the header to allow custom links to show in the single product page. Then with CSS customise the look and feel. Below the code from my site. Code Injection <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $(document).ready(function() { $('<ul class="t-nav"><li><a href="/keyo-shop/surfcraft">Surfcraft</a></li><li><a href="/keyo-shop/in-stock">In Stock</a></li><li><a href="/keyo-shop/canvas">Canvas</a></li></li><li><a href="/keyo-shop/apparel">Apparel</a></li><li><a href="/keyo-shop/accessories">Accessories</a></ul>').insertBefore('body.view-item .products.collection-content-wrapper'); }); </script> <style> ul.t-nav { list-style: none; padding-left: 27px; margin-right: 27px; display: flex; justify-content: center; } ul.t-nav li a { margin-left: 27px; margin-right: 27px; } </style> CSS } .t-nav { font-size: 15px; margin-top: 56px; width: 100% !important; display: flex; justify-content: center; align-items: baseline; } @media screen and (max-width:767px) { ul.t-nav a { font-size: 13px; margin-left: 10px !important; margin-right: 10px !important; } ul.t-nav { padding-left: 0px !important; padding-right: 0px; margin-top: 20px; }}
  2. Working on it with some help from Tuan, looks like its possible to enable via code injection indeed. Just need to tweak css to make it look the same and mobile friendly. Still on it, and will let y'all know what I ended up doing. In terms of the argument Paul states, i totally get the logic behind the customer experience and navigation to make conversions, however its just nice to have options as the shop owner to have this option so as to love even more SS, allowing us to go either way. At the end of the day, we are to blame if we ain't selling 🙂
  3. Hey Paul, firstly thanks for taking the time to reply. Password is: vanessa I see what you mean with the reason behind why SS hides the categories. Still tho, i feel like when a user ends up seeing one product and realises it's not the right item for them, they are stuck and cant go back to explore others or explore other categories.... Is that paid plugin the only option to at least show the breadcrumbs? I don't mind adding some code and take the risk. If enabling on section settings navigation / show breadcrumbs it only shows: All / Item you are on. It doesn't allow much exploring. Im stuck here
  4. Hi @tuanphan! This worked great. i was wondering if there is a way to show the same horizontal categories, on a single product? I cant figure it out. This is a post i did recently.
  5. Site URL: https://keyo2022.squarespace.com/ Howdy, Can't figure out how to display all my categories on single product pages. Nothing is showing at the moment but would love to add all categories as I currently have on each category page. See below JPG as reference. Im currently using the CSS below to show the categories links on each category page. Note: I saw there is a paid plugin with breadcrumbs, but would like to avoid that option with some code editing to show the above. Thanks! /* Show category nav links */ div.nested-category-tree-wrapper { display: flex !important; float: none !important; min-width: 100% !important; max-width: 100% !important; margin-right: 0 !important; } section.products.collection-content-wrapper.products-list { flex-direction: column !important; display: flex; } .nested-category-tree-wrapper>ul { width: 100% !important; display: flex; justify-content: center; align-items: baseline; color: black } .nested-category-tree-wrapper>ul li { margin-left: 3vw; } nav.nested-category-breadcrumb { display: none !important; } ul.nested-category-children { display: none !important; }
×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.