How to add: "starts at" before price. or show custom price, rather than lowest price.

[WoodLeon]

Hey there! I have multiple variants on my products that range in pricing.  On the home page it is showing the lowest of these prices.  When people click on the item and see higher prices for the variant they want, they are disappointed and back away.  How can I add "starts at" before the $ amount, or perhaps even choose an average or custom price to display before customer clicks on product?

[ahadad24]

I have the same issue. Would like to know how to do this

[suyash1]

@ahadad24 - can you please share your website url? I will check it on browser

[WoodLeon]

woodleon.com

[suyash1]

@WoodLeon - if you want something like in screenshot then please add given css to the end of theme.scss file

.template-index .product-card__description dt:before {
    content: "starts at";
    padding-right: 10px;
    font-size: 20px;
    font-family: verdana;
}

[WoodLeon]

Thanks so much! How can I do the same for this page: https://woodleon.com/collections/neckties  or any collection page for that matter.

[suyash1]

@WoodLeon - please add this and check 

.template-collection .product-price__price:before {content: "starts at";   padding-right: 10px;    font-size: 20px;    font-family: verdana;}

[WoodLeon]

I think that worked! Thanks so much!

[aegyocakes]

Hi @suyash1 ! Can you check out my website too? I would like to add the same "starts at" on some of my products only. 

[suyash1]

@aegyocakes - if you want on some products only then we will need to create new template, add code for it and set that template manually for the products you want..

[NEI-Arlene]

I know it's been a while but is this still accurate? Can I just add the css given to the end of my theme.css? I have 3 options theme.liquid , theme.css.liquid , and theme.gem-layout-none.liquid , i don't know if this is normal. 

[suyash1]

@NEI-Arlene - yes, add css to  theme.css.liquid

[NEI-Arlene]

Hmmm, seems I'm doing something wrong. Copied and pasted the given css to the end of theme.css.liquid . This is my website. https://www.uniquehomefurniture.com/  

Would ( .template-collection ) this part be different on my website vs the other one? 

[suyash1]

@NEI-Arlene - please try this

.template-collection .price__current.price__current--emphasize.price__current--on-sale:before {content: "starts at";}

[NEI-Arlene]

YAY! It worked! So grateful! I couldn't find the class name for the website, can't believe you were able to do it so fast. Thank you! 

[suyash1]

@NEI-Arlene - welcome, do let me know if you need anything, you have my email below

[bhaumik57]

https://admin.shopify.com/store/5704c7-2/themes/161370603809/editor?previewPath=%2Fcollections%2Fdec....

 this is my collection page, and i am not able to apply given code to css to show price from "Start at". please help me out.

[suyash1]

@bhaumik57 - please share your theme preview link, the current link you shared will ask for admin login

[bhaumik57]

thanks for your kind consideration,

https://thearomaverse.in/collections/decants

this is theme preview link

[irunfree]

Thanks so much for heling so many. I would like to get the same for my site. 

https://sojourndwelling.com/collections/all

[ahadad24]

Sure it is sm-expert.com. It will be under custom products which you will need to create a fake account for to view it. 

[bhaumik57]

https://thearomaverse.in/collections/all.

This is my page, please help set that "start at price" too🥲

[saachi]

@suyash1 Just wondering if you'd please be able to help me out with same for my website?

url: www.blingfactory.com.au

[suyash1]

@saachi - please add this css to the very end of your theme.scss.css file and check

.template-collection .grid-product__price:before {
    content: "starts at";
    padding-right: 10px;
    font-size: 15.6px;
}

[saachi]

That worked! Thank you!! 😄

[suyash1]

@saachi - welcome, do let me know if you need anything else, you have my email below

[saachi]

@suyash1 It has worked for everything apart from one section. There is a best seller slider on the homepage itself, but the "starts at" doesn't show up there. Is there a way to fix it? 🙂

[suyash1]

@saachi - from the above css remove the word  .template-collection  , so it becomes

.grid-product__price:before {
    content: "starts at";
    padding-right: 10px;
    font-size: 15.6px;
}

[saachi]

@suyash1 didn't work unfortunately 😞

[suyash1]

@saachi - try this

.featured-collection-slider .carousel-cell p:before{
content: "starts at";
    padding-right: 10px;
    font-size: 15.6px;
}

[DrivenMN]

Hello,  could you pease check my website to www.DrivenMN.com Thank you so much!  It is the Motion Theme

[suyash1]

@DrivenMN - where do you want it?

[Kim1306]

Hi Suyash, 

Is it possible to add the "starts at" option for individual products rather than whole collections? How would I go about it? Thanks!

[suyash1]

@Kim1306 - shopify uses shared template approach, hence it uses same classes, therefore bit difficult to have it for individual products

[AG-95]

Hello,  Is it possible to add this to a single collection page only?

[AG-95]

This is our website - https://englishpewter.com/

[suyash1]

@AG-95 - looks like that your pages have unique classes so it can be possible, on which page do you want it?

[AG-95]

Hello,

Thank you for getting back. The page I would like it on is - https://englishpewter.com/collections/brandy-gift-sets

At the moment, I do not have any products live as I am working on them. 

Thank you.

[suyash1]

@AG-95 - can you please add dummy product with variants? so we can set css, and then it will work for all products on this page

[xevo1993]

can you please help me? my shop: https://dcseventeen.com 

i would that on alle products

[suyash1]

@xevo1993 - you want it like this?

[xevo1993]

Yes please

[suyash1]

@xevo1993 - add this css to the very end of your base.css file and check 

.price .price-item:before {content: "Starts at";}

[xevo1993]

I‘ve put that at the end of the base.css but its not working

[suyash1]

@xevo1993 - try this

span.price-item.price-item--sale.price-item--last:before{content: "Starts at";}

[xevo1993]

Not working 😞

 

[suyash1]

@xevo1993 - it is working

[xevo1993]

Is this only on Desktop version? On mobile i dont see it

 

[mimiT]

Hello! You are so kind helping everyone in this thread!! Can you please help with mine? my website is lejardinbridal.com
I only need it for the product page "Custom Wedding Gowns"

[suyash1]

@mimiT - can you please share this page link? I clicked on the option in menu but it took me to contact page