Afbeeldingen in de shop invoegen

Maat: px

Weergave met pagina beginnen:

Download "Afbeeldingen in de shop invoegen"

Renée Abbink
6 jaren geleden
Aantal bezoeken:

1 Afbeeldingen in de shop invoegen

Wat leer je in dit hoofdstuk: - Het verschil tussen een webshopafbeelding en een productafbeelding - Webshopafbeeldingen uploaden in de backoffice - Webshopafbeeldingen in je shop plaatsen - Werken

2 Wat leer je in dit hoofdstuk: - Het verschil tussen een webshopafbeelding en een productafbeelding - Webshopafbeeldingen uploaden in de backoffice - Webshopafbeeldingen in je shop plaatsen - Werken in de teksteditor Inleiding Je gaat leren hoe je in jouw webwinkel afbeeldingen zet. Soorten afbeeldingen in een webshop: - Webshopafbeeldingen, zoals: o Banners o Call to action-buttons o Achtergrondafbeeldingen - Productplaatjes Afbeeldingen zorgen ervoor dat je shop er aantrekkelijk uitziet en wijzen de consument (via links) de weg. Daarnaast laten ze zien hoe producten eruit zien. Op dit moment staan er diverse afbeeldingen in je shop, maar deze staan op een externe server. Je gaat nu leren hoe je afbeeldingen in je eigen shop kunt zetten en hoe je die afbeeldingen kunt gebruiken 1 Uploaden afbeeldingen 1. Download het bestandje modesokken.zip van 2. Sla het bestand op op je USB of computer Waarschijnlijk staat het bestand in de map downloads op je computer

3. Klik op Afbeelding- & bestandsbeheer Het onderstaande scherm

Zoals in de inleiding vermeld zie je geen afbeeldingen in je

Op dit moment wordt er uitsluitend gewerkt met afbeeldingen op

Klik op Upload De juiste map Productafbeeldingen plaats je bij

3 3. Klik op Afbeelding- & bestandsbeheer Het onderstaande scherm krijg je nu te zien. Zoals in de inleiding vermeld zie je geen afbeeldingen in je backoffice. Op dit moment wordt er uitsluitend gewerkt met afbeeldingen op een server 4. Klik op Upload De juiste map Productafbeeldingen plaats je bij Product afbeeldingen (zie volgende pagina). Afbeeldingen die je bijvoorbeeld als achtergrond of als banner wilt gebruiken plaats je bij Webshop afbeeldingen! Zorg dat je altijd alle afbeeldingen in de juiste map plaatst!

4 5. Ga naar Upload nieuwe afbeeldingen Let op! Je gaat (diverse) webshop afbeeldingen plaatsen en dat betekent dus ook dat je de afbeeldingen in de juiste map moeten plaatsen 6. Klik bij Webshop afbeeldingen op Selecteer Nu ga je het.zip bestand uploaden met daarin meerdere plaatjes. Je kunt in de toekomst ook een enkel plaatje uploaden, dat werk op dezelfde manier. 7. Zoek het document modesokken.zip op je computer Het systeem geeft aan dat de afbeeldingen zijn geüpload

5 8. Klik op Webshop afbeeldingen. Zo controleer je of het uploaden gelukt is. Als het goed is krijg je onderstaand resultaat te zien 9. Klik nu banner.jpg en vervolgens op Voorvertoning

Een browser zet deze URL om en laat de afbeelding zien.

6 10. Je krijgt nu de afbeelding te zien, met daaronder de locatie van de afbeelding op internet (de URL). Elk bestand heeft een URL. In je shop wordt dus de URL opgenomen en niet de afbeelding. Een browser zet deze URL om en laat de afbeelding zien. 2 Afbeeldingen in je shop plaatsen Je gaat gaan nu eerst bekijken hoe de huidige afbeeldingen in de shop zitten 1. Klik op Pagina selecteren en daarna op Home pagina

7 Je komt automatisch in de Pagina editor van de backoffice terecht 2. Klik op het potloodje bij Afbeelding Je gaat de afbeelding die in je shop staat vervangen door een andere afbeelding 3. Klik op het potloodje onder het plaatje 4. Klik op het tabblad Webshop afbeeldingen

8 5. Kies de afbeelding banner.jpg en klik op Origineel 6. Bekijk vervolgens het resultaat in je webshop Pas als laatste de Linkgrid aan. Vervang de externe links door de afbeeldingen die je geüpload hebt. 7. Klik op het tabblad Links en vervang de afbeeldingen

9 3 Locatie van een afbeelding bepalen en linkgrid aanpassen 1. Open je shop in een internetbrowser naar keuze Als je op de indeling kijkt van de homepage zie je afbeeldingen met daarop: Dames, Heren en Kinderen. Deze afbeeldingen komen niet uit je eigen webshop. Maar hoe weet je dat? In elke browser kun je zien (door op de rechtermuisknop te klikken) wat de locatie van de afbeelding is. 2. Klik met je rechtermuisknop op de afbeelding met daarop Dames 3. Kies voor Adres van afbeelding kopiëren (Safari: Kopieer locatie van afbeelding, Firefox: Afbeeldingsinfo bekijken, etc.) 4. Kopieer het adres in een nieuw tabblad

Als je kijkt naar de locatie van de afbeelding dan zie je de volgende locatie: https://myshop.s3-external-3.amazonaws.com/shop5044400.images.dames.jpg Je ziet in de link het shopnummer 504400 staan.

10 Als je kijkt naar de locatie van de afbeelding dan zie je de volgende locatie: Je ziet in de link het shopnummer staan. Dat is niet jouw shopnummer. Je hebt eerder al diverse afbeeldingen in je shop geüpload. Daaronder zaten de afbeeldingen dames, heren en kinderen. Je gaat in de volgende opdracht de plaatjes die je geupload hebt in jouw shop zetten. 5. Ga terug naar je backoffice 6. Klik op het potloodje bij Link Grid 7. Verwijder eerst de afbeelding Dames (klik op het kruisje) en vervang hem door de afbeelding Dames die je in je shop hebt geüpload. (klik op het potloodje) 8. Doe hetzelfde met de afbeeldingen Heren en Kinderen 9. Controleer in een browser of het gelukt is

11 4 Teksteditor aanpassen Als je verder op de indeling kijkt van de homepage zie je onder het Link Grid een blok Tekst staan. Dit is een zogeheten teksteditor. In deze teksteditor kun je tekst en plaatjes zetten op een Word-achtige manier 1. Klik op het potloodje bij Tekst Je komt nu in de teksteditor terecht.

De afbeelding ga je in de volgende opdracht vervangen met een afbeelding die je in het begin van de cursus hebt geüpload. 1.

12 In deze teksteditor staat één afbeelding met daarin een paar logo s van sokkenmerken. Ook dit plaatje komt niet uit de eigen webshop. Weet je nog hoe je dat kan controleren? De afbeelding ga je in de volgende opdracht vervangen met een afbeelding die je in het begin van de cursus hebt geüpload. 1. Verwijder eerst de afbeelding in de teksteditor 2. Voeg de juiste afbeelding toe door op het icoontje te klikken 3. Typ nu boven de afbeelding met de merken de tekst -ONZE MERKEN - en onder de afbeelding -TOP DEALS - 4. Zorg dat de tekst wordt gecentreerd en los staat van de afbeelding 5. Bekijk het resultaat in een browser

4 Opdrachten 1. Voeg helemaal onderaan zelf een Link Grid toe (door te slepen vanuit het tabblad navigatie) 2. Plaats in de Link Grid de volgende afbeeldingen: nieuws1.jpg, nieuws2.jpg en nieuws3.

13 4 Opdrachten 1. Voeg helemaal onderaan zelf een Link Grid toe (door te slepen vanuit het tabblad navigatie) 2. Plaats in de Link Grid de volgende afbeeldingen: nieuws1.jpg, nieuws2.jpg en nieuws3.jpg Tip: Kies in het tabblad Link Grid voor de 9 blokjes (3 naast elkaar) 3. Zorg dat de tekst NIEUWS gecentreerd boven het Link Grid komt te staan 4. Plaats onder de Link Grid een Tekst Grid met, bij elk van de nieuwtjes, een verhaaltje van maximaal 3 regels

5. De banner van Happy socks heeft nog geen tekst deze ga je daarom (nogmaals) vervangen: - Download het bestand banner_happy_socks.jpg van www.

14 5. De banner van Happy socks heeft nog geen tekst deze ga je daarom (nogmaals) vervangen: - Download het bestand banner_happy_socks.jpg van - Upload de banner in het systeem onder Webshopafbeeldingen - Vervang de afbeelding Banner.jpg door de Happy socks-banner Einde van de cursus

Vergelijkbare documenten

De homepage van Jewelry Kidz aanpassen deel 2

De homepage van Jewelry Kidz aanpassen deel 2 Wat leer je in dit hoofdstuk: - Wat de Pagina-editor is - Welke blokken je op de homepage ziet - Hoe je blokken kan toevoegen - Hoe je blokken kan aanpassen