A complete guide on Shopify custom code

Ever feel like your Shopify store design is just blending in with the crowd? Sure, Shopify’s themes are solid, but if you want a store that truly stands out, you need to spruce things up a bit. That’s where Shopify Custom Code comes in. Adding custom code lets you tweak your store’s design and functionality to better align with your brand’s identity and enhance the overall shopping experience. In this article, you'll learn how to add custom code to Shopify to enhance functionality and style so you can achieve your goals.

Instant's Shopify product page builder is a great way to add custom code to your Shopify store without knowing how to code. With Instant, you can create custom product pages that look and function exactly how you want them to.

Table of Content

• Understanding Shopify's theme structure

• Adding custom CSS for styling

• Custom JavaScript for enhanced functionality

• Implementing custom HTML

• 6 Best practices when adding custom code

• Optimize your Shopify store for conversions without breaking the bank with Instant's Shopify product page builder

  
  

Understanding Shopify's theme structure

Shopify's theme structure is a finely tuned system that lets you shape your store’s look and function. It comprises:

• Liquid (Shopify’s templating language)

• HTML

• CSS

• JavaScript

These parts work together to build your store’s design, layout, and features. 

Layout: Shaping the backbone

Layout files are the skeleton of a Shopify theme, holding elements that appear on multiple pages. The main layout file, `theme.liquid`, acts like the backbone, pulling together all templates and sections. It also includes the necessary scripts and styles for your site’s functions. Think of it as the framework that keeps everything in line.

Templates: Driving page content

Templates are the guides for what content shows up on specific page types like product or collection pages. They let you create variations for the same resource type, so you can show products differently. This is where you decide what customers see and how they interact with your store.

Sections: Building blocks for flexibility

Sections are the building blocks that give you flexibility in your page design. They’re modular pieces of code you can add to templates, making it easy to customize layouts without touching code. Common sections include:

• Headers

• Footers

• Hero banners

• Product galleries

They can be dynamic or static, providing an adaptable design approach.

Snippets: Keeping things neat

Snippets are like mini templates that you can reuse across different templates and sections. They help keep your code organized and reduce redundancy. Use Liquid tags to include snippets in templates, ensuring consistent functionality throughout your site’s design.

Assets: Holding your visual tools

The assets directory stores all static files used in your theme, like:

• Images

• CSS stylesheets

• JavaScript files

Merchants can tweak these files to change how their store looks and behaves. It’s where your visual and functional elements live.

Config: Making customization easy

The config directory houses files like `settings_schema.json`, defining customizable options in the theme editor. These settings let merchants adjust their store’s design without messing with code. It’s all about making things more accessible for users.

Locales: Supporting multiple languages

The locales directory contains translation files that allow for multilingual support. This helps merchants provide a localized experience for customers in different regions. It’s about making your store welcoming and accessible to more people.

Understanding Shopify's theme structure is crucial in customizing and managing your online store. you can create a shopping experience unique to your brand and meet your customers’ needs using:

• Layout files

• Templates

• Sections

• Snippets

• Assets

• Config settings

• Locales 

Adding custom CSS for styling

Adding custom CSS is your answer to breaking free from the confines of theme settings. Start by accessing the code editor through your Shopify admin. 

• Head to Online Store > Themes

• Find your theme, click "Actions," and select "Edit code." 

• Once there, expand the "Assets" folder to uncover your theme’s CSS files. These files are your gateway to personalized styling.

Keep it clean: Create a custom CSS file

Editing existing CSS files can get messy. Instead, create a separate file for your customizations. 

• In the "Assets" folder

• Click "Add a new asset,"

• Choose "Create a blank file,"

• Give it a name like "custom.css." 

• Drop your custom CSS code in here. 

This method keeps your changes safe from being overwritten during theme updates. 

Make it work: Link your custom CSS file

Creating the file is just the start—you must ensure it’s active. 

• Go to the "Layout" folder and open "theme.liquid." 

• Find the line linking the base CSS file, copy itn

• Replace the filename with your custom CSS file. 

For example, change the link to `{{ 'custom.css' | asset_url | stylesheet_tag }}`. This step ensures your custom styles are applied across your store.

Build high-converting product pages with Instant

Looking to elevate your store even further? Instant is a user-friendly Shopify product page builder that allows eCommerce teams to create advanced pages without coding. With its drag-and-drop interface, you can rapidly design high-converting landing pages while keeping full control over your store's design. Try Instant today!

Custom JavaScript for enhanced functionality

Implementing custom JavaScript in a Shopify store is a powerful way to improve user experience and add advanced functionality.

Accessing the Shopify admin

Start by logging into your Shopify admin panel. Ensure you're in the right place by navigating to the online store section on the left-hand side and selecting themes. From there, you'll be able to see your active theme. 

Editing theme code

Once in the themes section, find the Actions dropdown next to your active theme and select Edit code. This will launch the code editor, where you can adjust your theme's files. 

Creating a new JavaScript file

• Head over to the Assets directory on the left sidebar. 

• Create a new JavaScript file to hold all your custom code. 

• Click on add a new asset, choose to create a new JavaScript file (name it something like custom.js), 

• Insert any JavaScript code you need. 

Linking your JavaScript file

To ensure Shopify recognizes and uses your custom JavaScript file, you'll need to link it in your theme. Locate the theme.liquid file within the Layout directory in the left sidebar. Add this line before the closing </body> tag:

```liquid
{{ 'custom.js' | asset_url | script_tag }}
```

This tells Shopify to load your custom JavaScript file on every store page. 

Adding inline JavaScript

If you want to add small snippets of JavaScript directly within specific templates or sections, navigate to the relevant file where you want to insert inline JavaScript (e.g., product.liquid, index.liquid). Then, enclose your JavaScript code within <script> tags like this:

```html
<script>
  // Your custom JavaScript code here
  alert('Welcome to our store!');
</script>
```

Testing your changes

Once you've added your custom JavaScript, save all your changes and preview your store. Testing the functionality of any new features or scripts you've implemented is crucial to ensure they work as intended without causing errors.

Implementing custom HTML

Get started by logging into your Shopify account. Once inside, select Themes, head to the Online Store tab in the left-hand menu. This is your gateway to tweaking your store's look, feel, and functionality.

Editing your Shopify theme's code

To make real changes, you’ll need to get into the guts of your theme. Click on the Actions button next to your active theme and select Edit code. This will open the code editor, which lets you modify your theme’s files.

Adding custom HTML to Shopify

Creating a custom section

Need something unique? Create a new section. 

• In the code editor, find the Sections directory

• Click Add a new section. 

• Name it something like custom HTML and confirm. 

• Open your new file and drop in your HTML code. This could be anything from an embedded video to a contact form.

Modifying existing sections

If you want to spice up an existing section, locate that section file in the Sections directory and paste your HTML code in the right spot.

Using custom HTML blocks

Alternatively, head to the theme customizer to add a custom HTML block. 

• Click on Customize next to your active theme

• Choose the page you want

• Add a Custom HTML section

This gives you a dedicated space for your code.

Previewing and testing your changes

Before you hit publish, preview your changes. This step ensures that everything looks right and functions properly. Don’t forget to check how your custom HTML appears across different devices. You want it to look sharp on desktop, tablet, and mobile.

Exploring advanced customization for experienced users

For those with coding chops, you should explore deeper changes. Head to the Edit Code section and look for files like theme.liquid, header.liquid, or footer.liquid. These control broader aspects of your theme, allowing for more complex adjustments.

6 Best practices when adding custom code

As always, there are important tips to remember when editing your theme files. When adding custom code in Shopify, following best practices to ensure your store remains functional and visually appealing is crucial. Here are some key tips to keep in mind:

1. Backup your Shopify theme

Backing up your Shopify theme is a critical first step before making any changes. This ensures you have a safe version to revert to if something goes wrong. To back up your theme:

• Go to Online Store > Themes

• Click on Actions for your current theme, and select Duplicate. 

This creates a copy titled "Copy of [theme name]." It's advisable to rename the duplicate to reflect the date or purpose so you can easily identify it later. An untouched version of your theme is a safety net against unintended errors.

2. Track changes with comment code

Maintaining a log of your changes is essential, especially as you add more customizations over time. You can track changes in an external document or the code. Adding comments in your Liquid, JavaScript, or CSS files helps you and future developers understand what changes were made and why. 

For Liquid files, use {% comment %}Your comment here{% endcomment %}, while for CSS and JavaScript, use // Your comment here. This practice not only serves as documentation but also aids in troubleshooting.

3. Edit Shopify CSS for quick customization

Before diving into more complex coding, consider adjusting your CSS files directly. CSS is generally easier to manipulate without breaking your theme’s functionality, and it provides significant control over your store's appearance. By editing CSS, you can adjust elements such as:

• Colors

• Fonts

• Spacing

4. Use the inspect function to identify and preview customizations

Utilize your browser’s developer tools, like Chrome’s Inspect feature, to experiment with changes in real time. Right-click on any element in your store and select Inspect. This opens a pane where you can modify CSS and HTML, allowing you to see how changes affect the visual layout before committing them to your code. This method is beneficial for testing minor tweaks without altering the live site.

5. Make incremental changes

Make changes incrementally to minimize disruption and ensure functionality. After each adjustment, preview your store to see how the changes impact its performance and appearance. 

This approach lets you catch any issues early and ensures a smoother shopping experience for your customers. By making small, manageable changes, you can maintain the integrity of your theme’s functionality while enhancing its visual appeal.

6. Use page builders for easier customization

Consider using a page builder app like Instant page builder to avoid writing code altogether. These tools provide a user-friendly, drag-and-drop interface for customizing your store pages without writing any code. You can easily add, modify, and arrange elements like text, images, and buttons while maintaining complete control over design aspects such as colors and fonts.

Optimize your Shopify store for conversions without breaking the bank with Instant's Shopify product page builder

Instant isn't just another Shopify app; it's a game-changer. Imagine creating captivating product pages with the ease of a few clicks. No coding skills? No problem. Instant's drag-and-drop interface lets you design like a pro without a single line of custom code. Want to boost those conversion rates? Of course you do! 

With Instant, you can craft high-converting landing pages and sections that will make your store shine. Plus, it plays nice with Figma and other eCommerce tools, so your design process is seamless from start to finish.