Skip to content
Faubourg

Search the documentation

Type a setting, a section or a question.

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:

NeedNo-code solution
Change fixed text ("Complimentary delivery")Edit default theme content. See Languages and currencies.
Insert a widget or HTML snippetCustom Liquid section or block.
Show different content for each productConnect a block to a metafield (dynamic source).
A different layout for some productsAn 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.liquid from 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 through snippets/drawer.liquid.
  • Storefront text is in locales/*.json and theme editor labels are in locales/*.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.

Was this page helpful?

Faubourg 1.1.0