Adjusting featured collection layout + customizing [Impulse Theme]

Store Design
, , , , , ,
1

MSecom_0-1745009835794.png
MSecom_0-1745009835794.png400×140 17.8 KB

The picture above is the look i am trying to achieve with my product price sections; so the discount price large on top of the before price, and the savings percentage next to the before price.

MSecom_1-1745009835802.png
MSecom_1-1745009835802.png399×133 11.3 KB

the store which i want my product price section to look like:

https://www.vanhalenmode.nl/?utm_campaign=19654590632&utm_ad_group=152699205744&utm_ad=647458329773&utm_source=google&tw_source=google&tw_adid=647458329773&tw_campaign=19654590632&gad_source=1&gbraid=0AAAAApJG-RnQ6uJRPAiEFaDC5F5M_sGkD&gclid=CjwKCAjw8IfABhBXEiwAxRHlsFmTHfToLKL3lAlkVzWBPh4gHlXKnwO9thSBPlXNV2-GMD6_49eOLxoCdnkQAvD_BwE

my store link is: https://8jj56s-qy.myshopify.com/

password: qwerty

Thanks in advance for taking the time to look at this. kind regards, mike

2

Try adding the following css and this should get you close to the picture you provided.

.product-block.product-block--price {
display: flex !important;
	flex-wrap: wrap !important;
	align-items: center !important;
}

[data-product-price-wrap] {
order: 1;
}
.product__price--compare {
font-size: 16px !important;
color: grey !important;
}
[data-product-price] {
order: 0 !important;
width: 100% !important;
}
.product__price-savings {
order: 2 !important;
color: gray !important;
font-size: 14px !important;
line-height: 1 !important;
}

.product__price-savings font {
line-height: 2 !important;
}
.product__policies {
order: 3 !important;
width: 100% !important;
}
3

Where do you want me to add this? its giving me errors