Symmetry - Change default no product image to custom image

Symmetry - Change default no product image to custom image

SymmetryLP
Tourist
3 0 2

I would like to change the default image from the backpack or the other options to a custom image stating something new is coming soon. 

 

Ideas on how?

 

I have included the two I want to have changed by default.

Replies 4 (4)

KetanKumar
Shopify Partner
37634 3670 12166

@SymmetryLP great post for your think can you try this way 

Step 1: Upload Your Custom Image
Upload Image:
Go to your Shopify admin dashboard.
Click on Settings and then Files.
Click on Upload files and select your custom "no product image" placeholder image from your computer.
Once uploaded, copy the URL of the image.

Step 2: Access the Theme Code
Edit Code:
Go to Online Store > Themes.
Find the Symmetry theme and click on Actions > Edit code.

Step 3: Locate the Product Image Code
Find the Product Template:
In the code editor, look for the file that manages the product images. This is often located in:
sections/product-template.liquid
sections/product-grid.liquid
You may also want to check snippets/product-card.liquid or similar files, depending on how the theme is structured.
Step 4: Modify the Code
Update the Image Display Logic:

Look for code that outputs the product image. It usually looks similar to this:
 copy
liquid

{% if product.featured_image %}
    <img src="{{ product.featured_image | img_url: 'medium' }}" alt="{{ product.title }}">
{% else %}
    <img src="{{ 'placeholder-image-url' | asset_url }}" alt="No Image Available">
{% endif %}
Replace the Placeholder Image URL:

Replace 'placeholder-image-url' with the URL of your custom image that you copied earlier. The modified code may look like this:
 copy
liquid

{% if product.featured_image %}
    <img src="{{ product.featured_image | img_url: 'medium' }}" alt="{{ product.title }}">
{% else %}
    <img src="https://your-image-url.com/path-to-your-image.jpg" alt="No Image Available">
{% endif %}

Step 5: Save Changes
Save Your Code:
After making the changes, click on the Save button to apply the changes.

Step 6: Test Your Changes
Preview Your Store:
Go to your online store and navigate to a product that does not have a featured image.
Ensure that your custom "no product image" image is displayed correctly.
Important Considerations
Image Size: Make sure your custom image is appropriately sized for your store layout to ensure a consistent appearance.
Backup Theme: Before making changes, consider creating a backup of your theme by duplicating it. This way, you can revert back if needed.
Browser Cache: If you don't see changes immediately, try clearing your browser cache or refreshing the page.

By following these steps, you can successfully replace the default "no product image" with a custom image in the Shopify Symmetry theme, enhancing the overall visual presentation of your products.
If helpful then please Like and Accept Solution. Partnership of your ️ Coffee Tips and my code can bring miracles.
Want to modify or custom changes on store Hire Me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
SymmetryLP
Tourist
3 0 2

Sadly, I do not have those product- items in my code.  Other ideas?

KetanKumar
Shopify Partner
37634 3670 12166

@SymmetryLP oh sorry can you please share your code  so i will check and update you

If helpful then please Like and Accept Solution. Partnership of your ️ Coffee Tips and my code can bring miracles.
Want to modify or custom changes on store Hire Me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
SymmetryLP
Tourist
3 0 2

None of this is in my code. No idea what to share.