Shopify themes, liquid, logos, and UX
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?
Solved! Go to the solution
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
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
You need to use the app "Search & Discovery". Then add filter
Select the price option, then click save.
The range of price will display in the filters on the collection page.
Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!
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 ...
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
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 ...
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?
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
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.
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
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"> {{ 'accessibility.unit_price_separator' | t }} </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 %}
Starting a B2B store is a big undertaking that requires careful planning and execution. W...
By JasonH Sep 23, 2024By investing 30 minutes of your time, you can unlock the potential for increased sales,...
By Jacqui Sep 11, 2024We appreciate the diverse ways you participate in and engage with the Shopify Communi...
By JasonH Sep 9, 2024