---
title: "Miten määrität myymälän globaalin tyylin? | Sovellus verkkokauppa - Oppaat - GoodBarber"
description: "Hei ja tervetuloa GoodBarberin takahuoneeseen. Tänään käsittelemme tehokasta työkalua sovelluksesi suunnitteluun: globaalia tyylivalikkoa. Globaalin tyylin avulla voit hallita sovelluksesi yleistä su…"
canonical_url: "https://fi.goodbarber.com/tutorials/shop/design/miten-maaritat-myymalan-globaalin-tyylin/"
lang: fi
---

# Miten määrität myymälän globaalin tyylin? | Sovellus verkkokauppa - Oppaat - GoodBarber

[Takaisin](https://fi.goodbarber.com/tutorials/shop/)

# Miten määrität myymälän globaalin tyylin?

Hei ja tervetuloa GoodBarberin takahuoneeseen. Tänään käsittelemme tehokasta työkalua sovelluksesi suunnitteluun: globaalia tyylivalikkoa. Globaalin tyylin avulla voit hallita sovelluksesi yleistä suunnittelua yhdestä valikosta. Tässä valikossa valitut värit, fontit ja tehosteet sovelletaan sovelluksesi jokaiseen osioon. Mutta ole varovainen, sillä jokainen tässä valikossa tehty muutos kohdistuu sovelluksesi kaikkiin osioihin. Napsauta valikossa Sisältö ja muotoilu > Muotoilu > Yleinen muotoilu, napsauta Global Style.

Ensin on valittava väriteema. Väriteema on yhdistelmä värejä, jotka sopivat täydellisesti yhteen. Globaali tyyli tarjoaa kirjaston väriteemoja. Voit selata kirjastoa napsauttamalla Muokkaa. Kuten näet, minulla on paljon vaihtoehtoja. Jos haluan muuttaa varsinaista teemaani, napsauta muokkausta, selaa sivun alareunaan ja napsauta Luo väriteema ja valitse sitten värit.

Siirrymme nyt puhelimiin. Sovelluksessa on hierarkia tekstin näyttämistä varten. Otsikoiden, tekstitysten, kappaleiden ja tekstin näyttämiseen käytetään 8 tasoa. Määritän fonttikoon, fontin jokaiselle tasolle. Valitusta fontista riippuen voin myös valita vaihtoehdon. Nyt painikkeet. Sovelluksen osioissa, jotka kutsuvat käyttäjiä suorittamaan toiminnon, valitsen haluamani painikkeen muodon.

Voin esikatsella lopputulosta klikkaamalla tästä. Sovelluksesi painikkeisiin liittyy useita hierarkiatasoja. Painikkeen muotoilu riippuu sovelluksesi väriteemasta. Harmoniaa kunnioittaen jokaiselle teemalle on saatavilla useita variaatioita. Seuraavassa on kolme erilaista muotoilutyyppiä kutakin hierarkiatasoa varten:
Taso 1 => painikkeen värillinen tausta ei ääriviivoja
Taso 2 => läpinäkyvä tausta painikkeen ääriviivat ja teksti värillisenä
Taso 3 => painikkeen läpinäkyvä tausta ilman ääriviivoja

Nyt kuvien hover-efektit. Tämä on käytettävissä vain PWA:ssa. Lopuksi lisäelementit, kuten takaisin-kuvake, joka näkyy otsikossa, kun navigoit kaupassasi. Tallennan muutoksen. Älä unohda, että kaikki nämä muutokset ohittavat kauppasi varsinaisen suunnittelun, mukaan lukien kaikki koukuttamattomat osiot.

Katsotaanpa, kyllä minä todella pidän kauppani ulkoasusta.

Näemme taas uudessa tutoriaalissa!

## Samanlaisia videoita

[SuunnitteluNavigointivalikon määrittäminen](/tutorials/shop/design/navigointivalikon-maarittaminen/)

![Navigointivalikon määrittäminen](https://portal.ww-cdn.com/portal_static/images/videos_shop11.4f7dad94042e.jpg)

[SuunnitteluValikon kuvakkeiden mukauttaminen](/tutorials/shop/design/valikon-kuvakkeiden-mukauttaminen/)

![Valikon kuvakkeiden mukauttaminen](https://portal.ww-cdn.com/portal_static/images/videos_shop12.6eeb6d5a859c.jpg)

[SuunnitteluSovelluksen etusivun määrittäminen](/tutorials/shop/design/sovelluksen-etusivun-maarittaminen/)

![Sovelluksen etusivun määrittäminen](https://portal.ww-cdn.com/portal_static/images/videos_shop13.e1aed198d25d.jpg)

[SuunnitteluKuinka mukauttaa splashscreeniä](/tutorials/shop/design/kuinka-mukauttaa-splashscreenia/)

![Kuinka mukauttaa splashscreeniä](https://portal.ww-cdn.com/portal_static/images/videos_shop14.5ba4ff60f4e0.jpg)

[SuunnitteluKuinka perustaa kauppasi otsikko](/tutorials/shop/design/kuinka-perustaa-kauppasi-otsikko/)

![Kuinka perustaa kauppasi otsikko](https://portal.ww-cdn.com/portal_static/images/videos_shop15.1e15b7c0b749.jpg)

[SuunnitteluMiten muokata kauppasi tärkeimpiä kuvakkeita?](/tutorials/shop/design/miten-muokata-kauppasi-tarkeimpia-kuvakkeita/)

![Miten muokata kauppasi tärkeimpiä kuvakkeita?](https://portal.ww-cdn.com/portal_static/images/videos_shop17.5fb60f1ec20f.jpg)

[SuunnitteluMiten suunnitella myymälän osat](/tutorials/shop/design/miten-suunnitella-myymalan-osat/)

![Miten suunnitella myymälän osat](https://portal.ww-cdn.com/portal_static/images/videos_shop18.471e5731e7e3.jpg)

[SuunnitteluKuinka irrottaa jakson muotoilu](/tutorials/shop/design/kuinka-irrottaa-jakson-muotoilu/)

![Kuinka irrottaa jakson muotoilu](https://portal.ww-cdn.com/portal_static/images/videos_shop19.6bfd3cd7cba1.jpg)

[SuunnitteluMiten valita otsikon koko ?](/tutorials/shop/design/miten-valita-otsikon-koko/)

![Miten valita otsikon koko ?](https://portal.ww-cdn.com/portal_static/images/videos_design_header.a341dbbe5c74.jpg)