Table of Contents

How to Display Code Snippets in Shopify's Blog Posts and Pages

Shopify’s content editor is mainly designed for writing blog posts and creating pages. However, if you want to display code snippets to showcase technical content, it’s important to ensure that the code retains its formatting and readability. Here's a step-by-step guide on how to achieve this.

1. Switch to HTML Mode

In the Shopify admin, go to Online Store > Pages (or Blog Posts). Open the page where you want to display the code snippet. In the content editor, click the <> (HTML) button to switch to HTML mode.

2. Use <pre> and <code> Tags

Once in HTML mode, wrap your code inside <pre> and <code> tags. This ensures your code maintains its formatting. Here’s an example:


function exampleFunction() {
    console.log("Hello, World!");
}

The <pre> tag preserves the white spaces and line breaks, while the <code> tag makes it clear that the enclosed text is a code block.

3. Style Your Code (Optional)

To make your code visually appealing, you can add custom CSS. Navigate to Online Store > Themes > Actions > Edit Code. Under the Assets folder, open your theme.css (or base.css) file and add the following CSS:


pre {
    background-color: #f0f0f0;
    padding: 10px;
    border-radius: 5px;
    overflow-x: auto;
}

code {
    font-family: monospace;
    color: #333;
}

This styling adds a background color, padding, and scrollable functionality, improving the appearance of your code snippet.

4. Save Your Changes

After adding your code and styling, click Save in the content editor. Preview your page or post to ensure the code snippet displays correctly and matches the design of your store.

Conclusion

Displaying code snippets in Shopify’s content editor is simple with the HTML mode and proper use of the <pre> and <code> tags. For better presentation, custom CSS can be applied to style the code snippets. This makes it easier for users to read and understand any technical content you share on your blog or pages.

Back to blog