I have my image made in Figma and exported it as SVG File where it contains text and the image is added to it, but when I’m uploading it to the template section in hero-image in product page it is showing only text not the images. What to do?
Topic summary
A user is experiencing issues embedding an SVG file exported from Figma into a Shopify product page hero-image section. The SVG contains both text and an embedded photo, but when uploaded, only the text displays—the photo disappears.
Key Technical Issues:
- The SVG file size exceeds 2.0 MB, making it too large for upload
- Embedded images within SVG files don’t render properly in the Shopify theme
Suggested Solutions:
- Export text layers as SVG and photos separately as JPG/PNG to reduce file size
- Use Illustrator to expand paths and strokes into unified shapes before exporting
- Adjust Figma export settings: select all layers, choose PNG at 1x, uncheck “Ignore overlapping layers,” and click the three-dot menu for additional options
- Consider using the EmbedAny app to embed Figma designs directly into the store
Current Status:
The issue remains unresolved. The user successfully exports all layers from Figma, but the embedded photo consistently disappears when the SVG is uploaded to Shopify, despite being visible in the original exported file.
1 Like
Hello! @AryaB Could you please share the store or product link? This will allow me to inspect it and provide you with a more tailored solution.
@AryaB - did you get svg file code from figma?
yes
I’ve found that I have to import Figma svgs into Illustrator to expand the path and stroke into one shape. Otherwise they have problems like you’re experiencing.
Here’s a related article I found where they are doing something similar within Figma: More control over Figma SVG exports.
1 Like
when I’m uploading svg file to hero-image it exceeds image size viz 20mb, have tried svg compressor too but that doesn’t help. What to do?
Sorry, I think I misread your original question. With that size, it sounds like you’re trying to export text AND a photo?
If yes, then you’ll want to select the block and use the export option to save as a .png. Usually .svg is only used for graphics like shapes and logos.
Another technique would be to export only the text layers as .svg and the photo as a .jpg. That should significantly reduce the size.
1 Like
Another technique would be to export only the text layers as .svg and the photo as a .jpg. That should significantly reduce the size.
– but how to add photo as .jpg to it text layers which are in .svg format to reciprocate the original image because when I did this I was able to upload only image with text layers without photo. what to do?
You might be just exporting the text layers. Try this:
- Go to the left-side Layers sidebar and select all the layers you want to export (text and photo).
- Go to Export in the right-side menu and expand (+) that panel to see all the export options.
- Choose 1x and PNG. Then click the *** (three dots) icon.
- Uncheck “Ignore overlapping layers”. This will allow the different layers to show on one file.
- The click the export button and save.
The exported file should have all the layers.
am exporting all layers including the image, when uploading it in content as an .svg file the embedded photo disappears; whereas the original image contains all layers exported
Hey,
you can also embed the Figma design directly into your store using EmbedAny app. This might resolve your query and will help you resize the content based on various aspect ratios.
Hope that helps.
Best,
Abdullah