I just discovered how to get Shopify asset_url in Javascript
Shopify theme assets are the individual files that make up a shop’s theme. A theme’s assets include templates, images, stylesheets, and extra snippets of code. They are arranged among the theme’s directories, such as layout, templates, and assets.
In Shopify, there are 2 places where you can upload files:
- Files (Settings -> Files)
- Assets (Theme Editor -> Assets Folder).
Shopify allows getting these assets files like this {{ ‘asset-name | asset_url }} you can learn more here.
Unfortunately! Shopify doesn’t offer somehow to get these assets using JS script, so today I am going to show you a trick I discovered to get these assets using JS script.
Let’s Begin! Here’s our plan for today:
# Create a page.
# Create a section.
# Get asset URL.
The method is called, Sections Rendering API, you can learn more here.
# Create a page.
- Goto Online Store > Pages.
- Click on Add page located on the right-top.
- Add a name (let’s name it
asset url) and click Save. - Basically, the page slug will be
asset-url. Will use it in the next steps.
#Create a section.
- Goto Online Store > Theme.
- Locate the theme you want to edit. I recommend using a dev one.
- Click on Actions next to the theme name
- On the left sidebar, scroll to the Sections Folder.
- Click on Add a new section and type the name section-asset_name.
- Click Done.
Copy/Paste the code below on the section we’ve created and hit save.
{% assign assetUrl = canonical_url | split: '/' | last | append: '.png'%}
{
"url" : "{{assetUrl | asset_url}}"
}#Get asset URL
Let’s say, we want to get the user of an asset named color-swatch-yellow`.
Somewhere on your code, we’ll add the Javascript code to get that URL, let’s do it.
Copy/Paste this code below and paste it somewhere so you can test it.
