How to customize placeholder SVG image in theme code?

[markjson]

Hi there, I cant seem to change the placeholder svg so that I can customise this. I want to replace it with a different svg but I cannot find it anywhere in the theme code.

[NomtechSolution]

Override with CSS: If the placeholder SVG is defined using CSS, you can override it by adding custom CSS code to your theme. Use a CSS selector to target the specific element and replace the background-image or content property with the URL or code of your desired SVG.

For example, if the placeholder SVG is defined using the .placeholder-svg class, you can add the following CSS code:

.placeholder-svg {
  background-image: url(path/to/your/svg.svg);
  /* or */
  content: url(path/to/your/svg.svg);
}

Replace path/to/your/svg.svg with the actual path to your SVG file.

[Mark_Dorman]

For someone looking for an answer to this in the future. The above solution almost worked. You need to target the placeholder class, not the placeholder-svg.

.placeholder {
  content: url("image-url");
  display: block;
  max-width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: center center;
  transition: opacity .4s cubic-bezier(.25,.46,.45,.94);
}
.placeholder-svg {
  display: none !important;
}

 This is what I used and it works great. You can play with the rest of the styling to change the responsiveness, but it's simple and overrides the placeholder-svg section. I just set that to display: none. 

[ranazain2626]

1. Identify the placeholder SVG: Inspect the HTML code of the element where the placeholder SVG is located. Look for an <img> tag or a CSS background property that references the SVG file. Take note of the class or ID used to target the element.

2. Prepare your custom SVG: Create or obtain the custom SVG you wish to use as a placeholder. Make sure it's properly formatted and saved as an SVG file.

3. Upload the custom SVG to Shopify: In your Shopify admin panel, go to "Settings" and select "Files." Upload your custom SVG file to the Files section. Remember the file URL or handle that is assigned to your SVG file.

4. Replace the placeholder SVG: Depending on how the placeholder SVG is implemented, you have a few options:

   • If the placeholder SVG is referenced directly in an <img> tag: Locate the specific HTML element containing the <img> tag and modify the src attribute to point to your custom SVG's file URL or handle. For example:
     
     <img src="/path/to/your/custom.svg" alt="Custom Placeholder SVG">
     
     If the placeholder SVG is set as a background image using CSS: Locate the CSS selector targeting the element and modify the background-image property to reference your custom SVG's file URL or handle. For example:
     
     .placeholder-element { background-image: url("/path/to/your/custom.svg"); }
     
     If the placeholder SVG is defined inline within the HTML: Locate the inline SVG code and replace it with your custom SVG's code. For example:
     
     <div class="placeholder-element">
     <svg><!-- Custom SVG code here --></svg>
     
     </div>
     
     
     If the above steps don't work, it's possible that the placeholder SVG is being generated dynamically or handled by a Shopify app. In such cases, you may need to consult the theme documentation or reach out to the app developer for guidance on customizing the placeholder SVG.