Shopify Question posted in
The Shopify help center can be found here.

Shopify Debut Theme – Show max variant price on featured collection homepage

By default, the Debut theme shows the lowest variant price. I would like to show the max variant price on the collection featured products on the homepage and collection pages. I was able to change this on the individual product page by editing the product-price.liquid code but haven’t had any luck changing it on the collection grid. The URL is https://anaholagranola.com/

I changed a line of code to this but it only changed the product page

{%- assign price = product.price_max -%}
Tags:

2

Answers


  1. 0

    The theme seems to be displaying prices based off of a single variant being passed into the theme’s product-price snippet. It’s going to take a little bit more coding to update things to show the product’s max price.

    Here are two ideas for how you might do this:

    1. Select the highest-priced variant from the variant list and use that as the current_variant in your featured-product code.

    This might look something as follows:

    Find:

     {%- assign current_variant = product.selected_or_first_available_variant -%}

    Replace with:
    {%- assign sorted_variant_list = product.variants | sort: ‘price’ | reverse -%}
    {%- assign current_variant = sorted_variant_list.first -%}

    This code will sort the variants by price (ascending by default) then reverses the order (so they should now be in descending price order) and then selects the first variant from that list, which should give you the highest-priced variant that will be fed into the product-price snippet.

    1. Write a better price display snippet that takes a product, not a variant

    Create a new file in your theme’s snippets folder and give it a catchy name.

    Using the existing product-price file as a template, we might get something like this:

    {%- assign money_price = price | money -%}

<dl class="price{% if available and compare_at_price > price %} price--on-sale{% endif %}" data-price>

  {% if section.settings.show_vendor %}
    <div class="price__vendor">
      <dt>
        <span class="visually-hidden">{{ 'products.product.vendor' | t }}</span>
      </dt>
      <dd>
        {{ product.vendor }}
      </dd>
    </div>
  {% endif %}

  <div class="price__regular">
    <dt>
      <span class="visually-hidden visually-hidden--inline">{{ 'products.product.regular_price' | t }}</span>
    </dt>
    <dd>
      {% if available %}
        {% if compare_at_price > price %}
          <s class="price-item price-item--regular" data-regular-price>
            {{ compare_at_price | money }}
          </s>
        {% else %}
          <span class="price-item price-item--regular" data-regular-price>
            {{ money_price }}
          </span>
        {% endif %}
      {% else %}
        <span class="price-item price-item--regular" data-regular-price>
          {{ 'products.product.sold_out' | t }}
        </span>
      {% endif %}
    </dd>
  </div>
  <div class="price__sale">
    <dt>
      <span class="visually-hidden visually-hidden--inline">{{ 'products.product.sale_price' | t }}</span>
    </dt>
    <dd>
      <span class="price-item price-item--sale" data-sale-price>
        {{ money_price }}
      </span>
      <span class="price-item__label" aria-hidden="true">{{ 'products.product.on_sale' | t }}</span>
    </dd>
  </div>
  <div class="price__unit">
    <dt>
      <span class="visually-hidden visually-hidden--inline">{{ 'products.product.unit_price_label' | t }}</span>
    </dt>
  </div>
</dl>

    I created the above by simply removing the variant pieces from the pricing snippet. To use this revised snippet you will need to pass in price, compare_at_price and available values. (Change ‘product-price-revised’ to whatever you called the snippet file that you created)

    {% include 'product-price-revised', price: product.price_max, compare_at_price: product.compare_at_price_max, available: product.available %}
    Login or Signup to reply.
  2. 0

    In Debut Theme Snippets -> product-card-grid.liquid

    Replace:

    {% include 'product-price', variant: product.selected_or_first_available_variant %}

    With:

    {% include 'product-price', variant: product %}

    Then in the Snippet -> product-price.liquid

    Replace:

    {%- assign price = variant.price -%}

    With:

    {%- assign price = variant.price_max -%}

    I tested it on the Debut theme its working. You may also try this.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search