What you'll learn
- How to trigger Shopify Liquid mode in the playground
- What the generated code includes (Liquid + schema + CSS)
- How to preview your section before uploading
- How to upload directly to your Shopify theme
- Customizing sections with theme settings
Step 1: Open the playground
1
Go to /try.html
Visit /try.html in your browser.
Step 2: Write a Shopify-specific prompt
2
Describe your Liquid section
Use a prompt that mentions Shopify, Liquid, or theme section. For example:
Build a Shopify Liquid section for a product hero. Include: large product image, product title, price, description, and "Add to cart" button. Add theme settings for: image size, button color, text alignment. Use semantic Liquid with proper schema. Single file, production-ready.
When you mention "Shopify," "Liquid," or "section," LingCode automatically:
- Detects it's a Shopify request
- Generates Liquid code (not plain HTML)
- Includes a schema block for theme settings
- Adds a live preview of the section
Understanding the output
A Shopify Liquid section includes three parts:
- Liquid markup: The section template using Shopify Liquid syntax ({% if %}, {{ variable }}, etc.)
- Schema: JSON defining what settings appear in the Shopify theme editor (color pickers, text fields, etc.)
- CSS (optional): Styles scoped to the section
All three are bundled in a single `.liquid` file that you upload directly to your theme's `sections/` folder.
Schema tip: The generated schema automatically includes common controls like color pickers, text fields, and number inputs. You can customize these in the Shopify theme editor after upload.
Step 3: Preview in real-time
3
See your section render
Click "Send" and watch the section render in the preview pane. LingCode automatically converts Liquid syntax to HTML for preview purposes, so you can see what your section will look like before uploading.
Step 4: Iterate and refine
4
Use "Continue" to adjust
Refine your section with follow-ups:
- "Add a customer reviews section below the product details"
- "Make the button a collection selector from theme settings"
- "Change the layout to have image on the right, details on the left"
- "Add animation when the section scrolls into view"
Step 5: Export and upload to Shopify
5
Download the .liquid file
Click the three-dots menu and select "Download .liquid" (or copy the code from the Code tab). You'll get a single `.liquid` file.
To upload to your Shopify theme:
- Log in to your Shopify admin
- Go to Sales channels → Online store → Themes
- Click "Edit code" on your active theme
- In the left sidebar, click the folder icon next to "sections"
- Click "Add a new file"
- Name it something descriptive (e.g.,
product-hero.liquid)
- Paste the contents of the downloaded file
- Click "Save"
Your section is now available in the Shopify theme editor. Add it to a page and customize the settings live.
Shopify section best practices
- Use semantic sections: Break complex pages into small, reusable sections (hero, features, CTA, testimonials).
- Add configurable settings: Let theme editors customize colors, text, and images without touching code.
- Test with product/collection data: Use Shopify's test data endpoints to preview with real products.
- Optimize for mobile: Test your section on mobile in the theme preview before publishing.
- Use CSS Grid/Flexbox: Avoid float-based layouts; use modern CSS for responsiveness.
Common section types
Hero section: Full-width image + headline + CTA
Product showcase: Featured product with details and "Add to cart"
Collection grid: Grid of products from a selected collection
Testimonials carousel: Customer reviews with rotation
FAQ accordion: Collapsible Q&A section
Newsletter signup: Email capture with theme branding
Troubleshooting
Q: My section doesn't appear in the theme editor
A: Make sure the filename is correct (lowercase, hyphenated) and the file was saved. Theme settings appear after refresh.
Q: Can I use this section on multiple pages?
A: Yes. Once uploaded, your section is available on all pages in the Shopify theme editor. Add it to product pages, home page, etc.
Q: How do I edit a section after uploading?
A: Edit directly in the Shopify theme code editor, or regenerate in LingCode and replace the file.