Re: Dawn Product Card Text Alignment

Solved

Why is my Dawn product card text not centering correctly?

pearlerwork
Shopify Partner
76 1 10

I've set my product cards to have centered text alignment, however, they're appearing left aligned. When I search through the CSS, the styling appears correct (to align it to whatever I've assigned in settings). Any ideas are appreciated!

 

Store: https://manifest-a-pearler.myshopify.com/

Password: pearler
Preview link

Video here

Accepted Solution (1)
pearlerwork
Shopify Partner
76 1 10

This is an accepted solution.

@GemPages  Thanks for identifying this! To fix it, I added the below code to 'card-product.liquid'

 

.card__information {
  text-align: var(--product-card-text-alignment) !important;
}

View solution in original post

Replies 4 (4)

GemPages
Shopify Partner
5625 1261 1243

Hello @pearlerwork ,

 

It's GemPages support team and glad to support you today.

 

I would like to give you the recommendation to support you so kindly follow the steps below:

 

1. Go to Online Store > Theme > Edit code of your current theme
2. Open your theme.liquid theme file
3. Paste the below code before </head>

<style>
.card--standard>.card__content .card__information {
  text-align: center;
}
</style>

 

If you require any further information, feel free to contact me.

 

Best regards,
GemPages Support Team

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center
pearlerwork
Shopify Partner
76 1 10

Thanks for you help. I should have said earlier - I really don't want to fix this with code, as I really want it to do what it should be doing and pull the styling from the settings. Perhaps the question I should be asking is, what code is stopping it from rendering it to the setting I've input? @GemPages 

GemPages
Shopify Partner
5625 1261 1243

Hi @pearlerwork ,

 

You could please open the base.css file and find this code

--text-alignment: var(--product-card-text-alignment);

 

If it has gone, you could please re-add it then re-check your settings

GemPages_0-1673851346477.png

 

 Best regards,
GemPages Support Team

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center
pearlerwork
Shopify Partner
76 1 10

This is an accepted solution.

@GemPages  Thanks for identifying this! To fix it, I added the below code to 'card-product.liquid'

 

.card__information {
  text-align: var(--product-card-text-alignment) !important;
}