Afternoon,
I’m hoping there’s a way to add the text “Per Month” at the end of price of a product, which will also display throughout collections etc too.
Website: www.railtimes.live
Any help would be much appreciated.
Thanks again,
Topic summary
A user seeks to append “Per Month” text after product prices across their Shopify store, including collection pages.
Three CSS-based solutions were provided:
-
Solution 1: Uses
::afterpseudo-element with absolute positioning on.product-price-container .amountand.product_after_title .amountclasses to add " /month" text -
Solution 2: Simpler approach targeting
span.amount:afterwith content ‘/month’, added to theapp.cssfile -
Solution 3: More specific selector
.product-price-container .price ins .amount::afterwith additional styling (90% font-size, custom color #444, 4px margin) added tobase.css
All solutions involve editing theme code files and adding CSS snippets. Visual examples were provided showing the text successfully appearing after prices. The discussion remains open with no confirmation from the original poster about which solution worked best.
1 Like
Let try to add this Custom CSS code:
.product-price-container .amount,
.product_after_title .amount {
position: relative;
}
.product-price-container .amount::after,
.product_after_title .amount::after {
content: "/month";
position: absolute;
left: 100%;
}
The result:
You can try to follow this step
Step 1: Go to Edit code
Step 2: Find file app.css and add this code at the end of the file
span.amount:after {
content: '/month';
}
Result
Best,
DaisyVo
Hello @railtimeslive
- From your Shopify Admin, navigate to Online Store > Themes > Edit Code
- In the Assets folder, open base.css and add your CSS code at the end
.product-price-container .price ins .amount::after {
content: " Per Month";
font-size: 90%;
color: #444;
margin-left: 4px;
}
