{"title":"Themes","slug":"themes","url":"https://support.storeconnect.com/articles/themes","url_markdown":"https://support.storeconnect.com/articles/themes.md","subtitle":null,"summary":"Create and preview Liquid themes to customize your StoreConnect storefront layout and content. Start here for theme creation and previewing, then follow the links to structure, layouts, forms, styling, SEO, and debugging.","type":"Developer_Documentation","video_url":"","keywords":"themes, liquid themes, storefront customization, theme templates, theme preview, preview bar, base theme, liquid templating, custom theme, theme components, storefront layout, theme creation, theme structure, theme debugging","last_modified":"2026-08-21T07:12:35+0000","body_markdown":"Liquid is a templating language that can be used to create page layouts and render custom content. Using liquid you can access StoreConnect’s data objects, such as products, pages, articles etc. for use on your site.\n\nLiquid themes are a framework of liquid templates that allow complete customization of a StoreConnect site. We have supplied you with the Liquid and Javascript for default templates that can be customized:\n\n**[GitHub Repository](https://github.com/GetStoreConnect/base-theme)**\n\n## What can you do with Liquid themes?\n\nBy default each Store runs off the built-in base theme that ships with StoreConnect. You can create any number of themes that can alter the look and feel of your site, and even change what content shows. You can preview the them on your live Store as you work on it - no-one else will be able to see it. Then when you are happy with the new theme, you can set it as the theme for your Store (or any number of Stores).\n\nCreate a new Theme record to get started.\n\n![Theme record creation in StoreConnect](https://res.cloudinary.com/hzkr6fi81/image/upload/v1725790514/knowledge/themes/create-theme_jweriy.png)\n\nYou can preview your theme on your site by using the “Click to Preview on Site” link on the Theme detail view\n\n![Theme detail view showing the Click to Preview on Site link](https://res.cloudinary.com/hzkr6fi81/image/upload/v1725790506/knowledge/themes/click-to-preview_p9ihpv.png)\n\nIf you preview your theme at this stage, you won’t notice any difference from the built-in theme for two reasons:\n\n1.  Your new theme is empty\n2.  If a theme does not supply a required item, it uses the equivalent one from the base theme.\n\nYou will see the preview bar at the top. This serves to confirm that you are previewing a theme on the Store, and allows you to switch between the preview theme, your normal theme (if there is one), and the built-in theme. This is a handy way to compare how your theme compares to other themes.\n\n![Preview bar at the top of the storefront with options to switch between preview, normal, and built-in themes](https://res.cloudinary.com/hzkr6fi81/image/upload/v1725790511/knowledge/themes/preview-theme-template_nwbd1s.png)\n\n## In this section\n\n- [About themes](about-themes) — which records control which part of a storefront, and how a theme falls back to the base theme\n- [Build with themes](build-with-themes) — the templates that produce your markup: pages, layouts, snippets, blocks, components, and forms\n- [Style using themes](style-using-themes) — CSS, JavaScript, fonts, and images, and how to override the base theme's look\n- [Configure and customize](configure-and-customize) — theme variables and translations, so one theme can serve stores that need different settings\n- [Test and validate](test-and-validate) — SEO, accessibility, and the tags for working out why a template renders the wrong thing\n- [Theme examples](theme-examples) — worked examples that solve one storefront problem end to end"}