Setup Show On Model Feature

Product images are usually displayed as clean product-only images on collection and search result pages. However, in some cases, you may want customers to see how a product looks on a model or in a lifestyle image without replacing the product's main featured image.

In Concept, you can use the Show on model feature together with the theme.model_media product metafield to display an alternate model image or video on product cards.

When this feature is enabled, customers can switch between the regular product view and the model view directly from the collection or search result page.

How to Set Up Show on Model in Concept

STEPS:

1. Create a Product Metafield

First, create a product metafield that stores the model media for each product.

This metafield is required for the Show on model feature to work.

Metafield Purpose Namespace and key
Model media Stores the image or video used when customers switch to model view. theme.model_media

1.1 Create the Model media metafield

  1. From your Shopify admin, go to Settings > Metafields and metaobjects.
  2. Click Products.
  3. Click Add definition.
  4. Enter the metafield name.

Example:

Model media

After you enter the name, Shopify will automatically recommend a Namespace and key.

  1. Click the suggested Namespace and key value if you want to edit it manually.
  2. Change the namespace and key to:
theme.model_media
  1. Click Select type.
  2. Choose File.
  3. Select Images and videos as the accepted file types.
  4. Make sure the metafield accepts One file only.
  5. Click Save.

Recommended setup:

Field Value
Name Model media
Namespace and key theme.model_media
Type File
Accepted file types Images and videos
Value type One file

Important:

The namespace and key must be exactly:

theme.model_media
docs__concept__setup-show-on-model-feature__01.webp

If the namespace or key is different, the theme will not be able to read the model media for the product card.

2. Add Model Media to Products

After creating the metafield, go back to each product and add the model image or video you want to display on the product card.

  1. From your Shopify admin, go to Products.
  2. Open the product you want to edit.
  3. Scroll down to the Metafields area.
  4. Find the Model media metafield.
  5. Select or upload the image or video that should be used for model view.
  6. Click Save.
  7. Repeat the same steps for each product that needs model media.

Example:

Product Model media
Linen Dress A model-wearing image
Oversized Shirt A lifestyle image
Leather Jacket A short model video
docs__concept__setup-show-on-model-feature__02.webp

Recommended media:

  • Use a lifestyle image or model-wearing image that clearly shows the product.
  • Use media with a similar ratio to your product card image ratio for the best display.
  • Use optimized images and videos to keep collection and search result pages fast.
  • Avoid using very large video files, as they may affect page speed.
  • Do not use PDFs, documents, or unrelated files. This feature is designed for images and videos only. Important:

Products without a value in the Model media metafield will continue to show the default product image, even when model view is enabled.

3. Enable Show on Model on Collection Pages

After adding model media to products, enable the Show on model option in the collection template.

  1. From your Shopify admin, go to Online Store > Themes.
  2. Find the Concept theme and click Customize.
  3. Open the collection template, such as Default collection.
  4. Select the Product grid section.
  5. Enable Show on model.
  6. Click Save.

Once enabled, the Show on model button will appear in the collection page top bar.

docs__concept__setup-show-on-model-feature__03.webp

When customers click this button, product cards with a value in theme.model_media will switch from the default product image to the assigned model media.

Recommended setup:

Setting Value
Template Collection template, such as Default collection
Section Product grid
Show on model Enabled
4. Enable Show on Model on Search Result Pages

The same feature is also available on the search result page.

  1. From your Shopify admin, go to Online Store > Themes.
  2. Find the Concept theme and click Customize.
  3. Open the Search template.
  4. Select the Search results section.
  5. Enable Show on model.
  6. Click Save.

Once enabled, the Show on model button will appear on the search result page when the search results include products.

docs__concept__setup-show-on-model-feature__04.webp

Recommended setup:

Setting Value
Template Search
Section Search results
Show on model Enabled
5. Preview the Show on Model Feature

After completing the setup, open a collection page or search result page on your storefront.

The page should display a Show on model button in the product grid top bar.

Check the following:

  • The Show on model button appears on the collection page or search result page.
  • Clicking Show on model switches product cards to model view.
  • Products with a value in theme.model_media display the assigned model image or video.
  • Products without a value in theme.model_media continue to display the default product image.
  • The button text changes to Product view when model view is active.
  • Clicking Product view switches the product cards back to the normal product image view.
docs__concept__setup-show-on-model-feature__05.webp

Expected behavior:

Action Result
Customer clicks Show on model Product cards switch to the model media view.
Customer clicks Product view Product cards switch back to the default product image view.
Product has theme.model_media The assigned image or video is shown in model view.
Product does not have theme.model_media The normal product image remains visible.
6. Notes and Limitations

Please note the following behavior:

  • This feature works on product cards in collection and search result pages.
  • It does not replace the product's featured image in Shopify admin.
  • It does not change product images on the product page.
  • Each product must have its own theme.model_media metafield value if you want it to show model media.
  • Products without model media will keep showing the default product card image.
  • The model view can display images or videos, depending on the file selected in the metafield.
  • For the best result, use media with a similar aspect ratio to your product card image ratio.
  • Very large videos may affect collection page performance.
  • The Show on model option must be enabled separately on collection and search templates.
  • The metafield namespace and key must be exactly theme.model_media.

Developer reference:

File Purpose
sections/main-collection.liquid Adds the Show on model setting and button on collection pages.
sections/main-search.liquid Adds the Show on model setting and button on search result pages.
snippets/product-card.liquid Reads product.metafields.theme.model_media.value and renders the model media on the product card.
assets/collection.js Handles the model view toggle and remembers the selected view in local storage.
assets/collection.css Shows or hides the model media when model view is active.

The product card only renders model media when both conditions are met:

{%- if show_on_model and product.metafields.theme.model_media.value != blank -%}

This means:

  1. The Show on model setting must be enabled in the section.
  2. The product must have a value in the theme.model_media metafield.

Troubleshooting

If the Show on model feature does not display correctly, please check the following:

  • Make sure the Model media metafield has been created under Products.
  • Make sure the namespace and key are exactly theme.model_media.
  • Make sure the metafield type is File.
  • Make sure the accepted file types are Images and videos.
  • Make sure the metafield is set to One file, not a list of files.
  • Make sure each product has a valid image or video selected in the Model media metafield.
  • Make sure Show on model is enabled in the Product grid section for collection pages.
  • Make sure Show on model is enabled in the Search results section for the search page.
  • If the button appears but a product image does not change, check whether that product has a theme.model_media value.
  • If the image is cropped or does not align well, use a model image with a similar ratio to the product card image ratio.
  • If a video does not display as expected, try using a smaller Shopify-hosted video file.
  • Clear your browser cache and refresh the storefront.
  • Make sure you are using the latest version of the Concept theme.

Need Further Assistance

If you encounter any issues or need additional help with your Concept theme, please reach out to our support team via our Ticket System for assistance within 8 hours.