How to Customise Your Shopify Theme

Theme Editor Basics

The theme editor is where most customisation happens. It provides a visual interface for changing colours, fonts, layouts, and content without touching code.

Modern Shopify themes use Online Store 2.0 architecture, which allows you to customise any page type using sections and blocks. Older themes (vintage themes) have more limited customisation options.

Accessing the Theme Editor

1. 1.Go to Online Store → Themes in your Shopify admin
2. 2.Find your current theme and click Customise
3. 3.The editor opens showing your homepage with a left sidebar

Page Selector

Use the dropdown at the top of the editor to switch between page types:

• •Home page: Your store's main landing page
• •Products: Product page templates
• •Collections: Collection page templates
• •Pages: Content page templates (About, Contact, etc.)
• •Blog: Blog listing and article templates

Customising Sections

Sections are the building blocks of your pages. Each section serves a purpose, like displaying a slideshow, featuring products, or showing testimonials.

Adding a New Section

1. 1.In the theme editor, click Add section in the left sidebar
2. 2.Browse available sections or search for what you need
3. 3.Click a section to add it to the page
4. 4.Drag the section to reorder it on the page

Section Settings

Click any section in the sidebar to reveal its settings. Common options include:

• •Heading and subheading: Text that appears above the section content
• •Colour scheme: Background and text colours
• •Padding: Spacing above and below the section
• •Width: Full width or contained within margins

Working with Blocks

Many sections contain blocks, which are smaller content units within the section. For example, a "Multicolumn" section contains individual column blocks.

Theme Settings

Theme settings are global options that affect your entire store. Access them by clicking Theme settings at the bottom of the left sidebar.

Adding Custom CSS

When the theme editor does not offer the customisation you need, custom CSS can override default styles. Most themes provide a dedicated field for custom CSS.

Where to Add Custom CSS

1. 1.In the theme editor, go to Theme settings
2. 2.Look for Custom CSS or Custom code
3. 3.Add your CSS rules in the provided text area
4. 4.Save to see changes

Common CSS Customisations

/* Change announcement bar colour */
.announcement-bar {
  background-color: #ef436b;
}

/* Increase product title size */
.product__title h1 {
  font-size: 2.5rem;
}

/* Hide a specific element */
.breadcrumb {
  display: none;
}

/* Custom button style */
.button--primary {
  border-radius: 0;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* Add custom font (with @import) */
@import url('https://fonts.googleapis.com/css2?family=Your+Font&display=swap');

body {
  font-family: 'Your Font', sans-serif;
}

Editing Theme Code

For advanced changes beyond CSS, you may need to edit the theme's Liquid files directly. This requires understanding HTML, CSS, and Shopify's Liquid templating language.

Accessing Theme Files

1. 1.Go to Online Store → Themes
2. 2.Click ... → Edit code on your theme
3. 3.Navigate the file structure in the left sidebar

Theme File Structure

Basic Liquid Syntax

<!-- Output a variable -->
{{ product.title }}

<!-- Conditional logic -->
{% if product.available %}
  <span>In Stock</span>
{% else %}
  <span>Sold Out</span>
{% endif %}

<!-- Loop through items -->
{% for product in collection.products %}
  <h3>{{ product.title }}</h3>
{% endfor %}

<!-- Include a snippet -->
{% render 'product-card', product: product %}

Working with Metafields

Metafields let you store custom data on products, collections, customers, and more. You can display this data in your theme for enhanced customisation.

Common Metafield Uses

• •Product specifications: Size charts, materials, care instructions
• •Collection descriptions: Extended content for SEO
• •Custom badges: "New", "Bestseller", "Eco-friendly"
• •Brand content: Manufacturer logos, warranties

Displaying Metafields in Theme Editor

Many theme sections support dynamic sources. Instead of typing text directly, you can link to a metafield:

1. 1.Click on a text field in the theme editor
2. 2.Click the Connect dynamic source icon
3. 3.Select the metafield you want to display

Theme Best Practices

Common Customisations

Here are solutions to customisation requests we see frequently.

<div class="trust-badges">
  <img src="{{ 'secure-checkout.svg' | asset_url }}" alt="Secure checkout">
  <img src="{{ 'free-returns.svg' | asset_url }}" alt="Free returns">
</div>

@media (max-width: 749px) {
  .section-to-hide {
    display: none;
  }
}