Creating multiple objects on the bottom of product pages

Highlighted
New Member
1 0 0

Hi, I am supposed to take over a store and need a little help. There are currently 3 products in the store, but it was designed for 2 only. As I am not a programmer, I am a little lost with the code used on product.liquid

This code creates full size images on the bottom of the product pages. However, it is only designed for 2 product pages and I would like to know how I can create different images for 3 product pages

{% if product.variants[0].id == 915438739 %}
<div class="home-module-wrapper default">
  <div class="home-module home-in-line-features half">
    <h3 class="section-title" style="margin-bottom:40px;">Le kit contient</h3>
    <div class="home-in-line-feature clearfix rows-of-4">
        <img alt="1x Standard Frame (PVC struts , PA6 joints , dark green)" src=";
      <div class="home-in-line-text">
          <h5 style='text-align:center;'>1 x Structure standard <br/>(pieux en PVC, raccords PA6, blanc)</h5>
      </div>
    </div>
    <div class="home-in-line-feature clearfix rows-of-4">
        <img alt="1x Wintergarden Cover (PVC, transparent)" src=";
      <div class="home-in-line-text">
          <h5 style='text-align:center;'>1 x Film transparent/isolant pour votre jardin d’hiver <br/>(en PVC, transparent)</h5>
      </div>
    </div>
    <div class="home-in-line-feature clearfix rows-of-4">
        <img alt="Kit de fixation, Guide de l'utilisateur &amp; Manuel d'installation" src=";
      <div class="home-in-line-text">
          <h5 style='text-align:center;'>Kit de fixation, Guide de l'utilisateur &amp; Manuel d'installation</h5>
      </div>
    </div>
  </div>
</div>
<div class="home-module-wrapper default">
  <div class="home-module home-in-line-features half">
  	<img src=";
 </div>
</div>
{% else %}
<div class="home-module-wrapper default">
  <div class="home-module home-in-line-features half">
    <h3 class="section-title">Le kit contient</h3>
    <div class="home-in-line-feature clearfix rows-of-4">
        <img alt="1x Canopy Cover (HDPE, beige)" src="//cdn.shopify.com/s/files/1/0649/2569/files/03-canopy-cover.png?1339">
      <div class="home-in-line-text">
          <h5 style='text-align:center;'>1 x toit d’ombrage pour votre pavillon (en PEHD, beige)</h5>
      </div>
    </div>
    <div class="home-in-line-feature clearfix rows-of-4">
        <img alt="Users Guide &amp; Installation Manual" src=";
      <div class="home-in-line-text">
          <h5 style='text-align:center;'>Guide de l'utilisateur &amp; Manuel d'installation</h5>
      </div>
    </div>
    <div class="home-in-line-feature clearfix rows-of-4">
        <img alt="Pièces supplémentaires" src=";
      <div class="home-in-line-text">
          <h5 style='text-align:center;'>Pièces supplémentaires</h5>
      </div>
    </div>
  </div>
</div>

What happens here is that

{% if product.variants[0].id == 915438739 %}

relates the objects to the main product page and

{% else %}

to all other product pages. This was fine when there were only 2 products. Now that there is a third product, the objects on the product pages of product 2 and 3 are the same. How can I change that? What do I need to write instead of {% else %} in order to relate it only to product 2 or product 3, respectively. Thanks for your help.

0 Likes
Shopify Staff
Shopify Staff
380 0 27

Hello Baris, Ben here - your Shopify Guru! 

 You can do this using elseif logic. You would add another conditional statement before the else tag like this:

{% elsif product.variants[0].id == THEPRODUCTID %}

You would change THEPRODUCTID to the id of whatever product you wish to have different images for. Them you just place your alternate image code after that statement.

 

I hope this helps! Feel free to reach out if you have any further questions :)

Cheers,
Ben C - Shopify Guru
Support@Shopify.com

support@shopify.com
0 Likes