Debut theme - add text after price in collection page and on product page

Solved
Highlighted
Tourist
5 0 0

Hi all, 

 

I am looking for guidance on adding text after the price in Debut theme. Our pricing is all "monthly" so we need to add "monthly" after the price on the product page after the price so it reads "£13.00 monthly". 

 

Really appreciate any help or advice! 

 

Many thanks, 

Sam

Shopify Community example - add text to product page.JPGShopify Community example - add text.JPG

 

Kind regards,

Sam

0 Likes
Highlighted
Shopify Expert
3657 549 883

This is an accepted solution.

Hi @sam_montyspace 

Follow this for:

1. Open snippet->product-price.liquid find below code:

<div class="price__sale">
<dt>
<span class="visually-hidden visually-hidden--inline">{{ 'products.product.sale_price' | t }}</span>
</dt>
<dd>
<span class="price-item price-item--sale" data-sale-price>
{{ money_price }}
</span>
<span class="price-item__label" aria-hidden="true">{{ 'products.product.on_sale' | t }}</span>
</dd>
</div>

Now add below code just next to this :

<span class="m_price">Monthly</span>

So it look like:

<div class="price__sale">
<dt>
<span class="visually-hidden visually-hidden--inline">{{ 'products.product.sale_price' | t }}</span>
</dt>
<dd>
<span class="price-item price-item--sale" data-sale-price>
{{ money_price }}
</span>
<span class="price-item__label" aria-hidden="true">{{ 'products.product.on_sale' | t }}</span>
</dd>
</div>
<span class="m_price">Monthly</span>

 

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
1 Like
Highlighted
Shopify Partner
585 92 133

This is an accepted solution.

Hello @sam_montyspace,

 

Goto theme > click action > click Edit Code > click Snippets Folder > Click product-price liquid > search {{money_price}} 

 

Add after this Monthly

 

2 Likes
Highlighted
Tourist
5 0 0

Thanks @Jasoliya ! Much appreciated. 

0 Likes
Highlighted
Tourist
5 0 0

Thanks @Wahab_Ahmad much appreciated

0 Likes
Highlighted
Tourist
4 0 1

Hi @Jasoliya,

 

Thanks for your kind help with replying to this questions. I'm trying to do something similar as @sam_montyspace;:

I want to show the retail value (crossed out) and price per month (preferably '/mo') for items.

My hack is to use the normal price box, and then say it's on sale in Shopify with the monthly price and remove the sale label on the product page.

 

I'm also using debut (since January 2020 - similar to Sam) and have followed the instructions. 

I ran into the following mismatch of code in the snippets-> product-price.liquid page (see below):

Price_per_mo_question_community.PNG

 

I've tried to add : <span class="m_price">mo</span>, after the {{money_price}} since the rest of the code wasn't there - unfortunately no success.

 

I've also tried to add the 'missing code', which didn't work. Do you have an idea how I can solve this? 

Many thanks in advance!

 

Best,

Nanda

 

PS Thanks @sam_montyspace for asking this question.

0 Likes
Highlighted
Shopify Expert
3657 549 883

I can see price__sale div in your code you just need to add your text next to this div ending.

 

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
1 Like
Highlighted
Tourist
4 0 1

Hi @Jasoliya , thank you so much! I was able to make it work :) Thanks again!

0 Likes
Highlighted
Tourist
5 0 0

Hi @Jasoliya thanks for your help with this. Is there an easy way to make "monthly" appear on the collection page aswell as the product page view? The code you suggested before works very well for adding "monthly" after the price on the product page, but I want to make sure customers are aware that the price is "monthly" as they scroll through collection pages. Many thanks, Sam

0 Likes
Highlighted
Shopify Expert
3657 549 883

For collection page follow this:

1. Open Snippet->product-card-grid.liquid then find '{% include 'product-price', variant: product %}' and add below code next to this line:

<span class="col_txt">Monthly</span>
Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
1 Like