How to edit HTML and CSS for your Shopify Store

How to edit HTML and CSS for your Shopify Store

Customising the HTML and CSS of your Shopify store allows for advanced customisations and a unique look and feel that perfectly aligns with your brand. Here’s a step-by-step guide on how to edit the HTML and CSS for your Shopify store:

How to Edit HTML and CSS for Your Shopify Store

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: Understand the Shopify Theme Structure

  1. In the theme code editor, you will see a list of folders and files on the left-hand side. The key folders include:
    • Layout: Contains the theme.liquid file which sets the structure for all pages.
    • Templates: Contains files for different types of pages (e.g., product.liquid, collection.liquid).
    • Sections: Contains modular components that can be included in various templates.
    • Snippets: Contains smaller pieces of reusable code.
    • Assets: Contains CSS, JavaScript, and image files.
    • Config: Contains theme settings and schema files.
    • Locales: Contains translation files for different languages.

Step 4: Edit HTML (Liquid) Files

  1. Find the File: Locate the file you want to edit in the Templates, Sections, or Snippets folders.
  2. Make Edits: Open the file and edit the HTML (Liquid) code. For example, to add a custom message to the product page, you might edit product.liquid:
    html
    <div class="custom-message"> <p>Thank you for shopping with us!</p> </div>
  3. Save Changes: After making your edits, click the "Save" button to apply the changes.

Step 5: Edit CSS Files

  1. Find the CSS File: Locate the main CSS file in the Assets folder. This file is often named theme.scss.liquid, styles.scss.liquid, or similar.
  2. Make Edits: Open the file and add or modify CSS rules. For example, to change the background colour of the header, you might add:
    css
    .site-header { background-color: #ff5733; }
  3. Save Changes: After making your edits, click the "Save" button to apply the changes.

Step 6: Adding Custom CSS (Optional)

  1. If you prefer to keep your custom CSS separate, you can create a new CSS file.
  2. Create a New CSS File:
    • In the Assets folder, click on "Add a new asset."
    • Select "Create a blank file" and name it (e.g., custom.css).
  3. Add Custom CSS: Open the newly created file and add your custom CSS rules.
  4. Link the New CSS File:
    • Open the theme.liquid file in the Layout folder.
    • Add the following line within the <head> section to include your custom CSS file:
      html
      <link rel="stylesheet" href="{{ 'custom.css' | asset_url }}">
  5. Save Changes: Click the "Save" button to apply the changes.

Step 7: Preview and Test

  1. Preview Your Store: Visit your store to see the changes you’ve made. Check different pages to ensure the HTML and CSS customisations appear as expected.
  2. Test Responsiveness: Ensure your customisations look good on various devices (desktop, tablet, and mobile).

Step 8: Troubleshoot Issues

  1. Check for Errors: If something doesn’t look right, review your code for errors or typos.
  2. Use Browser Developer Tools: Use tools like Chrome DevTools to inspect elements and debug issues.

Conclusion

Editing the HTML and CSS of your Shopify store allows for greater control over the design and functionality, helping you create a unique and branded online shopping experience. By following these steps, you can confidently customise your store to better reflect your brand’s identity and meet your specific needs.

Back to blog