ThemeLab

Customizing code

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

Index 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.

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 settingsCustom 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 StoreThemes⋯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 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 Index 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.