How can I add padding to Metafields and change the font?

Store Design
1

I want to add padding between my 3 metafields (displayed on product thumbnails) so they are not all squashed together. This is the code I have for the metafields:

I also want to change the font for the last one?

{{ product.metafields.descriptors.subtitle }}
{{ product.metafields.custom.roast_level_info.alt | escape }} {{ product.metafields.custom.tastes_like_description }}
2

@GemMuir ,

Please share the store URL and screenshot too.

3

Hi,

Please share your store URL and if your store is password protected then also provide password too.

Thank you.

4

@LitExtension

5
6

@GemMuir ,

Can you share the screenshot

7

Screenshot 2022-07-12 at 07.13.42.png
Screenshot 2022-07-12 at 07.13.42.png1501×674 223 KB

@oscprofessional

So I want to change the font for “tastes like chocolate…” and add some padding underneath so there is space above the price. Then I want to display my stickers (new / coming soon etc) and the quick add to cart buttons (these were displaying fine until I added the code to display metafields)

8

@GemMuir ,

.product-thumbnail__description {
padding: 13px 0;
}

Add this css at the bottom of Online Store->Theme->Edit code->Assets->style.scss.liquid

1 Like
9

Please add below css code in bottom of asstes/styles.css file

.product-thumbnail span.product-thumbnail__price.price {
padding-top: 15px;

}
Thank you.

1 Like
10

@GemMuir ,

how you want the font for tastes like chocolate?

11

owners narrow bold (same as my headings

12

@GemMuir ,

.product-thumbnail__description {
    font-family: owners-narrow,sans-serif!important;
    letter-spacing: 1px;
}

Add this css at the bottom of Online Store->Theme->Edit code->Assets->style.scss.liquid

1 Like
13

Thank you that’s worked :slightly_smiling_face: Do you know how to display my stickers and quick add to cart buttons that have disappeared?

Thanks

14

@GemMuir ,

You have included?

15

@oscprofessional I have just re-made my photos to display what the stickers said but I still need to add the quick add to cart buttons. :slightly_smiling_face:

16

@GemMuir ,

Do you have any issue still ?