Product page text formatting

Store Design
, ,
1

Hi, I recently had to change my theme and I’m now using Craft. The issue I have is that the product description formatting has gone awry. Bullet points aren’t aligned, bold text is now larger than the body text, headings and spacing also impacted. I know that I can change in each product page individually but is there a global change I can make to the styles in the product description page. How can I change the styles for Paragraph and Headings so that it will apply across all product pages.

Thank you

2 
{%- if template == "product" -%}

{%- endif -%

you can place this code on theme.liquid and place all css style inside that will apply to all product pages.

3

Thank you for this - it solved part of my problem. The issue is that not all text within the product description has been assigned a style so changes aren’t applied. There is bold text that I need to unbold and also bullet lists that are all over the place with the bullet point not on the same line as the text. Do you think I’ll need to just edit each product page individually? Or is it possible to create a new product template and apply it to existing product pages instead of the default? Hope this makes sense :persevering_face:

4

Hi you can target product description and make css style for it like

.product_description b{font-weight:normal !important;}

that will unbold bold font for all products put it on code given above . You can share store url so I can check what problem is.

5

This is my store Earthzen: Nurturing Sustainable Living – EarthZen (theearthzen.com) password is 12345

The product pages look messy now compared to what they were before I changed the theme. Some of the bullet points don’t line up and the headings are not consistent, and the bold text is overwhelming the body text, line spacing…so much is messy. I want to try making them look better. Thank you for taking a look for me :slightly_smiling_face:

6 
.product__description strong {
    font-weight: normal;
}

.product__description .rte ul, .rte ol {
    list-style-position: unset;
    padding-left: 2rem;
}

place this css inside i posted on start see if it fixes the list style and bold text .

7

Thank you I’ll give it a try.

8

Thank you for your help. I think I have it sorted. I want to use the collapsible rows on product pages for specs, dimension, care. I can see where to add the collapsible rows in the product template but how do i set up the variables for each product. Is this something you can advise me on?

9

You can set the variables on metafields . On product page collapsible will have option to set dynamic source you can set it .

https://shopify.dev/docs/themes/architecture/settings/dynamic-sources this link will help.

10

Thank you for your help. :grin:

1 Like
11

you are welcome :grin: