Perustason 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
- 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;
- 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;
}
- CSS-tiedoston liittäminen teemaan: siirry tiedostoon
layout/theme.liquidja lisää seuraava rivi ennen sulkevaa</head>-tägiä liittääksesi uuden CSS-tiedoston:
{{ 'custom.css' | asset_url | stylesheet_tag }}
- 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ä?
Kiitos palautteestasi!
Kysy tekoälyä
Kysy tekoälyä
Kysy mitä tahansa tai kokeile jotakin ehdotetuista kysymyksistä aloittaaksesi keskustelumme
Can you explain how to use Google Fonts with Shopify in more detail?
What should I do if my custom CSS changes aren't showing up on my store?
How can I customize other elements besides headings and paragraphs?
Mahtavaa!
Completion arvosana parantunut arvoon 6.25Perustason 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
- 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;
- 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;
}
- CSS-tiedoston liittäminen teemaan: siirry tiedostoon
layout/theme.liquidja lisää seuraava rivi ennen sulkevaa</head>-tägiä liittääksesi uuden CSS-tiedoston:
{{ 'custom.css' | asset_url | stylesheet_tag }}
- 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ä?
Kiitos palautteestasi!
