Add text after price on product pages and collections in Debut them

DonRichard
Visitor
1 0 0

Hey Shopify Community,

 

I want to add text after the price on product pages and collection in the Debut theme. For example, if the price if $25.00, I want it to say $25.00 Monthly (adding "Monthly") after the price. How would I go about doing that? Thanks in advance.

Replies 21 (21)

ashiqueh4
Shopify Partner
361 34 57

to show on product page go to section folder and product-template.liquid search {{ product.price }} and your text here.

to show on collection page go to section folder and collection.liquid search {{ product.price }} and your text here.

Shopify ,Shopify plus and Shopify 2.0 theme developer and customization

I Would like to add new functionality or customize an existing one, please hire me.
If helpful then please Like and Accept Solution .
Email: ashiquehussaincodediary@gmail.com

sam_montyspace
Tourist
5 0 0

Hi, 

 

Are you able to elaborate further on precisely where the text needs to be added in product price? Do we need add anything in addition to "monthly". Thanks! 

Jasoliya
Shopify Expert
4808 621 1217

Follow this for product page:

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 custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
McGreals
Excursionist
22 0 5

Hi @Jasoliya , I'm trying to add "+ GST" as a text next to the product price. I tried following the steps you have provided but to no avail. My product-price.liquid looks like this:

<!-- snippet/product-price.liquid -->
{% if product.title %}
  {%- assign compare_at_price = product.compare_at_price -%}
  {%- assign price = product.price -%}
  {%- assign price_varies = product.price_varies -%}
  {%- assign available = product.available -%}
{% else %}
  {%- assign compare_at_price = 1999 -%}
  {%- assign price = 1999 -%}
  {%- assign price_varies = false -%}
  {%- assign available = true -%}
{% endif %}

{%- assign money_price = price | money -%}

{% unless product.price == 0 %} 
{% if compare_at_price > price %}
  {% if price_varies %}
    <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
    <s class="product-price__price">{{ compare_at_price | money }}</s>
    <span class="product-price__price product-price__sale">
      {{ money_price }}
      <span class="product-price__sale-label">{{ 'products.product.on_sale' | t }}</span>
    </span>
  {% else %}
    <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
    <s class="product-price__price">{{ compare_at_price | money }}</s>
    <span class="product-price__price product-price__sale">
      {{ money_price }}
      <span class="product-price__sale-label">{{ 'products.product.on_sale' | t }}</span>
    </span>
  {% endif %}
{% else %}

  {% if price_varies %}
    <span class="product-price__price">{{ money_price }}</span>
  {% else %}
    <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
    <span class="product-price__price">{{ money_price }}</span>
  {% endif %}
{% endif %}
{% endunless %}

{% unless available %}
  <span class="product-price__sold-out">{{ 'products.product.sold_out' | t }}</span>
{% endunless %}

Please let me know if this is possible. Would like it to look something like this;

Capture.JPG

Jasoliya
Shopify Expert
4808 621 1217

Send me your store url. so i can check it

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
McGreals
Excursionist
22 0 5

Sure, it's https://www.mcgreals.co.nz/

Myshopify url: mcgreals.myshopify.com 

Thanks

suyash1
Shopify Partner
9077 1129 1479

@McGreals wrote:

Sure, it's https://www.mcgreals.co.nz/

Myshopify url: mcgreals.myshopify.com 

Thanks


@McGreals - I checked your given code with the browser code and both look bit different, looks like price on product page is been fetched from some other file, if you can add me staff, I will check it and let you know exact file to change, you have my details below.

To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
paranormal story video using AI
McGreals
Excursionist
22 0 5

Hi @suyash1 , I'm unable to grant you staff access as we are at capacity sorry. Could you request collaborator access?

Thanks

suyash1
Shopify Partner
9077 1129 1479
I have requested, please check
To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
paranormal story video using AI
suyash1
Shopify Partner
9077 1129 1479

@McGreals - I got to the file, checking why the made change is not live yet, I will update you

To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
paranormal story video using AI
suyash1
Shopify Partner
9077 1129 1479

@McGreals - you can check now , all products should have it - https://www.mcgreals.co.nz/collections/desks/products/agile-fixed-desk

To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
paranormal story video using AI
McGreals
Excursionist
22 0 5

Thank you so much @suyash1 !!!

 

Koka1
Visitor
1 0 0

I'm trying to do it but it looks really ugly without a space before the word. I have been trying with the code with no luck. How can I add a simple space after the text or add the text below the price? 

 

Thanks

suyash1
Shopify Partner
9077 1129 1479

@Koka1 - please share your website URL and if possible then please add me to staff, I will check it.

 

You can contact me on below details.

To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
paranormal story video using AI
federicamontani
Visitor
3 0 0

Hello!

Would this work with Brooklyn theme too? 

My Product.price.liquid looks like this:

<div class="price-container{% if variant.unit_price_measurement %} price-container--unit-available{% endif %}" data-price-container>
{%- if variant.compare_at_price > variant.price -%}
<span id="PriceA11y" class="visually-hidden">{{ 'products.general.regular_price' | t }}</span>
<span class="product-single__price--wrapper" aria-hidden="false">
<span id="ComparePrice" class="product-single__price--compare-at">
{{ variant.compare_at_price | money }}
</span>
</span>
<span id="ComparePriceA11y" class="visually-hidden" aria-hidden="false">{{ 'products.general.sale_price' | t }}</span>
{%- else -%}
<span id="PriceA11y" class="visually-hidden">{{ 'products.general.regular_price' | t }}</span>
<span class="product-single__price--wrapper hide" aria-hidden="true">
<span id="ComparePrice" class="product-single__price--compare-at"></span>
</span>
<span id="ComparePriceA11y" class="visually-hidden" aria-hidden="true">{{ 'products.general.sale_price' | t }}</span>
{%- endif -%}

<span id="ProductPrice"
class="product-single__price{% if variant.compare_at_price > variant.price %} on-sale{% endif %}"
itemprop="price"
content="{{ variant.price | divided_by: 100.00 }}">
{{ variant.price | money }}
</span>

<div class="product-single__unit">
{%- capture unit_price_separator -%}
<span aria-hidden="true">/</span><span class="visually-hidden">&nbsp;{{ 'general.accessibility.unit_price_separator' | t }}&nbsp;</span>
{%- endcapture -%}

{%- capture unit_price_base_unit -%}
<span data-unit-price-base-unit>
{%- if variant.unit_price_measurement -%}
{%- if variant.unit_price_measurement.reference_value != 1 -%}
{{- variant.unit_price_measurement.reference_value -}}
{%- endif -%}
{{ variant.unit_price_measurement.reference_unit }}
{%- endif -%}
</span>
{%- endcapture -%}
<span class="product-unit-price">
<span class="visually-hidden">{{ 'products.general.unit_price' | t }}</span>
<span data-unit-price>{{ variant.unit_price | money }}</span>{{- unit_price_separator -}}{{- unit_price_base_unit -}}
</span>
</div>
</div>

 

Many thanks for your help!

skmeico
Tourist
18 0 2

I want to show some certain text for some products only, is that Possible?

suyash1
Shopify Partner
9077 1129 1479
for that we will need custom coding and add products to some collection or
have unique tag for it, then we can add text
To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
paranormal story video using AI
skmeico
Tourist
18 0 2

Okay, please check e-mail and reply

bebbington
Visitor
3 0 0

is this something you can do ?

suyash1
Shopify Partner
9077 1129 1479

@bebbington - can you please let me know your requirements?

To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
paranormal story video using AI

Azur
Visitor
1 0 0

Hi @DonRichard, what worked for me is to go to: Settings/Store details/Store currency/Change formatting and add '/ Month' in the HTML with the currency section. This works for Product collections and for product pages. You can check it out on my website www.recyclies.com