Debut Theme: Custom CSS overrides Shopify 'Compare as' pricing

Store Design
, , ,
1

Hello all, I followed this guide to editing the CSS on Debut Theme. This was the exact issue I had and, for the most part, perfectly resolved what I needed (refer to attachment X.png) and everything was centred under the image.

However, when the ‘Compare as’ price is empty in any Product Page (refer to attachment Z.png), a price value still appears near the image which makes it look like the price appears twice (refer to attachment Y.png).

Any idea why this is? and how do I make it go away on all collection pages and product pages while preserving the functionality of the theme so that I can add ‘Compare as’ pricing within each Product Page when needed?

Information

This is the only Custom CSS I have added (I have not removed any of the pre-existing CSS either):

/== Start of Custom CSS - Center Align Titles and Prices Under Product Images in Collections & Product Recommendations ==/

dl.price {
align-items: center;
}

.h4.grid-view-item__title.product-card__title {
text-align: center;
width: 100%;
font-size: 15px;
display: block;
text-decoration: none;
line-height: 1.6;
}

.template-product dl.price{align-items: flex-start;
}

.product-recommendations__inner dl.price {align-items: center;
}

.price__sale {
margin-right: 0;
display: block !important;
}

.price__compare dd {
margin-right: 1;
display: block !important;
}

.price__regular dd {
margin-right: 1;
}

.product-card {
text-align: center;
}

.price–on-sale .price__badge–sale {justify-content: center;
}

/== Removes Underline Upon Hover ==/
.product-card:hover .product-card__title,
.product-card:focus-within .product-card__title {
border-bottom: none !important;
}

/== Change font on product price on product page ==/
.price-item {
font-size: 16px !important;
font-weight: 400;
color: #333232 !important;
}

.price dd{
margin-right: 0 !important
}

.price__pricing-group .price__sale{
flex-direction: row !important;
display: flex !important;
}

.price__pricing-group .price__sale dd:first-of-type{
margin-right: 10px !important;
}

.template-product .product-single__meta .price__badge–sale{
margin-left: 10px !important;
}

/== End of Custom CSS - Center Align Titles and Prices Under Product Images in Collections & Product Recommendations ==/

Attachments

Image X

X.PNG
X.PNG1278×840 96.3 KB

Image Y

Y.PNG
Y.PNG1159×831 94.4 KB

Image Z

Z.PNG
Z.PNG652×705 103 KB

2

It’s a good lesson to learn, overwriting styles can have unintended consequences. I don’t know why you added so many !important overrides, but those should be used sparingly and ultimately that is your issue (specifically the !important tag on the display styles). For example you added this:

.price__sale {
display: block !important;
}

Which is you telling the browser to show that “.price__sale” block no matter what, 100% of the time… Which is why you are seeing two prices all of the time now.

Originally there would be some logic written in your theme that changes the display of the “.price__sale” block (turns it on or off) when there is a sale price to show, so basically your css addition just overwrite the code that makes these things function the way they are supposed to.

I would advise you to remove all of the display settings you added. Then see where you are at as far as what might need to be changed.

3

I have I have disabled the Custom CSS. The site collection and product pages look very different.

The image below is what the site currently looks like without the CSS overrides.

A.PNG
A.PNG554×380 125 KB

The next image below is what I want it to look like.
i.e.: centred text in the container, font size 15 on collection page product cards, and font size 16 on product pages.

B.PNG
B.PNG506×361 74.2 KB

Any ideas to do at least this much in a more theme friendly way than I had done previously?

4

Sure, here you go, put this in your custom css section:

.template-collection .product-card {
text-align: center;
}

.template-collection .price__regular, .template-collection .price__sale, .template-collection .price__unit, .template-collection .price__badges{
margin: auto;
}

5

Font sizes you can overwrite the way you did, but if you only want it to apply to that page you should include a class specific to that page, for example if this is for the product page, I would do this

/== Change font on product price on product page ==/
.template-product .price-item {
font-size: 16px !important;
font-weight: 400;
color: #333232 !important;
}

6

Thanks @mummetech ! Everything worked great. If I wanted to affect only the font size for the product page title, how would you recommend doing that?

7

Here you go

.template-product h1.product-single__title {
font-size: 24px;

}

8

Perfect again! Thanks @mummetech !