Assets
Learn how to manage and customize theme assets in Finqu.
Overview
Assets are files used to style and enhance your theme, including stylesheets, JavaScript, images, fonts, and other static resources. All asset files are stored in the assets
directory of your theme.
Main Stylesheet: main.scss.liquid
The most important asset file is main.scss.liquid
. This file contains the main styles for your theme and supports both SCSS and Liquid syntax. Use this file to define your theme’s global styles, variables, and imports. The output CSS is automatically included in your storefront pages.
- Use SCSS features (variables, nesting, mixins) for maintainable styles.
- Use Liquid to inject dynamic values or settings into your styles.
Checkout Styles: checkout.scss.liquid
You can define custom styles for the checkout by creating a checkout.scss.liquid
file in the assets
directory. This file is only used if your store’s plan includes the feature for checkout customization. If available, the styles in this file will be applied to the checkout pages.
Checkout styling is a premium feature and may not be available on all plans. Check your plan’s features before relying on this customization.
For complete checkout customization, refer to the Checkout Customization documentation.
Other Asset Types
- JavaScript: Add interactive features by including
.js
or.js.liquid
files. - Images & Fonts: Store images, SVGs, and font files in the
assets
directory for use in your theme. - Other Files: You can include any static files needed by your theme, such as JSON, icons, or data files.
Referencing Assets in Liquid
To use assets in your theme’s Liquid templates, reference them with the asset_url
filter. This filter generates the correct URL for any file in your assets
directory, ensuring the asset is loaded properly on the storefront.
For example, to include an image or a stylesheet:
<img src="{{ 'logo.png' | asset_url }}" alt="Logo">
<link rel="stylesheet" href="{{ 'custom.css' | asset_url }}">
You can use asset_url
with any asset type, such as images, CSS, JavaScript, or fonts. This approach ensures your assets are correctly linked and benefit from the platform’s asset pipeline features like caching and versioning.
Tip: Always use the
asset_url
filter instead of hardcoding asset paths to ensure compatibility and proper asset delivery.
Best Practices
- Keep your asset files organized and use clear naming conventions.
- Minimize and optimize assets for faster page loads.
- Use SCSS and Liquid features to keep styles maintainable and dynamic.
- Only use
checkout.scss.liquid
if your plan supports checkout customization.
For more information on using assets in your theme, see the Theme Architecture documentation.