Image Code !!

New Member
101 0 0
Is it possible to post a single product image on the first product page, but have a different image show on the product description page? I am begging for some help on this. It is the last hurdle to get over for our launch!
0 Likes
Shopify Staff
Shopify Staff
2002 0 41

You could upload more then one image and just show the last one on the frontpage and the first one on the product page

try:

{{ product.image | last | image_tag }} {{ product.image | first | image_tag }}

Tobias Lütke - Shopify CEO // http://twitter.com/tobi
0 Likes
New Member
101 0 0

Tobi. Not being a programmer is causing me to start drinking heavily.

I am trying to implement this code into all of the logical places and I realize I have no idea what I am doing. This is an all call for anyone to help. If you can get this thing to work, we’ll send you a free koozie, bumper sticker, and t-shirt. promise.

Here’s Tobi’s code:

{{ product.image | last | image_tag }} {{ product.image | first | image_tag }}

Here’s our code:

<div id="product">

  <div id="product-images">
    {% case product.images.size %}
      {% when 1 %}  

      <div class="pimage">
        <a href="{{ product.featured_image | product_img_url: 'large' }}" class="lbOn">{{ product.featured_image | product_img_url: 'medium' | img_tag }}</a>                  
      </div>

    {% else %}

        {% for image in product.images %}
        <div id="pimage-{{forloop.index}}" class="pimage" {% if forloop.first %} style="display: block;" {% else %} style="display: none;" {% endif %}>   
     <a href="{{ image | product_img_url: 'large' }}" class="lbOn">{{ image | product_img_url: 'medium' | img_tag }}</a>                  
        </div>
        {% endfor %}           

      <div id="pimage-select">
        {% for image in product.images %}
          <a href="#" onmouseover="displayImage({{ forloop.index }}, 'product-images');">{{ forloop.index }}</a>
        {% endfor %}
      </div>

    {% endcase %}
  </div>

  <h2>{{ product.title }}</h2>
  <ul id="details" class="hlist">
    <li>Vendor: {{product.vendor | link_to_vendor }}</li>
    <li>Type: {{product.type | link_to_type }}</li>
  </ul>

  <div id="description" class="textile">
    {{ product.description }}

<form action="/cart/add" method="post">
  <h3 style="margin-left: 35px;">Select Your Size</h3>
  <ul id="variants">
   <select name="id" style="width: 250px; margin-bottom: -10px;">
    {% for variant in product.variants %}
      {% if variant.available == true %}
        <option value="{{variant.id}}"> {{ variant.title }} for {{ variant.price | money_with_currency }} </option>
      {% else %}
        <option value="{{variant.id}}" disabled="disabled"> {{ variant.title }} for {{ variant.price | money_with_currency }} </option>
      {% endif %}
    {% endfor %}
   </select> 
</ul>
  <div class="buttons">
    <input style="margin-left: 35px;" type="submit" name="add" value="Add to Cart" id="add" class="primary" />
  </div>    
</form>

  </div>
</div>

Thanks to anyone who can help us. We launch tomorrow in test mode…..

0 Likes
Shopify Partner
253 0 0

Tobi’s liquid code creates an image tag for the first or last image in your images list.

If you need more control, you do have the ability. For example, you are already showing the first image on the index page and you want to start with the second image on the product page, you can simply use the offset feature:

{% for image in product.images offset:1 %}

That will start your cycle at the second image in line.

help.shopify.com is a great reference for this kind of thing. Liquid is really intuitive once you figure out the basics.

I will say that you don’t need to know how to program to build your own Shopify themes. A good understanding of HTML and CSS I think is a must, however.

Cliff Spence
0 Likes
Shopify Partner
253 0 0

Another tip for you, if you only want to display certain product images on your product page. Sebastian showed me how to do this the other day, so I’ll pass it on:

{% for image in product.images %}
    {% if forloop.index == 2 %}
          <img src="{{ image | product_img_url: 'large' }}" alt="{{ product.title }}" />
    {% endif %}
{% endfor %}

That index == 2 will give you the second image for your product. Works the same for other numbers as well. This gives you very fine control over which image(s) you wish to show.

Cliff Spence
0 Likes
New Member
101 0 0

Awesome. You continue to pull through. Actually Tobias fixed it this morning before we began running our tests for the launch on wednesday. If you are interested in taking a look and letting us know what you think, drop me an email. I would love to know what you think. Mel Mel(at)penningtonandbailes.com

0 Likes
New Member
101 0 0

Awesome. You continue to pull through. Actually Tobias fixed it this morning before we began running our tests for the launch on wednesday. If you are interested in taking a look and letting us know what you think, drop me an email. I would love to know what you think. Mel Mel(at)penningtonandbailes.com

0 Likes
Shopify Partner
253 0 0

Sweet, congrats. I’ll drop you a line now.

Cliff Spence
0 Likes