Set a price range

Shopify Partner
12 0 0

We sell a product that has a different price depending on length, width, and diameter.  I'm trying to set up the site to allow customers to choose the options from a pull-down menu, and then the site spits out the price.  On the search page and on the product page, before any options are chosen, I want to display a range of prices, say $1-100.  I've read a couple of other threads, but the solutions don't work for me--on the Edit Product page I only see one entry field for a price, and it won't let me establish a range (if I try to put in, say, 1-100, it shortens it to $1,100).

Any ideas?  My current Snippets > product-grid-item.liquid looks like:

 

<div class="product-item--price">
      <span class="h1 medium--left">
        {% if on_sale %}
          <span class="visually-hidden">{{ "products.general.sale_price" | t }}</span>
        {% else %}
          <span class="visually-hidden">{{ "products.general.regular_price" | t }}</span>
        {% endif %}
        {% include 'price' with product.price_min %}
        {% if product.price_varies %} - {% include 'price' with product.price_max %}{% endif %}
        {% if on_sale and section.settings.product_show_compare_at_price %}
          <small>
            <s>
              <span class="visually-hidden">{{ "products.general.regular_price" | t }}</span>
              {% include 'price' with product.compare_at_price %}
            </s>
          </small>
        {% endif %}
      </span>

      {% if on_sale and section.settings.product_show_saved_amount %}
        <span class="sale-tag{% unless section.settings.show_compare_at_price %} medium--right{% endunless %}{% if section.settings.product_reviews_enable %} has-reviews{% endif %}">
          {% assign compare_price = product.compare_at_price %}
          {% assign product_price = product.price %}
          {% include 'price-sale' %}
        </span>
      {% endif %}
    </div>

    {% if section.settings.product_reviews_enable %}
      <span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>
    {% endif %}
  </a>

 

(using Supply theme).

0 Likes
Shopify Partner
12 0 0

Figured it out: the missing piece was I had to go into the product description and specify variants and their prices (I hadn't seen the form to fill in the prices for variants; Pro-Tip: scroll down to the end of the page).  Then the solution in (https://ecommerce.shopify.com/c/ecommerce-design/t/want-to-add-price-range-for-our-products-278207) worked perfectly.  Customers can select the variant, the price updates correctly, and the range displays in the catalog.

0 Likes
Highlighted
Tourist
22 0 1

Hello,
if you want to show price range for each product with differents price 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