Shopify themes, liquid, logos, and UX
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.
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
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!
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>
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;
Send me your store url. so i can check it
@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.
Hi @suyash1 , I'm unable to grant you staff access as we are at capacity sorry. Could you request collaborator access?
Thanks
@McGreals - I got to the file, checking why the made change is not live yet, I will update you
@McGreals - you can check now , all products should have it - https://www.mcgreals.co.nz/collections/desks/products/agile-fixed-desk
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
@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.
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"> {{ 'general.accessibility.unit_price_separator' | t }} </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!
I want to show some certain text for some products only, is that Possible?
Okay, please check e-mail and reply
is this something you can do ?
@bebbington - can you please let me know your requirements?
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
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024