Content Management

Upload and manage digital assets

Where to find it: Admin → Assets

When you'd use this: When you need to add images and other files to your store's asset library for use in products, pages, banners, and other content. The Digital Asset Manager lets you upload, organize, edit, and delete assets from a central location.

Using it day-to-day:

To upload assets:

1. Navigate to Admin → Assets
2. Click the upload button to select one or more files from your computer
3. The files upload to your store's asset library and appear in the asset list
4. Each asset is stored with its name, file format, and upload date

To view and manage assets:

1. Open the asset list to see all uploaded files with their name, format, and upload date
2. Click the edit action to update an asset's name or tags for better organization
3. Click the download action to save a copy of the asset to your computer
4. Click the delete action to permanently remove an asset from your library—a confirmation dialog appears to prevent accidental deletion

Asset names must be unique across your store and should use lowercase letters and hyphens for readability. When you rename an asset, the system updates the file name in storage to match.

The Digital Asset Manager supports a wide range of file formats including PNG, JPEG, WebP, GIF, BMP, TIFF, SVG, ICO, AVIF, and HEIC/HEIF files.

Troubleshooting:

• Asset name won't save when editing — Asset names must be unique. Check if another asset already uses that name, or try a different name.

Filter and search assets

Where to find it: Admin → Assets

When you'd use this: When you need to quickly find specific assets within large collections by searching names, filtering by tags, file formats, or upload dates. Filters can be combined to narrow down results.

Using it day-to-day:

To search by asset name:

1. Navigate to Admin → Assets
2. Enter text in the search field
3. The asset list updates to show only assets whose names contain the search term (case-insensitive)

To filter by tags:

1. Select one or more tags from the tag filter
2. The asset list shows only assets that have at least one of the selected tags
3. Clear tag filters to show all assets again

To filter by file format:

1. Select one or more file formats from the format filter (JPEG, PNG, GIF, PDF, SVG, etc.)
2. The asset list shows only assets matching the selected formats

To filter by upload date:

1. Use the date range picker to select a start date and end date
2. The asset list shows only assets uploaded within that date range (inclusive)

To sort assets:

1. Choose a sort field: date uploaded, name, or file format
2. Choose the sort order: ascending or descending
3. The asset list updates to reflect your sorting preference

Filters work together using AND logic—when you combine multiple filters (such as tags, formats, and date ranges), the asset list shows only assets that match all selected criteria. Filter selections persist during your session and are reflected in the URL, so you can bookmark or share filtered views.

Troubleshooting:

• No results appear after filtering — Make sure your filter combinations aren't too restrictive. Try removing one filter at a time to see which criteria are excluding your assets.
• Filter selections disappear after refreshing — Filters are saved in the URL. If you're using browser navigation or clearing your history, the filters will reset. Bookmark the filtered URL to preserve your filter state.

Browse and select images from the Digital Asset Manager

Where to find it: Admin → Assets or from any image selector in the CMS

When you'd use this: When you need to add images to products, pages, or other content in your store, you can browse and select from images you've already uploaded to your store's asset library.

What you need first: Images uploaded to your store's Digital Asset Manager

Using it day-to-day:

1. Open any content editor that allows you to add images (such as product descriptions, pages, or banners)
2. Click the image selector to open the Digital Asset Manager
3. By default, the "My Images" tab displays images from your store's asset library
4. Use the search field to find specific images by name
5. Click on an image to preview it
6. Select the images you want to use
7. Click Close in the top right corner to copy the selected images to your content

When you select an image, the editor preserves your selection even if you search for other images or switch tabs. Your previously selected image remains visible in the editor until you explicitly choose a different image.

The Digital Asset Manager supports a wide range of image formats including PNG, JPEG, WebP, GIF, BMP, TIFF, SVG, ICO, AVIF, and HEIC/HEIF files.

Troubleshooting:

• Images don't appear in the selector — Make sure the files are uploaded to your store's asset library first by visiting Admin → Assets
• Selected image disappears when searching — The editor preserves your image selection while you browse. If your image still disappears, refresh the page and try selecting the image again.

Upload images directly from the CMS

When you'd use this: When editing pages or content in the CMS, you can upload images directly to your store's asset library without leaving the editor. The upload interface appears within the image selector for quick access.

Using it day-to-day:

1. Open any content editor that allows you to add images
2. Click the image selector to open the Digital Asset Manager
3. Navigate to the "My Images" tab
4. Click the upload button to select one or more image files from your computer
5. The files upload to your store's asset library
6. Once uploaded, the images appear in your "My Images" list and are ready to select and use in your content

Uploaded images are stored in your store's asset library and can be reused across products, pages, banners, and other content. You can also manage these assets later by visiting Admin → Assets.

Upload a logo in theme settings

Where to find it: Admin → CMS → Theme Editor → Theme Settings

When you'd use this: When you need to set or update your store's logo and favicon. You can upload a logo image that appears in the header across your storefront and set a favicon that appears in browser tabs.

Using it day-to-day:

To upload a logo:

1. Navigate to Admin → CMS → Theme Editor
2. Open Theme Settings
3. Locate the logo upload control
4. Click the upload button to open the asset uploader
5. Select an image file from your computer
6. The logo uploads to your store's asset library and is automatically tagged as a logo
7. The uploaded logo appears in the theme settings preview
8. Adjust the logo width using the slider to control how large the logo appears in your store's header
9. Save your theme settings to apply the logo to the live storefront

To upload a favicon:

1. Open Theme Settings
2. Locate the favicon upload control
3. Click the upload button and select an image file
4. The favicon uploads and appears in browser tabs and bookmarks when customers visit your store
5. Save your theme settings to apply the favicon

To remove a logo or favicon:

1. Open Theme Settings
2. Click the remove button next to the logo or favicon control
3. The preview updates to show the default placeholder
4. Save your theme settings to clear the logo or favicon from the live storefront

The logo uploader uses the same asset uploader as other CMS image fields. Uploaded logos are stored in your asset library and tagged with "logo" for easier filtering. The logo width slider only applies when a custom logo is uploaded—the default logo keeps its natural sizing.

Changes you make in Theme Settings preview immediately in the editor so you can see how the logo will appear before saving.

Troubleshooting:

• Logo doesn't appear after uploading — Make sure you saved your theme settings after uploading the logo. Changes only apply to the live storefront after saving.
• Favicon still shows the default icon — Browser tabs cache favicons aggressively. Try clearing your browser cache or opening the store in an incognito window to see the updated favicon.

Add external images to your asset library

When you'd use this: When browsing stock images from services like Unsplash, Pexels, or Pixabay in the CMS, you can save external images directly to your store's asset library. This ensures images remain available even if the external source changes or removes them.

Using it day-to-day:

1. Open the image selector in any content editor
2. Browse images from stock image services (Unsplash, Pexels, or Pixabay)
3. When you select an external image, the system downloads it and uploads it to your store's asset library
4. The image is stored with a URL-friendly name and tagged as an external import
5. The saved image appears in your "My Images" tab and can be reused across your store

The system handles the download and upload process automatically—external images are converted to local assets without requiring manual intervention. This protects your content from broken links if external services remove or modify images.

Troubleshooting:

• External image won't save — Some image services may block automated downloads. Try selecting a different image or uploading the image manually by downloading it to your computer first, then using the upload button in "My Images."
• Image appears in content but not in My Images — If you selected the image before it finished uploading, refresh the "My Images" tab to see the newly saved asset.

Add background videos to sections

When you'd use this: When building pages in the CMS, you can add background videos to sections to create dynamic, engaging content. Background videos can come from uploaded files, stock video libraries (Pexels, Pixabay), or YouTube URLs.

Using it day-to-day:

1. Select a section in the CMS editor to open its settings panel
2. Click the background control and select the Video tab
3. Choose your video source:
   • Stock Videos: Browse videos from Pexels or Pixabay by searching or selecting from the library
   • URL: Paste a direct video URL (MP4, WebM) or YouTube URL (including YouTube Shorts)
4. For stock videos, click a thumbnail to preview and select the video
5. For YouTube videos, the embed automatically loops, mutes, and autoplays with controls hidden
6. For direct video files, configure playback settings:
   • Toggle autoplay, loop, muted, and controls as needed
   • Adjust how the video fits within the section using the object-fit control (cover, contain, fill)
7. The video plays as a full-section background overlay, positioned behind your content blocks
8. Save your changes to apply the background video to the live storefront

Background videos are decorative and don't interfere with clicking or interacting with content blocks positioned over them. YouTube videos respect the CMS "Links Off" interaction toggle in edit mode.

Troubleshooting:

• Video won't autoplay on the storefront — Browsers require videos to be muted for autoplay to work. Make sure the muted setting is enabled if you want the video to autoplay.
• Object-fit control doesn't appear for YouTube videos — The fit control only applies to direct video files, not YouTube embeds. YouTube videos always fill the section area.

Control section backgrounds and image overlays

When you'd use this: When building pages in the CMS, you can add background colors or images to sections and control the opacity of image overlays. This lets you create visual hierarchy and ensure text remains readable over background images.

Using it day-to-day:

1. Select a section in the CMS editor to open its settings panel
2. Click the background control to choose between a solid color, an image, or a video
3. For background colors, use the color picker to select your desired color
4. For background images, click to browse your asset library and select an image
5. When using a background image, click the image thumbnail to adjust the image overlay opacity using the slider
6. Adjust how the image fits within the section (cover, contain, fill) and its position (top-left, center, bottom-right, etc.)
7. The background settings apply to the entire section across all viewports

The background and overlay controls provide a thumbnail preview of your selected image, making it easier to see what you're adjusting. When you switch between different media sources or search for new images, your previously selected background image remains in place until you explicitly choose a different one.

Control block backgrounds, appearance, and spacing

Where to find it: Admin → CMS → Theme Editor (block settings panel)

When you'd use this: When building pages in the CMS, you can add background colors or images to individual content blocks and control their appearance and spacing. This lets you create visual hierarchy within sections, highlight specific content, or build complex layouts without adding extra sections.

Using it day-to-day:

To add background colors or images to blocks:

1. Select a block in the CMS editor to open its settings panel
2. Click the background control to choose between a solid color or an image
3. For background colors, use the color picker to select your desired color
4. For background images, click to browse your asset library and select an image
5. When using a background image, adjust the image overlay opacity using the slider
6. Adjust how the image fits within the block (cover, contain, fill) and its position

To control block appearance:

1. Select a block in the CMS editor to open its settings panel
2. Click the appearance control to adjust visual styling
3. Set a color scheme for the block, or choose "inherit" to follow the section's color scheme
4. Add box shadows or borders to visually separate the block from surrounding content

To adjust block spacing:

1. Select a block in the CMS editor
2. Click the spacing control to adjust padding (inner spacing) and margin (outer spacing)
3. Adjust padding to control space between the block's border and its content
4. Adjust margin to control space between the block and neighboring blocks

Background, appearance, and spacing settings are available on most content blocks (such as headings, text, images, product cards, and order information). Utility blocks like navigation items, breadcrumbs, and logos offer spacing controls only to avoid visual clutter.

All settings are independent from the section's background and styling, so blocks can have their own visual identity within a section.

Troubleshooting:

• Block background doesn't appear — Make sure the block has content or minimum dimensions set. Empty blocks with no padding may not display backgrounds visibly.
• Block appearance settings are missing — Some utility blocks (navigation items, breadcrumbs, logos) only offer spacing controls. Content blocks like headings, text, and images have full background and appearance settings.

Add feature cards with hover effects and links

Where to find it: Admin → CMS → Theme Editor (add a Feature Card block)

When you'd use this: When you want to create engaging, interactive cards on your pages that reveal additional content or swap images when customers hover over them. Feature cards can link to product pages, collections, or any other page in your store.

Using it day-to-day:

To add a feature card:

1. Open the theme editor and navigate to the page you want to edit
2. Add a Feature Card block to your section
3. Select the block to open its settings panel
4. Switch between the Default and Hover tabs to configure what appears in each state

To configure the default state:

1. Select the Default tab in the settings panel
2. Choose an image from your asset library
3. Adjust how the image fits within the card (cover, contain, fill) and its position
4. Add text elements and buttons using the elements editor
5. Adjust vertical alignment to position content at the top, center, or bottom of the card
6. Enter a link URL—the first visible button's link is used as the card link, or you can set a fallback link for the entire card

To configure the hover state:

1. Select the Hover tab in the settings panel
2. Choose a reveal layout:
   • None: No hover effect (card remains static)
   • Caption: Content appears below the image on hover
   • Overlay: Hover content fades in over the image
3. Optionally select a different hover image—when set, the hover image crossfades over the default image on any layout
4. Add hover-specific text and buttons in the elements editor
5. Configure motion effects (zoom, lift, scrim) to add subtle animation on hover
6. Adjust overlay color, opacity, and direction for overlay layouts
7. Set vertical alignment for hover content to position it at the top, center, or bottom

To customize content and spacing:

1. Add and arrange text and button elements in the elements editor
2. Text elements support rich formatting including headings and body text
3. Button elements can use different styles (solid, soft, outline) and button scheme designs
4. Adjust spacing between elements using the spacing slider
5. Choose between default padding or custom padding for each edge of the content area
6. Group elements together in a row to create side-by-side layouts with custom spacing and distribution

To customize appearance and motion:

1. Configure transition speed to control how quickly the hover effect animates
2. Choose an entrance animation for hover content

Switch between desktop, tablet, and mobile preview modes

Where to find it: Admin → CMS → Theme Editor (viewport controls at the top of the editor)

When you'd use this: When building pages in the CMS, you can preview and edit your content across different screen sizes to ensure your store looks great on all devices. The viewport controls let you switch between desktop, tablet, and mobile views.

Using it day-to-day:

1. Open the theme editor and navigate to the page you want to edit
2. Locate the viewport controls at the top of the editor (Desktop / Tablet / Mobile switcher)
3. Click a viewport option to switch the editor canvas to that screen size
4. The editor displays your page content as it will appear on that device type
5. Make adjustments to layout, spacing, or content for the selected viewport
6. Switch between viewports to preview and refine your design across all screen sizes

The viewport switcher maintains your current selection even if you accidentally double-click—a viewport always remains selected so you can continue editing without interruption.

Troubleshooting:

• Editor doesn't respond when switching viewports — Try clicking the viewport button once. If the editor still doesn't respond, refresh the page and try again.

Duplicate sections, blocks, and columns in the theme editor

Where to find it: Admin → CMS → Theme Editor

When you'd use this: When building pages in the CMS, you can duplicate sections, blocks, or columns to quickly create similar components without rebuilding them from scratch. Duplicating a component creates an exact copy with all its settings, content, and nested elements.

Using it day-to-day:

1. Open the theme editor and navigate to

Add custom text fields to product information

Where to find it: Admin → CMS → Theme Editor → Product Info block

When you'd use this: When you need to display custom product information beyond the standard product fields (title, price, description). Custom text fields support dynamic variables, allowing you to show live product data such as item codes, SKU, or custom field values alongside descriptive labels.

Using it day-to-day:

To add a custom text field to product information:

1. Open the theme editor and select a Product Info block
2. In the block settings, locate the repeater that controls which information appears on product pages
3. Add a new item and select "Custom Text" from the field type options
4. Enter a label for this field (such as "Item Code" or "SKU")
5. Toggle the label visibility control to show or hide the label on

Insert dynamic variables into text content

Where to find it: Available in any rich text or text editor field in the CMS theme editor

When you'd use this: When you want to display live store information, product data, or customer details in your CMS content without hardcoding specific values. Variables update automatically to show real-time data on the storefront.

Using it day-to-day:

To insert a variable:

1. Open any text or heading editor in the CMS (such as product descriptions, section headings, or custom text fields)
2. Type {{ to trigger the variable picker
3. A dropdown appears showing available variables based on the page type you're editing
4. Search or browse the list to find the variable you need
5. Select a variable to insert it as a styled chip in the editor
6. The variable displays as a light blue badge showing its name (such as "Product Name" or "Store Name")
7. Continue typing around the variable as you would with normal text

To edit or remove a variable:

1. Click on a variable chip in the editor to open the variable menu
2. Select "Change variable" to pick a different variable
3. Select "Delete variable" to remove it from your content

Available variables depend on the page type you're editing:

• Store variables (available on all pages): store name, store URL, and other store-level information
• Product variables (available on product detail pages): product name, item code, price, SKU, description, images, and custom field values
• Customer variables (available on all pages when customers are logged in): customer first name, last name, email, company, and other profile information

For custom fields with multiple values, use index syntax to access specific values (for example, {{ product.custom.fieldName[0] }} retrieves the first value). You can also provide fallback text using the syntax {{ variable | default: 'fallback text' }} to display alternative content when a variable has no value.

Variables appear as placeholders in the editor and resolve to real data when customers view the storefront. The system automatically escapes variable values to prevent security issues.

Custom text fields that contain only variables with empty values automatically hide themselves from the storefront to avoid displaying blank content. This ensures your pages remain clean when product data is incomplete.

Troubleshooting:

• Variable picker doesn't appear when typing — Make sure you're typing {{ in a text or heading field. The variable picker is not available in all editor types.
• Specific variables are missing from the list — Variables are filtered by page type. Product variables only appear when editing product detail page templates, and customer variables require customers to be logged in on the storefront.
• Variable shows a placeholder on the storefront instead of real data — Check that the variable key matches an available data field for that page type. If the field has no value, the variable displays its fallback text or remains empty.