Guides
Editing code
Before you touch the theme files: precautions, support limits, and alternatives.
On this page
Do you really need to?
Most needs can be handled without code:
| Need | No-code solution |
|---|---|
| Change fixed text ("Complimentary delivery") | Edit default theme content. See Languages and currencies. |
| Insert a widget or HTML snippet | Custom Liquid section or block. |
| Show different content for each product | Connect a block to a metafield (dynamic source). |
| A different layout for some products | An alternate template. |
| An extra feature (reviews, loyalty, and so on) | An app block or app embed. |
Open the code editor
In Online StoreThemes, open the theme's ... menu, then click Edit code. Files follow Shopify's standard structure: layout, templates, sections, blocks, snippets, assets, config, and locales.
A few pointers specific to Faubourg:
- Style variables (colors, spacing, sizes) are calculated in
snippets/css-variables.liquidfrom the theme settings. Editing a value by hand breaks the link with the settings, so use the settings instead. - Each component's styles and script are in its own file (section or block), not in a global stylesheet.
- All buttons go through
snippets/button.liquid, and drawers throughsnippets/drawer.liquid. - Storefront text is in
locales/*.jsonand theme editor labels are inlocales/*.schema.json, one file per language.
What support covers
For custom work, hire a Shopify Partner: the Shopify Partner Directory lists vetted developers and agencies.
Keeping your changes when you update
When you update the theme from the Theme Store, Shopify keeps your code changes only if they don't conflict with the new version, and tells you when they couldn't be included. Note each change (file, reason, code snippet) so you can reapply it in the new version, one change at a time, and prefer no-code solutions when they exist.
Faubourg 1.1.0