Can anyone aim me at the right place to set placeholder images for the new Horizon theme please?
Hey @Fe_Pixie 
Horizon uses Shopifyâs built-in SVG placeholders that automatically appear when product or collection images are missing, rendered through the placeholder_svg_tag filter with names like hero-apparel-1, product-apparel-2, and detailed-apparel-1.
Youâll find these placeholders throughout the Horizon theme in files like snippets/card-gallery.liquid (lines 215-217), sections/hero.liquid (lines 157, 189), snippets/media.liquid (lines 48, 73), and blocks/image.liquid (line 56).
To change which placeholder appears, youâll essentially just want to edit the placeholder name in the liquid code, for example changing {{ âhero-apparel-1â | placeholder_svg_tag }} to use hero-apparel-2 or hero-apparel-3 instead.
If you want to use. your own custom placeholder images though, youâd need to upload your images to the assets folder and replace the placeholder tag entirely with an image tag like <img src="{{ 'your-placeholder.jpg' | asset_url }}" alt="Placeholder">.
One thing I did want to mention is that our built-in SVG placeholders cannot be modified directly, so you would either need to switch between the available options or replace them with your own custom images. Hope this helps - let me know if I can clarify anything on our end here. 
Iâm pretty sure they meant more information regarding the <placeholder-image> web-component used inside the hero.liquid theme block for example.
You can find everything relevant inside the assets/placeholder-image.js file. Basically, the web-component retrieves an URL from the following list :
## General
https://cdn.shopify.com/static/themes/horizon/placeholders/general-1.png
https://cdn.shopify.com/static/themes/horizon/placeholders/general-2.png
https://cdn.shopify.com/static/themes/horizon/placeholders/general-3.png
https://cdn.shopify.com/static/themes/horizon/placeholders/general-4.png
https://cdn.shopify.com/static/themes/horizon/placeholders/general-5.png
https://cdn.shopify.com/static/themes/horizon/placeholders/general-6.png
https://cdn.shopify.com/static/themes/horizon/placeholders/general-7.png
## Products
https://cdn.shopify.com/static/themes/horizon/placeholders/product-ball.png.png
https://cdn.shopify.com/static/themes/horizon/placeholders/product-cone.png.png
https://cdn.shopify.com/static/themes/horizon/placeholders/product-cube.png.png
There are no ways to change these placeholders for now except if you extend the web-component to serve your own URLs 
1 Like
Thanks Alan - it looks like you are referring to the older style templates though
1 Like
thanks - this is a better answer for the Horizon templates
1 Like
@shopify - popping these in the theme settings as options would be really helpful 
weâre getting really close to being able to customize most things without hacking the base theme styles 
1 Like
Hey again @Fe_Pixie and @teamdijon!
Just wanted to follow up on this here.
The <placeholder-image> web component that @teamdijon mentioned was indeed part of Horizon in versions prior to 2.0.2. However, it was removed due to performance impacts, which is why the current version uses the traditional placeholder_svg_tag approach I described there.
So if youâre on Horizon 2.0.2 or later, youâll see the standard implementation I mentioned. If youâre on an earlier version, youâd see the web component approach with the assets/placeholder-image.js file.
@Fe_Pixie - for the theme settings feature request, Iâll definitely put that through! It would be great to have those placeholder options customizable regardless of the implementation approach.
Let me know if I can clarify anything more on my end here, happy to help out further if needed
1 Like
Hi Alan,
Would like to add to the feedback for Horizon themes image placeholders and hopefully create a new standard for Shopify store themes:
- Ideally, there should be schema settings allowing users to set their own placeholders on banners & products. I understand that may not fall in line with Shopifyâs direction, so instead I recommend;
- Show image placeholders in design mode only, where in the customer site, a background colour iestablishes bounding areas.
There are many reasons not to include placeholder images from a content perspective. Here is one with user input limitation; âAll Productsâ and âVendorâ collection templates
e.g. Horizon/Heritage 2.0.3
Thanks!
C
1 Like
2.2 and 2.3 were released after this post was started - nice to see they redid the image loading - iâd noticed it was dodgy sometimes.
the problem with editing the theme to have custom images is that you canât then update easily to the next version. And placeholder images are needed because there is also no option to display an image only if there is one - for example in collection template headers (as demonstrated by cee_em) and collection cards. or on products.
having a default image (or colour or no image) for blocks where you can set an image from data would be wonderful - but probably easier to implement for Shopify is putting default images in the theme settings
i will swap over the âsolutionâ (current suggestion) to reflect the new template for future visitors
1 Like
For the actual image management thereâs an argument to be made any type placeholder default override should be in the brand settings as image/media assets , separate from the theme system so it actually works across all channels.
Otherwise all this is , for the online-sales channel alone, is some form of an additional image/media override setting/block in EVERY resource template and the logic.
Which I donât see happening, even with @cee_emâs example of when we need to have NO placeholder at all 
.
1 Like
Agree that âno imageâ is the way to go, then build upon that. Tried to keep my feedback to placeholder images & within context of Horizon. 
For a template-based ecosystem, Iâm of the opinion that most section or blocks should not render unless there is static or dynamic content available. @Alan_G Always happy to provide use cases on this if it helps. Keen to provide feedback to create a better Shopify UX for all.
1 Like
Hi all. Really appreciate all this thoughtful feedback.
I do think @cee_emâs suggestion about showing placeholders only in design mode is a smart one for sure, and @PaulNewton thatâs a fascinating idea about putting this in brand settings for cross-channel consistency.
@Fe_Pixie thanks for your explanation regarding how updating the theme to have custom images can cause updates to potentially break, I do understand where youâre coming from here.
Would it be fair to say that âno placeholder by defaultâ is the preferred approach for you folks, with native options for custom placeholders via theme settings and conditional rendering?
Before I put together the feature request though, @cee_em you mentioned having specific use cases? Would love to see those along with any other real-world examples from anyone else so that I can set up an accurate feature request on my end here. The vendor collection template issue you showed is exactly the kind of concrete scenario that helps strengthen these requests in my experience. Let me know what other details would be helpful to include and hope to speak soon.
I would like to see the placeholder images in the template settings so they can be changed with the templates - or in the brand settings as @PaulNewton suggested. an option in either of these for âno imageâ or background color instead, could also be included.
bonus points - options for product placeholders, collection placeholders, and design element placeholders
slightly offtopic - default content in blocks that use a data source for content (eg collection links list using a metafield to fetch a list) should hide the element if no results, not make up links - eg.
off topic - release 2.1.0 seems to have broken the desktop dropdown menu :o **goes to find someplace to moan about that **
Thanks @Alan_G this is more or less the way to go! Ideally, it would be great to see that Sections & Blocks are conditionally rendered if its main data source is unavailable or if theme default data is unchanged.
In Horizon/Theme Blocks Iâve noted that collection_list and product_list prevent rendering of the relevant block, which is great. However when there is no available admin/custom data, the section is still rendered as this is the current standard.
The info I have to pass on is image placeholder adjacent. But shares the same goals.
Scenarios & Pain points
Context: Describing challenges of establishing default templates within Shopify store themes or unique customer experiences.
- Theme can be published with themeâs default content
- Certain default templates are not user editable (Vendor Template, All Products Collections)
- Metaobjects & Metafields are likely not being fully utilised as sections/blocks are still being rendered when there is no data.
- Poor customer experience results if connected data changes (not every business has a dedicated team to monitor)
- How placeholder sections/blocks are rendered is inconsistent per Shopify store theme. Design mode rendered sections/blocks are mixed.
- As mentioned, currently code adjustments are required for Store themes, meaning changes are lost in theme updates.
Examples
- Collection Template Established - Featured Image / Custom data is connected to image setting.
- Image is either not applicable or available for certain themes. Section is rendered
- Product or Collection related section is established
- When product or collection is no longer available, majority of themes render placeholder section.
- In Horizon/Theme Blocks Themes - Instructions indicate blocks are conditional
But when there is no input / data, placeholder blocks render
e.g. If remaining data source if unavailable, section & blocks are still rendered
- Specific example of placeholder corrections & limitations
- I actually handed over a Horizon based site last week but removed placeholder code changes prior as I was anticipating frequent updates. Instead of relying on not rendering the placeholder or referring to static img url, I resorted to adding collection images in the Admin. This was viable for this project but not for others where there are number of collections.
- Horizon - Header > Mega Menu setting âFeatured collectionsâ feature was picking up on the parent link âAll Collectionsâ, featuring an image which cannot be managed by users. This should be removed or left if image placeholders are available to update.
- Creating a unique experience with custom data
- Placeholder will render regardless if data is available creating a negative customer experience.
e.g. connecting single line text or image file metafields to products. Blocks render if data is not available.
Bonus
Recently stumbled on theme Playroom 1.9 which includes default image option
Horizon 2.1.0 Handling Sections & Blocks without data as expected:
Probably missed something, but hope this helps!
@Fe_Pixie Didnât see your update as I was collating info in between jobs. I like how weâre on the same page!
P.S. oh no 2.1.0
1 Like
Thanks @Fe_Pixie and @cee_em, really appreciate all of the detailed feedback here. I canât guarantee that weâll implement all of these ideas or when they would be released in a new Horizon version, but Iâm more than happy to file a feature request on my end here and get that sent up to the product team.
Let me know if I can add anything else to the request log on my end and Iâm happy to make any edits. Thanks again for the feedback, always great to hear how we can improve things
1 Like
Hey @Alan_G have another contextual aspect to highlight for placeholder images.
What: Drawer menu - Link structure varies height with vs without collection image, Menu user input options
Related: Image availability, Pages, Blogs, Blog Posts, External Links
Schema Setting: Header > Menu > Style > Collection images
It may be worth providing a different layout & user choice for mobile. Currently the text forward options Featured Collections and Featured Products works better than Collection Images. Also picked up that Blogs, Pages & External links cannot render a featured image at this point in time
Hey @cee_em thanks for calling this out, really helpful.
Iâm going to file a feature request for Horizon to add a mobile-specific menu layout option and a configurable placeholder for items without images. Just want to make sure we capture your use case correctly though, so would you be able to share how you think menus might be structured that would benefit from this based on what youâve seen (e.g., mix of collections, pages, blogs, external links) and whether this is primarily a mobile need?
For example, would you mainly aiming for consistent item heights, improved mobile performance, or showcasing brand imagery in the menu? If you have examples or a preferred fallback (text-only, placeholder image, etc.), that context would be great!
Thanks @Alan_G
I can definitely provide context for businesses that do not have their own product lines.
Main menus are primarily collection, page & blog based. All Collections, All Products, or links to products are regularly used. Child & grandchild menu structure may vary per parent link. Additionally, some links are used for groupings only (URL:#) however this is generally implemented this less. External links are in the minority.
As users canât manage featured images for all the options above, one placeholder image for all menu links may not be suitable, hence recommending other existing menu options. I think it would be great to get others input on this, however. Rather than not offering the Collection Images layout for mobile, adding user information is a better approach.
- MVP
- Make consistent item heights or consider other layouts e.g. List + image
- Add (mobile) menu drawer layout option
- Provide user guidance for menu setup.
- Ideal setup
- Connected resources to menu links (i.e. managed via Admin > Menus). Uses admin resources first then custom data if set via menus
- Connected resources to menu links (i.e. managed via Admin > Menus). Uses admin resources first then custom data if set via menus
Hey @cee_em Thanks for the detailed context, this is really helpful!
Iâve filed a feature request for Horizon covering a mobile-specific menu layout and a configurable placeholder for items without images. I canât guarantee if/when these changes would be rolled out, but did just want to let you know Iâve set up that request on my end. Hope this helps a little bit as always!
1 Like