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.

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.