How can I customize CSS for a specific product page?

Store Design
1

Hello,

I have added an appointment booking app to my website which integrates with the product page. However there is some information that does not to be displayed, however this items (highlighted in red) must be displayed on all other product pages. How can I customize just this page?

Screen Shot 2022-07-29 at 1.11.56 PM.png
Screen Shot 2022-07-29 at 1.11.56 PM.png1684×788 96.5 KB

Additionally because I don’t have a way to modify the specific page I have had to use an image of text for the description, If I could eliminate the empty space when there is no product image and center the right column I could input text for the description as normal.

link:

https://hideawayhilo.com/products/private-shopping-appointment

2 Likes
2

@jskoiz

you mean remove this part only this product right?

3

@jskoiz - this will need a code tweak where we need to put unique id for this product and then using that we can hide edit the items on this page. It can be done.

4

Correct

5

@jskoiz - if you can allow me as collab then I can send request and add unique id to it

6

Through googling thats what I’v seen, I thought I needed to edit the tag in theme.liquid to make each page unique but my current template has this for the body tag right now:

Im not sure how to make that work for my scenario or what to call from that specific product page

7

Okay I can do that.

8

@jskoiz - yes , you can edit the code and replace above line with this code, it wil add id
9 
<body id="private-shopping-appointment" class="prestige--v4 template-product booking-widget-appended spo-loaded">

I see, now the page returns the above. how do i reference and remove those items though? some kind of display:none;?

10

@jskoiz - yes, do you know hierarchy css? you can make use of that

11

Is it like this?

.body#private-shopping-appointment{

  
}

but i dont understand how to change the specific sections like this:

Screen Shot 2022-07-29 at 5.45.14 PM.png
Screen Shot 2022-07-29 at 5.45.14 PM.png952×658 28.3 KB

12

@jskoiz - add this css and check

#private-shopping-appointment .ProductMeta__PriceList{display:none;}
#private-shopping-appointment .afterpay-paragraph{display:none;}
#private-shopping-appointment .ProductForm__Variants{display:none;}
13

Screen Shot 2022-07-29 at 5.56.20 PM.png
Screen Shot 2022-07-29 at 5.56.20 PM.png3426×2078 882 KB

That worked! one last question, how can I remove the blue section so that the yellow portion is centered?

14

@jskoiz - try this

#private-shopping-appointment .Product__Gallery{display:none;}

@media screen (min-width:1140px){
#private-shopping-appointment .Product__InfoWrapper {
    left: 50%;    transform: translate(-50%, 0%);}

#private-shopping-appointment .Product__Info {margin: 0 auto;}
}