How can I preview changes in Liquid Code before applying it?

Store Design
, , ,

Topic summary

Goal: Preview and compare Shopify Liquid theme changes (e.g., header.liquid) before affecting the live store.

Workflow provided:

  • Duplicate your current theme (Online Store > Themes > … > Duplicate). Edit code only in the duplicated theme.
  • Click Preview on the duplicated theme to see your changes rendered.
  • To see the “before” state, close the preview to view the original live layout.
  • When satisfied, either publish the edited theme or copy the changed code into the live theme.

Clarifications:

  • The theme files you see in the editor reflect the current layout before you make edits.
  • Screenshots in the thread illustrate the exact UI steps (duplicate, edit, preview, publish/copy).

Outcome/status:

  • A clear safe-preview workflow was established; no remaining technical disputes noted.

Additional guidance:

  • For learning Liquid and Shopify’s theme structure, suggested YouTube channels include Weekly How, Coding with Jan, and Coding Phase.
Summarized with AI on February 3. AI used: gpt-5.
1

Hello everyone,

New to Shopify here. My question is in regards to the liquid code that’s used to build or modify Shopify theme and the site.

What I want to do is to get the current code that is already in Shopify to display in some type of code editor, so that I can see what it looks like rendered as is in real time and what its referring to before and after I make code modifications.

For example, I copied the “header.liqud” (I want to make changes to the current header in the venture theme.) code piece, that’s located under the “sections” folder in the edit code theme part of the site, and pasted it into another code editor (VS CODE) so that I can see exactly what it looks like and what page of the site that it applies to, but nothing showed up. I’m in the process of learning how to code and I want to be able to go in and make modifications when I need to and see what all that looks like before I make a conclusion on if that’s what I want my webpage to look like.

How do I get to see what the page looks like before and/or after I make code changes to it?

2

May I suggest to update code these steps:

  1. Go to Store Online-> theme → Duplicate.

EBOOST_0-1672356937291.png
EBOOST_0-1672356937291.png417×388 9.68 KB

  1. Click … button of the theme that you have just duplicated-> edit code

EBOOST_1-1672356985580.png
EBOOST_1-1672356985580.png532×438 15.6 KB

  1. Edit code on the theme that you have just duplicated
  2. After you update code click on Preview store button on top right of screen.

EBOOST_2-1672357083901.png
EBOOST_2-1672357083901.png1585×322 2.56 KB

  1. You can publish this theme after everything is good or you can copy code from this theme to live theme.

EBOOST_3-1672357114960.png
EBOOST_3-1672357114960.png532×438 13.3 KB

3

How do I know what it would look like before I started editing the code? I want to specifically modify the “header.liquid” code under the “sections” folder.

And all these codes represents what the web page would look like before editing correct?

4

Hi,

You only need click close preview button to show original layout ( before you update code).

Follow step by step above to preview code that you updated.

And all these codes represents what the web page would look like before editing correct? → yes

EBOOST_0-1672374542407.png
EBOOST_0-1672374542407.png682×166 8.66 KB

5

if you really want to learn how to code in liquid, there is a few channels on youtube (weekly how, coding with jan, coding phase) alll talk about liquid and how to set up liquid and how shopify is a bitt different then woo or anything really it will take you about 2 weeks to get use to how shopify does things