Why is my product image not showing up correctly after removing PageFly plugin?

Store Design
,

Topic summary

A user encountered a layout issue where product option images appeared at the bottom of the page in an oversized format instead of alongside the product card. This problem occurred after removing the PageFly plugin, which altered the page structure.

Technical Context:

  • The issue involved Liquid template code for rendering product images and variants
  • Code snippet showed logic for handling variant images, featured images, and aspect ratio calculations

Resolution:

  • The original poster resolved the problem independently using JSON
  • Required some template modifications (“had to redo it a little”)
  • Another user offered assistance but the issue was solved before further help was needed

Key Takeaway: Removing third-party page builder plugins like PageFly can break existing page structures and require manual template fixes to restore proper functionality.

Summarized with AI on November 24. AI used: claude-sonnet-4-5-20250929.
1

Hi all, help me fix the problem, I have a product options photo not on the side of the product card, but at the very bottom of the page is a huge size. I can not understand why this happened, there was a plugin PageFly, after removing it, the page structure is not the same as it was before the plugin, and broke down. I can not find a solution to this problem

{%- assign current_variant = product.selected_or_first_available_variant -%}
{%- assign current_variant_sale = false -%}
{% if current_variant.compare_at_price > current_variant.price %}
  {%- assign current_variant_sale = true -%}
{% endif %}

  
  
  

  {% comment %}
  ------------------------------------------------------------------------------
  Product Featured Image
  ------------------------------------------------------------------------------
  {% endcomment %}
  
    {% assign featured_image = current_variant.featured_image | default: product.featured_image %}
    {% for image in product.images %}
      {% if image.attached_to_variant? or image == featured_image %}

        {% assign max_height = 650 %}
        {% assign max_width = 980 %}
        {% assign max_aspect_ratio = 1.50769 %}

        {% comment %}
        We need to figure out the max width we want the image to be on the page
        based on the aspect ratio of the image and based on the size of the
        image.
        {% endcomment %}
        {% if image.aspect_ratio < max_aspect_ratio%}
          {% if image.height < max_height %}
            {% assign max_width = image.width | times: image.aspect_ratio | round %}
          {% else %}
            {% assign max_width = max_height | times: image.aspect_ratio | round %}
          {% endif %}
        {% else %}
          {% if image.width < max_width %}
            {% assign max_width = image.width %}
          {% endif %}
        {% endif %}

        {% comment %}
        Create a container for the image that will never go wider than the
        max width we determined above, and that will keep the same aspect ratio
        of the image by using 'padding-top'.
        {% endcomment %}
        

          

            {% comment %}
            Only give the visible variant image a src so that it shows an image
            as quickly as possible. Let lazysizes.js load in the other images when
            they become visible.
            {% endcomment %}
            {% assign img_url = image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}
            
          
        

      {% endif %}
    {% endfor %}
  

  {% comment %}
  ------------------------------------------------------------------------------
  Product Form & Description
  ------------------------------------------------------------------------------
  {% endcomment %}
  
    

      

        

          {% if section.settings.show_vendor %}
            {{ product.vendor }}
          {% endif %}

          # {{ product.title }}
          

            {{ 'products.product.sale_price' | t }}
            {{ 'products.product.price' | t }}
            {{ current_variant.price | money }}

            {{ 'products.product.regular_price' | t }}
            ~~{{ current_variant.compare_at_price | money }}~~
          

          {%- if shop.taxes_included or shop.shipping_policy.body != blank -%}
            
              {%- if shop.taxes_included -%}
                {{ 'products.product.include_taxes' | t }}
              {%- endif -%}
              {%- if shop.shipping_policy.body != blank -%}
                {{ 'products.product.shipping_policy_html' | t: link: shop.shipping_policy.url }}
              {%- endif -%}
            

          {%- endif -%}

        

        
          

            {{ product.description }}
          

          
            

              
              
              

              {% include 'product-form' %}

              {% if section.settings.show_share_buttons %}
                {% if settings.share_facebook or settings.share_twitter or settings.share_pinterest %}
                  
                    

                        {% include 'social-sharing', type: "product", links: 'bottom' share_title: product.title, share_permalink: product.url, share_image: product %}
                    

                  

                {% endif %}
              {% endif %}
            

          

        

      

    

  

  {% comment %}
  ------------------------------------------------------------------------------
  Product Share Buttons
  ------------------------------------------------------------------------------
  {% endcomment %}
  {% if section.settings.show_share_buttons %}
    {% if settings.share_facebook or settings.share_twitter or settings.share_pinterest %}
      
        

            {% include 'social-sharing', type: 'mobile', share_title: product.title, share_permalink: product.url, share_image: product %}
        

      

    {% endif %}
  {% endif %}

  {% comment %}
  ------------------------------------------------------------------------------
  Product Image Gallery
  ------------------------------------------------------------------------------
  {% endcomment %}
  {% if product.images.size > 1 %}

    {% comment %}
      If we are hiding variant images which are displayed at the top of the
      page, then find total number images not set as a variant image or as the
      featured image.

      We need the total number of images to be displayed so that we know what
      arrangement the images need to be positioned in, i.e. rows of 3 or 2
      images.
    {% endcomment %}

    {% if section.settings.hide_variant_images %}
      {% assign totalImages = 0 %}
      {% for image in product.images %}
        {% unless image.attached_to_variant? %}
          {% assign totalImages = totalImages | plus: 1 %}
        {% endunless %}
      {% endfor %}
    {% else %}
      {% assign totalImages = product.images.size %}
    {% endif %}

    {% comment %}
      Insert images into rows of 3 and/or 2 depending on the total number of
      images.
    {% endcomment %}
    {% assign totalModulus = totalImages | modulo:3 %}

    {% if totalImages == 1 %}{% endif %}

    

      {% for image in product.images %}

        {% unless image.attached_to_variant? and section.settings.hide_variant_images %}

          

            
              {% assign img_url = image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}
              

              
            
          

        {%  endunless %}
      {% endfor %}
    

    {% if totalImages == 1 %}
{% endif %}
  {% endif %}

  {% comment %}
  ------------------------------------------------------------------------------
  Product Slideshow
  ------------------------------------------------------------------------------
  {% endcomment %}
  {% unless product.images.size == 0 %}
    
      

      

        

          {% for image in product.images %}
            

              

                {% assign img_url = image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}
                
                {% include 'spinner' %}
              

            

          {% endfor %}
        

        {% unless product.images.size == 1 %}
          
            

            

              {% for image in product.images %}
                
              {% endfor %}
            

            
          

        {% endunless %}
      

    

  {% endunless %}

  {% comment %}
  ------------------------------------------------------------------------------
  Product Data
  ------------------------------------------------------------------------------
  {% endcomment %}
  

{% schema %}
{
  "name": {
    "de": "Produktseiten",
    "en": "Product pages",
    "es": "Páginas de productos",
    "fr": "Pages de produits",
    "it": "Pagine di prodotto",
    "ja": "商品ページ",
    "nl": "Productpagina's",
    "pt-BR": "Páginas de produtos",
    "zh-CN": "产品页面",
    "zh-TW": "產品頁面"
  },
  "settings": [
    {
      "type": "checkbox",
      "id": "show_quantity_selector",
      "label": {
        "de": "Mengenauswahl anzeigen",
        "en": "Show quantity selector",
        "es": "Mostrar selector de cantidad",
        "fr": "Afficher le sélecteur de quantité",
        "it": "Mostra selettore quantità",
        "ja": "数量セレクターを表示する",
        "nl": "Hoeveelheidskiezer weergeven",
        "pt-BR": "Exiba um seletor de quantidade",
        "zh-CN": "显示数量选择器",
        "zh-TW": "顯示數量選擇器"
      },
      "default": false
    },
    {
      "type": "checkbox",
      "id": "show_variant_labels",
      "label": {
        "de": "Varianten-Etiketten anzeigen",
        "en": "Show variant labels",
        "es": "Mostrar etiquetas de variantes",
        "fr": "Afficher le nom des variantes",
        "it": "Mostra etichette varianti",
        "ja": "バリエーションのラベルを表示する",
        "nl": "Variantlabels weergeven",
        "pt-BR": "Exibir etiquetas variantes",
        "zh-CN": "显示变体标签",
        "zh-TW": "顯示子類選項標籤"
      },
      "default": true
    },
    {
      "type": "checkbox",
      "id": "show_vendor",
      "label": {
        "de": "Produktverkäufer anzeigen",
        "en": "Show product vendor",
        "es": "Mostrar proveedor del producto",
        "fr": "Afficher le distributeur du produit",
        "it": "Indica fornitore prodotto",
        "ja": "商品の販売元を表示する",
        "nl": "Productleverancier weergeven",
        "pt-BR": "Exiba o fornecedor do produto",
        "zh-CN": "显示产品厂商",
        "zh-TW": "顯示產品廠商"
      },
      "default": true
    },
    {
      "type": "checkbox",
      "id": "hide_variant_images",
      "label": {
        "de": "Variantenbilder in der Galerie ausblenden",
        "en": "Hide variant images in gallery",
        "es": "Ocultar imágenes de variantes en galería",
        "fr": "Masquer les variantes d'images dans la galerie",
        "it": "Nascondi immagini varianti in galleria",
        "ja": "ギャラリーのバリエーション画像を非表示にする",
        "nl": "Variantafbeeldingen verbergen in galerie",
        "pt-BR": "Ocultar imagens de variantes na galeria",
        "zh-CN": "在图库中隐藏变体图片",
        "zh-TW": "在圖庫中隱藏子類選項圖片"
      },
      "default": true
    },
    {
      "type": "checkbox",
      "id": "enable_payment_button",
      "label": {
        "de": "Dynamischen Checkout Button anzeigen",
        "en": "Show dynamic checkout button",
        "es": "Mostrar botón de pago dinámico",
        "fr": "Afficher le bouton de passage à la caisse dynamique",
        "it": "Mostra pulsante di check-out dinamico",
        "ja": "ダイナミックチェックアウトボタンを表示する",
        "nl": "Dynamische kassaknop weergeven",
        "pt-BR": "Exibir botão dinâmico de finalização da compra",
        "zh-CN": "显示动态结账按钮",
        "zh-TW": "顯示動態結帳按鈕"
      },
      "info": {
        "de": "Jeder Kunde sieht seine bevorzugte Zahlungsmethode aus den in Ihrem Shop verfügbaren Zahlungsmethoden wie PayPal oder Apple Pay. [Mehr Infos](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
        "en": "Each customer will see their preferred payment method from those available on your store, such as PayPal or Apple Pay. [Learn more](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
        "es": "Cada cliente verá su forma de pago preferida entre las disponibles en tu tienda, como PayPal o Apple Pay. [Más información](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
        "fr": "Chaque client verra son moyen de paiement préféré parmi ceux qui sont proposés sur votre boutique, tels que PayPal ou Apple Pay. [En savoir plus](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
        "it": "Ogni cliente vedrà il suo metodo di pagamento preferito tra quelli disponibili nel tuo negozio, come PayPal o Apple Pay. [Maggiori informazioni](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
        "ja": "PayPalやApple Payなど、ストアで利用可能な希望の決済方法がお客様に表示されます。[もっと詳しく](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
        "nl": "Elke klant ziet zijn of haar beschikbare voorkeursmethode om af te rekenen, zoals PayPal of Apple Pay. [Learn more](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
        "pt-BR": "Cada cliente verá seu método de pagamento preferido dentre os disponíveis na loja, como PayPal ou Apple Pay. [Saiba mais](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
        "zh-CN": "每位客户都可在您商店提供的付款方式中看到他们的首选付款方式，例如 PayPal 或 Apple Pay。[了解详细信息](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
        "zh-TW": "每位客戶都可以在您商店內開放使用的付款方式中看見他們偏好使用的方式，如 PayPal、Apple Pay 等。[深入瞭解相關資訊](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)"
      },
      "default": true
    },
    {
      "type": "checkbox",
      "id": "show_share_buttons",
      "label": {
        "de": "Buttons für Social Media anzeigen",
        "en": "Show social sharing buttons",
        "es": "Mostrar botones para compartir en redes sociales",
        "fr": "Afficher les boutons de partage sur les médias sociaux",
        "it": "Mostra i pulsanti per la condivisione sui social",
        "ja": "ソーシャル共有ボタンを表示する",
        "nl": "Knoppen voor delen via social media weergeven",
        "pt-BR": "Exibir botões de compartilhamento em redes sociais",
        "zh-CN": "显示社交分享按钮",
        "zh-TW": "顯示社群分享按鈕"
      },
      "info": {
        "de": "Vergewissern Sie sich, dass Sie in den allgemeinen Einstellungen das Teilen in sozialen Netzwerken aktiviert haben",
        "en": "Make sure you have enabled social sharing in general settings",
        "es": "Asegúrate de haber habilitado la opción para compartir en redes sociales en la configuración general.",
        "fr": "Assurez-vous d'avoir activé le partage social dans les paramètres généraux",
        "it": "Assicurati di aver abilitato la condivisione sui social nelle impostazioni generali",
        "ja": "一般設定でソーシャル共有を有効にしていることを確認してください。",
        "nl": "Zorg ervoor dat u delen via social media hebt ingeschakeld in de algemene instellingen",
        "pt-BR": "Verifique se você habilitou o compartilhamento em redes sociais nas configurações gerais",
        "zh-CN": "确保您在常规设置中启用了社交分享",
        "zh-TW": "請確定您已在一般設定內啟用社群分享功能"
      },
      "default": true
    }
  ]
}
{% endschema %}

PP-1.png
PP-1.png1593×922 127 KB

2

Hi @Pavloguerro
Thank you for your question.
Please share your store URL, page URL and also password (if your store has one) so we can help you.

3

Hello, I solved the problem using JSON, the template is old, I had to redo it a little