Remove Images From Product Description

- 1 answer

I would like to show product images from the description only on mobile devices. I don't know how to split the images from the product.description.

         <div class="product-description rte" itemprop="description">
         // this works how I want it to. shows images and text
         <div class="mobileShow"> 
          {{ product.description }} 


         // if not mobile device only show text. strip out images.
           {% if product.description contains "<img" %}
           // ??



If you're wanting to hide all images within the description on mobile you can use a media query to target them.

The media query is dependent on the theme, though. Here's an example:

@include media-query($small) {
  .product-description img {
    display: none;

You'd want to add that to the end of your scss file (most likely theme.scss.liquid.)

The query above is for Simple and a few others - here's the list:

  • Narrative, Simple, Venture, Debut, Boundless: @include media-query($small) {
  • Jumpstart, Brooklyn, Supply, Pop, Minimal: @include at-query($max, $small) {