How do I deal with having different environments but same images in Shopify?

user_2609521 0
Viewed 79

I have two different sites, a development site, and a staging site, with the same Shopify theme. I also have my theme files on git. I merge my development branch to my staging branch but I get a lot of conflicts with image paths.

For example, some CSS code will conflict
staging:background: url(//cdn.shopify.com/s/files/1/0553/6117/5731/t/44/assets/contact_bg_img.png?29198)

development:background: url(//cdn.shopify.com/s/files/1/0196/8186/9924/t/70/assets/contact_bg_img.png?36011)

The images are the same it's just that the location changes because they're different stores. If I merge the changes then the image location will be incorrect. I'm not sure how to deal with this issue. Has anyone dealt with this? Any ideas?

shopify
2 Answers

You need to treat these images as theme assets. You can add these images to your assets directory in theme and then use URL filters to generate the URL for the images.

{{ 'contact_bg_img.png' | asset_img_url: '300x' }}

If you want to use your current solution, like uploading files and then use that URL, this can also be done via URL filters.

{{ 'contact_bg_img.png' | file_img_url: '1024x768' }}

Doing so, you will have the same code for multiple stores and no hardcoded URLs inside code.

user_28037880

You need to upload the Image in Settings -> Files at any store(Staging or Development).

user_169346570
Related