Show 'From' before highest price on collection page for debut theme

Store Design
1

Hello!

I’m using the Debut theme on my store www.Bikinginparadise.com

I’d like to add ‘From’ before highest price on collection page for debut theme.

Thank you in advance!

2

Hi @socialexpmnt ,

I am not sure if I understand your question. You just want to add a word “From” to the price of the product but it has to be the highest price compare to all products in the collection?

If so, this can be achieve with liquid code.

If you want to add “From” to all product price, then follow the instructions below.

  1. From your Admin Page, click Online Store > Themes >Actions > Edit code
  2. In the Asset folder, open the theme.css
  3. Paste the code below at the very bottom of the file.
.price .price__regular::before {
    content: "From";
    margin-right: 10px;
}
.price .price__regular {
    display: flex;
}

Outcome:

made4Uo_0-1658539923650.png
made4Uo_0-1658539923650.png1245×461 506 KB

3

Hi there,

Thanks for the reply. The change is so that on our E-bike Rentals page you see the highest rate first, $50 a day so that on the collection page it says from $50 and not $25 which is the rate for a longer rental. Thank you!

4

Hi @socialexpmnt ,

Are you talking about this page?

made4Uo_0-1658541642473.png
made4Uo_0-1658541642473.png986×449 170 KB

5

@socialexpmnt

This is already implemented by default on the Debut theme; to actually show the word “from”, you’ll need to have different prices set up for your variant.

Your products’ variants have all the same price, therefore the “from” word is hidden.

Here is an example of the Debut theme showing up the “from” price.

As long as your product has variants with multiple prices, like this one, it will show up automatically.

I hope it helps.

Kind regards,
Diego

6

The problem I’m having is that it shows the lowest price first. I would like it to start with the highest.

7

Yes, I would like it to say from $50 on the product and collection page.

8

Is it possible to change the code so it shows the highest price first after From?

9

Hey @socialexpmnt ,

I understand. Technically it’s possible, but unfortunately it’d be a bit more complex to guide through. The best bet is contacting a developer or hopefully someone around can write a thorough guide.

Kind regards,
Diego