Display Product Prices for specific product in Shopify

Question

I am currently trying to display prices for all my products in my shopify store. I have managed to show this for my first product using the following code:

<div class="grid__item">
{% for collection in collections %}



    {% for product in collection.products %}
   {% for variant in product.variants %}


{% if forloop.index <=1 %}
<div id="temp_first" style="display:none;">
<div class="style14">Style</div>
<div class="style11">(No)</div>
<div class="front"><img src="//files/front.jpg?v=1473520767" title="1 Sided Full Color" /></div>
<div class="reverse"><img src="//1/1265/7581/files/reverse.jpg?v=1473520807" title="1 Sided Only" /></div>
<div class="price"><a href="/products/leaflets?variant={{ variant.id }}">{{ variant.price | money | remove: '.00'}}</a></div>

{% elsif forloop.index <7 %}
<div class="price"><a href="/products/leaflets?variant={{ variant.id }}">{{ variant.price | money | remove: '.00'}}</a></div>

{% elsif forloop.index <10 %} 
<div class="price2"><a href="/products/leaflets?variant={{ variant.id }}">{{ variant.price | money | remove: '.00'}}</a></div>

{% elsif forloop.index <13 %} 
<div class="price3"><a href="/products/leaflets?variant={{ variant.id }}">{{ variant.price | money | remove: '.00'}}</a></div>

{% elsif forloop.index ==13 %}
<div class="price3"><a href="/products/leaflets?variant={{ variant.id }}">{{ variant.price | money | remove: '.00'}}</a></div>
</div>
{% endif %}

   {% endfor %}
{% endfor %}


{% endfor %}

Now that works perfectly fine. The problem I have now is that I would like to display prices for a 2nd product and I duplicated the above code and changed the links in order to link this to the correct product page and variant and this works fine. The issue is the prices that are shown are for the first product and I don't know what I need to change in the code to target the 2nd product. Whether this is by its handle name or what, i'm just not sure, hence the need for some help.

If somebody could please advise, how I could target the 2nd product, would really appreciate it.

Thanks in advance.

Dave B Dave B · Accepted Answer · 2016-09-15T21:56:10

You can get an arbitrary product variable using the following syntax:

{% assign custom_product = all_products['product-handle'] %} (where 'product-handle' would be replaced with the handle of the product that you want to grab).

This can be done dynamically:

{% assign some_handle = 'product-handle' %}
{% assign custom_product = all_products[some_handle] %}

If you had some attribute of the main product that said what the secondary product would be (such as a metafield that was set either using an app or the Shopify FD browser extension), you could reference it something like this:

{% assign some_handle = product.metafields.custom_namespace.related_product %}
{% assign custom_product = all_products[some_handle] %}

The variable custom_product in any of the examples above is a variable representing the appropriate product at this point, so we can reference any product properties for that product exactly the same way as we would for the main product. For example:

<h3>{{ product.title }} is {{ product.price | money }}, but {{ custom_product.title }} is {{ custom_product.price | money }}</h3>

PS - Additionally, you can use {{ variant.price | money_without_trailing_zeros }} instead of chaining the money and remove filters.

PPS - Looking at your original code again, note that you can save yourself some headaches by making your links dynamic: <a href="/products/{{ product.handle }}?variant={{ variant.id }}">

PPPS - Your code as-written is trying to loop through every variant in every product in every collection. Depending on how big your product list is, this may not work - Shopify has a hard upper limit on how many products are returned for a collection when you're not paginating. Depending on what exactly you're trying to accomplish, you may be able to better take advantage of the Liquid templating language to get everything working in a more succinct and manageable way. :)

EXAMPLE (following original poster's clarification)

If you're creating a number of grids to display in the background of your page, what about something like this?

<div class="product_grid_container">
{% for custom_product in collection.products %}
  <div class="price_grid" data-product-id="{{ custom_product.id }}" data-index="{{ forloop.index }}">
    <a href="/products/{{ custom_product.handle }}">{{ custom_product.title }}</a>
    <!-- Any other header information here -->
    {% for variant in custom_product.variants %}
    <!-- Logic/structure for displaying variants for the product in the grid here. If it's complicated, you might want to move it to a separate snippet and then use an include statement. -->
    {% endfor %}
  </div>
{% endfor %}
</div>

This will produce a distinct HTML grid for each of the products that you care about, and you can then use CSS rules to position/style them appropriately.

Does this get you closer to what you're after?

Display Product Prices for specific product in Shopify

1 Answers