creedon

@CalixtoD Please post the URL for your site. It is hard to help you if we can't see your site. If your site is not public please set up a site-wide password, if you've not already done so. Post the password here. We can then take a look at your issue.

@AshleyJP It appears you've put the code in a text block. That won't work. You need to put it in a code block. Try that and let us know how it goes.

@blitz Go to Store Settings > General > Filter Visibility in the Store. Set the button to the off position. This is for a v7.1. Let us know how it goes.

@tuanphan I responded to @elijah_aaron's question here.

The pagination point for a v7.1 Store page is 200 items.

Possible I'd say yes. One way to do it might be to have a page section with the first block a text block with your toggle text or symbol in it. Then follow with whatever other block you want. Then your CSS would hide all but the first block of the page section. Then you would have some code like the following. <script> $( '.page-section:nth-of-type( 1 ) .html-block:first' ).click ( function ( ) { $( this ) .nextUntil ( '.page-section' ) .slideToggle ( 'slow' ); } ); </script> This is not a fully fleshed out piece of code. It is just one possible starting point. If you were going to toggle all page sections then you wouldn't need the nth. If you needed only some then add more. Something like... const selector = '.page-section:nth-of-type( 1 ) .html-block:first, ' + '.page-section:nth-of-type( 3 ) .html-block:first'; $( selector ).click... I tested this code out here and it seemed to work well. Let us know how it goes.

I fixed a syntax error so it should now work in the original intended location. Either works really just depends on how one wants to organize their code.

Please give it a go again. I fixed a syntax error in the code. I've run the code locally several times now and it can work! 🙂

Add the following to Store Settings > Advanced > Page Header Code Injection. <style> /* hide debutante */ .ProductList-filter-list-item:nth-child( 3 ) { display: none; } </style> This is for a v7.0 site using the Brine template and is customized for @deandra.olivieri's needs as of this posting. This CSS is hiding debutante based on position in categories. If the categories change then the position will need to be updated. Let us know how it goes.

Please see Social Icon Discord Generic Icon to Discord Change. Let us know how it goes.

I'm going to suggest a different approach to your issue. The original image is an SVG. If we use some Javascript we should be able to swap out the original SVG data with an SVG from discord. The big advantage is that it appears to pick up the colors automatically! With a little editing of the SVG direct from discord. My initial tests show that may work well. If that is something you want to pursue let us know.

I don't have any specific answers for you. However I was just reading some Shopify info today and one thing I came across is that if your button doesn't look the way you want you have to start all over again with a new button to fix it. I don't know if that is really true but it sounded painful and that there wasn't a lot of hope fixing from the embedded code side. If I read that wrong someone please let us know.

I fixed a syntax error in the code. Give it another go!

Update 5/16/24: Apparently Squarespace now provides their own discord SVG icon. There is no need to use custom code. My original post follows. Add the following to Design > Custom CSS. /* begin change social icon to discord */ .header-actions--right .header-actions-action--social .icon:nth-of-type( 4 ), /* desktop */ .header-menu-actions .header-menu-actions-action--social:nth-of-type( 4 ) /* mobile */ { background-image: url( https://cdn4.iconfinder.com/data/icons/logos-and-brands/512/91_Discord_logo_logos-512.png ); background-repeat: no-repeat; background-size: 110%; } .header-actions--right .header-actions-action--social .icon:nth-of-type( 4 ) svg, /* desktop */ .header-menu-actions .header-menu-actions-action--social:nth-of-type( 4 ) svg /* mobile */ { display: none; } /* end change social icon to discord */ This is specific to the poster's need. Let us know how it goes.

A standard date field can be changed with CSS much more easily than three separate text fields. This would allow you to change the date to DD/MM/YYYY. Because the date field is grouped and ordered in a specific way, reordering them is pretty easy. Add the follow to Design > Custom CSS. #block-cd9a11642ad010a98fec .date { display: flex; } #block-cd9a11642ad010a98fec .day { order: -1; } This is for a v7.1 site and the block id is specific to m_lunberg's site. Let us know how it goes.

@eoddistillery It's pretty straight forward. Edit a product. Go the the Additional Info tab. Add as many Product blocks as needed.

Do as @pixelsandpuzzles suggests. You can use a cover or landing style page for this. v7 sites have cover built-in. v7.1 you need to create one yourself and then "remove" the header and footer with CSS.

I suggest the following as a starting point. <div style="margin-left: auto; margin-right: auto; width: 60%;"> <img src="https://static1.squarespace.com/static/541a13b7e4b06fd9d82ea15f/t/5fbfe948fa04221c7126f835/1606412618969/louise+tree+bllack.jpg"> </div> Let us know how it goes.

@Tarta I appreciate the offer. A like and an up-vote are always appreciated! Like is on lower right of a post. Up-vote is in the upper left.

@Tarta I updated my previous CSS post above. Let us know how it goes.

Can you use a standard date field instead of three separate text fields? I think a solution would be easier if you could.

@Phil1570047712 The following CSS might take you the rest of the way. /* begin remove margins and padding in page section with player */ [data-section-id="5fbec4069ee0f32b87371ba7"]:not( .full-bleed-section ) > .content-wrapper { margin-bottom: -10px; /* the player seems to have about 10px of black space at the bottom so we try to cover that up */ padding: 0 !important; } [data-section-id="5fbec4069ee0f32b87371ba7"] .sqs-layout > .sqs-row { margin-left: 0; margin-right: 0; } [data-section-id="5fbec4069ee0f32b87371ba7"] .sqs-layout:not( .sqs-editing ) > .sqs-row:first-child > [class*=sqs-col]:first-child > .sqs-block:last-child { padding-bottom: 0; } [data-section-id="5fbec4069ee0f32b87371ba7"] [class*=sqs-col] .sqs-block { padding-left: 0; padding-right: 0; } /* end remove margins and padding in page section with player */ On extra wide windows there is still spacing on the sides which can't be helped as the content appears to have a maximum width. Let us know how it goes.

@Tarta If it is one or two I think that wouldn't be to hard with CSS only. Three or more and I think you're going to need some CSS and Javascript that would dynamically assign a class to the variants based on the number of variants for the product. Are you definitely going to have 3 or more variants now or at some point?

This won't get rid of it all but it's a start. You have what looks like an empty text block above the code block that appears to be adding a little padding. Get rid of that.

Please set up a site-wide password. Post the password here. We can then take a look at your issue.