How to Customise your Shopify Store - Custom CSS

How to Customise your Shopify Store - Custom CSS

Customising your Shopify store using custom CSS allows you to fine-tune the appearance of your website beyond the default theme settings. Here’s a step-by-step guide on how to add and use custom CSS in your Shopify store:

How to Customise Your Shopify Store with Custom CSS

Step 1: Access Your Shopify Admin

  1. Log in to your Shopify account.
  2. Once logged in, you’ll be directed to your Shopify admin dashboard.

Step 2: Navigate to the Theme Editor

  1. From the Shopify admin dashboard, go to "Online Store" and click on "Themes."
  2. Locate your current theme and click the "Actions" button next to it.
  3. Select "Edit code" from the dropdown menu to open the theme code editor.

Step 3: Find the Theme's CSS File

  1. In the theme code editor, look for the Assets folder in the left-hand sidebar.
  2. Locate the main CSS file. This file is often named theme.scss.liquid, styles.scss.liquid, or similar. Click on this file to open it.

Step 4: Add Your Custom CSS

  1. Scroll to the bottom of the CSS file to add your custom CSS rules.
  2. Enter your custom CSS. For example:
    css
    /* Custom header background colour */ .site-header { background-color: #ff5733; } /* Custom font size for product titles */ .product-single__title { font-size: 24px; color: #333333; } /* Custom button style */ .btn { background-color: #007bff; border-radius: 5px; color: #ffffff; padding: 10px 20px; }
  3. Save your changes by clicking the "Save" button at the top right of the editor.

Step 5: Preview Your Changes

  1. After saving your changes, go to your store’s front end to see the custom CSS in action.
  2. Check different pages (e.g., home page, product pages, collection pages) to ensure your custom styles are applied correctly.

Step 6: Troubleshooting and Adjustments

  1. If your custom CSS does not appear as expected, clear your browser cache and refresh the page.
  2. Make sure your CSS selectors are correct and specific enough to override the default styles.
  3. If necessary, use the !important declaration to ensure your styles are applied. For example:
    css
    .site-header { background-color: #ff5733 !important; }

Step 7: Using Additional CSS Files (Optional)

  1. If you prefer to keep your custom CSS separate from the main theme CSS file, you can create a new CSS file.
  2. In the theme code editor, click on "Add a new asset" in the Assets folder.
  3. Select "Create a blank file" and name it (e.g., custom.css).
  4. Add your custom CSS to this new file and save it.
  5. To link this new CSS file to your theme, locate the theme.liquid file in the Layout folder and open it.
  6. Add the following line within the <head> section to include your custom CSS file:
    html
    <link rel="stylesheet" href="{{ 'custom.css' | asset_url }}">
  7. Save your changes and preview your store to ensure your custom CSS is applied.

Conclusion

Adding custom CSS to your Shopify store allows you to personalise the design and improve the overall look and feel of your site. By following these steps, you can ensure that your custom styles are properly integrated and enhance your store's visual appeal.

Back to blog