Troubleshooting

Almost every Lapels issue comes down to one of three things. A setting pointed at something that is not there. Data Shopify needs before the theme can draw it. Or a feature behaving exactly as designed, in a case you had not seen yet. This page lists the symptoms merchants hit most often, the real cause behind each, and the exact fix.

Every setting, section, and option named below is real and matches the theme. If you are setting Lapels up for the first time, start with the Setup guide and come back here when something does not appear.

Color swatches show as words instead of colors

Symptom: A product’s color option renders as text pills on the product card and in the variant picker, rather than as colored discs.

Cause: Lapels decides which option is the visual one from the option’s swatch data, never from its name. It applies an all-or-nothing rule. An option is drawn as swatches only when every one of its values carries swatch data. One value without, and the whole option falls back to text.

That is deliberate. A half-swatched option would render the missing values as blank boxes, which reads as a broken page rather than as missing data.

Swatch data itself comes from Shopify, not from the theme. Shopify only attaches it to a linked color option, and it only offers a linked color option on a product that has a category supporting color swatches.

Fix:

1. Open the product and confirm it has a category set under Product organization. A product with no category cannot carry a linked color option at all.
2. Confirm the color option is linked, meaning its values were picked from Shopify’s color list rather than typed by hand. An option merely named “Color” carries no swatch.
3. Check every value has a swatch against it. One blank sends the whole option back to text.
4. On cards only, confirm Show color swatches is on in Theme settings → Product cards. That switch affects cards alone. The product page draws swatches either way.
5. If the category lists a Color attribute and Shopify still refuses a linked option, move the product to the parent category and try again.

Caution

Carrying a Color attribute is not the same as supporting swatches. Some categories list one and still refuse a linked color option. Take one product all the way through before you set up the whole catalog. The full walkthrough is in Fit and swatches.

Filters are missing from a collection page

Symptom: The collection or search page shows the sort control but no filter panel, or a filter you set up renders nothing.

Cause: Lapels does not contain any filters. Which filters exist, what they are called, what order they appear in, and how their values are grouped all come from Shopify’s free Search & Discovery app. The theme renders whatever you configure there, and renders nothing when there is nothing to render. A collection with no filters configured shows no panel.

A filter whose source no longer exists is the other half of this. If you rename or remove the product option a filter was built on, the filter stays in the app’s list and draws nothing on the storefront.

Fix:

1. In your Shopify admin, go to Apps → Search & Discovery → Filters and confirm your filters are set up. Install the app first if it is not there. It is free and made by Shopify.
2. Open each filter in the app. If it reads Source not found, the product option behind it is gone. The source cannot be re-pointed, so remove that filter and create it again against the current option.
3. In the theme editor, open the Collection section (or Search results) and confirm Show filters is on. Set Layout to Sidebar or Drawer to choose where the panel sits.
4. Shopify only emits the filter values present in the current result set, so a narrow collection legitimately shows fewer values than the shop-all page.

See Theme settings → Filters for how filters apply, and Collection and search for the rest of the panel.

The cart opens as a page instead of a drawer

Symptom: Clicking the cart in the header navigates to /cart rather than sliding a drawer over the page, or the reverse.

Cause: One setting decides it. Cart type in Theme settings → Cart is either Drawer (the default) or Page, and it governs what the header’s cart button does everywhere.

Fix:

1. Go to Theme settings → Cart and set Cart type to Drawer.
2. If the drawer still does not open, open the Overlay group at the foot of the editor’s section list and check the Cart drawer section is not hidden. That group’s three drawers, cart, search and quick view, cannot be removed, only hidden. So a hidden one is the only way to lose the drawer from there.
3. Remember that Drawer does not remove the cart page. /cart stays a real, working page with its own settings, and anyone who lands on it directly, from an email or a bookmark, gets it. Configure both surfaces.

See Cart and gift wrapping and the Cart drawer.

A section’s text is hard to read

Symptom: One section’s headings or body copy sit too close to the background, or a section looks out of place against the rest of the page.

Cause: Lapels has no per-section color pickers. Every section takes a Color scheme, which is a named set of colors you define once under Theme settings → Colors. The section setting only chooses which scheme it uses. A section that looks wrong is nearly always pointed at the wrong scheme, not miscolored.

Text sitting on a photograph is a separate control. The sections that set type over a picture wash it behind the words rather than flattening the whole image. Media hero and Hero scroll sequence do it with Direction, which sets where the wash falls, and Overlay strength (Soft, Medium, Strong). Tabs banner calls the same pair Style (None, Half, Full) and Strength.

Slideshow does it per slide instead, with Overlay strength, Direction and Overlay color. Each carries its own value for desktop and for mobile behind a Device switch. So a slide can be washed hard on a phone, where the crop is tight and the copy sits over the busiest part of the picture, and lightly on a desktop.

Fix:

1. Open the section and set its Color scheme to the one you want. The six shipped schemes are three light grounds a step apart and two dark ones, plus an editorial variant.
2. To change the colors themselves, edit the scheme under Theme settings → Colors. That updates every section assigned to that scheme at once, which is the intended behavior.
3. Over a photograph, raise Darkening strength to Strong. On a slideshow, raise that slide’s Gradient at the bottom instead. Then check the section on a phone. A bright or busy image needs more than a calm one.
4. For drawers, popups, and the image viewer, the schemes are set globally: Popup and dialog color scheme and Drawer color scheme under Theme settings → Colors, and Color scheme under Theme settings → Modals.
5. Check the result in every scheme you use. Text needs a contrast ratio of at least 4.5:1 against its ground (3:1 for large text), and that has to hold on the dark schemes as well as the light ones.

Reveals and animations are not playing

Symptom: Sections appear already in place rather than arriving as you scroll, carousels do not glide, and images do not zoom under the pointer.

Cause: One of three things, in this order of likelihood.

1. The visitor asked for less motion. Lapels always honors the operating system’s reduced-motion preference, whatever the theme setting says. That means no reveals, no smooth scrolling, no hover zoom, and no decorative animation. If you have that preference on in macOS, Windows, iOS, or Android, you will see the theme exactly as a visitor who asked for it does.
2. Motion is set to None. Theme settings → Motion → Motion is a single dial over the whole theme: Full, Subtle (about 60% of the designed length), or None. On None the four settings under it disappear from the panel, because there is nothing left for them to time.
3. Reveal sections on scroll is off, or Reveal stagger is at 0 so a group arrives all at once.

Fix:

1. Check your own device’s reduced-motion setting first. This is the answer far more often than a theme setting is.
2. In Theme settings → Motion, set Motion to Full and turn Reveal sections on scroll back on.
3. Enable smooth scrolling and Zoom images on hover are desktop-pointer behaviors. Neither does anything on a phone, where the browser’s own scrolling and the absence of a hover state already decide the answer.

See Motion.

A video does not play by itself

Symptom: A video sits on its poster image until someone presses play.

Cause: Autoplay ships unchecked wherever the film is the subject of the section, because a film that starts itself is a decision the merchant makes. That covers Video, Image with text, and the video blocks in Media row and Media carousel.

It ships on where the film is a texture rather than the subject, meaning the video tiles in Media mosaic and Feature tiles, and the Video content block.

Beyond that switch, three rules apply, and none of them can be configured away.

• Uploaded videos only. A YouTube or Vimeo link always waits for a click, because the theme cannot start someone else’s player silently.
• Sound is always off for a film that starts itself. Browsers refuse to autoplay audio, so this is not a setting.
• A visitor who prefers reduced motion gets the poster, held still, and a control to play it. Setting Theme settings → Motion → Motion to None does the same thing for everyone, so check that before you check the section.

Fix:

1. Open the section and turn on Autoplay. Play as loop sits beside it.
2. If you pasted a YouTube or Vimeo link, upload the file to Shopify instead and use the section’s Video field. That field takes precedence over the URL below it. The URL only plays when the field above is empty.
3. Set a Poster image so the frame is not empty before the film starts. Without one the theme uses the video’s own first frame.
4. The playback also stops while the video is off screen. Scroll it fully into view before deciding it is not running.

The gift wrap product shows up in a collection

Symptom: Your gift wrap product appears in a collection grid as an ordinary product a shopper can browse and buy on its own.

Cause: Gift wrapping is a real product in your catalog, because Shopify has no such thing as a priced option. A charge on a cart is a line, and a line is a product.

Lapels hides that product from featured collections, product carousels, related products, recently viewed, search results, the suggestions that appear as a visitor types, and collection grids. But it only does so when the product is actually nominated in Theme settings → Gift wrapping → Gift wrap product. With that field empty, every guard in the theme is inert and the product is just a product.

Fix:

1. Set Gift wrap product under Theme settings → Gift wrapping to the product you created. This is what switches the offer on and the hiding with it.
2. Remove the product from every manual collection, and check that no automated collection’s conditions catch it. Give it a Product type of its own, and exclude that type in your catch-all collection’s rules.
3. /collections/all is not a collection anyone made and has no rules to exclude anything. The theme’s own filter is the only thing keeping the wrap out of it, which is another reason step 1 matters.
4. Create the product priced as you want to charge, published to the Online Store sales channel, with inventory tracking off so it never sells out mid-order.

An image looks cropped or badly framed

Symptom: A photograph is cut off at the top, a face is out of frame, or a card image is squarer than the picture you uploaded.

Cause: Most image frames in Lapels hold a fixed shape and fill it, so a source photograph that is not that shape gets cropped to fit. Which shape depends on where the image is, and each surface has its own control:

Where	Setting	Options
Product cards	Theme settings → Product cards → Image ratio	Adapt to the image, Square (1:1), Portrait (4:5)
Cart drawer, cart page, cart recommendations	Theme settings → Cart → Image ratio	Tall (2:3), Portrait (3:4), Square (1:1), Landscape (4:3)
Search overlay and suggestions	Theme settings → Search → Image ratio	Tall (2:3), Portrait (3:4), Square (1:1), Landscape (4:3)
Article cards	Theme settings → Blog → Image ratio	Tall (2:3), Portrait (3:4), Square (1:1), Landscape (4:3)
Image cards in a drop-down menu	Theme settings → Navigation → Image ratio	Tall (2:3), Portrait (4:5), Square (1:1), Landscape (4:3)
The collection page’s banner	Collection → Image focus	Nine positions, from Top left to Bottom right

Fix:

1. Choose the ratio that matches your photography and keep your source images consistent, so the same crop behaves the same on every card. Adapt to the image on product cards leaves the picture alone entirely, at the cost of a ragged grid.
2. For a product or file image, set its focal point in Shopify’s image editor. Lapels reads it and keeps that part of the picture in frame rather than center-cropping. Collection images carry no focal point, which is exactly why the collection banner has an Image focus setting instead.
3. On hero and banner sections, upload a Mobile image, meaning a portrait crop for narrow screens, rather than letting a wide landscape photograph be cut down to a phone. Height and Maximum height on those sections decide how much of it you get.
4. Mega menu image cards borrow their picture from whatever the link points at, so a tall crop taken from a wide collection image will always look softer than a purpose-made upload.

A menu is empty, or a mega menu opens as a plain drop-down

Symptom: The header shows no links, shows the wrong menu, or a top-level item you set up as a mega menu opens as an ordinary narrow drop-down.

Cause: Lapels holds no menu links of its own. Navigation is built in your Shopify admin under Content → Menus, and the Header section simply points at a menu. The theme then reads the shape of that menu and decides what to render. You never pick a navigation style. A Mega menu block is bound to a top-level item by name, and if that name matches nothing with sub-items under it, the storefront quietly keeps the ordinary drop-down.

Fix:

1. Go to Content → Menus and confirm the menu has links. Nest items by dragging one under another. Nesting depth is what turns a link into a drop-down, and a drop-down into flyout columns.
2. In the editor, open the Header section and check Main menu points at the menu you intend. Menu edits appear straight away. There is nothing to republish.
3. For a mega menu, open the Header, select the Mega menu block, and type the top-level item’s name into Main menu item exactly as it reads in your menu. Capitals and stray spaces are ignored.
4. That item must already have sub-items in Content → Menus. Lapels will not promote an item with nothing under it, and the editor tells you which of the two problems it is. The Header holds up to 8 blocks in total, mega menus and custom links together.
5. Footer columns each carry their own menu setting. Open the block in the Footer section and point it at the right menu.

See Navigation and menus.

The newsletter popup never appears

Symptom: The signup popup does not show on the storefront, or it stopped showing after you saw it once.

Cause: The popup asks once and then leaves that shopper alone. Its behavior is governed by Open it, Ask again after, and Pages. It never opens itself inside the theme editor, because a panel that reappeared every few seconds over the section you are editing would be unusable.

Fix:

1. Confirm the section is there at all. Unlike the cart drawer, the search drawer and the quick view, the popup is one you add: open the Overlay group at the foot of the editor’s section list, choose Add section, and pick Newsletter popup. You can have one.
2. Select the section in that group to open the panel for a look. It will not open on its own in the editor.
3. Confirm Show the popup is on. Turning it off pauses the popup without losing what you have written.
4. Check Open it. After a delay waits the number of seconds in Delay (12 by default). After scrolling waits until the shopper reaches Scroll depth, and opens after 20 seconds instead on a page too short to scroll. When they go to leave is desktop only. A touch screen has no pointer to leave with, so there it also opens after 20 seconds.
5. Ask again after is 30 days by default. If you have already dismissed it, you will not see it again for that long on that device. Test in a fresh browser profile, or clear the site’s data.
6. It never asks again once a shopper has subscribed, from this popup or from anywhere else in the theme.
7. Check Pages. Set to Home page only, it does not open anywhere else.

See Newsletter popup.

Related products or Recently viewed render nothing

Symptom: The section shows a worked example in the theme editor, then nothing at all on the live page. No heading, no rule, no empty strip.

Cause: This is the designed behavior, and it is not the same cause for the two sections.

Related products draws Shopify’s own recommendations, which Shopify generates from your catalog and your order history. A new store, or a thin one, has none yet. The Complementary option draws a list you set by hand in Search & Discovery, so it is empty until you set one.

Recently viewed draws on what that visitor has already looked at, and the history lives only in their own browser. A first visit has nothing in it, and a different device starts empty again.

In both cases the section collapses to zero height rather than leaving a heading over an empty gap. The editor shows an example instead so you can judge the design.

Fix:

1. For Related products, leave Recommendation type on Related and give Shopify time and orders to work from. For Complementary, set the lists under Apps → Search & Discovery first.
2. For Recently viewed, use the Products select to decide what a visitor with no history gets: Recently viewed, Recently viewed, then recommendations, or Recommendations.
3. Set a Fallback collection or Fallback products on the Recently viewed section. That fills the shelf when there is neither a history to draw on nor anything to recommend against. A first visit landing on search is the usual case, where the section would otherwise not appear at all.

An app’s block is not in the Add block list

Symptom: You installed an app, but its block does not appear when you click Add block in a section.

Cause: App blocks only exist for apps that ship a theme app extension. Apps that do not are added as app embeds instead, which have no block. And not every section accepts blocks from apps. Most do, but a section built around a fixed composition does not. That includes the age gate, the scroll sequence, and the flip cards.

Fix:

1. Confirm the app is installed and, where the app asks for it, enabled for your theme.
2. In the editor, click Add block inside a section and look under Apps. If the section has no Apps entry, it does not host app blocks. Use a nearby section that does. The product page, the blog and article pages, plain pages, the contact page, many homepage sections, and the 404 and password pages all accept them.
3. For an app embed, open the editor’s App embeds panel in the left sidebar and switch it on there.
4. For a plain snippet with no app behind it, use the Custom Liquid section or block rather than editing theme files, so a theme update does not undo it.

Translated text stays in English

Symptom: You published a second language, but some on-screen text is still in English. Or the layout does not flip in Arabic.

Cause: Lapels sets text direction from the served locale, so a page has to actually be requested in that language before anything changes. Text that stays in English is usually one of three things: the language is not published, you are looking at the store’s default language, or the words in question are your own content rather than the theme’s.

That last one is the common case. Section headings, button labels you typed, product copy, collection descriptions, and page content are yours. The theme cannot translate them for you.

Fix:

1. Add and publish the language under Settings → Languages in your Shopify admin, then visit the storefront in that language.
2. For theme text you want worded differently, go to Online Store → Themes → Actions → Edit default theme content and edit it per language. Lapels ships all 13 translations complete, so this is for changing wording rather than filling gaps.
3. For your own content, use Shopify’s free Translate & Adapt app under the matching resource. That covers product titles, collection names, page copy, menu labels, and image alt text.
4. Confirm you are testing the published language and not a draft.

See Translations & internationalization.

The language or currency selector is missing from the header

Symptom: You turned the selector on in the Header section and nothing appeared.

Cause: Both selectors are switched off by default, and both are additionally withheld when there is nothing to choose between. Lapels only draws the country selector when your store has more than one country available, and the language selector when it has more than one published language. A control with a single option is not a control.

Fix:

1. In the editor, open the Header section and turn on Show country and currency selector and Show language selector.
2. Publish a second language under Settings → Languages, and add a second country or region under Settings → Markets, in the Shopify admin.
3. The same selectors are also available as footer blocks, if the header band is already full.

An SEO check says a page has no main heading, or has two

Symptom: An SEO or accessibility audit tool reports a missing or duplicated page heading on the homepage or a landing page.

Cause: On templates that have no obvious title of their own, Lapels lets you nominate which section carries the page’s main heading. Hero and banner sections have a Use as the page heading checkbox, off by default. Nominate none and the page has no main heading. Nominate two and it has two.

Fix: Open the section you want to carry the page title, usually the first hero, and turn Use as the page heading on. Turn it off everywhere else on that template. Exactly one section per template should have it.

Your store does not look like the demo

Symptom: After installing, your store does not look like Lapels’ marketing images. Sections are empty, or show placeholder graphics.

Cause: The demo is populated with a catalog, photography, and copy. Your installed theme ships the same section layout, but the product, collection, image, and video references inside those sections are intentionally empty so you fill them with your own. Empty sections render placeholders or nothing.

Fix:

• This is expected, not a defect. Work through the homepage in the editor and fill each section: pick your collections, choose products, upload your own hero image or video.
• Hide the sections you are not ready to fill and bring them back later.
• Set your wordmark, logo, colors, and fonts under Theme settings so the look is your store’s rather than the demo’s.
• The theme preset you picked when you added Lapels, which is Lapels, Kaolin, or Damascene, decides the starting palette and fonts. Those are ordinary settings you can keep editing.

See Building the homepage for what each section needs.

Still stuck?

If you have checked the cause and fix above and the issue persists, contact Lapels support. We reply within 12 hours. To help us resolve it fast, include:

• Your store URL and the page where you see the problem, such as a product, a collection, or the homepage.
• The exact symptom and what you expected instead.
• The section and setting involved, and what you have it set to.
• Whether it happens on Preview, the live storefront, or both, and on desktop, mobile, or both.

You can also reach us through the general contact page. Back to the documentation home.

Related: FAQ · Fit and swatches · Performance and accessibility · Lapels support replies within 12 hours.