No Spacing In Metafields

Solved

No Spacing In Metafields

davodavis66
Tourist
11 0 3

Hello,

 

In my shopify store using Impact Theme, i added this metafield for benefits & also specifications, i have spaces between my line inputs but on the webpage the spaces are not reflecting. can anyone please help me with this? last image is how i would like it to look. Thanks in advance

davodavis66_1-1737439353114.png

davodavis66_2-1737439372575.png

 

davodavis66_0-1737439329473.png

 

Accepted Solution (1)
websensepro
Shopify Partner
1854 215 260

This is an accepted solution.

@davodavis66 

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.css / based.css file and paste the code in the bottom of the file.

details.product-info__accordion.accordion.group .accordion__content .metafield-rich_text_field p {
    margin-bottom: 11px !important;
}

Result:

websensepro_0-1737454312966.pngwebsensepro_1-1737454315508.png

 

 

If my reply is helpful, kindly click like and mark it as an accepted solution.
Thanks!
Use our Big Bulk Discount app to boost your sales! 🚀 (https://apps.shopify.com/big-bulk-discount). Easy to set up and perfect for attracting more customers with bulk discounts. Try it now and watch your revenue grow!

Need a Shopify developer? Hire us at WebSensePro For Shopify Design Changes/Coding
For Free Tutorials Subscribe to our youtube
Get More Sales Using Big Bulk Discount APP
Create Your Shopify Store For Just 1$/Month
Get More Sales Using Big Bulk Discount APP

View solution in original post

Replies 14 (14)

Moeed
Shopify Partner
6719 1814 2198

Hey @davodavis66 

 

Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.

 

Best Regards,
Moeed

- Need a Shopify Specialist? Chat on WhatsApp

- Get a quick Shopify quote – Click here!

- Custom Design | Advanced Coding | Store Modifications


davodavis66
Tourist
11 0 3

Hi @Moeed 

Thanks for your prompt reply. The link i'm having the specific issue with is https://nuturas.com/products/grow-with-me-luxury-toddler-trike-1
It's a new product template so i was hoping to get it across all new products added.

Thank you

Moeed
Shopify Partner
6719 1814 2198

Hey @davodavis66 

 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find password.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
span.metafield-multi_line_text_field {
    line-height: 2 !important;
}
</style>

RESULT:

Moeed_0-1737441120110.png

 

If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

Best Regards,
Moeed

 

- Need a Shopify Specialist? Chat on WhatsApp

- Get a quick Shopify quote – Click here!

- Custom Design | Advanced Coding | Store Modifications


davodavis66
Tourist
11 0 3

Hi @Moeed 

Thanks but it was not for that section but the section below it in Benefits & Specifications in the drop down menus.

Moeed
Shopify Partner
6719 1814 2198

ah my bad, try this code instead with the same steps mentioned above.

<style>
.metafield-rich_text_field p {
    margin-bottom: 12px !important;
}
</style>

RESULT:

Moeed_0-1737453003527.png

 

If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

Best Regards,
Moeed

- Need a Shopify Specialist? Chat on WhatsApp

- Get a quick Shopify quote – Click here!

- Custom Design | Advanced Coding | Store Modifications


websensepro
Shopify Partner
1854 215 260

Hi @davodavis66  , kindly provide your store URL please and if it is password protected, please share the password as well. Thanks

Need a Shopify developer? Hire us at WebSensePro For Shopify Design Changes/Coding
For Free Tutorials Subscribe to our youtube
Get More Sales Using Big Bulk Discount APP
Create Your Shopify Store For Just 1$/Month
Get More Sales Using Big Bulk Discount APP
davodavis66
Tourist
11 0 3

Hi @websensepro 

Thanks for your reply. The link i am having the issue with is https://nuturas.com/products/grow-with-me-luxury-toddler-trike-1

Thanks so much

websensepro
Shopify Partner
1854 215 260

Hi @davodavis66 
1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.css / based.css file and paste the code in the bottom of the file.

details.product-info__accordion.accordion.group .accordion__content .metafield-rich_text_field p {
    line-height: 2 !important;
}

  

Need a Shopify developer? Hire us at WebSensePro For Shopify Design Changes/Coding
For Free Tutorials Subscribe to our youtube
Get More Sales Using Big Bulk Discount APP
Create Your Shopify Store For Just 1$/Month
Get More Sales Using Big Bulk Discount APP
davodavis66
Tourist
11 0 3

Hi @websensepro 

This code made it look like this on mobile

davodavis66_0-1737443516676.png

I need it to look like this 

davodavis66_1-1737443577489.png

 

GTLOfficial
Shopify Partner
769 160 169

Hello @davodavis66 
Go to online store ----> themes ----> actions ----> edit code ---->theme.css
add this code at the end of the file and save.

.product-info__text {
line-height: 2 !important;
}

result
170.png

If this was helpful, hit the like button and accept the solution.
Thanks

- Buy me a Pizza
- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on the store Hire me. GTL web solutions
- Want Complete Storefront: Send an email ⇨- Email: info@gtlofficial.com - Skype: ritesh_27dh
davodavis66
Tourist
11 0 3

Hi thats for the wrong section but thanks

websensepro
Shopify Partner
1854 215 260

This is an accepted solution.

@davodavis66 

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.css / based.css file and paste the code in the bottom of the file.

details.product-info__accordion.accordion.group .accordion__content .metafield-rich_text_field p {
    margin-bottom: 11px !important;
}

Result:

websensepro_0-1737454312966.pngwebsensepro_1-1737454315508.png

 

 

If my reply is helpful, kindly click like and mark it as an accepted solution.
Thanks!
Use our Big Bulk Discount app to boost your sales! 🚀 (https://apps.shopify.com/big-bulk-discount). Easy to set up and perfect for attracting more customers with bulk discounts. Try it now and watch your revenue grow!

Need a Shopify developer? Hire us at WebSensePro For Shopify Design Changes/Coding
For Free Tutorials Subscribe to our youtube
Get More Sales Using Big Bulk Discount APP
Create Your Shopify Store For Just 1$/Month
Get More Sales Using Big Bulk Discount APP
davodavis66
Tourist
11 0 3

That did the trick thanks so much 

websensepro
Shopify Partner
1854 215 260

I am glad to have helped you. If you need a Shopify developer, Hire us at WebSensePro For Shopify Design Changes/Coding
Thanks!

Need a Shopify developer? Hire us at WebSensePro For Shopify Design Changes/Coding
For Free Tutorials Subscribe to our youtube
Get More Sales Using Big Bulk Discount APP
Create Your Shopify Store For Just 1$/Month
Get More Sales Using Big Bulk Discount APP