myshop Skin en logo aanpassen

Maat: px

Weergave met pagina beginnen:

Download "myshop Skin en logo aanpassen"

Gijs de Meyer
6 jaren geleden
Aantal bezoeken:

Als je bij een webshop een andere skin wilt proberen is dit te doen door een paar keer te klikken. Houd er wel rekening mee dat dit grote gevolgen heeft voor je webshop.

1 Skin en logo aanpassen Wat leer je in dit hoofdstuk: - Hoe je een skin kan wijzigen - Hoe je de kleuren van een skin aanpast - Hoe je het logo aanpast - Hoe je het logo laat linken naar je homepage Inleiding Een webshop heeft een bepaalde look & feel die, als het goed is, aansluit bij de gekozen doelgroep. Kleurgebruik, vormen en lettertypes maken deel uit van die look & feel. Je kan bij myshop kiezen uit diverse skins. Hierin is bepaald waar het logo komt te staan en wat het kleurgebruik van o.a. de achtergronden, menu s en knoppen wordt. De gekozen skin bepaalt dus hoe je webshop eruitziet. Voor jouw webshop is al een skin gekozen. Verander niet zomaar van skin! Als je bij een webshop een andere skin wilt proberen is dit te doen door een paar keer te klikken. Houd er wel rekening mee dat dit grote gevolgen heeft voor je webshop. De marges zijn anders, waardoor plaatjes, banners en teksten ineens niet meer passen. Het kost een hoop tijd en werk om dit te herstellen in je nieuwe skin. Je kan de kleuren van de webshop eenvoudig veranderen door een andere kleurcombinatie van je skin te kiezen. Dat ga je in de volgende oefening doen. 1 Skin aanpassen 1. Indien je nog niet bent ingelogd in de backoffice van je webshop: log in via 2. Klik in de webshopdashboard op Pagina s

Je kunt hier teksten, plaatjes, sliders, etc. aanpassen en toevoegen.

2 Je gaat nu werken in het onderdeel Pagina s van je Webshop dashboard. In dit dashboard vind je alle knoppen om de inhoud van je pagina s te veranderen. Je kunt hier teksten, plaatjes, sliders, etc. aanpassen en toevoegen. Ook kun je hier het logo, de navigatie en de look & feel van je webshop wijzigen. Je gaat nu de kleuren van je skin veranderen. Je gaat nu de kleuren van je skin aanpassen. 3. Klik op Homepage

Je komt nu in het Pagina dashboard. In onderstaande schermafdruk zie je de Pagina-editor. Met deze editor zie je (in het midden) alle onderdelen die op dit moment op je homepage te zien zijn.

3 Je komt nu in het Pagina dashboard. In onderstaande schermafdruk zie je de Pagina-editor. Met deze editor zie je (in het midden) alle onderdelen die op dit moment op je homepage te zien zijn. Hier kun je heel eenvoudig onderdelen toevoegen en weghalen. Hoe dat werkt wordt besproken in een andere training. 4. Klik in het linker menu op Skin 5. Klik op Selecteer skin Als je op het tabblad Selecteer skin hebt geklikt zie je welke skin op dit moment actief is. In het geval van Bouwshopper is dat de skin Arabba, bij Jewelry kidz is Ortisei actief. Je gaat nu als test je skin wijzigen en weer terugzetten.

Dit komt omdat de keuze van de skin helemaal aan het begin van het ontwikkelen van de webshop gemaakt is.

4 6. Klik op de knop Selecteer een andere skin 7. Selecteer een willekeurige andere skin door te klikken op Selecteer deze skin 8. Bekijk je winkel door rechtsboven op Toon webshop te klikken of klik op het oogje De lay-out ziet er waarschijnlijk niet uit. Dit komt omdat de keuze van de skin helemaal aan het begin van het ontwikkelen van de webshop gemaakt is. Alle inhoud (plaatjes, teksten, banners, navigatie, logo) worden pas later toegevoegd en aangepast op de gekozen skin. 9. Verander de skin nu weer terug naar Arabba voor de Bouwshopper en naar Ortisei voor Jewelry Kidz. Deze skins vind je onder het tabblad Responsive.

Je hebt gemerkt dat het kiezen van een andere skin niet handig is, zeker als je al veel plaatjes, banners en teksten hebt gemaakt en in je winkel hebt geüpload.

Je gaat nu de kleur van je skin wijzigen. 10. Klik op in het linkermenu op Skin en daarna op Selecteer thema 11. Kies nu een thema 12.

5 Je hebt gemerkt dat het kiezen van een andere skin niet handig is, zeker als je al veel plaatjes, banners en teksten hebt gemaakt en in je winkel hebt geüpload. Om je winkel een andere look geven is het veranderen van de kleuren een betere optie. Als je dan ook het logo en de banners verandert heb je wel een goed resultaat en het scheelt je veel werk. Je gaat nu de kleur van je skin wijzigen. 10. Klik op in het linkermenu op Skin en daarna op Selecteer thema 11. Kies nu een thema 12. Bekijk je webshop via Toon webshop of klik op het oogje Je ziet nu dat de webshop een ander kleurenthema heeft, maar die kleuren zijn niet overal doorgevoerd. Je kan dit zien bij het logo en de banners. Dit komt omdat plaatjes die later zijn toegevoegd aan de webshop niet automatisch mee veranderen. Een aangepast logo hebben we al voor je gemaakt. Je gaat straks het aangepaste logo in je webshop plaatsen. Verander het kleurenthema dus NIET terug naar het origineel.

Als jij één of meerdere onderdelen een andere opmaak wil geven dan kan dat in de CSS-editor geavanceerd.

6 Je gaat in de volgende oefening alle onderdelen van de skin ineens van kleur laten veranderen. De designer van de skin heeft deze kleuren gekozen. Als jij één of meerdere onderdelen een andere opmaak wil geven dan kan dat in de CSS-editor geavanceerd. Je kan nog een stapje verder gaan. Als je zelf kan programmeren in HTML en CSS dan kun je hier je eigen gemaakte (aangepaste) skinbestanden uploaden. Zowel de CSS-editor geavanceerd als hoe je een skin maakt en uploadt behandelen we niet.

7 Je gaat nu bij de nieuwe kleur van je skin een bijpassend logo in je winkel uploaden. 2 Logo aanpassen 1. Maak een mapje op je computer of je usb-stick met de naam Logo s 2. Download het bestand logo s bouwshopper.zip of logo s jewelry.zip van en sla het bestand op. Je vindt de bestanden onder de locatie van deze cursus. 3. Pak de bestanden uit en zet ze in het mapje Logo s. Als het goed is heb je nu verschillende logo s met verschillende kleuren in de map staan. 4. Bekijk welk logo past bij het thema dat je zojuist hebt geselecteerd. 5. Klik in het webshop dashboard (indien nodig) op Pagina s en daarna op Homepagina en daarna op Skin 6. Klik nu op Header en daarna op Pagina Logo Hier kan je het logo aanpassen en uiteindelijk laten linken naar de homepage van de webshop.

8 Je komt nu op de onderstaande pagina terecht. Hier kan je logo aanpassen en uiteindelijk laten linken naar de homepage van de webshop. 7. Klik op het potloodje Je ziet nu allemaal afbeeldingen die al in het systeem staan. Het logo dat je gaat plaatsen staat nog op je usb-stick of je computer. Deze ga je eerst uploaden. 8. Klik op Uploaden

kleur 10. Klik op Gebruik deze afbeelding 11.

9 9. Klik op Selecteer bestand bij Layoutafbeeldingen en bestanden en browse naar het logo met de juiste kleur 10. Klik op Gebruik deze afbeelding 11. Het logo is nu actief. Bekijk nu het resultaat in je webwinkel

10 Als je op het logo klikt van je webwinkel wil je dat deze naar de homepagina springt van je website. Dit gebeurt niet automatisch en moet je handmatig instellen. 12. Ga naar de homepage van je webwinkel. 13. Kopieer de URL van je winkel vanuit de adresbalk. De URL heeft de opbouw winkelnummer.mijnwinkel.nl 14. Plak de URL in het vakje Logo linkt naar URL En klik op het vinkje 15. Test of de link werkt Je hebt nu: - het thema aangepast - bijbehorende logo in de webshop gezet - het logo laten linken naar de homepage. Als je straks een ander logo in je webshop wilt, weet je nu hoe je dat kan aanpassen. 3 Terugzetten 1. Verander het thema van de skin nu weer terug naar het origineel 2. Zet ook het originele logo terug in je webshop

Vergelijkbare documenten

myshop De homepage van Bouwshopper aanpassen deel 2

myshop De homepage van Bouwshopper aanpassen deel 2 De homepage van Bouwshopper aanpassen deel 2 Wat leer je in dit hoofdstuk: - Wat de Pagina-editor is - Welke blokken je op de homepage ziet - Hoe je een slider aanpast Inleiding In de vorige cursus heb