A complete guide on Shopify custom code
Instant Team
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
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.
Weekly Shopify tips from our founder in your inbox. Read in 3-mins or less. Start converting like an eCommerce expert.
More stories
Instant News
·
Oct 31, 2024
Shopify
·
Oct 28, 2024
eCommerce
·
Oct 26, 2024