How can I fix the issue with my E-Commerce template that won't allow line breaks in my product copy in one paragraph on Webflow?

Published on
September 22, 2023

To fix the issue with your E-Commerce template that won't allow line breaks in your product copy in one paragraph on Webflow, you can follow these steps:

  1. Check the text element settings: First, make sure the text element that holds the product copy is set to use "Plain Text" rather than "Rich Text." This will ensure that any line breaks or formatting you add will be preserved.

  2. Add line breaks manually: If the "Plain Text" setting is already enabled, but line breaks are still not working, try manually adding line breaks using the <br> HTML tag. To do this, open the Product CMS template in the Designer, locate the text element with the product copy, and add <br> at the desired points where you want line breaks.

  3. Adjust text element settings: If adding line breaks manually doesn't work, you can adjust the text element settings to allow line breaks. Select the text element, go to the element settings panel, and make sure the "Line Wrap" option is set to "Normal." This will prevent the text from overflowing and allow line breaks.

  4. Use custom code: If the above steps didn't resolve the issue, you can try using custom code to force line breaks. Wrap your product copy in a <div> element, give it a class name (e.g., "product-copy"), and apply the following custom CSS code:

.product-copy {  white-space: pre-line;}

This CSS property, white-space: pre-line, will preserve line breaks and display the text as it is written.

  1. Preview and test: After implementing the changes, preview your website and test if the line breaks are working as expected in the product copy. If not, double-check the steps above and ensure that you've applied the changes correctly.

These steps should help you fix the issue with line breaks in your product copy on the Webflow E-Commerce template. Remember to save and publish your changes to see them live on your website.

Additional questions:

  1. How can I fix line break issues in Webflow templates?
  2. Why are line breaks not working in my Webflow E-Commerce template?
  3. What are the different ways to add line breaks in Webflow product copy?