Remove Product Image All Together?

Store Design
,

Topic summary

Goal: Remove product images entirely on Shopify product pages (Empire theme) to repurpose space and center buy options/description; also avoid placeholders.

Context: OP couldn’t find a working method; prior searches only covered hiding thumbnails. Store URL shared; clarification that images should not display at all.

Proposed approaches:

  • Two replies suggested adding custom code in theme.liquid within the section (exact snippets not shown in the thread), with a screenshot of expected result.
  • Working fix provided via CSS: edit theme.css to hide the product gallery and adjust layout centering:
    • .product-gallery { display: none; }
    • .product–outer { display: block; font-size: 0; justify-content: center; }

Outcome: OP confirms the CSS solution “did the trick.” They combined it with additional code (not shown) to also hide images on collection pages and galleries.

Notes:

  • Terms: theme.liquid (layout template) and theme.css (styles) are Shopify theme files. Empire is a Shopify theme.
  • Images in the thread were illustrative screenshots; not required to apply the solution.

Status: Resolved with a CSS-only approach; no app or script needed.

Summarized with AI on December 25. AI used: gpt-5.
1

I know that sounds strange to most, however our products don’t have images. (SEE IMAGE BELOW)

I’ve seen it done on digital product sites, but I can’t seem to figure out how to do it. Everything I find is how to hide thumbnails and such…I just don’t want any! lol

If it was possible to remove the option of images, I could then utilize that real estate by centering the buying options and descriptions in the center of the page. I have seen people suggest creating a base.css file and tried different codes…but nothing works.

Screenshot 2024-07-10 at 8.02.02 PM.png
Screenshot 2024-07-10 at 8.02.02 PM.png1526×1614 212 KB

We are using the “Empire Theme”.

Can anyone guide me in the right direction? Is there a script or a app I can use to do this?

Thanks everyone.

2

Hi, @theworldfamous

Please share the store URL so that I can assist you.

3

Thanks AnneLuo…the URL is www.rschealth.com

4

Have you fixed it? The images display.

5

I have not. The goal is to have images “not display” on the product page.

The screen shot just happens to show a place holder. We don’t want the image functionality at all.

I hear theres something you can add to the code, but I keep falling short of finding it.

6

Hi @theworldfamous

Please open Online Store > Themes > click “…” next to current theme > Edit code, open theme.liquid file, add this code after
1 Like
7

You can try this code by following these steps:
Step 1: Go to the online store ->Theme ->Edit Code.
Step 2: Find the theme.liquid file and add the following code above the tag

Result:

AnneLuo_0-1720667447031.png
AnneLuo_0-1720667447031.png1374×678 32.6 KB

Hopefully it will help you. If yes then Please don’t forget hit Like and Mark it as solution!

1 Like
8

If you mean like this

wo_0-1720667986362.png
wo_0-1720667986362.png1511×842 55.6 KB

find theme.css, modify the code.

.product-gallery{
display:none;
}

.product--outer{
 display: block;
 font-size: 0;
 justify-content: center;
}
9

This definitely did the trick! I will be using this in combination with a code below which goes one step further with eliminating the images on the collections and galleries. Thank you so much for your help!

10

I tested this code and it works in combination with the one above so I am running both! Yours eliminated my next problem which was hiding the images in the collections and such. I appreciate your help so much!