shopify sidekick theme liquid homepage

How to Add & Customize Theme Sections with Shopify Sidekick

What Sidekick can actually change in your Shopify theme, when it generates section code for you to paste instead, and how to add custom heroes and showcase sections safely.

4 min read SidekickSkills View as Markdown

Sidekick’s theme abilities split into two distinct modes, and knowing which one you’re in saves a lot of confusion. For small, bounded changes inside a section that already exists, Sidekick can locate the right section and apply the change once you confirm. For a brand-new custom section, the reliable path is different: Sidekick generates the Liquid, CSS, and JavaScript, tells you which section file to create, and you paste it in through the theme editor. Treat that second mode as the default for anything new.

Mode 1: tweak an existing section

This is the safest kind of theme request. You’re not adding anything — you’re changing one setting inside a section your theme already has.

Structure the ask tightly:

  • The element — e.g. “the background color of my Hero section”, “the announcement bar text”, “the button color on the Featured Collection section”.
  • The change — a specific hex value like [YOUR HEX COLOR], or exact copy like FREE SHIPPING ON ORDERS OVER [YOUR THRESHOLD].
  • A confirmation gate — ask Sidekick to find the section, show you before-and-after, and check contrast and readability before applying anything.

Then ask it to tell you exactly which section or theme file it touched, and preview the storefront yourself before you save or publish. Explicitly scope the request: one element, one change. Don’t let it reorder layout or restyle neighboring sections while it’s in there.

Mode 2: generate a new custom section

Heroes, bestseller showcases, brand-story blocks — these don’t exist in your theme yet, so there’s no setting to flip. Here you’re asking Sidekick to write code you’ll install.

The workflow is consistent across all three:

  1. Describe the section in full, with every value spelled out — image URL, heading text and size, body copy, CTA label and link, colors, overlay opacity, section height.
  2. Ask for Liquid, CSS, and JavaScript as a custom section, including the section schema — the schema is what makes it appear as an addable, editable block in the theme editor instead of hardcoded markup.
  3. Ask which file to create and how to add it to the page through the theme editor. That last instruction matters; without it you get code and no idea where it goes.
  4. Work on a duplicate theme, paste it in, preview desktop and mobile, then publish.

Collection highlight hero

A hero that spotlights one collection. Specify the collection name, a background image, heading color and size, a short description, the product count, and a CTA linking to /collections/[YOUR COLLECTION HANDLE]. Optionally ask for a row of product thumbnails from the collection under the hero area, plus an overlay color and opacity so text stays readable over the image.

Bestseller showcase

Highlights your top sellers with badges. Create a manually sorted Bestsellers collection first, then ask for a section that pulls the top [YOUR NUMBER] products from it. Useful details to specify: a Bestseller badge color, product image, title, price, a star rating (pulled from a metafield or hardcoded), an Add to Cart button, and a layout style — hero-grid, carousel, or numbered list. Ask for the optional JavaScript only if you’re using carousel mode.

Brand story hero

The editorial one. Give it a cinematic background image, the side the content block sits on, an uppercase tagline in an accent color, a headline with a specific font and size, a short narrative paragraph, and a CTA styled solid or outline. A gradient overlay fading from the content side to transparent is what keeps this looking premium instead of muddy.

Rules that keep this from going wrong

  • Duplicate before you touch anything. Test on the copy, publish when it’s right.
  • One request, one change. Bundled theme requests are hard to review and harder to undo.
  • Make Sidekick name the file. Every code-generation ask should end with “tell me exactly which section file to create and how to add it through the theme editor.”
  • Check mobile. Fixed pixel heights and large headings that look great on desktop are the usual failure point on phones.
  • Verify what changed. After a bounded edit, confirm the file Sidekick names is the one you expected.

Used this way, Sidekick removes the slowest part of theme work — writing the Liquid and CSS from scratch, or hunting for which section controls a color. The install and the final publish stay in your hands, which is exactly where you want them.

Frequently asked questions

Can Shopify Sidekick edit my theme?

For bounded changes inside an existing section — a background color, button color, or a line of text — Sidekick can find the right section and apply the change after you confirm it. It should tell you which section or theme file it edited, and you preview and publish the result yourself.

Can Sidekick build a brand new custom section for me?

For a new custom section, the practical path is asking Sidekick to generate the Liquid, CSS, and JavaScript, then telling you which section file to create and how to add it through the theme editor. You create the file and paste the code — treat that as the default expectation rather than assuming it edits theme files on its own.

Do I need to know Liquid to add a custom section?

No, but you do need to be comfortable creating a new section file in the theme code editor and pasting in generated code. Ask Sidekick to include the section schema so the new section shows up as an addable block in the theme editor with editable settings.

How do I avoid breaking my live theme?

Duplicate your published theme and work on the copy. Add and test the section on the duplicate, preview it on desktop and mobile, then publish. Keep each request to one element or one section so a bad change is easy to identify and undo.