Debut Theme - Resize Product Titles and centre price and sale price (home and collection pages only)

Solved
Highlighted
Excursionist
33 0 9

Hi all,

I am trying to decrease the size of the product title, price and reviews on both my home page and collection pages.

I was able to centre the product title, but now I am struggling to centre the price and any reviews part also.

Attached picture to show

Screen Shot 2020-04-30 at 4.16.54 pm.png

Any help on what file and the code would be greatly appreciated.

 

Using debut theme - https://positanoblue.com

 

Many thanks

Highlighted
Shopify Partner
9580 1201 3358

Hello, @positanoblue 

Thanks for post.

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste bellow code at the bottom of the file.

.price {
align-items: center;
}
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Highlighted
Excursionist
33 0 9

Thank you @KetanKumar

 

That did partially work. It worked for the home and collection pages. However it also edited the product page and now the price on that is not left alligned and looks out of place. How can I fix this? Also any idea on the font size for both home and collection pages only.

 

Screen Shot 2020-04-30 at 4.32.59 pm.png

0 Likes
Highlighted
Shopify Partner
9580 1201 3358

This is an accepted solution.

@positanoblue 

Thanks 

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste bellow code in the bottom of the file.

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

.product-card .price--listing {
    font-size: 15px;
}
.product-card__title {
font-size: 18px;
}

change the font size value as you like

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Highlighted
Excursionist
33 0 9

Thankyou - that has resolved the font size issue.

 

im still struggling with centering the price and review on home and collection pages only.

 

 

0 Likes
Highlighted
Shopify Partner
9580 1201 3358

This is an accepted solution.

@positanoblue 
why remove older CSS?

 

can you please add this 

.product-card .price--listing  {
align-items: center;
}
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Highlighted
Excursionist
33 0 9

Ok sorry i didnt realise you wanted me to keep the original CSS. After adding that back in, everything is now working perfectly

 

You are a star!

 

many thanks

0 Likes
Highlighted
Shopify Partner
9580 1201 3358

@positanoblue 

Thanks for it 

If helpful then please Like and Accept Solution.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Highlighted
Tourist
6 0 4

Hello, 

I am trying to centre the sale price on my grid. Titles and regular price is centred but not the sale price for some reason. Screenshot below. Also, how can I centre 'sale' in the black bar under the sale price? 

Thanks for your help!

 

 Untitled.png

Highlighted
Shopify Partner
9580 1201 3358

Hello, @noora_meh 

Welcome to the Shopify community!
and Thanks for your Good question.

Please share your site URL,
So I will check and provide a solution here.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing