Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Oppiskele Perustason CSS-mukautus | Sivujen ja Sisällön Mukauttaminen
Shopify-kaupan Hallinta

bookPerustason CSS-mukautus

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:
@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;
}
  1. CSS-tiedoston liittäminen teemaan: siirry tiedostoon layout/theme.liquid ja lisää seuraava rivi ennen sulkevaa </head>-tägiä liittääksesi uuden CSS-tiedoston:
{{ 'custom.css' | asset_url | stylesheet_tag }}
  1. Muutosten esikatselu: tallenna muutokset ja esikatsele kauppaa nähdäksesi, miten fontti- ja otsikkotyylit ovat päivittyneet.

1. Missä luot uuden CSS-tiedoston Shopifyssa?

2. Mitä annettu CSS-koodi muuttaa?

3. Miten tuot oman CSS-tiedoston Shopify-teemaan?

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

5. Mikä on Poppins-fontin tuonnin tarkoitus esimerkissä?

question mark

Missä luot uuden CSS-tiedoston Shopifyssa?

Select the correct answer

question mark

Mitä annettu CSS-koodi muuttaa?

Select the correct answer

question mark

Miten tuot oman CSS-tiedoston Shopify-teemaan?

Select the correct answer

question mark

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

Select the correct answer

question mark

Mikä on Poppins-fontin tuonnin tarkoitus esimerkissä?

Select the correct answer

Oliko kaikki selvää?

Miten voimme parantaa sitä?

Kiitos palautteestasi!

Osio 2. Luku 3

Kysy tekoälyä

expand

Kysy tekoälyä

ChatGPT

Kysy mitä tahansa tai kokeile jotakin ehdotetuista kysymyksistä aloittaaksesi keskustelumme

Awesome!

Completion rate improved to 6.25

bookPerustason CSS-mukautus

Pyyhkäise näyttääksesi valikon

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:
@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;
}
  1. CSS-tiedoston liittäminen teemaan: siirry tiedostoon layout/theme.liquid ja lisää seuraava rivi ennen sulkevaa </head>-tägiä liittääksesi uuden CSS-tiedoston:
{{ 'custom.css' | asset_url | stylesheet_tag }}
  1. Muutosten esikatselu: tallenna muutokset ja esikatsele kauppaa nähdäksesi, miten fontti- ja otsikkotyylit ovat päivittyneet.

1. Missä luot uuden CSS-tiedoston Shopifyssa?

2. Mitä annettu CSS-koodi muuttaa?

3. Miten tuot oman CSS-tiedoston Shopify-teemaan?

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

5. Mikä on Poppins-fontin tuonnin tarkoitus esimerkissä?

question mark

Missä luot uuden CSS-tiedoston Shopifyssa?

Select the correct answer

question mark

Mitä annettu CSS-koodi muuttaa?

Select the correct answer

question mark

Miten tuot oman CSS-tiedoston Shopify-teemaan?

Select the correct answer

question mark

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

Select the correct answer

question mark

Mikä on Poppins-fontin tuonnin tarkoitus esimerkissä?

Select the correct answer

Oliko kaikki selvää?

Miten voimme parantaa sitä?

Kiitos palautteestasi!

Osio 2. Luku 3
some-alt