Storefronts & Theme Editor

Your storefront.
Made yours.

Choose a theme. Shape the pages, colors and content. See your changes in preview before you publish.

Try the theme editor

Make it your own.

Try the editor preview
Loading editor preview…
Tringify StarterLive

Draft saved

Home page
Sample home page

Sample content. Changes are saved and published within this example only.

Build with sections

Arrange the page around your products.

Work with the sections and blocks provided by your theme. Add content, adjust its settings, and change the order without rebuilding the page.

Sections and blocks

Add, duplicate, reorder or hide supported sections. Edit the blocks within them.

Colors, fonts and details

Adjust the options your theme exposes and see those changes in the preview.

Templates that fit the page

Create alternate templates for supported page types. Reuse global headers and footers, or override them for a template.

Draft, preview, publish

Make changes before your customers see them.

Save your work as a draft, check the preview, and publish when it is ready. Activating a different theme is a separate step in your theme library.

  1. Edit your draft

    Change the layout and content. Undo or redo edits while you work.

  2. Check the preview

    Switch between desktop and mobile views, and inspect the pages you are editing.

  3. Publish your changes

    Publish the prepared changes to your theme. A draft theme must be made live before it replaces your current theme.

Your theme library

Keep your next look close.

Install a theme from the Theme Store or upload a compatible theme package. Duplicate a theme to explore a new direction, then preview it before making it live.

Browse themes
Example theme library
Tringify Starter
Useful objects for everyday living.
Live theme

Tringify Starter

CustomizePreview
Tringify Starter
Useful objects for everyday living.
Saved draft

Starter copy

CustomizePreview

Beyond the design

The rest of your online store, in one place.

Your domains

Assign custom domains to your storefront and choose the primary one.

Your languages

Set the primary language, add supported languages and manage translated storefront content.

Search appearance

Manage storefront SEO settings and title templates alongside your design.

Go further with Vascula

Visual controls. With code within reach.

Open the code editor to work on Vascula sections, template definitions and theme language files. The visual editor and code workspace belong to the same theme.

Meet Vascula
sections/hero.vascVascula section example
<section class="hero">
  <h1>{{ settings.heading }}</h1>
  {% if settings.image %}
    <img
      src="{{ settings.image | image_url: width: 1200 }}"
      alt="{{ settings.image_alt }}"
    >
  {% endif %}
</section>

A few useful details.

Does every theme have the same controls?

No. Each theme defines its available sections, blocks and settings. The editor shows the controls supported by the theme you are working on.

Does saving a draft change my live storefront?

Saving a draft keeps your work separate from the published version. Publish when you are ready. If you are working on another theme, make that theme live separately to switch your storefront to it.

Can I bring my own theme?

Yes. You can upload a compatible Tringify theme package and customize it in the editor. Tringify themes use Vascula, with their own sections, templates and settings.

Storefronts & Theme Editor

Build a storefront that feels like your business.

Start with a theme, then make it your own.