Display main image not first variant on page load?

TJP
New Member
17 0 0
{% assign current_variant = product.selected_or_first_available_variant %}
<div itemscope itemtype="http://schema.org/Product"
  id="product-{{ product.id }}"
  class="product-page product-template"
  data-product-id="{{ product.id }}"
  data-section-id="{{ section.id }}"
  data-section-type="product-section">

  <meta itemprop="url" content="{{ routes.root_url }}{{ product.url }}">
  <meta itemprop="image" content="{{ product.featured_media.media | img_url: '1024x1024' }}">

  {% render 'product-json',
    product: product %}

  {% assign thumbnail_position = section.settings.thumbnail_position %}
  {% assign click_to_enlarge = section.settings.click_to_enlarge %}
  {% assign enable_video_looping = section.settings.enable_video_looping %}
  {% capture product_gallery_config %}{
    "thumbPosition": {{ section.settings.thumbnail_position | json }},
    "enableVideoLooping": {{ section.settings.enable_video_looping | json }},
    "mainSlider": {% if product.media.size <= 1 %}false{% else %}true{% endif %},
    "thumbSlider": {% if product.media.size >= 4 %}true{% else %}false{% endif %},
    "productId": {{ product.id | json }},
    "isQuick": false
 }{% endcapture %}

  <div id="product-photos"
    class="product-photos carousel-container desktop-6 tablet-3 mobile-3"
    data-product-gallery data-product-single-media-group
    data-gallery-config='{{ product_gallery_config }}' data-aos="fade">

    {%- if product.featured_media -%}
      {% render 'product-image-gallery',
         thumbnail_position: thumbnail_position,
         click_to_enlarge: click_to_enlarge,
         enable_video_looping: enable_video_looping,
         product_gallery_config: product_gallery_config %}
    {%- else -%}
      {% capture current %}{% cycle 1, 2, 3, 4, 5, 6 %}{% endcapture %}
      {{ 'product-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
    {%- endif -%}
  </div>

  <div id="product-right" class="desktop-6 tablet-3 mobile-3" data-aos="fade">

    <div id="product-description" class="desktop-10 tablet-6 mobile-3">
      {% if collection %}
        <div class="product-navigation">
          {% if collection.previous_product %}
            {{ '<i class="fa fa-angle-left" aria-hidden="true"></i>' | link_to: collection.previous_product }}
          {% endif %}
          {% if collection.next_product %}
            {{ '<i class="fa fa-angle-right" aria-hidden="true"></i>' | link_to: collection.next_product }}
          {% endif %}
        </div>
     
      
      {% endif %}

      {% if section.settings.vendor %}
        <h2>{{ product.vendor }}</h2>
      {% endif %}

      <h1>
        {{ product.title }}
      </h1>

      <div>
        {% capture product_form_config %}
          { "money_format": {{ shop.money_format | json }},
            "enable_history": true,
            "sold_out": {{ "products.product.sold_out" | t | json }},
            "button": {{ 'products.product.add_to_cart' | t | json }},
            "unavailable": {{ 'products.product.unavailable' | t | json }},
            "quickview": {% if template == 'product.quick' %}true{% else %}false{% endif %}
          }
        {% endcapture %}
        
                <div id="delivery_timer_wrapper"  style="color: white;background: green;display: inline-block;padding: 5px 10px;border-radius: 14px;" class="test0"><center><b>Add 2 Items To Cart & Use Code: BOGO during Checkout</center></div>


        {% render 'product-form',
          product: product,
          product_form_config: product_form_config,
          current_variant: current_variant %}

          <ul id="popups">
            {% if section.settings.popup_one != blank %}
              <li class="first">
                <a href="#pop-one" class="fancybox">
                  {{ pages[section.settings.popup_one].title }}
                </a>
              </li>
            {% endif %}
            {% if section.settings.popup_two != blank %}
              <li>
                <a href="#pop-two" class="fancybox">
                  {{ pages[section.settings.popup_two].title }}
                </a>
              </li>
            {% endif %}
            {% if section.settings.popup_three != blank %}
              <li>
                <a href="#pop-three" class="fancybox">
                  {{ pages[section.settings.popup_three].title }}
                </a>
              </li>
            {% endif %}
            {% if section.settings.popup_four %}
              <li class="last">
                <a href="#pop-four" class="fancybox">
                  {{ 'products.product.popup_question' | t }}
                </a>
              </li>
            {% endif %}
          </ul>

          <div id="pop-one" class="product-page-popup" style="display: none">
            {{ pages[section.settings.popup_one].content }}
          </div>

          <div id="pop-two" class="product-page-popup" style="display: none">
            {{ pages[section.settings.popup_two].content }}
          </div>

          <div id="pop-three" class="product-page-popup" style="display: none">
            {{ pages[section.settings.popup_three].content }}
          </div>

          <div id="pop-four" class="product-page-popup" style="display: none">
            {% render 'question' %}
          </div>
      </div>

      <div class="rte">
      {{ product.description }}
      </div>
        
        <div id="shopify-product-reviews" data-id="{{product.id}}">{{ product.metafields.spr.reviews }}</div>


      {% if section.settings.show_social %}
        <div class="desc">
          {% render 'social' with product %}
        </div>
      {% endif %}
    </div>
  </div>

  <div class="clear"></div>
</div>


<style>
  {% if section.settings.thumbnail_position == 'bottom' %}
    #product-{{ product.id }} .thumb-slider-slides {
      transition: left 0.5s ease-in-out;
    }
  {% else %}
    #product-{{ product.id }} .thumb-slider-slides {
      transition: top 0.5s ease-in-out;
    }
  {% endif %}

  {% if thumbnail_position == 'left' %}
    #product-{{ product.id }} .product-main-images {
      float: right !important;
    }
  {% endif %}

  {% if section.settings.show_sku == false %}
    #product-{{ product.id }} .variant-sku {
      display: none;
    }
  {% endif %}
  {% if section.settings.product_variants == 'swatches' %}
    #product-{{ product.id }} .selector-wrapper {
      display: none;
    }

    #product-{{ product.id }} .single-option-selector {
      opacity: 0;
      display: none;
    }
  {% endif %}
  {% if section.settings.swatch_shape == 'circles' %}
    #product-{{ product.id }} .swatch .color label {
      min-width: 34px !important;
      width: 34px !important;
      border-radius: 50%;
      outline: 0 !important;
    }
  {% endif %}

</style>
<script type="application/json" id="ModelJson-{{ section.id }}">
  {{ product.media | where: 'media_type', 'model' | json }}
</script>

{% schema %}
  {
    "name": "Product page",
    "settings": [
      {
        "type": "header",
        "content": "Product Form Settings"
      },
      {
        "type": "checkbox",
        "id": "vendor",
        "label": "Show product vendor"
      },
      {
        "type": "checkbox",
        "id": "show_quantity",
        "label": "Show quantity"
      },
      {
        "type": "checkbox",
        "id": "show_sku",
        "label": "Show variant SKU",
        "default": true
      },
      {
        "type": "radio",
        "id": "product_variants",
        "label": "Product variant display",
        "options": [
          {
            "value": "drop-downs",
            "label": "Drop-downs"
          },
          {
           "value": "swatches",
           "label": "Swatches"
          }
        ],
        "default": "drop-downs"
      },
      {
        "type": "checkbox",
        "id": "use_swatch_images",
        "label": "Show custom swatch images",
        "default": true
      },
      {
        "type": "select",
        "id": "swatch_shape",
        "label": "Color swatch shape",
        "options": [
          {
            "value": "circles",
            "label": "Circles"
          },
          {
            "value": "rectangles",
            "label": "Rectangles"
          }
        ]
      },
      {
        "type": "checkbox",
        "id": "show_payment_button",
        "label": "Show dynamic checkout button",
        "info": "Lets customers check out directly using a familiar payment method. [Learn more](https:\/\/help.shopify.com\/manual\/using-themes\/change-the-layout\/dynamic-checkout)",
        "default": true
      },
      {
        "type": "header",
        "content": "Media"
      },
      {
      "type": "select",
      "id": "thumbnail_position",
      "label": "Thumbnail position",
      "options": [
          {
            "value": "right",
            "label": "Right"
          },
          {
            "value": "left",
            "label": "Left"
          },
          {
            "value": "bottom",
            "label": "Bottom"
          }
        ]
      },
      {
        "type": "checkbox",
        "id": "click_to_enlarge",
        "label": "Enable click to enlarge",
        "default": true
      },
      {
        "type": "checkbox",
        "id": "enable_video_looping",
        "label": "Enable video looping",
        "default": false
      },
      {
        "type": "paragraph",
        "content": "Learn more about [Media types](https:\/\/help.shopify.com/en\/manual\/products\/product-media\)"
      },
      {
        "type": "header",
        "content": "Product Content"
      },
      {
        "type": "page",
        "id": "popup_one",
        "label": "Popup 1 content"
      },
      {
        "type": "page",
        "id": "popup_two",
        "label": "Popup 2 content"
      },
      {
        "type": "page",
        "id": "popup_three",
        "label": "Popup 3 content"
      },
      {
        "type": "checkbox",
        "id": "popup_four",
        "label": "Popup contact form",
        "default": true
      },
      {
        "type": "checkbox",
        "id": "show_social",
        "label": "Show social share icons",
        "default": true
      }
    ]
  }
{% endschema %}

 

Hey all, above is my code for my product-template.liquid file.

 

I am trying to make it so my main featured image is the first image shown upon loading. Is there any way to make it so my variant image is not the first one that appears when loading?

 

 

0 Likes