Summary  
This chapter explains how to create and import a custom CSS file, use CSS selectors to override default styles (such as headings and paragraphs), and import external fonts via @import.  

General domain of usage  
Front-end web styling and theme customization.

Perus CSS-muutokset mahdollistavat Shopify-kauppasi ulkoasun ja tuntuman muokkaamisen teemojen oletusasetusten ulkopuolella. Tässä luvussa opit, kuinka **luot ja tuot uuden CSS-tiedoston** teemaan tyylimuutoksia varten.

## Vaiheet
1. **Uuden CSS-tiedoston luominen**: siirry kohtaan Online Store > Themes > Edit Code ja avaa Assets-kansio. Klikkaa Add a new asset, valitse Create a blank file ja nimeä tiedosto custom.css;
2. **CSS-koodin lisääminen**: avaa `custom.css`-tiedosto ja lisää seuraava koodi fonttien vaihtamiseksi ja otsikkotyylien säätämiseksi:
```css
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap');
h2 {
    font-family: 'Poppins', sans-serif;
    font-size: 42px;
    font-weight: 600;
color: #000;
}
```
3. **CSS-tiedoston liittäminen teemaan**: siirry tiedostoon `layout/theme.liquid` ja lisää seuraava rivi ennen sulkevaa `</head>`-tägiä liittääksesi uuden CSS-tiedoston: 
```html
{{ 'custom.css' | asset_url | stylesheet_tag }}
```
4. **Muutosten esikatselu**: tallenna muutokset ja esikatsele kauppaa nähdäksesi, miten fontti- ja otsikkotyylit ovat päivittyneet.

Missä luot uuden CSS-tiedoston Shopifyssa?

Miten tuot oman CSS-tiedoston Shopify-teemaan?

Miksi omien CSS-muutosten tekeminen on hyödyllistä?

Mikä on `Poppins`-fontin tuonnin tarkoitus esimerkissä?

Opi rakentamaan ja mukauttamaan oma verkkokauppasi Shopifyn avulla. Perusta kauppa, navigoi hallintapaneelissa ja lisää tuotteita. Luo ja muokkaa sivuja, lataa mediaa ja käytä perusmuotoilua brändisi mukaiseksi. Hyödynnä Shopifyn teemaeditoria ulkoasujen ja tuotekokoelmien mukauttamiseen. Määritä maksutavat, toimitukset ja kaupan käytännöt, ja julkaise sekä hallinnoi kauppaasi.

Opi Shopifyn perustason käyttöönotto ja teeman mukauttaminen. Tilin luomisesta hallintapaneelin ja teemarungon navigointiin, saat perustan kauppasi mukauttamiseen ja "Taste"-teeman uudelleenluomiseen.

Rakenna kauppasi perusta keskeisillä sivuilla, mediasisällöillä ja perusmuotoilulla. Opi luomaan ja muokkaamaan olennaisia sivuja, kuten Etusivu, Tietoa meistä ja Yhteystiedot, hallitsemaan mediatiedostoja sekä tekemään yksinkertaisia CSS-muutoksia kauppasi ulkoasun personoimiseksi. Kehitä käytännön taitoja teemojen resurssien käsittelyssä parantaaksesi Shopify-kauppasi ulkoasua ja toiminnallisuutta.

Hallitse myymälän mukauttamisen taito Shopify-teemaeditorilla. Tutustu asettelujen räätälöintiin, teemojen osioiden personointiin ja ainutlaatuisten suunnittelujen luomiseen. Opettele tuotekokoelmien asettaminen ja näyttäminen sekä tuotesuodattimien ja lajitteluvaihtoehtojen määrittäminen asiakaskokemuksen parantamiseksi.

Vie mukautustaitosi seuraavalle tasolle teemakohtaisten työkalujen ja olennaisten testausmenetelmien avulla. Opettele luomaan animaatioita, varmistamaan responsiivisuus ja ratkaisemaan ongelmia sujuvan käyttökokemuksen takaamiseksi. Päätä oppimispolkusi lopullisella katsauksella ja käyttöönotolla, jotta voit julkaista räätälöidyn Shopify-kauppasi luottavaisin mielin.

Perustason CSS-mukautus

Perustason CSS-mukautus