Jump to content

Using a blank page as product page

Go to solution Solved by creedon,

Recommended Posts

 

Dear all,

I'm building my photographer portfolio website in a minimalistic style.

I like the function of filtering through "products" (works) in a store collection but cannot make the product page (project presentation page, fig. 1)  look like the home page (fig. 2), with only a slideshow on page, centered. How do I get rid of all those extra buttons and price in the product page? And I also wish to add a small line of text below the slideshow as project description but cannot find "add section" in product page edit window either. 

Thanks in advance.

Qingyan

fig. 1 product page

image.thumb.png.4200e46d0ea8ffea49aa25ba3762a33c.png

fig. 2, home page/desired look

image.thumb.png.e26c692535513743d41312d6c52b034d.png

Link to comment
  • Replies 7
  • Views 537
  • Created
  • Last Reply

Top Posters In This Topic

It is possible to hide commerce type elements of a product detail page with CSS.

The structure of the store detail page predates the concept of page sections. Products have an Additional Info area where you can add additional info.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
8 hours ago, creedon said:

It is possible to hide commerce type elements of a product detail page with CSS.

The structure of the store detail page predates the concept of page sections. Products have an Additional Info area where you can add additional info.

Dear Creedon,
Thank you for the answer. I proceeded with adding the coding you provided and the price/add to cart button have disappeared but I'm left with an area unable to use (see below image. I can either make the slideshow be on left or right side but that's about it.) Anyway to make the slideshow centered?

Many Thanks,

Qingyan

image.thumb.png.c9ff4c8776fde97c444fbeb6215264ce.png

Link to comment

Please post the URL for a page on your site where we can see your issue.

A link to the backend of the your site won’t work for us, i.e. a url that contains /config/.

Please set up a site-wide password, if your site is not public and you've not already done so.

Post the password here.

Adding a site-wide password does not allow anyone to alter your site. It only allows those with the password to see your site.

Please read the site-wide password and how to share a link documentation to understand how they work.

We can then take a look at your issue.

You may find How to post a forum question post useful.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
On 3/20/2023 at 4:01 AM, creedon said:

Please post the URL for a page on your site where we can see your issue.

A link to the backend of the your site won’t work for us, i.e. a url that contains /config/.

Please set up a site-wide password, if your site is not public and you've not already done so.

Post the password here.

Adding a site-wide password does not allow anyone to alter your site. It only allows those with the password to see your site.

Please read the site-wide password and how to share a link documentation to understand how they work.

We can then take a look at your issue.

You may find How to post a forum question post useful.

Dear Creedon,

Here's the link to the page we are talking about:

https://armadillo-sapphire-79fd.squarespace.com/works/p/1000

pw: 12345678

Thank you,
Qingyan

Link to comment
  • Solution

Another route. If you don't need any of the commerce elements at all. You could remove my code and just hide the whole product summary info and make the gallery take up 100% of the page. Something like the following.

ScreenShot2023-03-21at1_18_48PM.thumb.png.9e1a798f2b7dcbfac76bf5c20c2c607c.png

Add the following to Store Settings > Advanced > Page Header Code Injection for the store page. Please see per-page code injection.

<style>

  .ProductItem .ProductItem-details {
  
    display : none;
    
    }
    
  .ProductItem-gallery {
  
    width : 100%;
    
    }
    
  </style>

 

 

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

Thank you so much, this is getting really close to what I'm aiming for- however I really wish to add video clips to gallery display, and product display doesn't allow me doing that. Any way to remove the product section completely and replace it with the slideshow block identical to the one on my homepage? I believe it was modified based on this image section.

WeChat5a504d297affec2e712db41e6f09e2dd.thumb.png.1a1a88b300da582402c8c1b8c585e17d.png

Much appreciated,

Qingyan

Link to comment
  • 3 weeks later...

I ended up adding such code to code injection-header:


<style>

  .ProductItem .ProductItem-details {
  
    display : none;
    
    }
    
  .ProductItem-gallery {
  
    display : none;
    
    }
    
  </style>

And then added a slideshow and a text block in "additional info" of each product. I didn't know it is possible to add slideshow and/or videos in that section.

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.