Display price range in products with variants

Highlighted
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
Highlighted
Shopify Expert
2684 67 775

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? Like it!
I am away till Feb-15.
0 Likes
Highlighted
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
Highlighted
Shopify Expert
2684 67 775

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? Like it!
I am away till Feb-15.
0 Likes
Highlighted
Shopify Partner
22 0 2

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