Learn Basic CSS Customization | Customizing Pages and Content

Basic CSS changes allow you to customize the look and feel of your Shopify store beyond the theme's default settings. In this chapter, you'll learn how to create and import a new CSS file to your theme for styling changes.

Steps

Creating a New CSS File: go to Online Store > Themes > Edit Code and open the Assets folder. Click Add a new asset, choose Create a blank file, and name it custom.css;

Adding CSS Code: open your custom.css file and add this code to change fonts and adjust the heading styles:

@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;
}

Linking Your CSS File to Your Theme: go to the layout/theme.liquid file and add the following line before the closing </head> tag to link your new CSS file:
```
{{ 'custom.css' | asset_url | stylesheet_tag }}
```
Previewing Your Changes: save your changes and preview your store to see how the font and heading styles have been updated.

Everything was clear?

Thanks for your feedback!

Section 2. Chapter 3

Ask AI

Ask anything or try one of the suggested questions to begin our chat

Suggested prompts:

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?

Awesome!

Completion rate improved to 6.25

Swipe to show menu

Steps

Creating a New CSS File: go to Online Store > Themes > Edit Code and open the Assets folder. Click Add a new asset, choose Create a blank file, and name it custom.css;

Adding CSS Code: open your custom.css file and add this code to change fonts and adjust the heading styles:

@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;
}

Linking Your CSS File to Your Theme: go to the layout/theme.liquid file and add the following line before the closing </head> tag to link your new CSS file:
```
{{ 'custom.css' | asset_url | stylesheet_tag }}
```
Previewing Your Changes: save your changes and preview your store to see how the font and heading styles have been updated.

Everything was clear?

Thanks for your feedback!

Section 2. Chapter 3

Basic CSS Customization

Steps

1. Where do you create a new CSS file in Shopify?

2. What does the CSS code provided change?

3. How do you import a custom CSS file into your Shopify theme?

4. Why is it useful to make custom CSS changes?

5. What is the purpose of importing the `Poppins` font in the example?

Awesome!

Basic CSS Customization

Steps

1. Where do you create a new CSS file in Shopify?

2. What does the CSS code provided change?

3. How do you import a custom CSS file into your Shopify theme?

4. Why is it useful to make custom CSS changes?

5. What is the purpose of importing the `Poppins` font in the example?

Basic CSS Customization

Steps

1. Where do you create a new CSS file in Shopify?

2. What does the CSS code provided change?

3. How do you import a custom CSS file into your Shopify theme?

4. Why is it useful to make custom CSS changes?

5. What is the purpose of importing the Poppins font in the example?

Awesome!

Basic CSS Customization

Steps

1. Where do you create a new CSS file in Shopify?

2. What does the CSS code provided change?

3. How do you import a custom CSS file into your Shopify theme?

4. Why is it useful to make custom CSS changes?

5. What is the purpose of importing the Poppins font in the example?

5. What is the purpose of importing the `Poppins` font in the example?

5. What is the purpose of importing the `Poppins` font in the example?