Koppla bilder till en variant
Guide för att associera produktbilder till specifika varianter så att rätt bild visas när du väljer en variant.
Du kan tilldela specifika bilder till en variant så att rätt bild visas när kunden t.ex. väljer en viss färg.
Så här tilldelar du bilder
- Gå till Produkter och klicka på Redigera på produkten
- Ladda upp alla bilder till produkten (alla färger/varianter)
- Gå till fliken Varianter
- Klicka på den variant som du vill koppla bilder till
- Välj de bilder som hör till den varianten
- Klicka på Spara
Visa i butiken
När en kund väljer en variant (t.ex. färgen "Röd") växlar bildgalleriet automatiskt till att visa de bilder som är kopplade till den valda varianten.
I ditt tema
Variantbilder hanteras automatiskt i de flesta teman. Om du har ett anpassat tema kan du använda det:
Variantlänken lagras på produkten, inte på själva varianten. Du går därför igenom produktbilderna och kontrollerar per bild om den är kopplad till ett specifikt variantvärde:
<{foreach $product->getImages() as $image}> <{$variant_value_id = $product->getVariantImage($image->getImageId())}> <{if !$variant_value_id || $variant_value_id == $selected_variant_value_id}>> <img src="<{$image|image:400:400:90}>" alt="<{$product->getTitle()}>"> <{/if}> <{/foreach}>
En oassocierad bild visas alltid (som standardbild), medan bilder med en specifik variantassociation endast visas när den varianten är vald.
Tips
- Ladda upp alla bilder först, tilldela dem till varianter efteråt
- Använd en konsekvent bakgrund på alla produktbilder för ett professionellt utseende
- Bilder som inte är kopplade till någon variant visas som standardbilder
Se även: Bildkvalitet och bildförhållande.
Behöver du hjälp med något? Kontakta oss på support@shoporama.dk.
Relaterade artiklar
Bilder importeras inte
Felsökning när produktbilder inte importeras korrekt via CSV i Shoporama.
Bilder på landningssidor
Så här laddar du upp bilder till en Shoporama-landningssida och visar dem korrekt i ditt tema med getImages() och getSrc().
Optimera bilder för mobila enheter
Guide till hur du använder responsiva bilder med srcset i ditt Shoporama-tema för att tillhandahålla optimerade bilder för mobila användare.