Jump to content

How to arrange product page in a specific order?

Recommended Posts

Posted (edited)

Hi,

I am trying to rearrange my product page into the following order:

 

  1. Title
  2. Price
  3. Variant
  4. Quantity
  5. Add to Cart
  6. Product Description


Does anyone how what code can achieve this? I tried some of the versions posted for similar queries but changing the order number from that code didn’t do what I hoped.

I was also wondering if anyone knows how to add a header image to my product/checkout pages which is stylistically the same as my other pages? Screenshots and link attached for reference. 

Desired look: https://www.atmos.productions/store

Thanks

Atmos

image.thumb.png.00ab04159d2cae4e9cabd3a7f2a544e5.png

Screenshot 2024-06-06 at 19.44.16.png

Edited by atmos
Additional query added
Link to comment

@atmos Hi! To rearrange the order on product pages, you can add this code in Website > Pages > Website Tools > Custom CSS.

.ProductItem-details .ProductItem-details-checkout {
	display: flex !important;
}
ProductItem-details .ProductItem-product-price {
    order: 1 !important;
}
.ProductItem-details .product-variants {
	order: 2 !important;
}
.ProductItem-details .ProductItem-quantity-add-to-cart {
	order: 3 !important;
}
.ProductItem-details .ProductItem-details-excerpt-below-price {
    order: 4 !important;
}

If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. 

Sam
Web Developer & Digital Designer

 Did you find my contribution helpful? Buy me a coffee?

Link to comment

@atmos To add a different header image on the product page, you can add this code:

body.collection-type-products.view-item .header-title-logo img {
    visibility: hidden;
}
body.collection-type-products.view-item .header-title-logo {
    background-image: url("replace-with-your-image-url");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}

If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. 

Sam
Web Developer & Digital Designer

 Did you find my contribution helpful? Buy me a coffee?

Link to comment
19 hours ago, Lesum said:

@atmos Hi! To rearrange the order on product pages, you can add this code in Website > Pages > Website Tools > Custom CSS.

.ProductItem-details .ProductItem-details-checkout {
	display: flex !important;
}
ProductItem-details .ProductItem-product-price {
    order: 1 !important;
}
.ProductItem-details .product-variants {
	order: 2 !important;
}
.ProductItem-details .ProductItem-quantity-add-to-cart {
	order: 3 !important;
}
.ProductItem-details .ProductItem-details-excerpt-below-price {
    order: 4 !important;
}

Hi Lesum, this was just what I was looking for in relation to the order. Thanks for sharing!

Link to comment
19 hours ago, Lesum said:

@atmos To add a different header image on the product page, you can add this code:

body.collection-type-products.view-item .header-title-logo img {
    visibility: hidden;
}
body.collection-type-products.view-item .header-title-logo {
    background-image: url("replace-with-your-image-url");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}

Hi, this one didn’t seem to fix my issue. The header than I created was actually another section which has a background to it. I’d like the background of a chosen image to fill the header and some space underneath it. I’ve attached another screenshot to hopefully show you what I mean. This code only appears to change my logo (which is still helpful to know for the time being. 

I would like my product pages to have a white logo in the top left hand corner, white text for the navigation bar, and a header with the same layout I made by adding a section on regular pages.

Hope this helps

Screenshot 2024-06-07 at 18.09.48.png

Link to comment

@atmos I noticed that the logo on the product page isn't visible. So I assumed you wanted to adjust the code to enable adding a different logo on product pages.

If you'd like to apply the same background image to fill the header across all product pages, I can come up with a simple solution. However, unique images for each product page would require a lot of custom code and for each product page, you've to update image URLs and page IDs. Let me know whether you'd like a unique image for each product page or if the same image would work.

If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. 

Sam
Web Developer & Digital Designer

 Did you find my contribution helpful? Buy me a coffee?

Link to comment
Posted (edited)
2 hours ago, Lesum said:

@atmos I noticed that the logo on the product page isn't visible. So I assumed you wanted to adjust the code to enable adding a different logo on product pages.

If you'd like to apply the same background image to fill the header across all product pages, I can come up with a simple solution. However, unique images for each product page would require a lot of custom code and for each product page, you've to update image URLs and page IDs. Let me know whether you'd like a unique image for each product page or if the same image would work.

Hi, thats ok. It’s still a helpful bit of code to add to my vocabulary. I’m happy with the same image for each product page to keep things more simple. I’d like to add a similar image/header to my events pages as well.

Edited by atmos
Link to comment
On 6/7/2024 at 6:41 PM, Lesum said:

@atmos I noticed that the logo on the product page isn't visible. So I assumed you wanted to adjust the code to enable adding a different logo on product pages.

If you'd like to apply the same background image to fill the header across all product pages, I can come up with a simple solution. However, unique images for each product page would require a lot of custom code and for each product page, you've to update image URLs and page IDs. Let me know whether you'd like a unique image for each product page or if the same image would work.

Hi Lesum, I was wondering if you’ve had a chance to think of the suitable code needed for this task? Hope to hear from you soon. Thanks, Atmos

Link to comment

@atmos Hi! Add this under Custom CSS to add a background image to fill the header across all product pages. Code will also transform all the navigation items to white:

body[class*="type-products"].view-item header#header {
    background-image: url("replace-with-your-image-url");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    height: 50vh;
}

body[class*="type-products"].view-item header#header {
.header-nav-item * {
    color: white;
}  
:not(.header--menu-open) .header-actions .icon--fill svg {
    fill: white !important;
}
span.sqs-cart-quantity {
    color: white;
}
a.btn {
    background: white;
    color: black;
}
.burger-inner>div {
    background-color: white !important;
}  
}

@media only screen (max-width: 1024px) {
    body[class*="type-products"].view-item header#header .header--menu-open .header-menu {
        padding-top: 170px !important;
    }
}

 

If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. 

Sam
Web Developer & Digital Designer

 Did you find my contribution helpful? Buy me a coffee?

Link to comment
Posted (edited)
On 6/12/2024 at 9:13 PM, Lesum said:

@atmos Hi! Add this under Custom CSS to add a background image to fill the header across all product pages. Code will also transform all the navigation items to white:

body[class*="type-products"].view-item header#header {
    background-image: url("replace-with-your-image-url");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    height: 50vh;
}

body[class*="type-products"].view-item header#header {
.header-nav-item * {
    color: white;
}  
:not(.header--menu-open) .header-actions .icon--fill svg {
    fill: white !important;
}
span.sqs-cart-quantity {
    color: white;
}
a.btn {
    background: white;
    color: black;
}
.burger-inner>div {
    background-color: white !important;
}  
}

@media only screen (max-width: 1024px) {
    body[class*="type-products"].view-item header#header .header--menu-open .header-menu {
        padding-top: 170px !important;
    }
}

 

Hi that worked great. Do you know how I can darken the background image similarly to the header images on my other pages? It needs to be darker so that the white text is more visible. If it helps, the overlay opacity for my headers is set to 75%. I have attached a screenshot to show you what I mean. Hope this helps.

I was also wondering if there is a way to add a large heading in the header, similar to the “Drawing” heading I use on another page? I’d like the alignment to be the same as this page if possible.

I really appreciate your help so far, thank you!

Screenshot 2024-06-15 at 20.46.50.png

Screenshot 2024-06-15 at 20.51.27.png

Edited by atmos
Link to comment
On 6/12/2024 at 9:13 PM, Lesum said:

@atmos Hi! Add this under Custom CSS to add a background image to fill the header across all product pages. Code will also transform all the navigation items to white:

body[class*="type-products"].view-item header#header {
    background-image: url("replace-with-your-image-url");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    height: 50vh;
}

body[class*="type-products"].view-item header#header {
.header-nav-item * {
    color: white;
}  
:not(.header--menu-open) .header-actions .icon--fill svg {
    fill: white !important;
}
span.sqs-cart-quantity {
    color: white;
}
a.btn {
    background: white;
    color: black;
}
.burger-inner>div {
    background-color: white !important;
}  
}

@media only screen (max-width: 1024px) {
    body[class*="type-products"].view-item header#header .header--menu-open .header-menu {
        padding-top: 170px !important;
    }
}

 

Hi @Lesum, I was wondering if you know how to solve the header issue? Thanks, Atmos

Edited by atmos
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.