dzak

Wow, tuanphan, truly incredible! This is really useful and tight code too! Thanks again!

Hi there, I was wondering if I could get help with an Custom-CSS-like solution for repositioning and changing how the description text on a product page is displayed? I would like the look that the Additional Info gives like on this page (under Gallery and Product Info, in its own full column): https://www.skipthesmalltalk.com/unlisted-store-page-for-testing/skipthesmalltalk-pilot-example2-pd4l8 (Additional Info picture) Instead of like how it normally displays as a Description like on this page (description confined to be stuck on the left column): https://www.skipthesmalltalk.com/unlisted-store-page-for-testing/skipthesmalltalk-pilot-example2 (Description picture) I am uploading my product automatically using the Squarespace API. So an alternative solution would be if was possible to update the Additional Info section with the Squarespace API, but I haven't found anywhere that describes how to do that or if that is even supported. Manually moving the descriptions to the Additional Info section is not a viable solution. Thanks so much for being such an awesome and helpful community!

Incredible. Thanks so much! This works great! Do you also happen to know how I could add Product Detail and Meta Data (Categories and Tags) to the store page in this list view, so that it looks a bit like what being done w/ summary blocks on this page?: https://www.skipthesmalltalk.com/exampleforss

Site URL: https://www.skipthesmalltalk.com/ It seems the Store Pages on Squarespace only has options for a grid-like display of products: (My store page) https://www.skipthesmalltalk.com/store But I'd much prefer the list-like view, like in the list view of calendar page, example: https://www.skipthesmalltalk.com/nyc-events-calendar Squarespace can mimic this but using a Summary block like so: https://www.skipthesmalltalk.com/event-summary but the that problem with this is that it can only display up to 30 products and it doesn't have the category filtering that the store page does. Is there any way to force the store page into something like the list-view?

SOLVED! Thanks so much to @tuanphan and @Web_Solutions for their answers! I'll include the solution below in case it can be helpful to anyone else. I wanted to edit the Product Blocks, so I was able to copy Web_Solutions's code found the relevant CSS parts to edit using his code and my browser's Inspect Elements functionality (basically the same code but with for the .product-block CSS element). Below is the code which I put into Home > Design > Custom CSS: .product-block .productDetails{ display: flex!important; flex-wrap: wrap; flex-direction: column!important; .product-title{ order: 1!important; } .product-price{ order: 2!important; } .product-variants{ order: 3!important; } .product-quantity-input{ order: 4!important; } .sqs-add-to-cart-button-wrapper{ order: 5!important; } .product-excerpt{ order: 6!important; } }

Thanks so much for the answer! But I have a couple of follow up questions if that okay? Where does this code get put into? I tried putting into the Shop -> Settings -> Advanced -> Code Injection, but that doesn't seem to work. Is this CSS something that needs to be put in on Developer mode? I'm also not sure if I explained my issue correctly: I already have the Merch Page and the View All Event Page (Store) set up to have the Purchase button appear above the description. But also I need the purchase button to appear above the description in a Product Block -- for example when linking a Product to an Event (and you include the "Description" and "Add to Cart Button") like on this page (note that the purchase button is all the way at the bottom of the description for this page): https://www.skipthesmalltalk.com/calendar/skip-the-small-talk-at-trident-books-wednesday-march-23-2022 Perhaps I misunderstood your post but it seems like the CSS is for the button on the Product page instead of for when you link a Product Block to an Event? Anyway, I really appreciate you taking a crack at this!

Hi, I was just curious where you inserted the JS code. Is it into the Code Inject section in the Event List Settings -> Advanced -> Page Header Code Injection ? It seems like a really useful bit of code but I put it in, but it didn't seemed to work.

Perhaps I've misunderstood your question, but I think might have a simple solution. You can edit the page, by navigating to the page and clicking 'Edit' which will appear in the top left corner of the Event page when you mouse over it (see image below). That will like you edit the banner and then you can click at the blue (+) button under the banner picture and add any block that you want.

Site URL: https://www.skipthesmalltalk.com/ I would like to have Product Block that display the Add to Cart button first and then the description. I have figured out a work-around to format it the way I want (like on this page): https://www.skipthesmalltalk.com/calendar/skipthesmalltalk-online-march-30-2022 Notice that it's Picture, Title, Quantity and Purchase Button, then the description. But it requires me to insert a Product block w/o the description but with the Add to Cart button. Then I just have to duplicate the description from the Product page in the Event description. This is usable, but very annoy every time I upload a new event or have to change anything in the description. Is there any way to use code-injections to place the Add to Cart button above the description in code blocks? This is a very similar question to the one here, except I'm looking for the button to have for Product blocks, not on the Product detail page: