Using images in Content Components

Images are a great way of conveying important information. Whether you wanted to highlight a particular sale, advertise a new product or maybe couldn't exactly get the style you were going for with the available components. This tutorial will walk you through on how to use images in Content Components.

When creating a Content Component and selecting to add an image attribute, you will see a "source" input. This input requires a url of a provided image that is hosted by the Shopify CDN. You will need to get the URL of an image from your Shopify files page, which can be found by clicking on the highlighted button below, or navigating to Content > Files in the sidebar of the Shopify admin navigation. Clicking on the image button seen below will open up the Shopify Files directory in a new tab so you don't lose progress when creating your new component.

At this page you have two options, either upload a new file to your Shopify stores files directory, or click on the link associated with an existing file. Both buttons are highlighted in the image below.

Once you have copied the link to the image you wish to use, go back to the create component form and paste the copied link into the text field. The image you copied should render in the component preview immediately if successful, as seen below.