Custom Code in Shopify: Implementation & Benefits

Imagine this: Your Shopify store is thriving, but you suddenly hit a wall. The standard theme, while functional, may not be capturing your unique brand vision or offer a specific feature you desperately need. This limitation can stifle growth, leading to a generic online presence that fails to connect with your target audience.

But there’s a solution. By understanding and implementing custom code in Shopify, you can transform your store into a truly bespoke and high-performing platform.

Through this blog, we’ll explain how the Shopify experts implement custom code for a unique experience. Let’s begin.

Key Aspects for Custom Code in Shopify

There are some aspects of Shopify that will serve you well with custom codes.

Liquid Customization

Liquid is the heart of Shopify’s templating system, and it’s used to display dynamic content in your store. If you need more than what Shopify’s theme editor offers, you can dive into Liquid code to customize your templates.

• Customizing Templates: Shopify’s themes come with predefined templates (e.g., product pages, collection pages, and checkout pages). You can modify these templates by accessing the Liquid files under Online Store > Themes > Edit Code.

{{ product.title }}
{{ product.price | money }}

• Dynamic Content: Liquid allows you to pull data from your Shopify store and display it dynamically. For example, you can display a customer’s name or their cart contents with:

{{ customer.first_name }}
{{ cart.item_count }}

• Creating Custom Sections: Shopify Online Store 2.0 allows you to create reusable content blocks, or sections, that can be customized directly from the theme editor, making it easier to control the layout.

{% section 'custom-section' %}

CSS Customization

CSS (Cascading Style Sheets) is the primary language used for styling HTML elements on your Shopify store. You can add custom styles to change the look of your store, ensuring it aligns with your branding.

• Customizing Existing CSS: You can modify your store’s look by changing or adding to the existing CSS rules in the theme.scss.liquid file located under the Assets folder in your theme editor.

.product-title {
    font-size: 24px;
    color: #333;
}

• Adding Custom CSS: If you want to add unique styles to specific pages, you can either place your custom styles directly in the theme.css.liquid or create a new CSS file.

body {
    background-color: #f4f4f4;
}

• Media Queries for Responsiveness: Ensure your store looks great on all devices by using media queries to adjust styles for mobile, tablet, and desktop views.

@media only screen and (max-width: 768px) {
  .product-title {
    font-size: 20px;
  }
}

JavaScript Customization

JavaScript is a powerful tool for adding interactivity and client-side functionality to your Shopify store. From creating dynamic elements like image sliders to adding custom forms, JavaScript can elevate the user experience.

• Adding Custom JavaScript: You can add JavaScript code to your Shopify theme by editing the theme.js or creating a new .js file in the Assets folder. To load it onto your store’s pages, reference the script in your theme’s layout file.

var x = document.getElementById("demo");

x.innerHTML = "Hello, world!";

• Handling Events: JavaScript can handle events such as button clicks, form submissions, or page loading. For example, to show a message when the user clicks a button:

document.getElementById("myButton").onclick = function() {
  alert("Button clicked!");
};

• AJAX for Dynamic Content: You can use AJAX to load or modify content on your Shopify store without reloading the page. This is often used for things like updating the cart without refreshing the page.

$.get('/cart.js', function(cart) {
  alert(cart.item_count);
});

Customizing Shopify Apps

While Shopify has a robust selection of apps, sometimes you might need to customize the integration between these apps and your store. Custom code can be used to adjust how apps display or function within your Shopify store.

• App Extensions: Some Shopify apps allow custom code to be added directly from their admin panel. For instance, apps like product review systems or email marketing tools may offer settings for adding custom JavaScript or CSS.
• Embedding External Services: You can embed external services, like social media feeds, live chat, or customer support widgets, by adding custom HTML/JavaScript code.

Shopify API Integrations

For more complex customizations, you can integrate your Shopify store with external services using the Shopify API. This is especially useful for advanced features like syncing data with a CRM, importing custom product data, or integrating with shipping providers.

• Admin API: Allows you to read and modify store data, including products, orders, and customers. You can interact with the API through custom applications or external integrations.

Example to get products via the Admin API:

fetch('/admin/api/2023-04/products.json', {
  method: 'GET',
  headers: { 'X-Shopify-Access-Token': 'your_access_token' }
}).then(response => response.json())
  .then(data => console.log(data));

• Storefront API: A GraphQL-based API for accessing store data and creating custom storefronts. Ideal for headless commerce setups where Shopify serves as a backend.

Example of a basic query with the Storefront API:

query {
  products(first: 5) {
    edges {
      node {
        title
        description
        variants(first: 1) {
          edges {
            node {
              priceV2 {
                amount
                currencyCode
              }
            }
          }
        }
      }
    }
  }
}

Custom Checkout Code (Shopify Plus)

Shopify Plus users have access to advanced checkout customizations through the Shopify Scripts Editor and Checkout Liquid files. You can modify the checkout process, add custom shipping options, or implement complex discount logic.

• Shopify Scripts: Write Ruby-based scripts to customize the checkout experience, like applying discounts or changing shipping options.

discount = Input.cart.discount_code
if discount == "FREESHIP"
  # Apply free shipping logic
end

• Checkout Liquid: Modify the design and functionality of the checkout pages using Liquid templates. This includes customizing the cart, adding custom fields, and more.

If you need help with adding custom coding for any of these aspects, our dedicated Shopify development company would be helpful.

How to Add Custom Code in Shopify?

After you have compiled the custom code for your store, it’s time to implement it in Shopify. There are two approaches. Let’s see how you do it.

Adding Custom CSS

Step 1: In the code editor, go to Assets and open your theme.scss.liquid file (or a similar CSS file).

Step 2: Add your CSS code at the end of the file.

Step 3: Click Save.

Adding a Custom Section

Step 1: In the code editor, go to Sections and click Add a new section.   

Step 2: Name your section (e.g., custom-text.liquid).

Step 3: Add your Liquid, HTML, and CSS code to the file.

Step 4: Click Save.

Step 5: In the theme editor (Online Store > Themes > Customize), you can now add your custom section to any page.   

Adding JavaScript

Step 1: In the code editor, go to Assets and click Add a new asset.

Step 2: Create a new .js file (e.g., custom.js).

Step 3: Add your JavaScript code to the file.

Step 4: In your theme.liquid file (usually in the Layout folder), add the following code before the closing </body> tag:

<script src="{{ 'custom.js' | asset_url }}" defer="defer"></script>

But adding the custom and ensuring successful results may not be possible unless you have the necessary technical expertise. In that case, hiring expert Shopify developers will be much suitable.

Best Practices for Custom Coding in Shopify

Custom coding in Shopify offers immense flexibility, but it’s crucial to follow best practices to ensure a smooth and maintainable store. Here’s a rundown of key considerations:

• Duplicate Your Theme: Before making any code changes, always duplicate your current theme. This provides a safety net, allowing you to revert to the original version if anything goes wrong.
• Version Control (Advanced): For more complex projects, consider using Git for version control. This allows you to track changes, collaborate with others, and easily revert to previous versions.
• Code Clarity: Use comments to explain the purpose of your code, especially complex logic. This makes it easier for you (or others) to understand and maintain the code later.
• Modular Code: Break down your code into smaller, reusable components (snippets in Shopify). This improves organization and reduces redundancy.
• Minimize HTTP Requests: Reduce the number of external files (CSS, JavaScript, images) that your store needs to load. Combine files where possible.
• Optimize Images: Use appropriately sized and compressed images to reduce page load times.
• Defer Loading of Non-Critical Scripts: Use the defer attribute in your <script> tags to prevent JavaScript from blocking page rendering.
• Avoid Inline Styles: Use external CSS files instead of inline styles for better maintainability and performance.
• Sanitize User Inputs: If your code interacts with user inputs (e.g., forms), sanitize them to prevent security vulnerabilities like cross-site scripting (XSS).
• Keep Dependencies Updated: If you’re using any third-party libraries or frameworks, keep them updated to patch security vulnerabilities.

For complex features or integrations, consider using a Shopify app instead of writing custom code. That is because apps are often easier to set up and maintain.

FAQs on Custom Coding in Shopify

Let’s Conclude

Custom code lets you go beyond the limitations of standard Shopify themes, transforming your online store into a truly unique and high-performing platform. It involves working on four key components, i.e. Liquid, HTML, CSS, and JavaScript for Sections, Templates, Snippets, or Assets.

Remember, best practices are paramount: always backup your theme, prioritize code clarity, and optimize for performance and smooth experience.

If you need help with custom coding on your Shopify store, connect with us today!