# Customizing code

> How to make small changes with Custom CSS and Custom Liquid safely – and when to hire a Shopify Partner instead.

Tally theme documentation · HTML version: https://themelab.page/tally/docs/customizing-code/

Tally is designed to be set up entirely in the theme editor. Before you change any code, check whether a setting already does what you need – search these docs with `/` or [ask us](https://themelab.page/support/).

> **Before you start:** Duplicate the theme first
>
> Always work on a copy. Go to **Online Store › Themes**, open the **⋯** menu next to the theme and choose **Duplicate**. Make your changes in the copy, preview it, and publish it only when everything works. Your live store stays untouched if something goes wrong.

> **Important:** Code changes are not covered by support
>
> We support Tally as we ship it. We cannot fix problems caused by code you or someone else added, and **edits in the code editor are not carried over when you update the theme**. For anything beyond a few lines, we recommend hiring a developer from the [Shopify Partner Directory](https://www.shopify.com/partners/directory).

## Custom CSS

Shopify adds a **Custom CSS** field to **Theme settings** (for the whole store) and to every section (for that section only). This is the safest place for visual tweaks: it is kept when you update the theme.

For example, to make product titles on cards bold across the store, add this in **Theme settings › Custom CSS**:

```css
.product-card__title {
  font-weight: 600;
}
```

And to make the buttons in one section wider, add this to that section's own Custom CSS (the rules only apply inside that section):

```css
.button {
  min-width: 220px;
}
```

Class names can change between versions of the theme. After an update, check that your Custom CSS still works.

## Custom Liquid

The **Custom Liquid** section and the Custom Liquid blocks (on the product page, in the cart, in Image with text, the footer and popups) run your own Liquid, HTML and JavaScript. Use them for embed codes from other services, such as a booking widget or a map.

```liquid
{%- if product.metafields.custom.care_note != blank -%}
  <p class="care-note">{{ product.metafields.custom.care_note }}</p>
{%- endif -%}
```

- Code in these blocks is saved with your theme settings, so it is kept when you update the theme.
- A mistake in a Custom Liquid block only affects that block, but scripts can still slow down or break the page.

## Editing theme files

**Online Store › Themes › ⋯ › Edit code** opens the theme's files. Changes there:

- **are lost when you update** the theme – you have to apply them again to each new version;
- are **not covered by support**;
- can break features in ways that are hard to spot, such as the cart drawer, filters or accessibility.

If you need this kind of change, hire a [Shopify Partner](https://www.shopify.com/partners/directory) and ask them to keep a list of every change, so it can be applied again after updates.

## Restore the original theme

If something breaks after a code change, publish the copy you made before the change, or add a fresh copy of Tally from the Theme Store to your theme library. Theme settings and content from the editor can be copied over by a developer, or set up again.