popofglitter

https://pomegranate-fife-566s.squarespace.com/inquire

password: cupcake

I have a pop-up set up where I want users to stay on whichever page they land on if they press "enter", but the action options don't allow for a "this page" setting.

I tried "/" but it just directs users to the home page, understandably.

Any thoughts on how users can accept/enter and stay on the same page instead of being redirected to another page?

Steps to reproduce:
Go to https://pomegranate-fife-566s.squarespace.com/inquire
Enter password 'cupcake'
Press 'Enter' on the pop-up

Actual results: user is redirected to home page
Desired results: user stays on Inquire page

I am also hoping to slow down the carousel on a home page please

bunnylefluer.com

On 9/22/2023 at 3:00 AM, tuanphan said:

#1. This code will move Breadcrumb from Additional Info to current Breadcrumb position + Hide current breadcrumb

#2. What is problem with the code? Your code is CSS code in Custom CSS box, my code is in Code Injection > Footer code

#1 Unfortunately, that did not happen, as shown by my screenshots.

#2 I was just trying to provide more information in case it would be helpful...won't do that ever again.

5 hours ago, tuanphan said:

This will take some steps

First, add this code to Settings > Advanced > Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $('section.ProductItem-additional .code-block .ProductItem-nav-breadcrumb').appendTo('nav.ProductItem-nav');
});
</script>
<style>
nav.ProductItem-nav>div:not(.custom-breadcrumb) {
    display: none !important;
}
</style>

Next you need to edit each product > add this Code Block to Product Additional Info

  <div class="ProductItem-nav-breadcrumb" data-animation-role="content">
    <a href="/shop" class="ProductItem-nav-breadcrumb-link">Shop</a>
     <span class="ProductItem-nav-breadcrumb-separator"></span>
    <a href="/shop/gratuity" class="ProductItem-nav-breadcrumb-link">Gratuity</a>
    <span class="ProductItem-nav-breadcrumb-separator"></span>
    <a href="/shop/p/custom-dress" class="ProductItem-nav-breadcrumb-link">Custom Dress — Deposit</a>
  </div>

The code will create a bar like this in Additional Info

then repeat #2 for all products

You can edit Category Name/URL - Product Name/URL in the code

Thank you, but that is not what I'm looking for. I'm hoping for the actual breadcrumb to show the category, not an additional note, as the additional note shows underneath the product which does not make sense. See screenshots.

Additionally, the code voided my code for bold text and the bold text is critical 😕 Below is my existing code. Thoughts? I'm starting to think this is simply impossible thanks to Squarespace.

.header-nav-item a:hover {
    font-weight: bold;
}

.nested-category-breadcrumb-link {
  font-weight: bold;
}
.category-link {
  font-weight: bold;
}
.products.collection-content-wrapper .ProductItem-nav-breadcrumb-link:last-child {
  font-weight: bold;
}
button.cart-row-edit::before {
  content:'Add Notes'
}
button.cart-row-edit span {
  display:none;
}
/* Fix mobile shifting */
@media screen and (max-width:700px) {
.header-title-nav-wrapper {
    max-width: 57% !important;
}
}
/* show all categories */
@media only screen and (max-width: 575px) {
	.products.collection-content-wrapper .nested-category-children {
		flex-wrap: wrap !important;
		overflow: visible !important;
	}
	.products.collection-content-wrapper .nested-category-breadcrumb-list-item .nested-category-breadcrumb-link {
		margin-left: 1vw !important;
	}
}

On 9/15/2023 at 2:49 AM, tuanphan said:

I don't know how to add this automatically but if you agree to add it manually, I can give the code

• Ideal is I will give some new breadcrumb code
• You edit text, url, and add it to Code Block - Additional Info
• You will need to do this for all products

That works! Yes, please!

On 9/12/2023 at 4:32 AM, tuanphan said:

Can you take a screenshot? It looks fine to me

Yes, please see below.

I'm hoping for the breadcrumb to show "Shop > Category > Item Name", in this case it would be "Shop > Pasties > Show Your Pride Pasties".

Thank you!

Hi @iamdavehart thank you for your thorough response and help!!

On 8/16/2023 at 4:35 AM, tuanphan said:

If you need this, we can help with custom code to achieve it..

Hi @tuanphan would you please be able to help with custom code for this perhaps? site: dethreads.net

Thank you!

Bump

Thank you!

One more question...is there any way to wrap the text so there isn't a line break between 'athleisure' and 'children's clothing & accessories' categories like seen in the editor?

Nevermind, the two columns show on the actual mobile site, but does not update on squarespace emulator for some reason.

Thank you!!

That worked as well, thank you!

hi @Lesum I changed it back to margin-left and still only one column

.header-nav-item a:hover {
    font-weight: bold;
}

.nested-category-breadcrumb-link {
  font-weight: bold;
}
.category-link {
  font-weight: bold;
}

button.cart-row-edit::before {
  content:'Add Notes'
}
button.cart-row-edit span {
  display:none;
}
/* Fix mobile shifting */
@media screen and (max-width:700px) {
.header-title-nav-wrapper {
    max-width: 57% !important;
}
}
/* show all categories */
@media only screen and (max-width: 575px) {
	.products.collection-content-wrapper .nested-category-children {
		flex-wrap: wrap !important;
		overflow: visible !important;
	}
	.products.collection-content-wrapper .nested-category-breadcrumb-list-item .nested-category-breadcrumb-link {
		margin-left: 1.5vw !important;
	}
}
@media only screen and (max-width: 767px) {
    .products.collection-content-wrapper .list-grid {
        grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    }
}

Nevermind, I changed "margin-left" to "margin-center" and it worked 🙂

Hm, that did not seem to work. Here is all the CSS I currently have including your suggestion:

.header-nav-item a:hover {
    font-weight: bold;
}

.nested-category-breadcrumb-link {
  font-weight: bold;
}
.category-link {
  font-weight: bold;
}

button.cart-row-edit::before {
  content:'Add Notes'
}
button.cart-row-edit span {
  display:none;
}
/* Fix mobile shifting */
@media screen and (max-width:700px) {
.header-title-nav-wrapper {
    max-width: 57% !important;
}
}
@media only screen and (max-width: 575px) {
    .products.collection-content-wrapper .nested-category-children {
        flex-wrap: wrap !important;
        overflow: visible !important;
    }
    .products.collection-content-wrapper .nested-category-breadcrumb-list-item .nested-category-breadcrumb-link {
        margin-left: 0 !important;
    }
}
@media only screen and (max-width: 767px) {
    .products.collection-content-wrapper .list-grid {
        grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    }
}

Hi @Lesum quick follow-up question. It appears the spacing of the pipe dividers shifted a little. Is there any way to align space out the divider evenly like in my first screenshot? This is how it appears now:

Hello,

When you view my store in mobile, the items are in one column. Is there a way for me to make it two columns on mobile? (I would like to keep it 4 columns on desktop).

Site: https://www.dethreads.net

TIA!

That worked! Absolute lifesaver! Thank you @Lesum!

On 7/14/2022 at 5:27 PM, mike.bj said:

Hi Paul, thank you for the tip, that's great.

Noticed on mobile view, when you have the Sidebar option selected - it seems to display the categories as a list at the top.

Hoping to learn if there's a way to change it so if there are lots of categories it displays as a dropdown?

Thank you for any insight! Mike.

Hi @mike.bj Did you ever find a resolution for this mobile issue? I'm also experiencing this problem.

I'm also having the same problem

Site: dethreads.net

Hi, the categories in my store on mobile are cut off. Thoughts on how to display all the categories on mobile?

Site: dethreads.net

Hello,

My store has several categories in my store, but on mobile it only looks like I have 4 categories because the scroll isn't obvious.

How can I show all the categories at once/remove the need to scroll? I would like to keep the pipe divider ( | ) between categories.

Site: https://www.dethreads.net

TIA!

I managed to adjust with @tuanphan code. Thank you!

/* Fix mobile shifting */
@media screen and (max-width:700px) {
.header-title-nav-wrapper {
    max-width: 57% !important;
}

I'm experiencing similar issue.

dethreads.net