Shopify Question posted in
The Shopify help center can be found here.

Remove images from product description – Shopify

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 }} 

        </div>  

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

          </div>
Tags:

2

Answers


  1. 0

    Why are you embedding product images in the description? You are making life very difficult for yourself. Why not just upload product images, and then make logic distinctions on how many, which ones, etc that you decide to use and where.

    Manipulating product.images is far easier and dependable than embedding HTML hardcoded tags in your description.

    Login or Signup to reply.
  2. 0

    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) {
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search