Display price range in products with variants

New Member
2 0 0

I am using the Atlantic theme, and want to be able to display price ranges for products that have variants with different prices. How can this be accomplished?

0 Likes
Shopify Partner
2536 31 564

Hi Gillian,

this should be a relatively simple modification, however, since Atlantic is a paid theme, not many have access to the liquid code, and it's difficult to suggest a solution without seeing the code.

Do you have files like product-card-xxx or product-grid-item in your Snippets?

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com! My post solved your problem? This is my Paypal too :)
0 Likes
New Member
2 0 0

I don't have those files in Snippets. I do have product-item-demo in Snippets, that seems like it might be an equivalent. 

This is the code:

 

{% if altProductCard %}
  {% capture cardType %}product-card-alt{% endcapture %}
{% endif %}

{% capture current %}{% cycle 1, 2, 3, 4, 5, 6 %}{% endcapture %}
{% assign placeholder = 'product-' | append: current %}
{% assign color = settings.primary-border-colour %}
{% assign color_string = 'fill="' | append: color | append: '" xmlns' %}
{% capture demo_image %}{%- include 'placeholder_svg_uri', placeholder: placeholder, color_string: color_string -%}{% endcapture %}

<li class="product {% include 'for-looper' %} {% cycle 'flush', '', '', '' %}">
  <div class="product-inner {{ cardType }}">
    <figure style="background-image:url('{{ demo_image }}');" class="placeholder-background">
      {{ 'product-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}

      <a href="#" class="{% if imageBorders %}with-border{% endif %}"></a>

      {% if altProductCard %}
        <a class="centering-wrapper overlay" href="#">
          <span class="product-card-details-overlay">
            <h3 class="brand">{{ 'onboarding.product_vendor' | t }}</h3>
            <h2 class="title">{{ 'onboarding.product_name' | t }}</h2>
            <p class="price"><span class="money">{{ 'onboarding.product_price' | t }}</span></p>
          </span>
        </a>
      {% elsif enableQuickshop %}
        <div class="overlay">
          <span class="label">{{ 'collections.collection.quick_shop' | t }}</span>
        </div>
      {% endif %}
    </figure>

    <div class="product-card-details">
      <h3 class="brand">{{ 'onboarding.product_vendor' | t }}</h3>
      <h2 class="title"><a href="#">{{ 'onboarding.product_name' | t }}</a></h2>
      <p class="price"><span class="money">{{ 'onboarding.product_price' | t }}</span></p>
    </div>
  </div>
</li>

0 Likes
Shopify Partner
2536 31 564

No, this looks more like a placeholder for an empty shop.

You may start at collection-template.liquid Section and look at the following loop:

{% for product in collection.products %}

The stuff inside it is responsible for outputting a proudct card.

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com! My post solved your problem? This is my Paypal too :)
0 Likes
Highlighted
Tourist
22 0 1

Hello,
if you want to show price range for each product with differents prices for variants, you can try this APP.
This app show price range for each product in all collections.
In app configuration, you can set also format for displaying price range, for example like From $5.00 to $9.99 or $5.00 - $9.99

0 Likes