How to customize Product Price property of Rise to display the range of price ?

Solved

How to customize Product Price property of Rise to display the range of price ?

yoshid8s
Tourist
8 0 3

I am new to Shopify. I am using Rise, but the prices of the clothes I sell in my shop vary depending on the material, so I would like to be able to display the price range on the product page, such as 128,000 yen to 178,000 yen. This is my first time using Liquid, so could you please teach me how and where to customize it?

Accepted Solutions (2)

sahilsharma9515
Shopify Partner
1206 156 233

This is an accepted solution.

Hi @yoshid8s To achieve this in shopify you need to add the variants in product page and add the price in shopify admin with respect of their variants, if you want the different prices according to the material.

 

If there is some other issue that you are facing then feel free to ask the same.

 

Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!

 

Best Regards

Sahil

- Your

 Coffee Tip 

can create magic in coding ❤️❤️

- Need a Shopify Developer? CHAT ON WHATSAPP or EMAIL ME !


- Hopefully the solution will help you. If yes then Please hit

 Like 

and

 Mark it as solution! ❤️


View solution in original post

namphan
Shopify Partner
1329 164 199

This is an accepted solution.

Hi @yoshid8s,

You want to display the lowest and highest price of the product. 

Please send me the store link and code of price.liquid file, I will check it for you

Coffee tips fuels my dedication.
Shopify Development Service
Need help with your store? [email protected]

View solution in original post

Replies 8 (8)

AnneLuo
Shopify Partner
933 173 199

You need to use the app "Search & Discovery". Then add filter 

AnneLuo_0-1726128190375.png

Select the price option, then click save.

AnneLuo_1-1726128317440.png

The range of price will display in the filters on the collection page.

AnneLuo_2-1726128367212.png

 

Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!

If this is helpful, please Like and Accept the solution.
Want to modify or custom changes on store? Let me help.
- Feel free to Email Me   

Buy Me A Coffee

yoshid8s
Tourist
8 0 3

Thank you very much for your kind response !

My product‘s price is three types.

So I would like to display the price range on the product page like the below figure.

I think that I need to customize Shopify theme "Rise" I'm using, however as I'm beginner , how to change where Rise's Liquid sources code I need to change and how to change ...

yoshid8s_0-1726134344449.png

 

sahilsharma9515
Shopify Partner
1206 156 233

This is an accepted solution.

Hi @yoshid8s To achieve this in shopify you need to add the variants in product page and add the price in shopify admin with respect of their variants, if you want the different prices according to the material.

 

If there is some other issue that you are facing then feel free to ask the same.

 

Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!

 

Best Regards

Sahil

- Your

 Coffee Tip 

can create magic in coding ❤️❤️

- Need a Shopify Developer? CHAT ON WHATSAPP or EMAIL ME !


- Hopefully the solution will help you. If yes then Please hit

 Like 

and

 Mark it as solution! ❤️


yoshid8s
Tourist
8 0 3

Thank you very much for your kind response !

My product‘s price is three types.

So I would like to display the price range on the product page like the below figure.

I think that I need to customize Shopify theme "Rise" I'm using, however as I'm beginner , how to change where Rise's Liquid sources code I need to change and how to change ...

yoshid8s_1-1726134468568.png

 

sahilsharma9515
Shopify Partner
1206 156 233

Hi @yoshid8s ok got it now, thanks for the explanation, so there are 2 options through which you can do it.

 

But the question before I can provide you the option is when customer will select a option which cost $1486 then how you want it to change? or you want the pricing in 2 lines? One will have the price of the product that customer have selected and other line will show the price range?

 

  1. Custom Code in the Theme: There is variable in shopify through which you can get the minimum price and max price of the product variant and show it on the product page. Max Price: "product.price_max" Minimum Price: "product.min_price". You can define these variable in the code file in main-product.liquid to show the pricing.
  2. With Metafield: You can also achieve this with the help of metafield, you need to create the product metafield in the shopify and then define the pricing in that metafield and show that metafield in frontend, you can learn about metafield from here: https://help.shopify.com/en/manual/custom-data/metafields

Providing the exact code is not possible without looking into the theme and store.

 

If you will unable to implement the same then I'm happy to do this for you, let me know. I can implement the code changes so that this will work well for you.

 

Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!

 

Best Regards

Sahil

- Your

 Coffee Tip 

can create magic in coding ❤️❤️

- Need a Shopify Developer? CHAT ON WHATSAPP or EMAIL ME !


- Hopefully the solution will help you. If yes then Please hit

 Like 

and

 Mark it as solution! ❤️


yoshid8s
Tourist
8 0 3

Thank you so much.
I add new "price__multiple" code to price.liquid.
As the result , my product page has been displayed not only product price but also price variants as I want as the following.

yoshid8s_0-1726270116221.png

 

namphan
Shopify Partner
1329 164 199

This is an accepted solution.

Hi @yoshid8s,

You want to display the lowest and highest price of the product. 

Please send me the store link and code of price.liquid file, I will check it for you

Coffee tips fuels my dedication.
Shopify Development Service
Need help with your store? [email protected]
yoshid8s
Tourist
8 0 3

Thank you very much. I appreciate for your kind support !
My shop is under preparing status and password protected.
So I send you its password via Shopify's mail.
Please check your mail box.


The page I want to change the price appearance is 
https://jiji-shop.yh-inc.jp/products/%E3%83%95%E3%82%A3%E3%83%AC%E3%83%B3%E3%83%84%E3%82%A7%E3%81%AE...

Rise's price.liquid code is the following.

{% comment %}
Renders a list of product's price (regular, sale)

Accepts:
- product: {Object} Product Liquid object (optional)
- use_variant: {Boolean} Renders selected or first variant price instead of overall product pricing (optional)
- show_badges: {Boolean} Renders 'Sale' and 'Sold Out' tags if the product matches the condition (optional)
- price_class: {String} Adds a price class to the price element (optional)
- show_compare_at_price: {Boolean} Renders the compare at price if the product matches the condition (optional)

Usage:
{% render 'price', product: product %}
{% endcomment %}
{%- liquid
if use_variant
assign target = product.selected_or_first_available_variant
else
assign target = product
endif

assign compare_at_price = target.compare_at_price
assign price = target.price | default: 1999
assign price_min = product.price_min
assign price_max = product.price_max
assign available = target.available | default: false
assign money_price = price | money
assign money_price_min = price_min | money
assign money_price_max = price_max | money
if settings.currency_code_enabled
assign money_price = price | money_with_currency
assign money_price_min = price_min | money_with_currency
assign money_price_max = price_max | money_with_currency
endif

if target == product and product.price_varies
assign money_price = 'products.product.price.from_price_html' | t: price: money_price
endif
-%}

{%- unless target == nil -%}
<div
class="
price
{%- if price_class %} {{ price_class }}{% endif -%}
{%- if available == false %} price--sold-out{% endif -%}
{%- if compare_at_price > price and product.quantity_price_breaks_configured? != true %} price--on-sale{% endif -%}
{%- if compare_at_price > price and product.quantity_price_breaks_configured? %} volume-pricing--sale-badge{% endif -%}
{%- if product.price_varies == false and product.compare_at_price_varies %} price--no-compare{% endif -%}
{%- if show_badges %} price--show-badge{% endif -%}
"
>
<div class="price__container">
{%- comment -%}
Explanation of description list:
- div.price__regular: Displayed when there are no variants on sale
- div.price__sale: Displayed when a variant is a sale
{%- endcomment -%}
<div class="price__regular">
{%- if product.quantity_price_breaks_configured? -%}
{%- if show_compare_at_price and compare_at_price -%}
{%- unless product.price_varies == false and product.compare_at_price_varies %}
<span class="visually-hidden visually-hidden--inline">
{{- 'products.product.price.regular_price' | t -}}
</span>
<span>
<s class="price-item price-item--regular variant-item__old-price">
{% if settings.currency_code_enabled %}
{{ compare_at_price | money_with_currency }}
{% else %}
{{ compare_at_price | money }}
{% endif %}
</s>
</span>
{%- endunless -%}
{%- endif -%}
<span class="visually-hidden visually-hidden--inline">{{ 'products.product.price.regular_price' | t }}</span>
<span class="price-item price-item--regular">
{{- 'products.product.volume_pricing.price_range' | t: minimum: money_price_min, maximum: money_price_max -}}
</span>
{%- else -%}
<span class="visually-hidden visually-hidden--inline">{{ 'products.product.price.regular_price' | t }}</span>
<span class="price-item price-item--regular">
{{ money_price }}
</span>
{%- endif -%}
</div>
<div class="price__sale">
{%- unless product.price_varies == false and product.compare_at_price_varies %}
<span class="visually-hidden visually-hidden--inline">{{ 'products.product.price.regular_price' | t }}</span>
<span>
<s class="price-item price-item--regular">
{% if settings.currency_code_enabled %}
{{ compare_at_price | money_with_currency }}
{% else %}
{{ compare_at_price | money }}
{% endif %}
</s>
</span>
{%- endunless -%}
<span class="visually-hidden visually-hidden--inline">{{ 'products.product.price.sale_price' | t }}</span>
<span class="price-item price-item--sale price-item--last">
{{ money_price }}
</span>
</div>
<small class="unit-price caption{% if product.selected_or_first_available_variant.unit_price_measurement == nil %} hidden{% endif %}">
<span class="visually-hidden">{{ 'products.product.price.unit_price' | t }}</span>
<span class="price-item price-item--last">
<span>{{- product.selected_or_first_available_variant.unit_price | money -}}</span>
<span aria-hidden="true">/</span>
<span class="visually-hidden">&nbsp;{{ 'accessibility.unit_price_separator' | t }}&nbsp;</span>
<span>
{%- if product.selected_or_first_available_variant.unit_price_measurement.reference_value != 1 -%}
{{- product.selected_or_first_available_variant.unit_price_measurement.reference_value -}}
{%- endif -%}
{{ product.selected_or_first_available_variant.unit_price_measurement.reference_unit }}
</span>
</span>
</small>
</div>
{%- if show_badges -%}
<span class="badge price__badge-sale color-{{ settings.sale_badge_color_scheme }}">
{{ 'products.product.on_sale' | t }}
</span>

<span class="badge price__badge-sold-out color-{{ settings.sold_out_badge_color_scheme }}">
{{ 'products.product.sold_out' | t }}
</span>
{%- endif -%}
</div>
{% endunless %}