Is there a workaround to add a space before 3 digits in the collection list on my "catalogue" page in Webflow since HTML Embed cannot be placed in a link?

To add a space before three digits in a collection list on your "catalogue" page in Webflow, you can use custom code. Although HTML Embed cannot be placed directly in a link element in Webflow, you can achieve the desired effect by following these steps:

1. Create a custom field in your collection for the three-digit number. Let's call it "Number".

2. Populate the "Number" field with the three-digit number for each item in your collection.

3. In your Webflow Editor, go to the "Catalogue" page.

4. Add a Collection List wrapper to display the items from your collection.

5. Inside the Collection List wrapper, add a Collection Item to hold each individual item.

6. Place a Link element inside the Collection Item.

7. Inside the Link element, add another div wrapper.

8. Add custom code to the div's embed component to format the number with a space before the third digit. You can use JavaScript to achieve this. Here's an example:

   <div class="custom-number">
   <script>
   const number = `${item.number}`; // Get the three-digit number from the collection    const formattedNumber = number.replace(/(\d)(\d{2})$/, "$1 $2"); // Insert a space before the third digit    document.write(formattedNumber); // Output the formatted number
   </script>
   </div>

   Make sure to replace item.number with the actual field name where your three-digit number is stored.

9. Style the .custom-number class using Webflow's Designer or custom CSS to adjust the spacing, font, and appearance as desired.

By adding this custom code within a div wrapper, you can achieve the desired effect of adding a space before three digits in the collection list on your "catalogue" page in Webflow.

Additional questions users may ask:

1. How can I add formatting to numbers in a collection list in Webflow?
2. Can I use custom code to manipulate collection list values in Webflow?
3. Is it possible to customize the appearance of specific collection list items in Webflow?