How to arrange product page in a specific order?

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

@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;
}

@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;
}

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!

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

@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.

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.

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

@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;
    }
}

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!

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