How to Hide Pinterest Images in Blog Posts on Shopify 2023

Are you tired of cluttering up your blog posts with tons of Pinterest images? I am with you and totally get your frustration. I just want clean and easy to read blog posts, but I want to give people image options when pinning with the google chrome extension as well. And after a few hours of searching google and watching YouTube videos that didn't quite answer my question, I have finally found the solution - there IS a way to hide multiple Pinterest images within your blog posts on Shopify in 2023! 

In this article, I'll show you how to keep your blog posts clutter free and organized while still getting those important pin images out there for your readers to pin. So, grab your favorite beverage, get comfy, and let's dive into the world of hidden Pinterest images!

Show & Hide Specific Images

This is important because you don't want to hide all images in a blog post that would be a disaster, especially if you write tutorial style articles with visual "how to" images. We need to make a definition between the two types of images the shown images and the hidden images.

You can hide specific images on your website using CSS and in blog post HTML, you can use the CSS property "display:none". Here's how:

1. Identify the image or images you want to hide in your blog post.
2. Decide on a unique class or ID for these images that you will add in the HTML code of your blog post. For example, you can add the class "hidden-image" to the images you want to hide.
3. Next you will need to edit your themes code by going to Themes > [...] (beside the customize button) > edit code.
4. Search for your your CSS stylesheet, scroll to the bottom where you likely have something like [enter your custom code below here] and add the following code:

copy code below [css]

.hidden-image { display:none; }

4. Save your stylesheet and preview your blog post to ensure that the images you wanted to hide are no longer visible. If they are not hidden you haven't yet added the class to your images - go ahead and do this now.

Here's an example of what the HTML code might look like for an image you want to hide using the "hidden-image" class:

copy code [html]

<img class="hidden-image" src="path/to/image.jpg" alt="Image description">

Edit the html in your blog posts

1. Open an existing blog post that you want to have alternative pin images hidden in so that readers have options to pin to their boards.
2. Insert or locate the images you want hidden
3. Click on the [<>] icon in the top right corner of the blog editor to switch to html
4. Find your image it will look something like <img src="path/to/image.jpg" alt="Image description">
5. Simply add in [ class="hidden-image" ] between <img and src="path/to/image.jpg". it will now resemble the code in the table above. Click save and refresh your website page.

It's that simple, moving forward anytime you want the image to be a hidden image you will just find the image in the html and add in the image class to it.