@mimiT - add this css to the very end of your base.css file and check
#price-template--21576398569783__d5adcc65-8bdd-4c9b-9fbb-4a15a6ee13c7 span.price-item.price-item--regular:before {
content: "Up to";
}
Topic summary
Store owners face customer disappointment when product pages display the lowest variant price without context. When shoppers click through and see higher prices for desired variants, they often abandon the purchase.
Primary Solution:
A community member (suyash1) provides custom CSS code snippets to add “starts at” or “from” text before prices. The solution involves:
- Adding CSS to theme files (theme.scss, theme.css.liquid, or base.css)
- Targeting specific page templates (.template-index, .template-collection)
- Using CSS :before pseudo-elements to inject the prefix text
Key Implementation Details:
- Code varies by Shopify theme and page type (homepage, collection pages, product pages)
- Different CSS selectors needed for different themes and layouts
- Applying to specific collections requires unique CSS classes or template modifications
- Applying to individual products only is more complex, requiring template code editing
Common Challenges:
- Finding correct CSS class names for specific themes
- Making text appear on homepage sliders or specific sections
- Limiting the prefix to certain collections rather than all products
- Code sometimes needs adjustment after theme updates or redesigns
The thread demonstrates successful implementations across multiple websites, with suyash1 providing customized CSS solutions for each unique theme structure.
1 Like