Add the word "from" to product page (without using variants)

Site URL: https://www.annyanderyn.com/baby-mobiles

Novice coder looking for help - we are selling some bespoke/custom products which vary in price depending on what the customer wants. Can I add the work "from" to the price on our product pages? Only way I've found so far is to use variants but don't want the dropdown selector either...

https://www.annyanderyn.com/baby-mobiles (scroll down - last product listed)

https://www.annyanderyn.com/baby-mobiles/p/earth-sky-planter-tcf57 (on this link I've coded to remove the price but would love it to say "from £85)

PW: distinct62

TIA

1 hour ago, annyanderyn said:

We are selling some bespoke/custom products which vary in price depending on what the customer wants. Can I add the work "from" to the price on our product pages?

It is usually easier to manage this with a combination of Variants and Custom Product Forms. This is for two reasons:

1. The User Experience may be confusing if users must select a product (eg Ocean Mobile) and later select the same product name again from a list on the Deposit page.
2. The administrative burden will be greater if every order requires a manual follow-up to establish the customisations, confirm the price and then match follow-up payments to the original orders.

That said, if you prefer to do it this way, you can add a 'from' prefix to your prices using some CSS. 

To add this prefix to the Mobiles page, you'd add the following to Design > Custom CSS and then save the changes:

#collection-60189d93c18e871112f04c13, 
.collection-60189d93c18e871112f04c13 {
  .product-price:before {
    content: 'from ';    
  }
}

This is because the Mobiles Collection has the unique ID 'collection-60189d93c18e871112f04c13'. It is repeated twice, once with a "#" and one with "." as one will affect the Product List Page and the other affects  the Product Detail Pages. You can add other store collections by adding their respective Collection IDs. This will ensure that your Deposits collection is not included. Here's a guide I wrote to explain how to identify other collection IDs:

https://sf.digital/squarespace-solutions/how-to-apply-css-to-specific-pages-in-squarespace

I hope this helps.

  If this helps you, please click "Like" below  ⬇️

@paul2009Thank you for your input! Could you manipulate the code just for ONE product ID (which I can't find!)- the customs? https://www.annyanderyn.com/baby-mobiles/p/earth-sky-planter-tcf57

Essentially, everything else has it set prices & is customised within that price point. We ideally wanted to have each product with it's own custom form but as everything is handmade by me, I can only take a certain number of orders per month. As Squarespace doesn't allow me to limit my orders (something I only found out after I'd signed up!), the only way I could think to manage the inventory was to create the deposit listing which I can add "stock" to without getting overwhelmed. It's quite frustrating.

I appreciate you helping me :) 

Sorry, I hadn't understood that only some of the products are custom.

When you have a small number of custom products, I recommend adding a Tag to these products, for example 'custom' to indicate they are custom. You can then modify the CSS to only apply to products with that tag using the selector .tag-custom.

Another benefit is that you could automatically add a custom status badge to those products to highlight them.

This is so helpful. I really appreciate you taking the time to answer my question! :)