Shopify themes, liquid, logos, and UX
Hi guys, need help adjusting the code so I can see the "compare at" price when variants have different prices.
Right now we can see "compare at" when variants are priced the same but not when they differ.
It was the other way around, but I changed FALSE to TRUE and it works for the same priced items.
div class="price__sale"> {%- unless product.price_varies == true and product.compare_at_price_varies %} <span class="visually-hidden visually-hidden--inline">{{ 'products.product.price.regular_price' | t }}</span>
How do I add to show it for both SAME and DIFFERENT price variants?
{% 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) 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 available = target.available | default: false assign money_price = price | money if settings.currency_code_enabled assign money_price = price | 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 -%} <div class="price {%- if price_class %} {{ price_class }}{% endif -%} {%- if available == false %} price--sold-out {% endif -%} {%- if compare_at_price > price %} price--on-sale {% 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"> <span class="visually-hidden visually-hidden--inline">{{ 'products.product.price.regular_price' | t }}</span> <span class="price-item price-item--regular"> {{ money_price }} </span> </div> <div class="price__sale"> {%- unless product.price_varies == true 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>
I tried to manipulate the code to my best abilities, but I feel like I'm lacking the skill 😞
User | RANK |
---|---|
234 | |
158 | |
61 | |
55 | |
46 |
Thanks to all Community members that participated in our inaugural 2 week AMA on the new E...
By Jacqui Mar 10, 2023Upskill and stand out with the new Shopify Foundations Certification program
By SarahF_Shopify Mar 6, 2023One of the key components to running a successful online business is having clear and co...
By Ollie Mar 6, 2023