Jump to content

Is there a way to make the Store Product Page format itself to look like and Event List?

Go to solution Solved by tuanphan,

Recommended Posts

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?

 

Link to comment
  • Replies 3
  • Views 252
  • Created
  • Last Reply

Top Posters In This Topic

  • Solution
On 5/17/2022 at 12:33 PM, dzak said:

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?

 

Add to Design > Custom CSS

/* Products grid to list view */
.ProductList-item {
    width: 100% !important;
    display: flex;
}
.ProductList-outerImageWrapper {
    width: 30%;
    padding-bottom: 30% !Important;
}
section.ProductList-overlay {
    width: 70%;
    padding-left: 5%;
}
section.ProductList-overlay * {
    text-align: left;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 5/27/2022 at 3:21 PM, dzak said:

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

 

Not possible. You need to use Summary Block to add categories/tag/info

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • 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.