Troubleshooting

Common issues and fixes

Common issues and fixes A short list of the things merchants ask about most when setting up Reign. Each entry tells you what you are seeing and what to change in the theme editor. Work from the symptom that matches your screen. For how sections, blocks, and presets fit together, see Sections, blocks, and groups. A block reads "Block not found" This message appears in the editor preview where a block should render. It usually means the block was left in a state the section cannot draw, most often a block that was partly removed or one that no longer fits its parent. What to try, in order: 1. Reload the editor. A stale editor state often shows this message after a theme update or a quick edit even though the live store renders fine, and reloading clears it most of the time. 2. If it persists, open the section that holds the block and check its block list. If the affected block is empty or out of place, remove it, save, then add a fresh one with Add block and set it up again. 3. If the message appears across many sections at once, it is almost always the stale-state case in step 1, not a problem with each block. Reload and recheck before editing blocks one by one. A section looks empty A section can render with nothing visible for a few reasons. Check these: - It has no content blocks yet. Many Reign sections are empty containers until you add blocks (Sections, blocks, and groups explains why). Open the section and use Add block to add the content it expects (a heading, an image, a product, and so on). - Its content points at nothing. A section tied to a collection, a blog, or a product shows nothing when that source is empty or unset. Open the section settings and pick a collection or blog that has items in it. - It is hidden. Each section has a visibility toggle (the eye icon in the section list). If the section name is dimmed, click the eye to show it again. If the section shows placeholder shapes instead of your content, it is rendering correctly but has no real data yet. Add the products, images, or collection it needs and the placeholders give way to your content. Demo images are missing The photographs in the Reign demo are licensed for the demo store and do not transfer to your store when you install the theme. After install you will see placeholder shapes where those images were. This is expected. To fix it, add your own images: 1. Open each section that shows a placeholder. 2. In the section or block settings, use the image picker to upload or select your own image. 3. Repeat for every section that carries a placeholder. Use your real product and brand photography. Reused stock or demo imagery weakens the store and can clash with the rest of your content. The mega menu shows as a flat dropdown Reign's rich mega menu needs two things set up together. If either is missing, the menu falls back to a plain dropdown list, which is the safe default. 1. A navigation menu with the right depth. In your Shopify admin, under Navigation, the top-level menu item needs sub-items (and, for the richest layout, a third level under those). A top item with no children can only ever be a single link. 2. A matching block in the header. In the theme editor, open the Header section and add a Mega menu block. In its settings, fill the Parent menu item field with the exact name of the top-level menu item it should expand. With no matching block, that menu item stays a flat dropdown. So the flat fallback almost always means one of: the menu item has no children, or there is no Mega menu block in the Header whose Parent menu item matches it. Add the missing piece and the rich layout appears. Tips - After any change, save and reload the editor before deciding a problem is still there. The preview can hold an old state. - When a section or block will not behave, removing it and adding a fresh one from Add section or Add block clears most stuck states faster than hunting through settings.

Theme editor warnings

Theme editor warnings While you customize Reign, the Shopify theme editor sometimes shows a message on a section or block, or a notice in the sidebar. Most are not faults in the theme. They tell you a piece of content is empty, missing, or out of view. This article explains the messages you are most likely to see and what each one means. You work in the theme editor (in your admin, go to Online Store > Themes, then click Customize on Reign). For symptom-level fixes (a block reads "Block not found", a section looks empty, demo images are missing), see Common issues and fixes. For how sections, blocks, and presets fit together, see Sections, blocks, and groups. "Block not found" in the preview This shows in the preview where a block should render, usually as a placeholder box. It means the editor is pointing at a block that is no longer there or that the section cannot draw. It is an editor state, not a broken theme. A refresh of the theme editor clears most of these on its own. If it stays after a refresh, follow the steps in Common issues and fixes. A section will not load, or reads "Unsupported" Now and then a section shows a message that it cannot be displayed, or it fails to load in the preview. What to do: 1. Reload the theme editor in your browser. 2. Switch to a different page from the page dropdown at the top, then come back. This forces the editor to rebuild the preview. 3. If one specific section keeps failing, remove it and add a fresh copy from Add section. A placeholder image or "missing content" notice Where a section expects an image you have not set, the editor draws a placeholder shape, and a block tied to a collection, blog, or product that is empty or unset reports that it has no content to show. Neither is a fault. The section is waiting for you to pick a source. What to do: 1. Click the section or block in the sidebar. 2. In its settings, use the image picker to add your own image, or pick a collection, blog, or product that has items in it. Demo photography does not transfer when you install the theme, so a fresh install shows these placeholders until you add your own images. Common issues and fixes covers this in full. A dimmed section in the sidebar A hidden section stays in the sidebar with a dimmed name and an eye icon, but it does not show on the page. This is a setting, not a warning. You or a teammate hid it on purpose. Open the section's menu and choose to show it again. Changes you made are not on the live store The theme editor shows your edits in its preview before they are public. If a change is missing from the live store, it is usually one of these: - You did not click Save. Edits are not live until you save. - You edited a different theme, or an unpublished copy. Confirm you are customizing the live theme, or publish the theme you edited. - You are looking at a cached page. Reload the live store in a fresh tab or a private window. Animations look paused while you edit Reign can pause its reveal and scroll animations in the editor preview, so the page does not keep re-animating as you make changes. This is intentional and affects the editor preview only, not the live store. To change it, open Theme settings (the gear icon at the bottom of the sidebar), open the Animations panel, and adjust Pause animations in theme editor. The live store plays animations based on Enable reveal animations and Enable scroll effects. Tips - A refresh of the theme editor clears most one-off messages. Try that before anything else. - Empty is not broken. Many Reign sections are containers you fill with blocks, so a blank section usually needs Add block. - Nothing is public until you click Save, and a saved draft theme is still not live until you publish it. - If a single section keeps failing after a refresh, removing it and adding a fresh copy from Add section is faster than fighting the broken instance.

Images, sizing, and layout shift

Images, sizing, and layout shift This article covers three common image problems in Reign: pictures that look soft or blurry, working out what size to upload, and the page jumping around as it loads. None of these need a developer. Most come down to the size of the file you upload and the aspect ratio you pick on the section or block. Why images look blurry or soft The most common cause is a source image that is too small for the space it fills. Reign scales an uploaded image up to fit its slot. When the original has fewer pixels than the slot needs, the browser stretches it, and the result looks soft on a wide screen or a high-resolution phone. To fix it: 1. Find the original file you uploaded. Check its pixel width (right-click the file on your computer, then open its info or properties). 2. Compare that width to where it sits. A small thumbnail can be narrow. A full-width banner spans the whole screen and needs a much wider source. 3. Re-export the image at a larger width from your design tool, then re-upload it. Replace the existing image in the same setting so nothing else changes. A few things that make this worse: - A logo or graphic saved from a web page is often already small. Use the original master file, not a screenshot. - Saving a photo repeatedly as a low-quality JPG softens it each time. Export once from the original. - Stretching a square image into a wide slot crops and enlarges it. Match the image shape to the slot (see the next section). What size to upload Shopify serves the right size of each image to each visitor automatically, so you do not set widths in the editor. Your job is to upload a source that is large enough for the widest place it appears, then let the theme scale it down. A safe rule: - Full-width banners and heroes: upload the widest version you have. These cover the whole screen, so they need the most pixels. - Product photos: upload a high-resolution export. Product images get zoomed and shown on large screens. - Smaller images (icons, small cards, logos): a modest size is fine, but still larger than the slot, not smaller. It is better to upload an image that is too big than one that is too small. Shopify shrinks a large file for you with no loss of sharpness. It cannot add detail to a small one. Very large files do add weight, so do not upload print-resolution masters where a web export will do. Reserving space so the page does not jump Layout shift is when content moves after the page has started to show. A common cause is an image that has no reserved space: the browser paints the text first, then the image arrives and pushes everything down. Reign reserves space for images ahead of time, so in a default setup the layout holds still while images load. The shift usually comes back when an image does not match the shape the section expects. Many image sections and blocks have an Aspect ratio setting. The theme reserves a box in that shape, then drops your image into it. If you pick a shape that fights your image, you can see a jump or a crop. To keep things steady: 1. Open the section or block that holds the image. 2. Find its Aspect ratio setting and pick the shape closest to your image. If you want the image to keep its own proportions, choose Original or Adapt to image where that option is offered. 3. Use the same shape for every image in a repeating row (a collection grid, a slider) so the row does not stagger. Tips - When you swap an image, replace it inside the existing setting rather than removing the block and adding a new one. That keeps the reserved space and the rest of your settings intact. - If one card in a row sits taller or shorter than its neighbors, the images in that row are different shapes. Set one Aspect ratio on the section so every card matches. - If a banner looks sharp on your laptop but soft on your phone, the phone screen packs in more pixels. Upload a larger source rather than trying to fix it with editor settings. - A slow first load with a big image at the top is normal on a weak connection. Keep the top image well-sized but not oversized, since it is the first thing a visitor waits for.

Performance and Core Web Vitals

Performance and Core Web Vitals Reign is built to load fast, but the content you add decides the final score. This article explains how your choices (number of slides, autoplay video, images, and installed apps) affect page speed and Google's Core Web Vitals, and which Reign settings to check when a page feels slow. The motion controls covered here live in the Animations panel under Theme settings. What Core Web Vitals measure Core Web Vitals are three signals Google uses to grade how a page feels to a visitor: - Largest Contentful Paint (LCP): how long until the main content appears. Usually driven by your hero image or video. - Interaction to Next Paint (INP): how quickly the page responds when a visitor taps or clicks. - Cumulative Layout Shift (CLS): how much the layout jumps around while loading. You can measure a live page with Google PageSpeed Insights or the Lighthouse tab in Chrome. Run the test on the published URL, not the theme editor preview, because the editor adds extra scripts that slow it down. How your content affects speed The theme code is fixed. The content you configure is what moves the score. The biggest factors: Images Large image files are the most common cause of a slow LCP. Before you upload: - Export images at the size they display, not at full camera resolution. - Use a compressed format. Shopify serves modern formats automatically once you upload a reasonable source file. - Give every section its intended image. An empty image slot can fall back to a placeholder that still costs bandwidth. For sizing, blur, and layout shift, see Images, sizing, and layout shift. Hero slideshow Each slide you add is more to load. On a slideshow section: - Keep the slide count modest. Two to four slides is plenty for most stores. - The first slide loads first and counts toward LCP, so put your lightest, most important slide first. - Auto-rotate slides advances slides on a timer, and Rotate every sets the interval. Rotation does not slow the initial load, but a very short interval can feel busy and hurt the interaction signal. Video Video is the heaviest media a section can hold. On any section or block with a video: - Autoplay starts the video on load and forces it to play muted. An autoplay background video downloads immediately and competes with your main content for bandwidth, which can push LCP up. - Loop restarts the video when it ends. It has little load cost on its own. - Prefer a short, compressed clip. If a still image tells the same story, use the image. - Add a Poster image where the block offers one so visitors see something while the video loads. Animations Reign's motion is controlled globally in the Animations panel under Theme settings: - Enable reveal animations fades sections in as they scroll into view. - Enable scroll effects drives the parallax and scroll-linked motion. - Pause animations in theme editor stops motion while you work in the editor. It does not change the live storefront. These animations are tuned to be light. If you are chasing the last few points on a slow device, turning them off is an option, but it is rarely the main cause of a poor score. Apps Installed apps add their own scripts to every page, and Reign has no control over that code. Apps are the most common reason a fast theme scores poorly. To check: - Review your installed apps and remove any you no longer use. - After removing an app, confirm it left no leftover code. Some apps ask you to remove a snippet manually. - Re-run your speed test after each removal so you can see which app cost the most. Steps to diagnose a slow page 1. Open the live page in a private browser window (not the theme editor). 2. Run Google PageSpeed Insights on that URL. 3. Read the LCP value and the "Largest Contentful Paint element" it names. That tells you which image or video to optimize first. 4. Check the list of installed apps for scripts flagged as render-blocking. 5. Make one change, then test again. Changing several things at once hides which one helped. Tips - Test the mobile score, not only desktop. Most visitors are on phones, and Google grades mobile. - The theme editor preview is always slower than the live site. Judge performance from the published URL. - A new store with few apps and right-sized images starts in good shape. Scores usually drop over time as apps and heavy media pile up, so re-test after big changes.