Custom Fields

[uurokan]

I prepared a great liquid code to collect images from my customers. With these codes, I could get customer images and display them on my order screen. Even though I didn't make any changes, I no longer saw the images in my new orders. Can we please find out what the problem is? Has the way Shopify processes forms changed?

This is how it used to appear. (Before)


This is after,


I won't be able to see or download the images anymore, but I didn't even touch anything.

Can someone please help me?

[uurokan]

They were sending me photos of their pets. I achieved this with line item properties. The code was working great so far, but even though I haven't touched anything, I can no longer see or download images in sent orders. I don't know if there is some kind of memory filling available. I have no information about which server the uploaded images are collected on.

[uurokan]

It looks the same when I look at it on my phone. I think this problem is not related to my personal browser or computer, but to where the images are stored. How do I find out where these files are stored? This is a special liquid code. If I send you my code, would you check it?

Here is my code

<style>
  @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');

  .upload-container {
    display: flex;
    flex-direction: column;
    gap: 15px; /* Butonlar arasındaki boşluk */
    width: 100%;
  }

  .upload-button {
    border: 1px solid #000; /* Daha siyah kenar çizgisi */
    border-radius: 12px; /* Daha yuvarlatılmış kenarlar */
    padding: 10px; /* Buton içi boşluk */
    display: flex;
    justify-content: flex-start; /* Yazıyı sola hizalar */
    align-items: center;
    width: 100%;
    position: relative;
    cursor: pointer;
    background-color: #fff; /* Arka plan rengi */
    color: #333; /* Yazı rengi */
    font-size: 12px; /* Yazı boyutu */
    font-weight: 600; /* Kalın yazı */
    font-family: 'Poppins', sans-serif; /* Poppins fontu */
    transition: background-color 0.3s, border-color 0.3s; /* Geçiş efekti */
    text-align: left; /* Yazıyı sola hizalar */
    padding-right: 50px; /* Sağda yer açar */
  }

  .upload-button:hover {
    background-color: #f1f1f1; /* Hover arka plan rengi */
    border-color: #000; /* Hover kenar rengi */
  }

  .upload-button span.checkmark {
    display: none;
    position: absolute;
    right: 15px; /* Checkmark sağda */
    top: 50%;
    transform: translateY(-50%);
    width: 20px; /* Checkmark boyutu */
    height: 20px; /* Checkmark boyutu */
    background-image: url('https://i.hizliresim.com/k6wdx3l.png');
    background-size: contain;
    background-repeat: no-repeat;
  }

  .upload-button input {
    display: none;
  }

  .upload-container label {
    display: flex;
    width: 100%;
    position: relative; /* Checkmark için */
  }

  .upload-button .button-text {
    margin-right: 10px; /* Metin ile küçük yazılar arasında boşluk */
  }

  .upload-button .info-text {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 10px; /* Daha küçük yazı boyutu */
    color: #666; /* Daha az belirgin renk */
  }

  .upload-button.uploaded {
    background-color: #e8f5e9; /* Yükleme yapıldığında hafif yeşil arka plan rengi */
    border-color: #4caf50; /* Yükleme yapıldığında kenar rengi */
    color: #4caf50; /* Yazı rengi */
  }
</style>

<div class="upload-container">
  <label class="upload-button required" id="upload-label-1">
    <input type="file" form="{{ 'product-form-' | append: section.id }}" name="properties[📸Fotoğraf Yüklendi 1]" required id="file-input-1">
    <span class="checkmark" id="checkmark-1"></span>
    <span class="button-text">Fotoğraf Yükle ▲</span>
    <span class="info-text">(Zorunlu)</span>
  </label>

  <label class="upload-button" id="upload-label-2">
    <input type="file" form="{{ 'product-form-' | append: section.id }}" name="properties[📸Fotoğraf Yüklendi 2]" id="file-input-2">
    <span class="checkmark" id="checkmark-2"></span>
    <span class="button-text">Fotoğraf Yükle ▲</span>
    <span class="info-text">(İsteğe Bağlı)</span>
  </label>

  <label class="upload-button" id="upload-label-3">
    <input type="file" form="{{ 'product-form-' | append: section.id }}" name="properties[📸Fotoğraf Yüklendi 3]" id="file-input-3">
    <span class="checkmark" id="checkmark-3"></span>
    <span class="button-text">Fotoğraf Yükle ▲</span>
    <span class="info-text">(İsteğe Bağlı)</span>
  </label>
</div>

<script>
  document.addEventListener("DOMContentLoaded", () => {
    document.querySelector("form[novalidate]").removeAttribute("novalidate");

    const fileInputs = [document.getElementById('file-input-1'), document.getElementById('file-input-2'), document.getElementById('file-input-3')];
    const uploadLabels = [document.getElementById('upload-label-1'), document.getElementById('upload-label-2'), document.getElementById('upload-label-3')];
    const checkmarks = [document.getElementById('checkmark-1'), document.getElementById('checkmark-2'), document.getElementById('checkmark-3')];

    fileInputs.forEach((fileInput, index) => {
      fileInput.addEventListener('change', () => {
        if (fileInput.files.length > 0) {
          uploadLabels[index].classList.add('uploaded'); // Arka plan rengini günceller
          checkmarks[index].style.display = 'block'; // Checkmark'ı gösterir
        } else {
          uploadLabels[index].classList.remove('uploaded'); // Arka plan rengini geri alır
          checkmarks[index].style.display = 'none'; // Checkmark'ı gizler
        }
      });
    });
  });
</script>

[PaulMartin]

Does the image at least end up in your Store's Files?

[PaulMartin]

I just tried the code you shared @uurokan , and I got the desired result you had. I can also download it.

There must be an issue with Shopify when the customer placed their order. Try contacting your customer and request for another photo.