Extend your theme
Shopify themes offer many settings and customization options. However, you might want to further customize your theme. For example, you might want to display product reviews in your store, which you can do by installing an app. If you want to extend the functionality of your theme, you can do so by using custom code or an app.
Add custom HTML or Liquid
Some themes offer settings that let you add snippets of HTML or Liquid code that can be rendered in the template, section, or block that contains the setting. These settings let you safely add custom code to your online store without editing your theme's code directly, which helps to ensure that your theme is eligible for updates.
You might use these settings for the following tasks:
- Use a Custom Liquid section to insert Liquid variables where they make sense for your business. For example, you might include your shipping policy on your product page.
- Use a Custom Liquid section to add the code that's required to integrate an app with your theme.
To learn whether your theme has a custom HTML or Liquid option, refer to your theme's documentation.
Liquid settings only allow you to access limited Liquid objects and tags. To learn about the objects and tags that you can use in a Liquid setting, refer to the Liquid setting documentation on Shopify.dev.
Add custom CSS
A cascading style sheet (CSS) changes how elements are displayed in your theme, and can control the appearance of several pages at one time. You can customize your theme beyond the settings that are built into a theme by using the custom CSS feature. You can add custom CSS to your entire theme, or to a specific section of a template within your theme.
Customizing your CSS requires some familiarity with CSS and HTML. Before you customize your theme, make sure that you understand what level of support is available.
Install an app
You can install apps to add features and integrations to your theme. You can find apps on the Shopify App Store.
Online Store apps can integrate with your theme in the following ways:
-
As an app block: App blocks let you add app functionality exactly where you want to use it in your theme. App blocks can be added, removed, and customized through the theme editor.
App blocks can only be used with Online Store 2.0 themes. If you use a vintage theme, then you should read the app listing and documentation to understand whether the app is compatible with your theme.
As an app embed: App embeds are app-provided elements that float or appear as an overlay in your theme, or add code to your online store without being visible to your customers. App embeds can be enabled, disabled, and customized through the theme editor.
-
By altering your theme code: Some apps inject code directly into your theme's code to add functionality to your theme. You might customize the app using the app settings, or using the theme editor.
If your theme offers a Custom Liquid section, then you might be able to add your app code into a Custom Liquid section in the theme editor instead of editing your theme code directly.
Edit your theme code
You can edit your theme code to make detailed changes to your online store. Theme files contain Liquid, Shopify's templating language, along with HTML, CSS, JSON, and JavaScript. Edit the code for a theme only if you know HTML and CSS, and have a basic understanding of Liquid.
If you use a free theme from Shopify, then Shopify Support can help you to make certain customizations to your theme code. Refer to your theme's documentation for a list of available customizations. Learn more about support for themes.
You can edit your theme code in the following ways:
- Edit code directly in the Shopify admin.
- Edit your theme locally using development tools like Shopify CLI and the Shopify GitHub integration.