WeeklyHow
내용
[subtitle-meta] lang=en auto=True
Hey YouTube, Bernard here from Weeklyhow
and in this video we're going to be
learning how to display Shopify images.
So this is actually a very easy
tutorial, especially if you already know
how to use Shopify API. However, if in
case you don't know how to use Shopify
API, then we're here to guide you on how
to use it. Although we highly recommend
you guys to watch the previous tutorials
on how to set up Shopify apps and how to
use Shopify repository that we're
currently using. Also, if in case you do
have if in case you have questions you
can always write in our comments below.
You can always ask or you may also
contact us on our official website at
weeklyhow.com.
The links are on the description by the
way, so you can always check that out.
So please, yeah, visit us. Don't
hesitate to visit us and give us a call
or give us a message or whatever. Okay,
so we'll continue the series. Let's open
index.php and let's take a look at the
progress that we actually made in the
last tutorial. Okay, so this is actually
the index.php that we have created in
the last tutorial. We have gathered the
data from Shopify store and then we used
collection API, custom collection API,
and then we took collection ID and then
we used this data to to get another to
use another
API, which is the collects API. So if
you're wondering what is the difference
between collects and then collection
custom collections. From what I can
remember, from what I also there's
actually two collections, the custom
collection and then the smart
collection. So yeah, so this pretty much
it.
Uh smart collection I I believe and this
is custom collection.
And after that we made a loop a for each
loop and then we took we used collects
variable and then we converted as
collect variable and then we used that
to make another for each loop. Let's
take a look at our Shopify app, shall
we? All right, so actually this is the
app that we have created in the last
tutorial.
What we're going to do in in this
tutorial is to display Shopify images.
So, just real quick. All right. So,
let's go to our Shopify
documentation. Let's make images API.
Let's use that.
Product images. Actually, you can also
use this using product API from what I
can remember. But I
highly recommend to use product images
API instead because you have much
control over it instead of just product
API. So, let's take a look at the
product API instead for a while. For a
little bit, just a little bit. Okay. So,
what you can do with this product API is
to you can get obviously the list of the
products, all the products. You can
count how many products you have. You
can retrieve a single product. You can
also create a new product. You can
update and you can delete.
These are the properties. Obviously, we
have the description, the date for the
product, the handle which is this
actually really useful especially for
URLs and stuff like that. Also, this for
the ID which is really useful as well.
So, this is what I'm talking about.
Images. So, this is the actual image for
each product. So, this is the only data
you can have. The date, the width, the
height, and then the default
image.
However, with product images, you have
much control of how of what you can
retrieve. So, let's take a look at the
product image API. So, over here
you can do the same thing. You can get,
you can retrieve, you can create a new
image, and then you can modify, and you
can delete. So, the properties, the
date, ID, which positions the image or
you can the order. So, the order of the
product image in to list. The first
product image is at the position number
one. So, by default there is one. So, we
you don't have to get that. It depends
depends on what type of app you're
creating.
I'll go
um okay. So, we have product ID over
here, variants ID, which is actually
really useful.
And one of the I mean SRC, that's what
we need. So, we have here the URL of the
image. And you can also like
uh modify the size of this image. So,
for example, add small URL to the file
name. So, you can get the 100 pixel wide
and height. Anyway, yeah, we're going to
use SRC to get the image. So, let's do
that, shall we? Let's start. Let's go
back to our Shopify
uh
index.php. What I This is what I'm
trying to say. Okay, so let's create a
variable over here. You know what? Let's
get rid of this. We don't need this the
collection ID. We don't need that.
Uh over here, let's make a new variable.
You know what? Let's make a comment over
here. Varia
um
uh product titles
and
I mean product titles and product
images.
And let's create a new variable. Let's
call this image and then empty string.
Over here, let's make title.
And let's make an empty string.
And then over here, underneath the
products variable, let's make
um
let's make another
another Shopify call from what I can
remember. All right, so let's take
images is equal to Shopify Let's copy
this. Let's just copy this.
And then let's paste it over here. Let's
also copy this.
Yeah.
Let's copy that.
Put it over here. Change products to
images.
This one as well. And over here we have
Shopify call token, that is good. Shop,
that is good.
Um the API call the URL, let's change it
to
images over here. Let's just add slash
then images because we need the product
ID over here. So let's take a look at
the
API over here. So
over here we have
uh slash admin API 2019 or 10 then
products then the actual product ID and
then images.json.
So that's what actually we're going to
use. So you can actually copy this. Just
make sure you replace product ID, the
actual product ID. Okay, let's go back.
Um okay, so we have that. That's good.
We don't need to pass a variable over
here. Use get and then we convert it to
an array, the response, and then that's
pretty much it. Let's just pass the
value to the actual image variable. So
let's do that. Images then it's key
images and then
Okay, so in this part you can actually
get uh you can actually use zero, one,
two, three, four, or five, or it depends
on how much
uh images you have for the product for
the certain product. So for example, I
only have one image, I believe.
Uh let's take a look. All right, so we
have here
Shopify app. Let's open products over
here.
Let's take a look.
Okay, so
uh let's use this. This actually the
product that know what to
take out.
Take out. Yeah, that's what I meant.
Uh
we have three images. So, you can
actually take zero, one, and then two.
That's how the keys work or the
uh
the array works, basically. Yeah.
So, let's go back to our script. Let's
take the first image, which is this one.
Let's
Let's use zero over here, and then
another another key.
Uh let's use SRC. Yeah.
SRC. There you go. Let's close that.
Make sure you close with semicolon. And
another one is the actual title.
All right. So, instead of displaying the
title, let's use the
the variable title, and then
put the value over there. Make sure you
get rid of the break line
line breaks. There you go. Close that.
And then, the next thing we're going to
do is to actually
uh use HTML. So, let's type HTML.
There you go.
It's pretty much it. I'm I'm sorry, but
I'm using
a plugin for my Sublime Text. So, so you
can just pause the video and then type
in. So, I'm really sorry if I have to do
that.
Let's close the PHP tag.
There you go.
Uh
title, Shopify example
app. You You don't actually have to put
title. It's not necessary.
But, yeah. Let's use
H1 over here. Then, let's close that.
Let's type in Shopify
app
example. There you go.
By Weekly App.
There you go. And then, let's type in
over here
uh
image SRC. Or I'm sorry. images.
Shortcut, there you go.
Uh, I actually don't know which plugin
is this. So, I don't actually know how I
can
uh, recommend it. So, if you know, just
please put it in the comments below so
you can help as well
uh, other programmers who doesn't know
this plugin that I'm using.
All right, so let's use PHP tag over
here. Echo
and then let's use src variable and then
let's close the PHP tag and over here
let's type in product images or whatever
you want to put in here in the alt
attribute.
Doesn't really matter.
All right, so for the width
width over here
let's type in 250 pixel. No, just yeah,
250 pixel and then for the height
You know what? Let's just get rid of
that.
Um, let's just use
style instead.
Here, so width
250 pixel. There you go.
Next is title.
Let's use paragraph and then let's use
the
PHP tag once again. Let's display
title.
There you go.
Close that. Make sure you close, always
close.
And then let's save it. Let's see the
product or
the app.
All right, so there you go. We actually
have an error so it's not displaying
the image. So, I believe there's an
error with that.
Let's
check that.
So, it's not actually displaying or
getting the source URL. So, let's go
back to our script and see what's
actually wrong with this script. Oh, all
right, so actually my bad. Uh I made a
mistake. It's supposed to be image. Uh
instead of SRC, let's open image as uh
image variable. I'm really sorry. It's a
typo. I think I took this and then I
just just copy SRC. Okay. Echo image
variable. Okay, so let's save that and
let's go back to our script our Shopify
app. All right, so everything is working
now. So, we have here the title and then
the image and then the title. So, yeah,
that's actually how you can display
Shopify images
product images using Shopify API product
image API and then product API. So,
basically what you can actually do with
this is just to just gather all the data
you need and then pass it to another API
just so you can get another data.
So, yeah.
I hope you guys learned something in
this video. If you have questions, let
me know in the comments below. You can
contact us always. Links are all in the
description. Please don't hesitate. We'd
love to help out and yeah.
Thank you guys so much for watching and
I'll see you in the next part of this
tutorial series. Thank you so much for
watching once again. I'll see you next
time.
원문 자막 펼치기
WEBVTT Kind: captions Language: en 00:00:00.000 --> 00:00:02.350 align:start position:0% Hey<00:00:00.520><c> YouTube,</c><00:00:00.960><c> Bernard</c><00:00:01.320><c> here</c><00:00:01.480><c> from</c><00:00:01.720><c> Weeklyhow</c> 00:00:02.350 --> 00:00:02.360 align:start position:0% Hey YouTube, Bernard here from Weeklyhow 00:00:02.360 --> 00:00:03.750 align:start position:0% Hey YouTube, Bernard here from Weeklyhow and<00:00:02.480><c> in</c><00:00:02.560><c> this</c><00:00:02.800><c> video</c><00:00:03.280><c> we're</c><00:00:03.440><c> going</c><00:00:03.560><c> to</c><00:00:03.640><c> be</c> 00:00:03.750 --> 00:00:03.760 align:start position:0% and in this video we're going to be 00:00:03.760 --> 00:00:06.750 align:start position:0% and in this video we're going to be learning<00:00:04.120><c> how</c><00:00:04.280><c> to</c><00:00:04.440><c> display</c><00:00:04.920><c> Shopify</c><00:00:05.640><c> images.</c> 00:00:06.750 --> 00:00:06.760 align:start position:0% learning how to display Shopify images. 00:00:06.760 --> 00:00:08.230 align:start position:0% learning how to display Shopify images. So<00:00:06.920><c> this</c><00:00:07.080><c> is</c><00:00:07.200><c> actually</c><00:00:07.600><c> a</c><00:00:07.680><c> very</c><00:00:08.000><c> easy</c> 00:00:08.230 --> 00:00:08.240 align:start position:0% So this is actually a very easy 00:00:08.240 --> 00:00:10.190 align:start position:0% So this is actually a very easy tutorial,<00:00:08.960><c> especially</c><00:00:09.480><c> if</c><00:00:09.600><c> you</c><00:00:09.680><c> already</c><00:00:10.040><c> know</c> 00:00:10.190 --> 00:00:10.200 align:start position:0% tutorial, especially if you already know 00:00:10.200 --> 00:00:12.950 align:start position:0% tutorial, especially if you already know how<00:00:10.360><c> to</c><00:00:10.520><c> use</c><00:00:10.760><c> Shopify</c><00:00:11.240><c> API.</c><00:00:12.200><c> However,</c><00:00:12.680><c> if</c><00:00:12.840><c> in</c> 00:00:12.950 --> 00:00:12.960 align:start position:0% how to use Shopify API. However, if in 00:00:12.960 --> 00:00:14.590 align:start position:0% how to use Shopify API. However, if in case<00:00:13.160><c> you</c><00:00:13.240><c> don't</c><00:00:13.400><c> know</c><00:00:13.600><c> how</c><00:00:13.840><c> to</c><00:00:14.000><c> use</c><00:00:14.160><c> Shopify</c> 00:00:14.590 --> 00:00:14.600 align:start position:0% case you don't know how to use Shopify 00:00:14.600 --> 00:00:16.790 align:start position:0% case you don't know how to use Shopify API,<00:00:15.040><c> then</c><00:00:15.360><c> we're</c><00:00:15.480><c> here</c><00:00:15.680><c> to</c><00:00:15.800><c> guide</c><00:00:16.120><c> you</c><00:00:16.400><c> on</c><00:00:16.560><c> how</c> 00:00:16.790 --> 00:00:16.800 align:start position:0% API, then we're here to guide you on how 00:00:16.800 --> 00:00:19.430 align:start position:0% API, then we're here to guide you on how to<00:00:17.680><c> use</c><00:00:18.000><c> it.</c><00:00:18.320><c> Although</c><00:00:18.640><c> we</c><00:00:18.760><c> highly</c><00:00:19.000><c> recommend</c> 00:00:19.430 --> 00:00:19.440 align:start position:0% to use it. Although we highly recommend 00:00:19.440 --> 00:00:21.790 align:start position:0% to use it. Although we highly recommend you<00:00:19.520><c> guys</c><00:00:19.800><c> to</c><00:00:19.920><c> watch</c><00:00:20.200><c> the</c><00:00:20.320><c> previous</c><00:00:20.760><c> tutorials</c> 00:00:21.790 --> 00:00:21.800 align:start position:0% you guys to watch the previous tutorials 00:00:21.800 --> 00:00:24.070 align:start position:0% you guys to watch the previous tutorials on<00:00:21.920><c> how</c><00:00:22.080><c> to</c><00:00:22.240><c> set</c><00:00:22.440><c> up</c><00:00:22.560><c> Shopify</c><00:00:23.120><c> apps</c><00:00:23.560><c> and</c><00:00:23.720><c> how</c><00:00:23.920><c> to</c> 00:00:24.070 --> 00:00:24.080 align:start position:0% on how to set up Shopify apps and how to 00:00:24.080 --> 00:00:25.670 align:start position:0% on how to set up Shopify apps and how to use<00:00:24.400><c> Shopify</c><00:00:24.840><c> repository</c><00:00:25.440><c> that</c><00:00:25.560><c> we're</c> 00:00:25.670 --> 00:00:25.680 align:start position:0% use Shopify repository that we're 00:00:25.680 --> 00:00:28.510 align:start position:0% use Shopify repository that we're currently<00:00:26.160><c> using.</c><00:00:26.960><c> Also,</c><00:00:27.760><c> if</c><00:00:27.920><c> in</c><00:00:28.040><c> case</c><00:00:28.240><c> you</c><00:00:28.360><c> do</c> 00:00:28.510 --> 00:00:28.520 align:start position:0% currently using. Also, if in case you do 00:00:28.520 --> 00:00:30.350 align:start position:0% currently using. Also, if in case you do have<00:00:28.960><c> if</c><00:00:29.120><c> in</c><00:00:29.240><c> case</c><00:00:29.440><c> you</c><00:00:29.520><c> have</c><00:00:29.680><c> questions</c><00:00:30.080><c> you</c> 00:00:30.350 --> 00:00:30.360 align:start position:0% have if in case you have questions you 00:00:30.360 --> 00:00:31.950 align:start position:0% have if in case you have questions you can<00:00:30.520><c> always</c><00:00:30.880><c> write</c><00:00:31.160><c> in</c><00:00:31.240><c> our</c><00:00:31.320><c> comments</c><00:00:31.640><c> below.</c> 00:00:31.950 --> 00:00:31.960 align:start position:0% can always write in our comments below. 00:00:31.960 --> 00:00:34.510 align:start position:0% can always write in our comments below. You<00:00:32.040><c> can</c><00:00:32.200><c> always</c><00:00:32.599><c> ask</c><00:00:33.560><c> or</c><00:00:33.800><c> you</c><00:00:33.920><c> may</c><00:00:34.120><c> also</c> 00:00:34.510 --> 00:00:34.520 align:start position:0% You can always ask or you may also 00:00:34.520 --> 00:00:36.670 align:start position:0% You can always ask or you may also contact<00:00:35.080><c> us</c><00:00:35.240><c> on</c><00:00:35.400><c> our</c><00:00:35.640><c> official</c><00:00:36.080><c> website</c><00:00:36.560><c> at</c> 00:00:36.670 --> 00:00:36.680 align:start position:0% contact us on our official website at 00:00:36.680 --> 00:00:38.230 align:start position:0% contact us on our official website at weeklyhow.com. 00:00:38.230 --> 00:00:38.240 align:start position:0% weeklyhow.com. 00:00:38.240 --> 00:00:39.750 align:start position:0% weeklyhow.com. The<00:00:38.360><c> links</c><00:00:38.640><c> are</c><00:00:38.800><c> on</c><00:00:39.000><c> the</c><00:00:39.080><c> description</c><00:00:39.560><c> by</c><00:00:39.680><c> the</c> 00:00:39.750 --> 00:00:39.760 align:start position:0% The links are on the description by the 00:00:39.760 --> 00:00:41.310 align:start position:0% The links are on the description by the way,<00:00:39.880><c> so</c><00:00:40.040><c> you</c><00:00:40.120><c> can</c><00:00:40.280><c> always</c><00:00:40.640><c> check</c><00:00:40.880><c> that</c><00:00:41.080><c> out.</c> 00:00:41.310 --> 00:00:41.320 align:start position:0% way, so you can always check that out. 00:00:41.320 --> 00:00:44.070 align:start position:0% way, so you can always check that out. So<00:00:41.560><c> please,</c><00:00:42.440><c> yeah,</c><00:00:42.960><c> visit</c><00:00:43.360><c> us.</c><00:00:43.720><c> Don't</c> 00:00:44.070 --> 00:00:44.080 align:start position:0% So please, yeah, visit us. Don't 00:00:44.080 --> 00:00:46.550 align:start position:0% So please, yeah, visit us. Don't hesitate<00:00:44.520><c> to</c><00:00:44.640><c> visit</c><00:00:44.960><c> us</c><00:00:45.080><c> and</c><00:00:45.800><c> give</c><00:00:46.000><c> us</c><00:00:46.160><c> a</c><00:00:46.200><c> call</c> 00:00:46.550 --> 00:00:46.560 align:start position:0% hesitate to visit us and give us a call 00:00:46.560 --> 00:00:49.150 align:start position:0% hesitate to visit us and give us a call or<00:00:46.760><c> give</c><00:00:46.960><c> us</c><00:00:47.160><c> a</c><00:00:47.520><c> message</c><00:00:48.000><c> or</c><00:00:48.520><c> whatever.</c><00:00:48.920><c> Okay,</c> 00:00:49.150 --> 00:00:49.160 align:start position:0% or give us a message or whatever. Okay, 00:00:49.160 --> 00:00:51.550 align:start position:0% or give us a message or whatever. Okay, so<00:00:49.800><c> we'll</c><00:00:49.960><c> continue</c><00:00:50.400><c> the</c><00:00:50.520><c> series.</c><00:00:50.960><c> Let's</c><00:00:51.200><c> open</c> 00:00:51.550 --> 00:00:51.560 align:start position:0% so we'll continue the series. Let's open 00:00:51.560 --> 00:00:53.310 align:start position:0% so we'll continue the series. Let's open index.php<00:00:52.560><c> and</c><00:00:52.640><c> let's</c><00:00:52.800><c> take</c><00:00:52.960><c> a</c><00:00:53.000><c> look</c><00:00:53.160><c> at</c><00:00:53.240><c> the</c> 00:00:53.310 --> 00:00:53.320 align:start position:0% index.php and let's take a look at the 00:00:53.320 --> 00:00:54.950 align:start position:0% index.php and let's take a look at the progress<00:00:53.680><c> that</c><00:00:53.800><c> we</c><00:00:53.920><c> actually</c><00:00:54.360><c> made</c><00:00:54.720><c> in</c><00:00:54.840><c> the</c> 00:00:54.950 --> 00:00:54.960 align:start position:0% progress that we actually made in the 00:00:54.960 --> 00:00:58.230 align:start position:0% progress that we actually made in the last<00:00:55.440><c> tutorial.</c><00:00:56.320><c> Okay,</c><00:00:56.560><c> so</c><00:00:57.680><c> this</c><00:00:57.840><c> is</c><00:00:57.880><c> actually</c> 00:00:58.230 --> 00:00:58.240 align:start position:0% last tutorial. Okay, so this is actually 00:00:58.240 --> 00:01:00.310 align:start position:0% last tutorial. Okay, so this is actually the<00:00:58.360><c> index.php</c><00:00:59.120><c> that</c><00:00:59.240><c> we</c><00:00:59.360><c> have</c><00:00:59.760><c> created</c><00:01:00.240><c> in</c> 00:01:00.310 --> 00:01:00.320 align:start position:0% the index.php that we have created in 00:01:00.320 --> 00:01:02.630 align:start position:0% the index.php that we have created in the<00:01:00.440><c> last</c><00:01:00.760><c> tutorial.</c><00:01:01.440><c> We</c><00:01:01.880><c> have</c><00:01:02.080><c> gathered</c><00:01:02.520><c> the</c> 00:01:02.630 --> 00:01:02.640 align:start position:0% the last tutorial. We have gathered the 00:01:02.640 --> 00:01:06.270 align:start position:0% the last tutorial. We have gathered the data<00:01:03.040><c> from</c><00:01:04.160><c> Shopify</c><00:01:04.680><c> store</c><00:01:05.239><c> and</c><00:01:05.400><c> then</c><00:01:05.640><c> we</c><00:01:05.800><c> used</c> 00:01:06.270 --> 00:01:06.280 align:start position:0% data from Shopify store and then we used 00:01:06.280 --> 00:01:09.190 align:start position:0% data from Shopify store and then we used collection<00:01:06.880><c> API,</c><00:01:07.440><c> custom</c><00:01:07.760><c> collection</c><00:01:08.160><c> API,</c> 00:01:09.190 --> 00:01:09.200 align:start position:0% collection API, custom collection API, 00:01:09.200 --> 00:01:11.550 align:start position:0% collection API, custom collection API, and<00:01:09.400><c> then</c><00:01:09.680><c> we</c><00:01:09.800><c> took</c><00:01:10.120><c> collection</c><00:01:10.680><c> ID</c><00:01:11.160><c> and</c><00:01:11.360><c> then</c> 00:01:11.550 --> 00:01:11.560 align:start position:0% and then we took collection ID and then 00:01:11.560 --> 00:01:14.870 align:start position:0% and then we took collection ID and then we<00:01:11.720><c> used</c><00:01:12.000><c> this</c><00:01:12.200><c> data</c><00:01:12.720><c> to</c><00:01:13.480><c> to</c><00:01:13.840><c> get</c><00:01:14.120><c> another</c><00:01:14.800><c> to</c> 00:01:14.870 --> 00:01:14.880 align:start position:0% we used this data to to get another to 00:01:14.880 --> 00:01:16.070 align:start position:0% we used this data to to get another to use<00:01:15.080><c> another</c> 00:01:16.070 --> 00:01:16.080 align:start position:0% use another 00:01:16.080 --> 00:01:18.670 align:start position:0% use another API,<00:01:16.480><c> which</c><00:01:16.680><c> is</c><00:01:16.760><c> the</c><00:01:16.880><c> collects</c><00:01:17.400><c> API.</c><00:01:18.440><c> So</c><00:01:18.560><c> if</c> 00:01:18.670 --> 00:01:18.680 align:start position:0% API, which is the collects API. So if 00:01:18.680 --> 00:01:20.310 align:start position:0% API, which is the collects API. So if you're<00:01:18.800><c> wondering</c><00:01:19.520><c> what</c><00:01:19.680><c> is</c><00:01:19.800><c> the</c><00:01:19.880><c> difference</c> 00:01:20.310 --> 00:01:20.320 align:start position:0% you're wondering what is the difference 00:01:20.320 --> 00:01:22.710 align:start position:0% you're wondering what is the difference between<00:01:20.680><c> collects</c><00:01:21.440><c> and</c><00:01:21.640><c> then</c><00:01:21.920><c> collection</c> 00:01:22.710 --> 00:01:22.720 align:start position:0% between collects and then collection 00:01:22.720 --> 00:01:24.510 align:start position:0% between collects and then collection custom<00:01:23.080><c> collections.</c><00:01:23.920><c> From</c><00:01:24.160><c> what</c><00:01:24.280><c> I</c><00:01:24.360><c> can</c> 00:01:24.510 --> 00:01:24.520 align:start position:0% custom collections. From what I can 00:01:24.520 --> 00:01:25.790 align:start position:0% custom collections. From what I can remember,<00:01:24.920><c> from</c><00:01:25.080><c> what</c><00:01:25.240><c> I</c><00:01:25.320><c> also</c><00:01:25.560><c> there's</c> 00:01:25.790 --> 00:01:25.800 align:start position:0% remember, from what I also there's 00:01:25.800 --> 00:01:28.270 align:start position:0% remember, from what I also there's actually<00:01:26.280><c> two</c><00:01:26.640><c> collections,</c><00:01:27.760><c> the</c><00:01:27.840><c> custom</c> 00:01:28.270 --> 00:01:28.280 align:start position:0% actually two collections, the custom 00:01:28.280 --> 00:01:29.670 align:start position:0% actually two collections, the custom collection<00:01:28.840><c> and</c><00:01:28.960><c> then</c><00:01:29.120><c> the</c><00:01:29.240><c> smart</c> 00:01:29.670 --> 00:01:29.680 align:start position:0% collection and then the smart 00:01:29.680 --> 00:01:33.430 align:start position:0% collection and then the smart collection.<00:01:31.000><c> So</c><00:01:31.520><c> yeah,</c><00:01:32.040><c> so</c><00:01:32.280><c> this</c><00:01:32.920><c> pretty</c><00:01:33.160><c> much</c> 00:01:33.430 --> 00:01:33.440 align:start position:0% collection. So yeah, so this pretty much 00:01:33.440 --> 00:01:35.110 align:start position:0% collection. So yeah, so this pretty much it. 00:01:35.110 --> 00:01:35.120 align:start position:0% it. 00:01:35.120 --> 00:01:37.710 align:start position:0% it. Uh<00:01:35.200><c> smart</c><00:01:35.440><c> collection</c><00:01:36.240><c> I</c><00:01:36.840><c> I</c><00:01:36.920><c> believe</c><00:01:37.360><c> and</c><00:01:37.520><c> this</c> 00:01:37.710 --> 00:01:37.720 align:start position:0% Uh smart collection I I believe and this 00:01:37.720 --> 00:01:39.830 align:start position:0% Uh smart collection I I believe and this is<00:01:38.040><c> custom</c><00:01:38.480><c> collection.</c> 00:01:39.830 --> 00:01:39.840 align:start position:0% is custom collection. 00:01:39.840 --> 00:01:42.790 align:start position:0% is custom collection. And<00:01:40.200><c> after</c><00:01:40.440><c> that</c><00:01:40.840><c> we</c><00:01:41.000><c> made</c><00:01:41.600><c> a</c><00:01:41.720><c> loop</c><00:01:42.200><c> a</c><00:01:42.240><c> for</c><00:01:42.520><c> each</c> 00:01:42.790 --> 00:01:42.800 align:start position:0% And after that we made a loop a for each 00:01:42.800 --> 00:01:46.030 align:start position:0% And after that we made a loop a for each loop<00:01:43.160><c> and</c><00:01:43.320><c> then</c><00:01:43.600><c> we</c><00:01:43.880><c> took</c><00:01:44.800><c> we</c><00:01:44.960><c> used</c><00:01:45.400><c> collects</c> 00:01:46.030 --> 00:01:46.040 align:start position:0% loop and then we took we used collects 00:01:46.040 --> 00:01:47.790 align:start position:0% loop and then we took we used collects variable<00:01:46.640><c> and</c><00:01:46.760><c> then</c><00:01:46.960><c> we</c><00:01:47.200><c> converted</c><00:01:47.640><c> as</c> 00:01:47.790 --> 00:01:47.800 align:start position:0% variable and then we converted as 00:01:47.800 --> 00:01:50.030 align:start position:0% variable and then we converted as collect<00:01:48.200><c> variable</c><00:01:48.680><c> and</c><00:01:48.840><c> then</c><00:01:49.000><c> we</c><00:01:49.120><c> used</c><00:01:49.400><c> that</c> 00:01:50.030 --> 00:01:50.040 align:start position:0% collect variable and then we used that 00:01:50.040 --> 00:01:53.030 align:start position:0% collect variable and then we used that to<00:01:50.160><c> make</c><00:01:50.360><c> another</c><00:01:51.040><c> for</c><00:01:51.280><c> each</c><00:01:51.760><c> loop.</c><00:01:52.720><c> Let's</c> 00:01:53.030 --> 00:01:53.040 align:start position:0% to make another for each loop. Let's 00:01:53.040 --> 00:01:54.990 align:start position:0% to make another for each loop. Let's take<00:01:53.200><c> a</c><00:01:53.240><c> look</c><00:01:53.440><c> at</c><00:01:53.560><c> our</c><00:01:54.200><c> Shopify</c><00:01:54.640><c> app,</c><00:01:54.800><c> shall</c> 00:01:54.990 --> 00:01:55.000 align:start position:0% take a look at our Shopify app, shall 00:01:55.000 --> 00:01:56.830 align:start position:0% take a look at our Shopify app, shall we?<00:01:55.320><c> All</c><00:01:55.400><c> right,</c><00:01:55.600><c> so</c><00:01:55.920><c> actually</c><00:01:56.360><c> this</c><00:01:56.600><c> is</c><00:01:56.680><c> the</c> 00:01:56.830 --> 00:01:56.840 align:start position:0% we? All right, so actually this is the 00:01:56.840 --> 00:01:58.950 align:start position:0% we? All right, so actually this is the app<00:01:57.160><c> that</c><00:01:57.320><c> we</c><00:01:57.440><c> have</c><00:01:58.160><c> created</c><00:01:58.480><c> in</c><00:01:58.560><c> the</c><00:01:58.640><c> last</c> 00:01:58.950 --> 00:01:58.960 align:start position:0% app that we have created in the last 00:01:58.960 --> 00:02:00.430 align:start position:0% app that we have created in the last tutorial. 00:02:00.430 --> 00:02:00.440 align:start position:0% tutorial. 00:02:00.440 --> 00:02:01.830 align:start position:0% tutorial. What<00:02:00.600><c> we're</c><00:02:00.720><c> going</c><00:02:00.960><c> to</c><00:02:01.080><c> do</c><00:02:01.200><c> in</c><00:02:01.560><c> in</c><00:02:01.680><c> this</c> 00:02:01.830 --> 00:02:01.840 align:start position:0% What we're going to do in in this 00:02:01.840 --> 00:02:04.670 align:start position:0% What we're going to do in in this tutorial<00:02:02.280><c> is</c><00:02:02.400><c> to</c><00:02:02.560><c> display</c><00:02:03.640><c> Shopify</c><00:02:04.200><c> images.</c> 00:02:04.670 --> 00:02:04.680 align:start position:0% tutorial is to display Shopify images. 00:02:04.680 --> 00:02:06.750 align:start position:0% tutorial is to display Shopify images. So,<00:02:05.160><c> just</c><00:02:05.479><c> real</c><00:02:05.720><c> quick.</c><00:02:06.440><c> All</c><00:02:06.479><c> right.</c><00:02:06.640><c> So,</c> 00:02:06.750 --> 00:02:06.760 align:start position:0% So, just real quick. All right. So, 00:02:06.760 --> 00:02:09.630 align:start position:0% So, just real quick. All right. So, let's<00:02:07.000><c> go</c><00:02:07.160><c> to</c><00:02:07.320><c> our</c><00:02:07.760><c> Shopify</c> 00:02:09.630 --> 00:02:09.640 align:start position:0% let's go to our Shopify 00:02:09.640 --> 00:02:12.790 align:start position:0% let's go to our Shopify documentation.<00:02:10.360><c> Let's</c><00:02:10.600><c> make</c><00:02:11.000><c> images</c><00:02:11.520><c> API.</c> 00:02:12.790 --> 00:02:12.800 align:start position:0% documentation. Let's make images API. 00:02:12.800 --> 00:02:14.830 align:start position:0% documentation. Let's make images API. Let's<00:02:13.000><c> use</c><00:02:13.200><c> that.</c> 00:02:14.830 --> 00:02:14.840 align:start position:0% Let's use that. 00:02:14.840 --> 00:02:17.390 align:start position:0% Let's use that. Product<00:02:15.320><c> images.</c><00:02:16.440><c> Actually,</c><00:02:16.800><c> you</c><00:02:16.840><c> can</c><00:02:17.040><c> also</c> 00:02:17.390 --> 00:02:17.400 align:start position:0% Product images. Actually, you can also 00:02:17.400 --> 00:02:19.830 align:start position:0% Product images. Actually, you can also use<00:02:17.640><c> this</c><00:02:17.959><c> using</c><00:02:18.320><c> product</c><00:02:18.760><c> API</c><00:02:19.400><c> from</c><00:02:19.640><c> what</c><00:02:19.760><c> I</c> 00:02:19.830 --> 00:02:19.840 align:start position:0% use this using product API from what I 00:02:19.840 --> 00:02:23.470 align:start position:0% use this using product API from what I can<00:02:20.040><c> remember.</c><00:02:20.560><c> But</c><00:02:21.560><c> I</c> 00:02:23.470 --> 00:02:23.480 align:start position:0% can remember. But I 00:02:23.480 --> 00:02:26.510 align:start position:0% can remember. But I highly<00:02:23.760><c> recommend</c><00:02:24.240><c> to</c><00:02:24.400><c> use</c><00:02:25.160><c> product</c><00:02:25.600><c> images</c> 00:02:26.510 --> 00:02:26.520 align:start position:0% highly recommend to use product images 00:02:26.520 --> 00:02:29.110 align:start position:0% highly recommend to use product images API<00:02:27.160><c> instead</c><00:02:28.160><c> because</c><00:02:28.440><c> you</c><00:02:28.560><c> have</c><00:02:28.800><c> much</c> 00:02:29.110 --> 00:02:29.120 align:start position:0% API instead because you have much 00:02:29.120 --> 00:02:32.550 align:start position:0% API instead because you have much control<00:02:29.680><c> over</c><00:02:30.000><c> it</c><00:02:30.200><c> instead</c><00:02:30.600><c> of</c><00:02:30.760><c> just</c><00:02:31.160><c> product</c> 00:02:32.550 --> 00:02:32.560 align:start position:0% control over it instead of just product 00:02:32.560 --> 00:02:34.630 align:start position:0% control over it instead of just product API.<00:02:33.680><c> So,</c><00:02:33.920><c> let's</c><00:02:34.200><c> take</c><00:02:34.360><c> a</c><00:02:34.400><c> look</c><00:02:34.520><c> at</c><00:02:34.600><c> the</c> 00:02:34.630 --> 00:02:34.640 align:start position:0% API. So, let's take a look at the 00:02:34.640 --> 00:02:36.230 align:start position:0% API. So, let's take a look at the product<00:02:35.000><c> API</c><00:02:35.240><c> instead</c><00:02:35.640><c> for</c><00:02:35.760><c> a</c><00:02:35.840><c> while.</c><00:02:36.040><c> For</c><00:02:36.200><c> a</c> 00:02:36.230 --> 00:02:36.240 align:start position:0% product API instead for a while. For a 00:02:36.240 --> 00:02:37.550 align:start position:0% product API instead for a while. For a little<00:02:36.480><c> bit,</c><00:02:36.600><c> just</c><00:02:36.720><c> a</c><00:02:36.760><c> little</c><00:02:36.959><c> bit.</c><00:02:37.200><c> Okay.</c><00:02:37.400><c> So,</c> 00:02:37.550 --> 00:02:37.560 align:start position:0% little bit, just a little bit. Okay. So, 00:02:37.560 --> 00:02:39.949 align:start position:0% little bit, just a little bit. Okay. So, what<00:02:37.800><c> you</c><00:02:37.880><c> can</c><00:02:38.080><c> do</c><00:02:38.360><c> with</c><00:02:38.480><c> this</c><00:02:38.720><c> product</c><00:02:39.120><c> API</c><00:02:39.680><c> is</c> 00:02:39.949 --> 00:02:39.959 align:start position:0% what you can do with this product API is 00:02:39.959 --> 00:02:42.870 align:start position:0% what you can do with this product API is to<00:02:40.640><c> you</c><00:02:40.760><c> can</c><00:02:41.160><c> get</c><00:02:41.520><c> obviously</c><00:02:42.160><c> the</c><00:02:42.400><c> list</c><00:02:42.680><c> of</c><00:02:42.800><c> the</c> 00:02:42.870 --> 00:02:42.880 align:start position:0% to you can get obviously the list of the 00:02:42.880 --> 00:02:44.430 align:start position:0% to you can get obviously the list of the products,<00:02:43.400><c> all</c><00:02:43.480><c> the</c><00:02:43.600><c> products.</c><00:02:44.120><c> You</c><00:02:44.200><c> can</c> 00:02:44.430 --> 00:02:44.440 align:start position:0% products, all the products. You can 00:02:44.440 --> 00:02:46.430 align:start position:0% products, all the products. You can count<00:02:44.760><c> how</c><00:02:44.880><c> many</c><00:02:45.080><c> products</c><00:02:45.440><c> you</c><00:02:45.520><c> have.</c><00:02:46.320><c> You</c> 00:02:46.430 --> 00:02:46.440 align:start position:0% count how many products you have. You 00:02:46.440 --> 00:02:48.430 align:start position:0% count how many products you have. You can<00:02:46.840><c> retrieve</c><00:02:47.360><c> a</c><00:02:47.400><c> single</c><00:02:47.760><c> product.</c><00:02:48.240><c> You</c><00:02:48.320><c> can</c> 00:02:48.430 --> 00:02:48.440 align:start position:0% can retrieve a single product. You can 00:02:48.440 --> 00:02:50.630 align:start position:0% can retrieve a single product. You can also<00:02:48.959><c> create</c><00:02:49.280><c> a</c><00:02:49.320><c> new</c><00:02:49.560><c> product.</c><00:02:50.360><c> You</c><00:02:50.440><c> can</c> 00:02:50.630 --> 00:02:50.640 align:start position:0% also create a new product. You can 00:02:50.640 --> 00:02:52.630 align:start position:0% also create a new product. You can update<00:02:51.160><c> and</c><00:02:51.280><c> you</c><00:02:51.360><c> can</c><00:02:51.520><c> delete.</c> 00:02:52.630 --> 00:02:52.640 align:start position:0% update and you can delete. 00:02:52.640 --> 00:02:55.390 align:start position:0% update and you can delete. These<00:02:53.320><c> are</c><00:02:53.440><c> the</c><00:02:53.560><c> properties.</c><00:02:54.880><c> Obviously,</c><00:02:55.280><c> we</c> 00:02:55.390 --> 00:02:55.400 align:start position:0% These are the properties. Obviously, we 00:02:55.400 --> 00:02:57.990 align:start position:0% These are the properties. Obviously, we have<00:02:55.640><c> the</c><00:02:55.920><c> description,</c><00:02:57.080><c> the</c><00:02:57.200><c> date</c><00:02:57.680><c> for</c><00:02:57.880><c> the</c> 00:02:57.990 --> 00:02:58.000 align:start position:0% have the description, the date for the 00:02:58.000 --> 00:03:00.110 align:start position:0% have the description, the date for the product,<00:02:59.120><c> the</c><00:02:59.200><c> handle</c><00:02:59.600><c> which</c><00:02:59.760><c> is</c><00:02:59.880><c> this</c> 00:03:00.110 --> 00:03:00.120 align:start position:0% product, the handle which is this 00:03:00.120 --> 00:03:02.870 align:start position:0% product, the handle which is this actually<00:03:00.480><c> really</c><00:03:00.680><c> useful</c><00:03:01.320><c> especially</c><00:03:01.880><c> for</c> 00:03:02.870 --> 00:03:02.880 align:start position:0% actually really useful especially for 00:03:02.880 --> 00:03:04.910 align:start position:0% actually really useful especially for URLs<00:03:03.480><c> and</c><00:03:03.600><c> stuff</c><00:03:03.800><c> like</c><00:03:03.959><c> that.</c><00:03:04.320><c> Also,</c><00:03:04.560><c> this</c><00:03:04.800><c> for</c> 00:03:04.910 --> 00:03:04.920 align:start position:0% URLs and stuff like that. Also, this for 00:03:04.920 --> 00:03:07.390 align:start position:0% URLs and stuff like that. Also, this for the<00:03:05.080><c> ID</c><00:03:05.680><c> which</c><00:03:05.840><c> is</c><00:03:05.959><c> really</c><00:03:06.200><c> useful</c><00:03:06.560><c> as</c><00:03:06.680><c> well.</c> 00:03:07.390 --> 00:03:07.400 align:start position:0% the ID which is really useful as well. 00:03:07.400 --> 00:03:08.550 align:start position:0% the ID which is really useful as well. So,<00:03:07.519><c> this</c><00:03:07.640><c> is</c><00:03:07.720><c> what</c><00:03:07.840><c> I'm</c><00:03:07.920><c> talking</c><00:03:08.200><c> about.</c> 00:03:08.550 --> 00:03:08.560 align:start position:0% So, this is what I'm talking about. 00:03:08.560 --> 00:03:12.229 align:start position:0% So, this is what I'm talking about. Images.<00:03:09.600><c> So,</c><00:03:09.760><c> this</c><00:03:10.000><c> is</c><00:03:10.120><c> the</c><00:03:10.320><c> actual</c><00:03:11.120><c> image</c><00:03:11.959><c> for</c> 00:03:12.229 --> 00:03:12.239 align:start position:0% Images. So, this is the actual image for 00:03:12.239 --> 00:03:15.110 align:start position:0% Images. So, this is the actual image for each<00:03:12.560><c> product.</c><00:03:13.640><c> So,</c><00:03:13.920><c> this</c><00:03:14.120><c> is</c><00:03:14.200><c> the</c><00:03:14.320><c> only</c><00:03:14.760><c> data</c> 00:03:15.110 --> 00:03:15.120 align:start position:0% each product. So, this is the only data 00:03:15.120 --> 00:03:17.990 align:start position:0% each product. So, this is the only data you<00:03:15.280><c> can</c><00:03:15.480><c> have.</c><00:03:16.280><c> The</c><00:03:16.400><c> date,</c><00:03:17.320><c> the</c><00:03:17.440><c> width,</c><00:03:17.920><c> the</c> 00:03:17.990 --> 00:03:18.000 align:start position:0% you can have. The date, the width, the 00:03:18.000 --> 00:03:20.910 align:start position:0% you can have. The date, the width, the height,<00:03:18.680><c> and</c><00:03:18.840><c> then</c><00:03:19.160><c> the</c><00:03:19.280><c> default</c> 00:03:20.910 --> 00:03:20.920 align:start position:0% height, and then the default 00:03:20.920 --> 00:03:22.350 align:start position:0% height, and then the default image. 00:03:22.350 --> 00:03:22.360 align:start position:0% image. 00:03:22.360 --> 00:03:25.910 align:start position:0% image. However,<00:03:23.560><c> with</c><00:03:24.000><c> product</c><00:03:24.480><c> images,</c><00:03:25.519><c> you</c><00:03:25.640><c> have</c> 00:03:25.910 --> 00:03:25.920 align:start position:0% However, with product images, you have 00:03:25.920 --> 00:03:29.430 align:start position:0% However, with product images, you have much<00:03:26.320><c> control</c><00:03:26.959><c> of</c><00:03:27.440><c> how</c><00:03:27.880><c> of</c><00:03:28.239><c> what</c><00:03:28.959><c> you</c><00:03:29.120><c> can</c> 00:03:29.430 --> 00:03:29.440 align:start position:0% much control of how of what you can 00:03:29.440 --> 00:03:30.830 align:start position:0% much control of how of what you can retrieve.<00:03:30.080><c> So,</c><00:03:30.239><c> let's</c><00:03:30.400><c> take</c><00:03:30.560><c> a</c><00:03:30.600><c> look</c><00:03:30.720><c> at</c><00:03:30.800><c> the</c> 00:03:30.830 --> 00:03:30.840 align:start position:0% retrieve. So, let's take a look at the 00:03:30.840 --> 00:03:34.470 align:start position:0% retrieve. So, let's take a look at the product<00:03:31.200><c> image</c><00:03:31.519><c> API.</c><00:03:32.560><c> So,</c><00:03:32.760><c> over</c><00:03:33.040><c> here</c> 00:03:34.470 --> 00:03:34.480 align:start position:0% product image API. So, over here 00:03:34.480 --> 00:03:36.470 align:start position:0% product image API. So, over here you<00:03:34.600><c> can</c><00:03:34.760><c> do</c><00:03:34.880><c> the</c><00:03:35.000><c> same</c><00:03:35.239><c> thing.</c><00:03:35.560><c> You</c><00:03:35.680><c> can</c><00:03:36.080><c> get,</c> 00:03:36.470 --> 00:03:36.480 align:start position:0% you can do the same thing. You can get, 00:03:36.480 --> 00:03:38.790 align:start position:0% you can do the same thing. You can get, you<00:03:36.560><c> can</c><00:03:36.720><c> retrieve,</c><00:03:37.239><c> you</c><00:03:37.360><c> can</c><00:03:38.280><c> create</c><00:03:38.519><c> a</c><00:03:38.600><c> new</c> 00:03:38.790 --> 00:03:38.800 align:start position:0% you can retrieve, you can create a new 00:03:38.800 --> 00:03:41.030 align:start position:0% you can retrieve, you can create a new image,<00:03:39.280><c> and</c><00:03:39.400><c> then</c><00:03:39.560><c> you</c><00:03:39.640><c> can</c><00:03:39.760><c> modify,</c><00:03:40.840><c> and</c><00:03:40.959><c> you</c> 00:03:41.030 --> 00:03:41.040 align:start position:0% image, and then you can modify, and you 00:03:41.040 --> 00:03:43.790 align:start position:0% image, and then you can modify, and you can<00:03:41.200><c> delete.</c><00:03:42.080><c> So,</c><00:03:42.360><c> the</c><00:03:42.480><c> properties,</c><00:03:43.760><c> the</c> 00:03:43.790 --> 00:03:43.800 align:start position:0% can delete. So, the properties, the 00:03:43.800 --> 00:03:47.949 align:start position:0% can delete. So, the properties, the date,<00:03:44.519><c> ID,</c><00:03:45.560><c> which</c><00:03:45.800><c> positions</c><00:03:46.920><c> the</c><00:03:47.120><c> image</c><00:03:47.760><c> or</c> 00:03:47.949 --> 00:03:47.959 align:start position:0% date, ID, which positions the image or 00:03:47.959 --> 00:03:49.509 align:start position:0% date, ID, which positions the image or you<00:03:48.040><c> can</c><00:03:48.200><c> the</c><00:03:48.320><c> order.</c><00:03:48.720><c> So,</c><00:03:48.959><c> the</c><00:03:49.120><c> order</c><00:03:49.320><c> of</c><00:03:49.400><c> the</c> 00:03:49.509 --> 00:03:49.519 align:start position:0% you can the order. So, the order of the 00:03:49.519 --> 00:03:51.550 align:start position:0% you can the order. So, the order of the product<00:03:49.840><c> image</c><00:03:50.120><c> in</c><00:03:50.200><c> to</c><00:03:50.320><c> list.</c><00:03:50.920><c> The</c><00:03:51.120><c> first</c> 00:03:51.550 --> 00:03:51.560 align:start position:0% product image in to list. The first 00:03:51.560 --> 00:03:53.510 align:start position:0% product image in to list. The first product<00:03:52.000><c> image</c><00:03:52.360><c> is</c><00:03:52.640><c> at</c><00:03:52.720><c> the</c><00:03:52.840><c> position</c><00:03:53.240><c> number</c> 00:03:53.510 --> 00:03:53.520 align:start position:0% product image is at the position number 00:03:53.520 --> 00:03:55.550 align:start position:0% product image is at the position number one.<00:03:53.800><c> So,</c><00:03:53.920><c> by</c><00:03:54.040><c> default</c><00:03:54.360><c> there</c><00:03:54.480><c> is</c><00:03:54.680><c> one.</c><00:03:55.240><c> So,</c><00:03:55.360><c> we</c> 00:03:55.550 --> 00:03:55.560 align:start position:0% one. So, by default there is one. So, we 00:03:55.560 --> 00:03:57.990 align:start position:0% one. So, by default there is one. So, we you<00:03:55.680><c> don't</c><00:03:55.880><c> have</c><00:03:56.080><c> to</c><00:03:56.880><c> get</c><00:03:57.120><c> that.</c><00:03:57.480><c> It</c><00:03:57.600><c> depends</c> 00:03:57.990 --> 00:03:58.000 align:start position:0% you don't have to get that. It depends 00:03:58.000 --> 00:04:01.110 align:start position:0% you don't have to get that. It depends depends<00:03:58.400><c> on</c><00:03:58.600><c> what</c><00:03:58.880><c> type</c><00:03:59.200><c> of</c><00:03:59.840><c> app</c><00:04:00.040><c> you're</c> 00:04:01.110 --> 00:04:01.120 align:start position:0% depends on what type of app you're 00:04:01.120 --> 00:04:02.670 align:start position:0% depends on what type of app you're creating. 00:04:02.670 --> 00:04:02.680 align:start position:0% creating. 00:04:02.680 --> 00:04:03.510 align:start position:0% creating. I'll<00:04:02.840><c> go</c> 00:04:03.510 --> 00:04:03.520 align:start position:0% I'll go 00:04:03.520 --> 00:04:05.150 align:start position:0% I'll go um<00:04:03.600><c> okay.</c><00:04:03.880><c> So,</c><00:04:04.040><c> we</c><00:04:04.160><c> have</c><00:04:04.320><c> product</c><00:04:04.720><c> ID</c><00:04:04.920><c> over</c> 00:04:05.150 --> 00:04:05.160 align:start position:0% um okay. So, we have product ID over 00:04:05.160 --> 00:04:08.190 align:start position:0% um okay. So, we have product ID over here,<00:04:05.960><c> variants</c><00:04:06.480><c> ID,</c><00:04:07.120><c> which</c><00:04:07.360><c> is</c><00:04:07.800><c> actually</c> 00:04:08.190 --> 00:04:08.200 align:start position:0% here, variants ID, which is actually 00:04:08.200 --> 00:04:09.750 align:start position:0% here, variants ID, which is actually really<00:04:08.440><c> useful.</c> 00:04:09.750 --> 00:04:09.760 align:start position:0% really useful. 00:04:09.760 --> 00:04:14.070 align:start position:0% really useful. And<00:04:10.760><c> one</c><00:04:10.880><c> of</c><00:04:11.000><c> the</c><00:04:11.840><c> I</c><00:04:11.920><c> mean</c><00:04:12.760><c> SRC,</c><00:04:13.440><c> that's</c><00:04:13.840><c> what</c> 00:04:14.070 --> 00:04:14.080 align:start position:0% And one of the I mean SRC, that's what 00:04:14.080 --> 00:04:18.069 align:start position:0% And one of the I mean SRC, that's what we<00:04:14.200><c> need.</c><00:04:14.760><c> So,</c><00:04:15.120><c> we</c><00:04:15.240><c> have</c><00:04:15.480><c> here</c><00:04:15.720><c> the</c><00:04:16.680><c> URL</c><00:04:17.600><c> of</c><00:04:17.920><c> the</c> 00:04:18.069 --> 00:04:18.079 align:start position:0% we need. So, we have here the URL of the 00:04:18.079 --> 00:04:22.310 align:start position:0% we need. So, we have here the URL of the image.<00:04:19.280><c> And</c><00:04:19.840><c> you</c><00:04:19.920><c> can</c><00:04:20.160><c> also</c><00:04:20.880><c> like</c> 00:04:22.310 --> 00:04:22.320 align:start position:0% image. And you can also like 00:04:22.320 --> 00:04:25.630 align:start position:0% image. And you can also like uh<00:04:22.400><c> modify</c><00:04:22.919><c> the</c><00:04:23.880><c> size</c><00:04:24.280><c> of</c><00:04:24.440><c> this</c><00:04:24.640><c> image.</c><00:04:25.520><c> So,</c> 00:04:25.630 --> 00:04:25.640 align:start position:0% uh modify the size of this image. So, 00:04:25.640 --> 00:04:29.150 align:start position:0% uh modify the size of this image. So, for<00:04:25.800><c> example,</c><00:04:26.560><c> add</c><00:04:26.800><c> small</c><00:04:27.760><c> URL</c><00:04:28.600><c> to</c><00:04:28.720><c> the</c><00:04:28.840><c> file</c> 00:04:29.150 --> 00:04:29.160 align:start position:0% for example, add small URL to the file 00:04:29.160 --> 00:04:33.190 align:start position:0% for example, add small URL to the file name.<00:04:29.960><c> So,</c><00:04:30.080><c> you</c><00:04:30.200><c> can</c><00:04:30.440><c> get</c><00:04:30.840><c> the</c><00:04:31.520><c> 100</c><00:04:32.160><c> pixel</c><00:04:32.720><c> wide</c> 00:04:33.190 --> 00:04:33.200 align:start position:0% name. So, you can get the 100 pixel wide 00:04:33.200 --> 00:04:35.550 align:start position:0% name. So, you can get the 100 pixel wide and<00:04:33.560><c> height.</c><00:04:34.480><c> Anyway,</c><00:04:34.880><c> yeah,</c><00:04:35.040><c> we're</c><00:04:35.200><c> going</c><00:04:35.440><c> to</c> 00:04:35.550 --> 00:04:35.560 align:start position:0% and height. Anyway, yeah, we're going to 00:04:35.560 --> 00:04:39.110 align:start position:0% and height. Anyway, yeah, we're going to use<00:04:35.880><c> SRC</c><00:04:36.800><c> to</c><00:04:37.680><c> get</c><00:04:37.960><c> the</c><00:04:38.080><c> image.</c><00:04:38.560><c> So,</c><00:04:38.640><c> let's</c><00:04:38.919><c> do</c> 00:04:39.110 --> 00:04:39.120 align:start position:0% use SRC to get the image. So, let's do 00:04:39.120 --> 00:04:40.750 align:start position:0% use SRC to get the image. So, let's do that,<00:04:39.400><c> shall</c><00:04:39.720><c> we?</c><00:04:39.919><c> Let's</c><00:04:40.120><c> start.</c><00:04:40.400><c> Let's</c><00:04:40.600><c> go</c> 00:04:40.750 --> 00:04:40.760 align:start position:0% that, shall we? Let's start. Let's go 00:04:40.760 --> 00:04:43.150 align:start position:0% that, shall we? Let's start. Let's go back<00:04:41.000><c> to</c><00:04:41.160><c> our</c><00:04:41.720><c> Shopify</c> 00:04:43.150 --> 00:04:43.160 align:start position:0% back to our Shopify 00:04:43.160 --> 00:04:44.750 align:start position:0% back to our Shopify uh 00:04:44.750 --> 00:04:44.760 align:start position:0% uh 00:04:44.760 --> 00:04:46.590 align:start position:0% uh index.php.<00:04:45.880><c> What</c><00:04:46.080><c> I</c><00:04:46.160><c> This</c><00:04:46.320><c> is</c><00:04:46.360><c> what</c><00:04:46.480><c> I'm</c> 00:04:46.590 --> 00:04:46.600 align:start position:0% index.php. What I This is what I'm 00:04:46.600 --> 00:04:48.030 align:start position:0% index.php. What I This is what I'm trying<00:04:46.840><c> to</c><00:04:46.960><c> say.</c><00:04:47.160><c> Okay,</c><00:04:47.400><c> so</c><00:04:47.520><c> let's</c><00:04:47.720><c> create</c><00:04:48.000><c> a</c> 00:04:48.030 --> 00:04:48.040 align:start position:0% trying to say. Okay, so let's create a 00:04:48.040 --> 00:04:49.550 align:start position:0% trying to say. Okay, so let's create a variable<00:04:48.520><c> over</c><00:04:48.720><c> here.</c><00:04:48.960><c> You</c><00:04:49.120><c> know</c><00:04:49.240><c> what?</c><00:04:49.400><c> Let's</c> 00:04:49.550 --> 00:04:49.560 align:start position:0% variable over here. You know what? Let's 00:04:49.560 --> 00:04:51.230 align:start position:0% variable over here. You know what? Let's get<00:04:49.800><c> rid</c><00:04:49.960><c> of</c><00:04:50.040><c> this.</c><00:04:50.640><c> We</c><00:04:50.760><c> don't</c><00:04:50.919><c> need</c><00:04:51.040><c> this</c><00:04:51.160><c> the</c> 00:04:51.230 --> 00:04:51.240 align:start position:0% get rid of this. We don't need this the 00:04:51.240 --> 00:04:53.550 align:start position:0% get rid of this. We don't need this the collection<00:04:51.600><c> ID.</c><00:04:52.120><c> We</c><00:04:52.200><c> don't</c><00:04:52.400><c> need</c><00:04:52.600><c> that.</c> 00:04:53.550 --> 00:04:53.560 align:start position:0% collection ID. We don't need that. 00:04:53.560 --> 00:04:55.390 align:start position:0% collection ID. We don't need that. Uh<00:04:53.640><c> over</c><00:04:53.880><c> here,</c><00:04:54.120><c> let's</c><00:04:54.360><c> make</c><00:04:54.640><c> a</c><00:04:54.680><c> new</c><00:04:54.919><c> variable.</c> 00:04:55.390 --> 00:04:55.400 align:start position:0% Uh over here, let's make a new variable. 00:04:55.400 --> 00:04:56.670 align:start position:0% Uh over here, let's make a new variable. You<00:04:55.480><c> know</c><00:04:55.560><c> what?</c><00:04:55.680><c> Let's</c><00:04:55.880><c> make</c><00:04:56.040><c> a</c><00:04:56.120><c> comment</c><00:04:56.480><c> over</c> 00:04:56.670 --> 00:04:56.680 align:start position:0% You know what? Let's make a comment over 00:04:56.680 --> 00:04:58.870 align:start position:0% You know what? Let's make a comment over here.<00:04:57.480><c> Varia</c> 00:04:58.870 --> 00:04:58.880 align:start position:0% here. Varia 00:04:58.880 --> 00:04:59.750 align:start position:0% here. Varia um 00:04:59.750 --> 00:04:59.760 align:start position:0% um 00:04:59.760 --> 00:05:02.310 align:start position:0% um uh<00:04:59.919><c> product</c><00:05:00.720><c> titles</c> 00:05:02.310 --> 00:05:02.320 align:start position:0% uh product titles 00:05:02.320 --> 00:05:03.950 align:start position:0% uh product titles and 00:05:03.950 --> 00:05:03.960 align:start position:0% and 00:05:03.960 --> 00:05:07.870 align:start position:0% and I<00:05:04.040><c> mean</c><00:05:04.320><c> product</c><00:05:04.960><c> titles</c><00:05:05.560><c> and</c><00:05:06.400><c> product</c> 00:05:07.870 --> 00:05:07.880 align:start position:0% I mean product titles and product 00:05:07.880 --> 00:05:09.590 align:start position:0% I mean product titles and product images. 00:05:09.590 --> 00:05:09.600 align:start position:0% images. 00:05:09.600 --> 00:05:10.909 align:start position:0% images. And<00:05:09.760><c> let's</c><00:05:09.919><c> create</c><00:05:10.160><c> a</c><00:05:10.200><c> new</c><00:05:10.400><c> variable.</c><00:05:10.760><c> Let's</c> 00:05:10.909 --> 00:05:10.919 align:start position:0% And let's create a new variable. Let's 00:05:10.919 --> 00:05:15.670 align:start position:0% And let's create a new variable. Let's call<00:05:11.160><c> this</c><00:05:11.960><c> image</c><00:05:13.280><c> and</c><00:05:13.480><c> then</c><00:05:14.200><c> empty</c><00:05:14.480><c> string.</c> 00:05:15.670 --> 00:05:15.680 align:start position:0% call this image and then empty string. 00:05:15.680 --> 00:05:19.590 align:start position:0% call this image and then empty string. Over<00:05:15.960><c> here,</c><00:05:16.280><c> let's</c><00:05:16.520><c> make</c><00:05:16.800><c> title.</c> 00:05:19.590 --> 00:05:19.600 align:start position:0% 00:05:19.600 --> 00:05:21.990 align:start position:0% And<00:05:19.880><c> let's</c><00:05:20.040><c> make</c><00:05:20.240><c> an</c><00:05:20.360><c> empty</c><00:05:20.720><c> string.</c> 00:05:21.990 --> 00:05:22.000 align:start position:0% And let's make an empty string. 00:05:22.000 --> 00:05:24.230 align:start position:0% And let's make an empty string. And<00:05:22.160><c> then</c><00:05:22.400><c> over</c><00:05:22.720><c> here,</c><00:05:23.680><c> underneath</c><00:05:24.120><c> the</c> 00:05:24.230 --> 00:05:24.240 align:start position:0% And then over here, underneath the 00:05:24.240 --> 00:05:27.830 align:start position:0% And then over here, underneath the products<00:05:24.840><c> variable,</c><00:05:25.960><c> let's</c><00:05:26.400><c> make</c> 00:05:27.830 --> 00:05:27.840 align:start position:0% products variable, let's make 00:05:27.840 --> 00:05:29.030 align:start position:0% products variable, let's make um 00:05:29.030 --> 00:05:29.040 align:start position:0% um 00:05:29.040 --> 00:05:31.870 align:start position:0% um let's<00:05:29.240><c> make</c><00:05:29.440><c> another</c> 00:05:31.870 --> 00:05:31.880 align:start position:0% let's make another 00:05:31.880 --> 00:05:33.790 align:start position:0% let's make another another<00:05:32.280><c> Shopify</c><00:05:32.800><c> call</c><00:05:33.280><c> from</c><00:05:33.440><c> what</c><00:05:33.600><c> I</c><00:05:33.640><c> can</c> 00:05:33.790 --> 00:05:33.800 align:start position:0% another Shopify call from what I can 00:05:33.800 --> 00:05:34.870 align:start position:0% another Shopify call from what I can remember.<00:05:34.000><c> All</c><00:05:34.040><c> right,</c><00:05:34.160><c> so</c><00:05:34.320><c> let's</c><00:05:34.560><c> take</c> 00:05:34.870 --> 00:05:34.880 align:start position:0% remember. All right, so let's take 00:05:34.880 --> 00:05:38.670 align:start position:0% remember. All right, so let's take images<00:05:35.680><c> is</c><00:05:35.880><c> equal</c><00:05:36.320><c> to</c><00:05:37.320><c> Shopify</c><00:05:38.200><c> Let's</c><00:05:38.400><c> copy</c> 00:05:38.670 --> 00:05:38.680 align:start position:0% images is equal to Shopify Let's copy 00:05:38.680 --> 00:05:41.590 align:start position:0% images is equal to Shopify Let's copy this.<00:05:39.240><c> Let's</c><00:05:39.360><c> just</c><00:05:39.520><c> copy</c><00:05:39.800><c> this.</c> 00:05:41.590 --> 00:05:41.600 align:start position:0% this. Let's just copy this. 00:05:41.600 --> 00:05:43.110 align:start position:0% this. Let's just copy this. And<00:05:41.680><c> then</c><00:05:41.800><c> let's</c><00:05:42.040><c> paste</c><00:05:42.320><c> it</c><00:05:42.440><c> over</c><00:05:42.680><c> here.</c><00:05:42.880><c> Let's</c> 00:05:43.110 --> 00:05:43.120 align:start position:0% And then let's paste it over here. Let's 00:05:43.120 --> 00:05:44.430 align:start position:0% And then let's paste it over here. Let's also<00:05:43.360><c> copy</c><00:05:43.640><c> this.</c> 00:05:44.430 --> 00:05:44.440 align:start position:0% also copy this. 00:05:44.440 --> 00:05:45.230 align:start position:0% also copy this. Yeah. 00:05:45.230 --> 00:05:45.240 align:start position:0% Yeah. 00:05:45.240 --> 00:05:46.510 align:start position:0% Yeah. Let's<00:05:45.320><c> copy</c><00:05:45.520><c> that.</c> 00:05:46.510 --> 00:05:46.520 align:start position:0% Let's copy that. 00:05:46.520 --> 00:05:49.630 align:start position:0% Let's copy that. Put<00:05:46.840><c> it</c><00:05:47.000><c> over</c><00:05:47.240><c> here.</c><00:05:47.880><c> Change</c><00:05:48.360><c> products</c><00:05:49.200><c> to</c> 00:05:49.630 --> 00:05:49.640 align:start position:0% Put it over here. Change products to 00:05:49.640 --> 00:05:51.110 align:start position:0% Put it over here. Change products to images. 00:05:51.110 --> 00:05:51.120 align:start position:0% images. 00:05:51.120 --> 00:05:53.830 align:start position:0% images. This<00:05:51.400><c> one</c><00:05:51.560><c> as</c><00:05:51.720><c> well.</c><00:05:52.600><c> And</c><00:05:53.000><c> over</c><00:05:53.240><c> here</c><00:05:53.520><c> we</c><00:05:53.640><c> have</c> 00:05:53.830 --> 00:05:53.840 align:start position:0% This one as well. And over here we have 00:05:53.840 --> 00:05:56.550 align:start position:0% This one as well. And over here we have Shopify<00:05:54.360><c> call</c><00:05:54.960><c> token,</c><00:05:55.400><c> that</c><00:05:55.560><c> is</c><00:05:55.680><c> good.</c><00:05:56.120><c> Shop,</c> 00:05:56.550 --> 00:05:56.560 align:start position:0% Shopify call token, that is good. Shop, 00:05:56.560 --> 00:05:58.950 align:start position:0% Shopify call token, that is good. Shop, that<00:05:56.680><c> is</c><00:05:56.840><c> good.</c> 00:05:58.950 --> 00:05:58.960 align:start position:0% that is good. 00:05:58.960 --> 00:06:03.070 align:start position:0% that is good. Um<00:05:59.040><c> the</c><00:05:59.160><c> API</c><00:05:59.600><c> call</c><00:06:00.720><c> the</c><00:06:00.880><c> URL,</c><00:06:01.640><c> let's</c><00:06:01.880><c> change</c><00:06:02.720><c> it</c> 00:06:03.070 --> 00:06:03.080 align:start position:0% Um the API call the URL, let's change it 00:06:03.080 --> 00:06:04.310 align:start position:0% Um the API call the URL, let's change it to 00:06:04.310 --> 00:06:04.320 align:start position:0% to 00:06:04.320 --> 00:06:07.470 align:start position:0% to images<00:06:05.120><c> over</c><00:06:05.320><c> here.</c><00:06:06.000><c> Let's</c><00:06:06.200><c> just</c><00:06:06.520><c> add</c><00:06:06.920><c> slash</c> 00:06:07.470 --> 00:06:07.480 align:start position:0% images over here. Let's just add slash 00:06:07.480 --> 00:06:10.110 align:start position:0% images over here. Let's just add slash then<00:06:08.360><c> images</c><00:06:08.960><c> because</c><00:06:09.200><c> we</c><00:06:09.320><c> need</c><00:06:09.560><c> the</c><00:06:09.680><c> product</c> 00:06:10.110 --> 00:06:10.120 align:start position:0% then images because we need the product 00:06:10.120 --> 00:06:12.390 align:start position:0% then images because we need the product ID<00:06:10.680><c> over</c><00:06:10.920><c> here.</c><00:06:11.560><c> So</c><00:06:11.680><c> let's</c><00:06:11.880><c> take</c><00:06:12.040><c> a</c><00:06:12.120><c> look</c><00:06:12.280><c> at</c> 00:06:12.390 --> 00:06:12.400 align:start position:0% ID over here. So let's take a look at 00:06:12.400 --> 00:06:13.790 align:start position:0% ID over here. So let's take a look at the 00:06:13.790 --> 00:06:13.800 align:start position:0% the 00:06:13.800 --> 00:06:16.910 align:start position:0% the API<00:06:14.400><c> over</c><00:06:14.600><c> here.</c><00:06:15.200><c> So</c> 00:06:16.910 --> 00:06:16.920 align:start position:0% API over here. So 00:06:16.920 --> 00:06:18.950 align:start position:0% API over here. So over<00:06:17.240><c> here</c><00:06:17.440><c> we</c><00:06:17.640><c> have</c> 00:06:18.950 --> 00:06:18.960 align:start position:0% over here we have 00:06:18.960 --> 00:06:22.230 align:start position:0% over here we have uh<00:06:19.520><c> slash</c><00:06:19.919><c> admin</c><00:06:20.240><c> API</c><00:06:20.520><c> 2019</c><00:06:21.200><c> or</c><00:06:21.440><c> 10</c><00:06:22.000><c> then</c> 00:06:22.230 --> 00:06:22.240 align:start position:0% uh slash admin API 2019 or 10 then 00:06:22.240 --> 00:06:24.230 align:start position:0% uh slash admin API 2019 or 10 then products<00:06:22.800><c> then</c><00:06:23.000><c> the</c><00:06:23.080><c> actual</c><00:06:23.440><c> product</c><00:06:23.800><c> ID</c><00:06:24.120><c> and</c> 00:06:24.230 --> 00:06:24.240 align:start position:0% products then the actual product ID and 00:06:24.240 --> 00:06:26.350 align:start position:0% products then the actual product ID and then<00:06:24.440><c> images.json.</c> 00:06:26.350 --> 00:06:26.360 align:start position:0% then images.json. 00:06:26.360 --> 00:06:28.030 align:start position:0% then images.json. So<00:06:26.560><c> that's</c><00:06:26.800><c> what</c><00:06:27.040><c> actually</c><00:06:27.400><c> we're</c><00:06:27.560><c> going</c><00:06:27.880><c> to</c> 00:06:28.030 --> 00:06:28.040 align:start position:0% So that's what actually we're going to 00:06:28.040 --> 00:06:30.190 align:start position:0% So that's what actually we're going to use.<00:06:28.360><c> So</c><00:06:28.520><c> you</c><00:06:28.640><c> can</c><00:06:28.800><c> actually</c><00:06:29.200><c> copy</c><00:06:29.520><c> this.</c><00:06:30.000><c> Just</c> 00:06:30.190 --> 00:06:30.200 align:start position:0% use. So you can actually copy this. Just 00:06:30.200 --> 00:06:33.110 align:start position:0% use. So you can actually copy this. Just make<00:06:30.400><c> sure</c><00:06:30.560><c> you</c><00:06:30.680><c> replace</c><00:06:31.840><c> product</c><00:06:32.240><c> ID,</c><00:06:33.040><c> the</c> 00:06:33.110 --> 00:06:33.120 align:start position:0% make sure you replace product ID, the 00:06:33.120 --> 00:06:35.870 align:start position:0% make sure you replace product ID, the actual<00:06:33.440><c> product</c><00:06:33.800><c> ID.</c><00:06:34.320><c> Okay,</c><00:06:34.480><c> let's</c><00:06:34.680><c> go</c><00:06:34.800><c> back.</c> 00:06:35.870 --> 00:06:35.880 align:start position:0% actual product ID. Okay, let's go back. 00:06:35.880 --> 00:06:39.510 align:start position:0% actual product ID. Okay, let's go back. Um<00:06:36.840><c> okay,</c><00:06:37.240><c> so</c><00:06:37.440><c> we</c><00:06:37.600><c> have</c><00:06:37.840><c> that.</c><00:06:38.600><c> That's</c><00:06:38.840><c> good.</c> 00:06:39.510 --> 00:06:39.520 align:start position:0% Um okay, so we have that. That's good. 00:06:39.520 --> 00:06:41.270 align:start position:0% Um okay, so we have that. That's good. We<00:06:39.600><c> don't</c><00:06:39.800><c> need</c><00:06:39.919><c> to</c><00:06:40.040><c> pass</c><00:06:40.360><c> a</c><00:06:40.440><c> variable</c><00:06:41.080><c> over</c> 00:06:41.270 --> 00:06:41.280 align:start position:0% We don't need to pass a variable over 00:06:41.280 --> 00:06:45.550 align:start position:0% We don't need to pass a variable over here.<00:06:42.200><c> Use</c><00:06:42.480><c> get</c><00:06:43.360><c> and</c><00:06:43.520><c> then</c><00:06:43.760><c> we</c><00:06:44.280><c> convert</c><00:06:44.919><c> it</c><00:06:45.080><c> to</c> 00:06:45.550 --> 00:06:45.560 align:start position:0% here. Use get and then we convert it to 00:06:45.560 --> 00:06:49.550 align:start position:0% here. Use get and then we convert it to an<00:06:46.040><c> array,</c><00:06:47.240><c> the</c><00:06:47.320><c> response,</c><00:06:48.080><c> and</c><00:06:48.320><c> then</c><00:06:49.400><c> that's</c> 00:06:49.550 --> 00:06:49.560 align:start position:0% an array, the response, and then that's 00:06:49.560 --> 00:06:52.950 align:start position:0% an array, the response, and then that's pretty<00:06:49.800><c> much</c><00:06:50.120><c> it.</c><00:06:50.560><c> Let's</c><00:06:50.919><c> just</c><00:06:51.960><c> pass</c><00:06:52.600><c> the</c> 00:06:52.950 --> 00:06:52.960 align:start position:0% pretty much it. Let's just pass the 00:06:52.960 --> 00:06:56.270 align:start position:0% pretty much it. Let's just pass the value<00:06:53.560><c> to</c><00:06:54.080><c> the</c><00:06:54.240><c> actual</c><00:06:54.840><c> image</c><00:06:55.400><c> variable.</c><00:06:55.960><c> So</c> 00:06:56.270 --> 00:06:56.280 align:start position:0% value to the actual image variable. So 00:06:56.280 --> 00:06:59.670 align:start position:0% value to the actual image variable. So let's<00:06:56.520><c> do</c><00:06:56.640><c> that.</c><00:06:57.480><c> Images</c><00:06:58.480><c> then</c><00:06:59.320><c> it's</c><00:06:59.440><c> key</c> 00:06:59.670 --> 00:06:59.680 align:start position:0% let's do that. Images then it's key 00:06:59.680 --> 00:07:03.030 align:start position:0% let's do that. Images then it's key images<00:07:01.160><c> and</c><00:07:01.400><c> then</c> 00:07:03.030 --> 00:07:03.040 align:start position:0% images and then 00:07:03.040 --> 00:07:05.990 align:start position:0% images and then Okay,<00:07:03.360><c> so</c><00:07:04.040><c> in</c><00:07:04.160><c> this</c><00:07:04.360><c> part</c><00:07:05.040><c> you</c><00:07:05.160><c> can</c><00:07:05.360><c> actually</c> 00:07:05.990 --> 00:07:06.000 align:start position:0% Okay, so in this part you can actually 00:07:06.000 --> 00:07:10.190 align:start position:0% Okay, so in this part you can actually get<00:07:06.720><c> uh</c><00:07:06.800><c> you</c><00:07:06.919><c> can</c><00:07:07.080><c> actually</c><00:07:07.560><c> use</c><00:07:07.960><c> zero,</c><00:07:09.120><c> one,</c> 00:07:10.190 --> 00:07:10.200 align:start position:0% get uh you can actually use zero, one, 00:07:10.200 --> 00:07:14.070 align:start position:0% get uh you can actually use zero, one, two,<00:07:10.800><c> three,</c><00:07:11.280><c> four,</c><00:07:11.880><c> or</c><00:07:12.160><c> five,</c><00:07:12.880><c> or</c><00:07:13.600><c> it</c><00:07:13.680><c> depends</c> 00:07:14.070 --> 00:07:14.080 align:start position:0% two, three, four, or five, or it depends 00:07:14.080 --> 00:07:15.670 align:start position:0% two, three, four, or five, or it depends on<00:07:14.200><c> how</c><00:07:14.440><c> much</c> 00:07:15.670 --> 00:07:15.680 align:start position:0% on how much 00:07:15.680 --> 00:07:19.230 align:start position:0% on how much uh<00:07:16.200><c> images</c><00:07:17.200><c> you</c><00:07:17.360><c> have</c><00:07:18.440><c> for</c><00:07:18.560><c> the</c><00:07:18.720><c> product</c><00:07:19.120><c> for</c> 00:07:19.230 --> 00:07:19.240 align:start position:0% uh images you have for the product for 00:07:19.240 --> 00:07:22.350 align:start position:0% uh images you have for the product for the<00:07:19.360><c> certain</c><00:07:20.000><c> product.</c><00:07:21.040><c> So</c><00:07:21.320><c> for</c><00:07:21.480><c> example,</c><00:07:22.200><c> I</c> 00:07:22.350 --> 00:07:22.360 align:start position:0% the certain product. So for example, I 00:07:22.360 --> 00:07:25.590 align:start position:0% the certain product. So for example, I only<00:07:22.760><c> have</c><00:07:23.320><c> one</c><00:07:23.800><c> image,</c><00:07:24.280><c> I</c><00:07:24.400><c> believe.</c> 00:07:25.590 --> 00:07:25.600 align:start position:0% only have one image, I believe. 00:07:25.600 --> 00:07:27.230 align:start position:0% only have one image, I believe. Uh<00:07:25.880><c> let's</c><00:07:26.040><c> take</c><00:07:26.240><c> a</c><00:07:26.280><c> look.</c><00:07:26.680><c> All</c><00:07:26.760><c> right,</c><00:07:26.960><c> so</c><00:07:27.120><c> we</c> 00:07:27.230 --> 00:07:27.240 align:start position:0% Uh let's take a look. All right, so we 00:07:27.240 --> 00:07:28.670 align:start position:0% Uh let's take a look. All right, so we have<00:07:27.560><c> here</c> 00:07:28.670 --> 00:07:28.680 align:start position:0% have here 00:07:28.680 --> 00:07:30.990 align:start position:0% have here Shopify<00:07:29.200><c> app.</c><00:07:29.560><c> Let's</c><00:07:29.760><c> open</c><00:07:30.080><c> products</c><00:07:30.760><c> over</c> 00:07:30.990 --> 00:07:31.000 align:start position:0% Shopify app. Let's open products over 00:07:31.000 --> 00:07:32.510 align:start position:0% Shopify app. Let's open products over here. 00:07:32.510 --> 00:07:32.520 align:start position:0% here. 00:07:32.520 --> 00:07:36.030 align:start position:0% here. Let's<00:07:32.720><c> take</c><00:07:32.880><c> a</c><00:07:32.919><c> look.</c> 00:07:36.030 --> 00:07:36.040 align:start position:0% 00:07:36.040 --> 00:07:37.590 align:start position:0% Okay,<00:07:36.320><c> so</c> 00:07:37.590 --> 00:07:37.600 align:start position:0% Okay, so 00:07:37.600 --> 00:07:39.830 align:start position:0% Okay, so uh<00:07:38.480><c> let's</c><00:07:38.680><c> use</c><00:07:38.919><c> this.</c><00:07:39.160><c> This</c><00:07:39.320><c> actually</c><00:07:39.720><c> the</c> 00:07:39.830 --> 00:07:39.840 align:start position:0% uh let's use this. This actually the 00:07:39.840 --> 00:07:41.910 align:start position:0% uh let's use this. This actually the product<00:07:40.160><c> that</c><00:07:40.320><c> know</c><00:07:40.400><c> what</c><00:07:40.760><c> to</c> 00:07:41.910 --> 00:07:41.920 align:start position:0% product that know what to 00:07:41.920 --> 00:07:43.630 align:start position:0% product that know what to take<00:07:42.360><c> out.</c> 00:07:43.630 --> 00:07:43.640 align:start position:0% take out. 00:07:43.640 --> 00:07:45.790 align:start position:0% take out. Take<00:07:43.960><c> out.</c><00:07:44.280><c> Yeah,</c><00:07:44.440><c> that's</c><00:07:44.640><c> what</c><00:07:44.760><c> I</c><00:07:44.840><c> meant.</c> 00:07:45.790 --> 00:07:45.800 align:start position:0% Take out. Yeah, that's what I meant. 00:07:45.800 --> 00:07:46.390 align:start position:0% Take out. Yeah, that's what I meant. Uh 00:07:46.390 --> 00:07:46.400 align:start position:0% Uh 00:07:46.400 --> 00:07:48.990 align:start position:0% Uh we<00:07:46.560><c> have</c><00:07:47.160><c> three</c><00:07:47.480><c> images.</c><00:07:48.600><c> So,</c><00:07:48.720><c> you</c><00:07:48.800><c> can</c> 00:07:48.990 --> 00:07:49.000 align:start position:0% we have three images. So, you can 00:07:49.000 --> 00:07:53.430 align:start position:0% we have three images. So, you can actually<00:07:49.400><c> take</c><00:07:49.680><c> zero,</c><00:07:50.680><c> one,</c><00:07:51.400><c> and</c><00:07:51.560><c> then</c><00:07:51.840><c> two.</c> 00:07:53.430 --> 00:07:53.440 align:start position:0% actually take zero, one, and then two. 00:07:53.440 --> 00:07:57.270 align:start position:0% actually take zero, one, and then two. That's<00:07:53.640><c> how</c><00:07:54.440><c> the</c><00:07:54.600><c> keys</c><00:07:55.560><c> work</c><00:07:55.960><c> or</c><00:07:56.320><c> the</c> 00:07:57.270 --> 00:07:57.280 align:start position:0% That's how the keys work or the 00:07:57.280 --> 00:07:58.790 align:start position:0% That's how the keys work or the uh 00:07:58.790 --> 00:07:58.800 align:start position:0% uh 00:07:58.800 --> 00:08:01.910 align:start position:0% uh the<00:07:58.920><c> array</c><00:07:59.240><c> works,</c><00:08:00.160><c> basically.</c><00:08:00.760><c> Yeah.</c> 00:08:01.910 --> 00:08:01.920 align:start position:0% the array works, basically. Yeah. 00:08:01.920 --> 00:08:03.990 align:start position:0% the array works, basically. Yeah. So,<00:08:02.000><c> let's</c><00:08:02.160><c> go</c><00:08:02.280><c> back</c><00:08:02.480><c> to</c><00:08:02.600><c> our</c><00:08:02.800><c> script.</c><00:08:03.680><c> Let's</c> 00:08:03.990 --> 00:08:04.000 align:start position:0% So, let's go back to our script. Let's 00:08:04.000 --> 00:08:08.550 align:start position:0% So, let's go back to our script. Let's take<00:08:04.360><c> the</c><00:08:05.040><c> first</c><00:08:05.520><c> image,</c><00:08:06.000><c> which</c><00:08:06.240><c> is</c><00:08:06.400><c> this</c><00:08:06.680><c> one.</c> 00:08:08.550 --> 00:08:08.560 align:start position:0% take the first image, which is this one. 00:08:08.560 --> 00:08:10.030 align:start position:0% take the first image, which is this one. Let's 00:08:10.030 --> 00:08:10.040 align:start position:0% Let's 00:08:10.040 --> 00:08:12.310 align:start position:0% Let's Let's<00:08:10.160><c> use</c><00:08:10.320><c> zero</c><00:08:10.720><c> over</c><00:08:10.880><c> here,</c><00:08:11.560><c> and</c><00:08:11.760><c> then</c> 00:08:12.310 --> 00:08:12.320 align:start position:0% Let's use zero over here, and then 00:08:12.320 --> 00:08:15.310 align:start position:0% Let's use zero over here, and then another<00:08:13.400><c> another</c><00:08:14.320><c> key.</c> 00:08:15.310 --> 00:08:15.320 align:start position:0% another another key. 00:08:15.320 --> 00:08:18.150 align:start position:0% another another key. Uh<00:08:15.840><c> let's</c><00:08:16.040><c> use</c><00:08:16.280><c> SRC.</c><00:08:16.919><c> Yeah.</c> 00:08:18.150 --> 00:08:18.160 align:start position:0% Uh let's use SRC. Yeah. 00:08:18.160 --> 00:08:20.230 align:start position:0% Uh let's use SRC. Yeah. SRC.<00:08:19.000><c> There</c><00:08:19.120><c> you</c><00:08:19.200><c> go.</c><00:08:19.600><c> Let's</c><00:08:19.760><c> close</c><00:08:20.000><c> that.</c> 00:08:20.230 --> 00:08:20.240 align:start position:0% SRC. There you go. Let's close that. 00:08:20.240 --> 00:08:22.870 align:start position:0% SRC. There you go. Let's close that. Make<00:08:20.400><c> sure</c><00:08:20.640><c> you</c><00:08:20.800><c> close</c><00:08:21.080><c> with</c><00:08:21.240><c> semicolon.</c><00:08:22.400><c> And</c> 00:08:22.870 --> 00:08:22.880 align:start position:0% Make sure you close with semicolon. And 00:08:22.880 --> 00:08:26.510 align:start position:0% Make sure you close with semicolon. And another<00:08:23.120><c> one</c><00:08:23.520><c> is</c><00:08:24.800><c> the</c><00:08:24.880><c> actual</c><00:08:25.280><c> title.</c> 00:08:26.510 --> 00:08:26.520 align:start position:0% another one is the actual title. 00:08:26.520 --> 00:08:28.310 align:start position:0% another one is the actual title. All<00:08:26.560><c> right.</c><00:08:26.720><c> So,</c><00:08:26.840><c> instead</c><00:08:27.240><c> of</c><00:08:27.680><c> displaying</c><00:08:28.200><c> the</c> 00:08:28.310 --> 00:08:28.320 align:start position:0% All right. So, instead of displaying the 00:08:28.320 --> 00:08:30.909 align:start position:0% All right. So, instead of displaying the title,<00:08:29.320><c> let's</c><00:08:29.760><c> use</c><00:08:30.080><c> the</c> 00:08:30.909 --> 00:08:30.919 align:start position:0% title, let's use the 00:08:30.919 --> 00:08:33.990 align:start position:0% title, let's use the the<00:08:31.040><c> variable</c><00:08:32.039><c> title,</c><00:08:32.599><c> and</c><00:08:32.719><c> then</c> 00:08:33.990 --> 00:08:34.000 align:start position:0% the variable title, and then 00:08:34.000 --> 00:08:35.950 align:start position:0% the variable title, and then put<00:08:34.159><c> the</c><00:08:34.280><c> value</c><00:08:34.560><c> over</c><00:08:34.760><c> there.</c><00:08:35.440><c> Make</c><00:08:35.640><c> sure</c><00:08:35.840><c> you</c> 00:08:35.950 --> 00:08:35.960 align:start position:0% put the value over there. Make sure you 00:08:35.960 --> 00:08:38.510 align:start position:0% put the value over there. Make sure you get<00:08:36.120><c> rid</c><00:08:36.280><c> of</c><00:08:36.440><c> the</c><00:08:36.800><c> break</c><00:08:37.200><c> line</c> 00:08:38.510 --> 00:08:38.520 align:start position:0% get rid of the break line 00:08:38.520 --> 00:08:41.430 align:start position:0% get rid of the break line line<00:08:38.719><c> breaks.</c><00:08:39.680><c> There</c><00:08:39.800><c> you</c><00:08:39.880><c> go.</c><00:08:40.400><c> Close</c><00:08:40.599><c> that.</c> 00:08:41.430 --> 00:08:41.440 align:start position:0% line breaks. There you go. Close that. 00:08:41.440 --> 00:08:42.630 align:start position:0% line breaks. There you go. Close that. And<00:08:41.599><c> then,</c><00:08:41.840><c> the</c><00:08:41.919><c> next</c><00:08:42.080><c> thing</c><00:08:42.200><c> we're</c><00:08:42.320><c> going</c><00:08:42.520><c> to</c> 00:08:42.630 --> 00:08:42.640 align:start position:0% And then, the next thing we're going to 00:08:42.640 --> 00:08:45.150 align:start position:0% And then, the next thing we're going to do<00:08:42.760><c> is</c><00:08:42.880><c> to</c><00:08:43.000><c> actually</c> 00:08:45.150 --> 00:08:45.160 align:start position:0% do is to actually 00:08:45.160 --> 00:08:49.430 align:start position:0% do is to actually uh<00:08:45.240><c> use</c><00:08:45.600><c> HTML.</c><00:08:46.560><c> So,</c><00:08:47.280><c> let's</c><00:08:47.480><c> type</c><00:08:47.800><c> HTML.</c> 00:08:49.430 --> 00:08:49.440 align:start position:0% uh use HTML. So, let's type HTML. 00:08:49.440 --> 00:08:50.430 align:start position:0% uh use HTML. So, let's type HTML. There<00:08:49.560><c> you</c><00:08:49.640><c> go.</c> 00:08:50.430 --> 00:08:50.440 align:start position:0% There you go. 00:08:50.440 --> 00:08:52.070 align:start position:0% There you go. It's<00:08:50.560><c> pretty</c><00:08:50.760><c> much</c><00:08:50.960><c> it.</c><00:08:51.120><c> I'm</c><00:08:51.320><c> I'm</c><00:08:51.600><c> sorry,</c><00:08:51.880><c> but</c> 00:08:52.070 --> 00:08:52.080 align:start position:0% It's pretty much it. I'm I'm sorry, but 00:08:52.080 --> 00:08:53.630 align:start position:0% It's pretty much it. I'm I'm sorry, but I'm<00:08:52.240><c> using</c> 00:08:53.630 --> 00:08:53.640 align:start position:0% I'm using 00:08:53.640 --> 00:08:57.350 align:start position:0% I'm using a<00:08:53.720><c> plugin</c><00:08:54.400><c> for</c><00:08:54.880><c> my</c><00:08:55.120><c> Sublime</c><00:08:55.680><c> Text.</c><00:08:56.560><c> So,</c><00:08:56.920><c> so</c><00:08:57.240><c> you</c> 00:08:57.350 --> 00:08:57.360 align:start position:0% a plugin for my Sublime Text. So, so you 00:08:57.360 --> 00:09:00.030 align:start position:0% a plugin for my Sublime Text. So, so you can<00:08:57.520><c> just</c><00:08:57.800><c> pause</c><00:08:58.200><c> the</c><00:08:58.320><c> video</c><00:08:58.880><c> and</c><00:08:59.040><c> then</c><00:08:59.760><c> type</c> 00:09:00.030 --> 00:09:00.040 align:start position:0% can just pause the video and then type 00:09:00.040 --> 00:09:02.350 align:start position:0% can just pause the video and then type in.<00:09:00.720><c> So,</c><00:09:01.080><c> I'm</c><00:09:01.200><c> really</c><00:09:01.400><c> sorry</c><00:09:01.640><c> if</c><00:09:01.839><c> I</c><00:09:01.920><c> have</c><00:09:02.080><c> to</c><00:09:02.200><c> do</c> 00:09:02.350 --> 00:09:02.360 align:start position:0% in. So, I'm really sorry if I have to do 00:09:02.360 --> 00:09:03.350 align:start position:0% in. So, I'm really sorry if I have to do that. 00:09:03.350 --> 00:09:03.360 align:start position:0% that. 00:09:03.360 --> 00:09:05.510 align:start position:0% that. Let's<00:09:03.520><c> close</c><00:09:03.760><c> the</c><00:09:03.880><c> PHP</c><00:09:04.360><c> tag.</c> 00:09:05.510 --> 00:09:05.520 align:start position:0% Let's close the PHP tag. 00:09:05.520 --> 00:09:07.750 align:start position:0% Let's close the PHP tag. There<00:09:05.640><c> you</c><00:09:05.720><c> go.</c> 00:09:07.750 --> 00:09:07.760 align:start position:0% There you go. 00:09:07.760 --> 00:09:08.430 align:start position:0% There you go. Uh 00:09:08.430 --> 00:09:08.440 align:start position:0% Uh 00:09:08.440 --> 00:09:12.550 align:start position:0% Uh title,<00:09:09.160><c> Shopify</c><00:09:10.280><c> example</c> 00:09:12.550 --> 00:09:12.560 align:start position:0% title, Shopify example 00:09:12.560 --> 00:09:14.950 align:start position:0% title, Shopify example app.<00:09:13.000><c> You</c><00:09:13.280><c> You</c><00:09:13.360><c> don't</c><00:09:13.600><c> actually</c><00:09:14.080><c> have</c><00:09:14.320><c> to</c><00:09:14.760><c> put</c> 00:09:14.950 --> 00:09:14.960 align:start position:0% app. You You don't actually have to put 00:09:14.960 --> 00:09:17.390 align:start position:0% app. You You don't actually have to put title.<00:09:15.640><c> It's</c><00:09:15.800><c> not</c><00:09:16.040><c> necessary.</c> 00:09:17.390 --> 00:09:17.400 align:start position:0% title. It's not necessary. 00:09:17.400 --> 00:09:20.790 align:start position:0% title. It's not necessary. But,<00:09:18.200><c> yeah.</c><00:09:18.600><c> Let's</c><00:09:19.120><c> use</c> 00:09:20.790 --> 00:09:20.800 align:start position:0% But, yeah. Let's use 00:09:20.800 --> 00:09:23.950 align:start position:0% But, yeah. Let's use H1<00:09:21.839><c> over</c><00:09:22.040><c> here.</c><00:09:22.800><c> Then,</c><00:09:23.000><c> let's</c><00:09:23.160><c> close</c><00:09:23.440><c> that.</c> 00:09:23.950 --> 00:09:23.960 align:start position:0% H1 over here. Then, let's close that. 00:09:23.960 --> 00:09:26.590 align:start position:0% H1 over here. Then, let's close that. Let's<00:09:24.280><c> type</c><00:09:24.720><c> in</c><00:09:25.040><c> Shopify</c> 00:09:26.590 --> 00:09:26.600 align:start position:0% Let's type in Shopify 00:09:26.600 --> 00:09:27.590 align:start position:0% Let's type in Shopify app 00:09:27.590 --> 00:09:27.600 align:start position:0% app 00:09:27.600 --> 00:09:29.829 align:start position:0% app example.<00:09:28.520><c> There</c><00:09:28.600><c> you</c><00:09:28.680><c> go.</c> 00:09:29.829 --> 00:09:29.839 align:start position:0% example. There you go. 00:09:29.839 --> 00:09:32.470 align:start position:0% example. There you go. By<00:09:30.040><c> Weekly</c><00:09:30.400><c> App.</c> 00:09:32.470 --> 00:09:32.480 align:start position:0% By Weekly App. 00:09:32.480 --> 00:09:34.150 align:start position:0% By Weekly App. There<00:09:32.560><c> you</c><00:09:32.600><c> go.</c><00:09:32.960><c> And</c><00:09:33.160><c> then,</c><00:09:33.480><c> let's</c><00:09:33.720><c> type</c><00:09:34.000><c> in</c> 00:09:34.150 --> 00:09:34.160 align:start position:0% There you go. And then, let's type in 00:09:34.160 --> 00:09:35.829 align:start position:0% There you go. And then, let's type in over<00:09:34.480><c> here</c> 00:09:35.829 --> 00:09:35.839 align:start position:0% over here 00:09:35.839 --> 00:09:36.390 align:start position:0% over here uh 00:09:36.390 --> 00:09:36.400 align:start position:0% uh 00:09:36.400 --> 00:09:41.070 align:start position:0% uh image<00:09:37.360><c> SRC.</c><00:09:38.120><c> Or</c><00:09:38.839><c> I'm</c><00:09:39.000><c> sorry.</c><00:09:39.720><c> images.</c> 00:09:41.070 --> 00:09:41.080 align:start position:0% image SRC. Or I'm sorry. images. 00:09:41.080 --> 00:09:42.910 align:start position:0% image SRC. Or I'm sorry. images. Shortcut,<00:09:41.600><c> there</c><00:09:41.760><c> you</c><00:09:41.840><c> go.</c> 00:09:42.910 --> 00:09:42.920 align:start position:0% Shortcut, there you go. 00:09:42.920 --> 00:09:45.310 align:start position:0% Shortcut, there you go. Uh,<00:09:43.480><c> I</c><00:09:43.560><c> actually</c><00:09:43.920><c> don't</c><00:09:44.200><c> know</c><00:09:44.520><c> which</c><00:09:44.880><c> plugin</c> 00:09:45.310 --> 00:09:45.320 align:start position:0% Uh, I actually don't know which plugin 00:09:45.320 --> 00:09:47.790 align:start position:0% Uh, I actually don't know which plugin is<00:09:45.480><c> this.</c><00:09:46.080><c> So,</c><00:09:46.320><c> I</c><00:09:46.400><c> don't</c><00:09:46.640><c> actually</c><00:09:47.040><c> know</c><00:09:47.360><c> how</c><00:09:47.640><c> I</c> 00:09:47.790 --> 00:09:47.800 align:start position:0% is this. So, I don't actually know how I 00:09:47.800 --> 00:09:48.990 align:start position:0% is this. So, I don't actually know how I can 00:09:48.990 --> 00:09:49.000 align:start position:0% can 00:09:49.000 --> 00:09:51.270 align:start position:0% can uh,<00:09:49.680><c> recommend</c><00:09:50.200><c> it.</c><00:09:50.280><c> So,</c><00:09:50.480><c> if</c><00:09:50.640><c> you</c><00:09:50.760><c> know,</c><00:09:51.000><c> just</c> 00:09:51.270 --> 00:09:51.280 align:start position:0% uh, recommend it. So, if you know, just 00:09:51.280 --> 00:09:53.110 align:start position:0% uh, recommend it. So, if you know, just please<00:09:51.640><c> put</c><00:09:51.800><c> it</c><00:09:51.880><c> in</c><00:09:51.920><c> the</c><00:09:52.000><c> comments</c><00:09:52.240><c> below</c><00:09:52.480><c> so</c> 00:09:53.110 --> 00:09:53.120 align:start position:0% please put it in the comments below so 00:09:53.120 --> 00:09:55.270 align:start position:0% please put it in the comments below so you<00:09:53.240><c> can</c><00:09:53.440><c> help</c><00:09:53.720><c> as</c><00:09:53.920><c> well</c> 00:09:55.270 --> 00:09:55.280 align:start position:0% you can help as well 00:09:55.280 --> 00:09:59.030 align:start position:0% you can help as well uh,<00:09:55.680><c> other</c><00:09:56.440><c> programmers</c><00:09:57.520><c> who</c><00:09:57.680><c> doesn't</c><00:09:57.960><c> know</c> 00:09:59.030 --> 00:09:59.040 align:start position:0% uh, other programmers who doesn't know 00:09:59.040 --> 00:10:01.590 align:start position:0% uh, other programmers who doesn't know this<00:09:59.160><c> plugin</c><00:09:59.520><c> that</c><00:09:59.680><c> I'm</c><00:09:59.800><c> using.</c> 00:10:01.590 --> 00:10:01.600 align:start position:0% this plugin that I'm using. 00:10:01.600 --> 00:10:03.310 align:start position:0% this plugin that I'm using. All<00:10:01.720><c> right,</c><00:10:01.880><c> so</c><00:10:01.960><c> let's</c><00:10:02.160><c> use</c><00:10:02.400><c> PHP</c><00:10:02.840><c> tag</c><00:10:03.120><c> over</c> 00:10:03.310 --> 00:10:03.320 align:start position:0% All right, so let's use PHP tag over 00:10:03.320 --> 00:10:05.430 align:start position:0% All right, so let's use PHP tag over here.<00:10:04.040><c> Echo</c> 00:10:05.430 --> 00:10:05.440 align:start position:0% here. Echo 00:10:05.440 --> 00:10:08.470 align:start position:0% here. Echo and<00:10:05.680><c> then</c><00:10:05.960><c> let's</c><00:10:06.560><c> use</c><00:10:06.840><c> src</c><00:10:07.480><c> variable</c><00:10:08.120><c> and</c><00:10:08.280><c> then</c> 00:10:08.470 --> 00:10:08.480 align:start position:0% and then let's use src variable and then 00:10:08.480 --> 00:10:10.710 align:start position:0% and then let's use src variable and then let's<00:10:08.720><c> close</c><00:10:09.120><c> the</c><00:10:09.240><c> PHP</c><00:10:09.600><c> tag</c><00:10:10.080><c> and</c><00:10:10.240><c> over</c><00:10:10.520><c> here</c> 00:10:10.710 --> 00:10:10.720 align:start position:0% let's close the PHP tag and over here 00:10:10.720 --> 00:10:13.710 align:start position:0% let's close the PHP tag and over here let's<00:10:10.960><c> type</c><00:10:11.240><c> in</c><00:10:11.440><c> product</c><00:10:12.640><c> images</c><00:10:13.200><c> or</c><00:10:13.320><c> whatever</c> 00:10:13.710 --> 00:10:13.720 align:start position:0% let's type in product images or whatever 00:10:13.720 --> 00:10:15.870 align:start position:0% let's type in product images or whatever you<00:10:13.880><c> want</c><00:10:14.200><c> to</c><00:10:14.440><c> put</c><00:10:14.640><c> in</c><00:10:14.760><c> here</c><00:10:14.920><c> in</c><00:10:15.000><c> the</c><00:10:15.120><c> alt</c> 00:10:15.870 --> 00:10:15.880 align:start position:0% you want to put in here in the alt 00:10:15.880 --> 00:10:17.430 align:start position:0% you want to put in here in the alt attribute. 00:10:17.430 --> 00:10:17.440 align:start position:0% attribute. 00:10:17.440 --> 00:10:18.910 align:start position:0% attribute. Doesn't<00:10:17.680><c> really</c><00:10:17.840><c> matter.</c> 00:10:18.910 --> 00:10:18.920 align:start position:0% Doesn't really matter. 00:10:18.920 --> 00:10:21.630 align:start position:0% Doesn't really matter. All<00:10:19.000><c> right,</c><00:10:19.320><c> so</c><00:10:19.640><c> for</c><00:10:19.800><c> the</c><00:10:19.920><c> width</c> 00:10:21.630 --> 00:10:21.640 align:start position:0% All right, so for the width 00:10:21.640 --> 00:10:23.510 align:start position:0% All right, so for the width width<00:10:22.160><c> over</c><00:10:22.360><c> here</c> 00:10:23.510 --> 00:10:23.520 align:start position:0% width over here 00:10:23.520 --> 00:10:26.870 align:start position:0% width over here let's<00:10:23.720><c> type</c><00:10:24.000><c> in</c><00:10:24.160><c> 250</c><00:10:24.960><c> pixel.</c><00:10:25.840><c> No,</c><00:10:26.240><c> just</c><00:10:26.560><c> yeah,</c> 00:10:26.870 --> 00:10:26.880 align:start position:0% let's type in 250 pixel. No, just yeah, 00:10:26.880 --> 00:10:30.470 align:start position:0% let's type in 250 pixel. No, just yeah, 250<00:10:27.320><c> pixel</c><00:10:27.720><c> and</c><00:10:27.880><c> then</c><00:10:28.360><c> for</c><00:10:28.480><c> the</c><00:10:28.600><c> height</c> 00:10:30.470 --> 00:10:30.480 align:start position:0% 250 pixel and then for the height 00:10:30.480 --> 00:10:31.830 align:start position:0% 250 pixel and then for the height You<00:10:30.600><c> know</c><00:10:30.720><c> what?</c><00:10:30.920><c> Let's</c><00:10:31.120><c> just</c><00:10:31.360><c> get</c><00:10:31.600><c> rid</c><00:10:31.760><c> of</c> 00:10:31.830 --> 00:10:31.840 align:start position:0% You know what? Let's just get rid of 00:10:31.840 --> 00:10:33.150 align:start position:0% You know what? Let's just get rid of that. 00:10:33.150 --> 00:10:33.160 align:start position:0% that. 00:10:33.160 --> 00:10:35.510 align:start position:0% that. Um,<00:10:33.480><c> let's</c><00:10:33.640><c> just</c><00:10:33.920><c> use</c> 00:10:35.510 --> 00:10:35.520 align:start position:0% Um, let's just use 00:10:35.520 --> 00:10:37.990 align:start position:0% Um, let's just use style<00:10:36.000><c> instead.</c> 00:10:37.990 --> 00:10:38.000 align:start position:0% style instead. 00:10:38.000 --> 00:10:41.270 align:start position:0% style instead. Here,<00:10:38.320><c> so</c><00:10:38.920><c> width</c> 00:10:41.270 --> 00:10:41.280 align:start position:0% Here, so width 00:10:41.280 --> 00:10:43.990 align:start position:0% Here, so width 250<00:10:42.000><c> pixel.</c><00:10:42.600><c> There</c><00:10:42.720><c> you</c><00:10:42.800><c> go.</c> 00:10:43.990 --> 00:10:44.000 align:start position:0% 250 pixel. There you go. 00:10:44.000 --> 00:10:46.870 align:start position:0% 250 pixel. There you go. Next<00:10:44.520><c> is</c><00:10:45.560><c> title.</c> 00:10:46.870 --> 00:10:46.880 align:start position:0% Next is title. 00:10:46.880 --> 00:10:50.190 align:start position:0% Next is title. Let's<00:10:47.000><c> use</c><00:10:47.200><c> paragraph</c><00:10:48.680><c> and</c><00:10:48.839><c> then</c><00:10:49.280><c> let's</c><00:10:49.800><c> use</c> 00:10:50.190 --> 00:10:50.200 align:start position:0% Let's use paragraph and then let's use 00:10:50.200 --> 00:10:52.150 align:start position:0% Let's use paragraph and then let's use the 00:10:52.150 --> 00:10:52.160 align:start position:0% the 00:10:52.160 --> 00:10:55.110 align:start position:0% the PHP<00:10:52.600><c> tag</c><00:10:52.839><c> once</c><00:10:53.000><c> again.</c><00:10:53.440><c> Let's</c><00:10:53.640><c> display</c> 00:10:55.110 --> 00:10:55.120 align:start position:0% PHP tag once again. Let's display 00:10:55.120 --> 00:10:56.030 align:start position:0% PHP tag once again. Let's display title. 00:10:56.030 --> 00:10:56.040 align:start position:0% title. 00:10:56.040 --> 00:10:57.670 align:start position:0% title. There<00:10:56.160><c> you</c><00:10:56.240><c> go.</c> 00:10:57.670 --> 00:10:57.680 align:start position:0% There you go. 00:10:57.680 --> 00:10:59.430 align:start position:0% There you go. Close<00:10:57.839><c> that.</c><00:10:58.400><c> Make</c><00:10:58.520><c> sure</c><00:10:58.680><c> you</c><00:10:58.720><c> close,</c><00:10:59.080><c> always</c> 00:10:59.430 --> 00:10:59.440 align:start position:0% Close that. Make sure you close, always 00:10:59.440 --> 00:11:00.430 align:start position:0% Close that. Make sure you close, always close. 00:11:00.430 --> 00:11:00.440 align:start position:0% close. 00:11:00.440 --> 00:11:02.270 align:start position:0% close. And<00:11:00.480><c> then</c><00:11:00.600><c> let's</c><00:11:00.839><c> save</c><00:11:01.200><c> it.</c><00:11:01.880><c> Let's</c><00:11:02.080><c> see</c><00:11:02.160><c> the</c> 00:11:02.270 --> 00:11:02.280 align:start position:0% And then let's save it. Let's see the 00:11:02.280 --> 00:11:04.190 align:start position:0% And then let's save it. Let's see the product<00:11:02.920><c> or</c> 00:11:04.190 --> 00:11:04.200 align:start position:0% product or 00:11:04.200 --> 00:11:06.910 align:start position:0% product or the<00:11:04.320><c> app.</c> 00:11:06.910 --> 00:11:06.920 align:start position:0% 00:11:06.920 --> 00:11:08.190 align:start position:0% All<00:11:07.000><c> right,</c><00:11:07.200><c> so</c><00:11:07.280><c> there</c><00:11:07.480><c> you</c><00:11:07.560><c> go.</c><00:11:07.760><c> We</c><00:11:07.880><c> actually</c> 00:11:08.190 --> 00:11:08.200 align:start position:0% All right, so there you go. We actually 00:11:08.200 --> 00:11:11.110 align:start position:0% All right, so there you go. We actually have<00:11:08.360><c> an</c><00:11:08.480><c> error</c><00:11:08.839><c> so</c><00:11:09.080><c> it's</c><00:11:09.240><c> not</c><00:11:09.440><c> displaying</c> 00:11:11.110 --> 00:11:11.120 align:start position:0% have an error so it's not displaying 00:11:11.120 --> 00:11:14.230 align:start position:0% have an error so it's not displaying the<00:11:11.360><c> image.</c><00:11:12.800><c> So,</c><00:11:13.160><c> I</c><00:11:13.320><c> believe</c><00:11:13.839><c> there's</c><00:11:14.080><c> an</c> 00:11:14.230 --> 00:11:14.240 align:start position:0% the image. So, I believe there's an 00:11:14.240 --> 00:11:16.750 align:start position:0% the image. So, I believe there's an error<00:11:14.640><c> with</c><00:11:14.880><c> that.</c> 00:11:16.750 --> 00:11:16.760 align:start position:0% error with that. 00:11:16.760 --> 00:11:18.310 align:start position:0% error with that. Let's 00:11:18.310 --> 00:11:18.320 align:start position:0% Let's 00:11:18.320 --> 00:11:19.670 align:start position:0% Let's check<00:11:18.600><c> that.</c> 00:11:19.670 --> 00:11:19.680 align:start position:0% check that. 00:11:19.680 --> 00:11:23.270 align:start position:0% check that. So,<00:11:20.400><c> it's</c><00:11:20.640><c> not</c><00:11:20.960><c> actually</c><00:11:21.440><c> displaying</c><00:11:22.400><c> or</c> 00:11:23.270 --> 00:11:23.280 align:start position:0% So, it's not actually displaying or 00:11:23.280 --> 00:11:26.190 align:start position:0% So, it's not actually displaying or getting<00:11:23.680><c> the</c><00:11:23.960><c> source</c><00:11:25.080><c> URL.</c><00:11:25.760><c> So,</c><00:11:25.839><c> let's</c><00:11:26.040><c> go</c> 00:11:26.190 --> 00:11:26.200 align:start position:0% getting the source URL. So, let's go 00:11:26.200 --> 00:11:28.110 align:start position:0% getting the source URL. So, let's go back<00:11:26.400><c> to</c><00:11:26.560><c> our</c><00:11:26.800><c> script</c><00:11:27.400><c> and</c><00:11:27.560><c> see</c><00:11:27.800><c> what's</c> 00:11:28.110 --> 00:11:28.120 align:start position:0% back to our script and see what's 00:11:28.120 --> 00:11:31.510 align:start position:0% back to our script and see what's actually<00:11:29.160><c> wrong</c><00:11:29.480><c> with</c><00:11:29.560><c> this</c><00:11:29.720><c> script.</c><00:11:30.640><c> Oh,</c><00:11:31.400><c> all</c> 00:11:31.510 --> 00:11:31.520 align:start position:0% actually wrong with this script. Oh, all 00:11:31.520 --> 00:11:33.950 align:start position:0% actually wrong with this script. Oh, all right,<00:11:31.760><c> so</c><00:11:32.280><c> actually</c><00:11:32.680><c> my</c><00:11:32.880><c> bad.</c><00:11:33.200><c> Uh</c><00:11:33.680><c> I</c><00:11:33.720><c> made</c><00:11:33.920><c> a</c> 00:11:33.950 --> 00:11:33.960 align:start position:0% right, so actually my bad. Uh I made a 00:11:33.960 --> 00:11:36.390 align:start position:0% right, so actually my bad. Uh I made a mistake.<00:11:34.400><c> It's</c><00:11:34.480><c> supposed</c><00:11:34.840><c> to</c><00:11:34.920><c> be</c><00:11:35.120><c> image.</c><00:11:36.120><c> Uh</c> 00:11:36.390 --> 00:11:36.400 align:start position:0% mistake. It's supposed to be image. Uh 00:11:36.400 --> 00:11:39.750 align:start position:0% mistake. It's supposed to be image. Uh instead<00:11:36.760><c> of</c><00:11:36.920><c> SRC,</c><00:11:37.480><c> let's</c><00:11:37.760><c> open</c><00:11:38.640><c> image</c><00:11:39.080><c> as</c><00:11:39.600><c> uh</c> 00:11:39.750 --> 00:11:39.760 align:start position:0% instead of SRC, let's open image as uh 00:11:39.760 --> 00:11:42.150 align:start position:0% instead of SRC, let's open image as uh image<00:11:40.360><c> variable.</c><00:11:40.920><c> I'm</c><00:11:41.160><c> really</c><00:11:41.360><c> sorry.</c><00:11:42.000><c> It's</c><00:11:42.120><c> a</c> 00:11:42.150 --> 00:11:42.160 align:start position:0% image variable. I'm really sorry. It's a 00:11:42.160 --> 00:11:45.110 align:start position:0% image variable. I'm really sorry. It's a typo.<00:11:43.280><c> I</c><00:11:43.320><c> think</c><00:11:43.600><c> I</c><00:11:43.720><c> took</c><00:11:44.080><c> this</c><00:11:44.560><c> and</c><00:11:44.680><c> then</c><00:11:45.000><c> I</c> 00:11:45.110 --> 00:11:45.120 align:start position:0% typo. I think I took this and then I 00:11:45.120 --> 00:11:48.790 align:start position:0% typo. I think I took this and then I just<00:11:45.480><c> just</c><00:11:45.680><c> copy</c><00:11:46.040><c> SRC.</c><00:11:46.800><c> Okay.</c><00:11:47.640><c> Echo</c><00:11:48.240><c> image</c> 00:11:48.790 --> 00:11:48.800 align:start position:0% just just copy SRC. Okay. Echo image 00:11:48.800 --> 00:11:50.790 align:start position:0% just just copy SRC. Okay. Echo image variable.<00:11:49.520><c> Okay,</c><00:11:49.800><c> so</c><00:11:49.920><c> let's</c><00:11:50.160><c> save</c><00:11:50.440><c> that</c><00:11:50.720><c> and</c> 00:11:50.790 --> 00:11:50.800 align:start position:0% variable. Okay, so let's save that and 00:11:50.800 --> 00:11:52.910 align:start position:0% variable. Okay, so let's save that and let's<00:11:50.920><c> go</c><00:11:51.120><c> back</c><00:11:51.280><c> to</c><00:11:51.400><c> our</c><00:11:51.600><c> script</c><00:11:52.040><c> our</c><00:11:52.400><c> Shopify</c> 00:11:52.910 --> 00:11:52.920 align:start position:0% let's go back to our script our Shopify 00:11:52.920 --> 00:11:54.950 align:start position:0% let's go back to our script our Shopify app.<00:11:53.400><c> All</c><00:11:53.480><c> right,</c><00:11:53.720><c> so</c><00:11:53.920><c> everything</c><00:11:54.320><c> is</c><00:11:54.520><c> working</c> 00:11:54.950 --> 00:11:54.960 align:start position:0% app. All right, so everything is working 00:11:54.960 --> 00:11:57.750 align:start position:0% app. All right, so everything is working now.<00:11:55.680><c> So,</c><00:11:55.880><c> we</c><00:11:56.000><c> have</c><00:11:56.240><c> here</c><00:11:56.400><c> the</c><00:11:56.520><c> title</c><00:11:57.520><c> and</c><00:11:57.640><c> then</c> 00:11:57.750 --> 00:11:57.760 align:start position:0% now. So, we have here the title and then 00:11:57.760 --> 00:12:01.230 align:start position:0% now. So, we have here the title and then the<00:11:57.920><c> image</c><00:11:58.480><c> and</c><00:11:58.680><c> then</c><00:11:59.640><c> the</c><00:11:59.720><c> title.</c><00:12:00.640><c> So,</c><00:12:01.000><c> yeah,</c> 00:12:01.230 --> 00:12:01.240 align:start position:0% the image and then the title. So, yeah, 00:12:01.240 --> 00:12:02.870 align:start position:0% the image and then the title. So, yeah, that's<00:12:01.480><c> actually</c><00:12:01.920><c> how</c><00:12:02.120><c> you</c><00:12:02.200><c> can</c><00:12:02.360><c> display</c> 00:12:02.870 --> 00:12:02.880 align:start position:0% that's actually how you can display 00:12:02.880 --> 00:12:05.070 align:start position:0% that's actually how you can display Shopify<00:12:03.640><c> images</c> 00:12:05.070 --> 00:12:05.080 align:start position:0% Shopify images 00:12:05.080 --> 00:12:09.110 align:start position:0% Shopify images product<00:12:05.360><c> images</c><00:12:05.880><c> using</c><00:12:06.480><c> Shopify</c><00:12:07.680><c> API</c><00:12:08.760><c> product</c> 00:12:09.110 --> 00:12:09.120 align:start position:0% product images using Shopify API product 00:12:09.120 --> 00:12:12.190 align:start position:0% product images using Shopify API product image<00:12:09.600><c> API</c><00:12:10.120><c> and</c><00:12:10.280><c> then</c><00:12:10.480><c> product</c><00:12:10.960><c> API.</c><00:12:12.040><c> So,</c> 00:12:12.190 --> 00:12:12.200 align:start position:0% image API and then product API. So, 00:12:12.200 --> 00:12:14.150 align:start position:0% image API and then product API. So, basically<00:12:12.840><c> what</c><00:12:13.040><c> you</c><00:12:13.080><c> can</c><00:12:13.320><c> actually</c><00:12:13.840><c> do</c><00:12:14.040><c> with</c> 00:12:14.150 --> 00:12:14.160 align:start position:0% basically what you can actually do with 00:12:14.160 --> 00:12:17.110 align:start position:0% basically what you can actually do with this<00:12:14.360><c> is</c><00:12:14.560><c> just</c><00:12:14.840><c> to</c><00:12:15.240><c> just</c><00:12:15.520><c> gather</c><00:12:16.400><c> all</c><00:12:16.640><c> the</c><00:12:16.760><c> data</c> 00:12:17.110 --> 00:12:17.120 align:start position:0% this is just to just gather all the data 00:12:17.120 --> 00:12:20.350 align:start position:0% this is just to just gather all the data you<00:12:17.280><c> need</c><00:12:17.640><c> and</c><00:12:17.840><c> then</c><00:12:18.120><c> pass</c><00:12:18.640><c> it</c><00:12:18.880><c> to</c><00:12:19.040><c> another</c><00:12:19.520><c> API</c> 00:12:20.350 --> 00:12:20.360 align:start position:0% you need and then pass it to another API 00:12:20.360 --> 00:12:23.110 align:start position:0% you need and then pass it to another API just<00:12:20.600><c> so</c><00:12:20.680><c> you</c><00:12:20.800><c> can</c><00:12:21.040><c> get</c><00:12:21.360><c> another</c><00:12:22.000><c> data.</c> 00:12:23.110 --> 00:12:23.120 align:start position:0% just so you can get another data. 00:12:23.120 --> 00:12:24.910 align:start position:0% just so you can get another data. So,<00:12:23.880><c> yeah.</c> 00:12:24.910 --> 00:12:24.920 align:start position:0% So, yeah. 00:12:24.920 --> 00:12:26.790 align:start position:0% So, yeah. I<00:12:24.960><c> hope</c><00:12:25.160><c> you</c><00:12:25.240><c> guys</c><00:12:25.720><c> learned</c><00:12:26.080><c> something</c><00:12:26.640><c> in</c> 00:12:26.790 --> 00:12:26.800 align:start position:0% I hope you guys learned something in 00:12:26.800 --> 00:12:28.750 align:start position:0% I hope you guys learned something in this<00:12:27.000><c> video.</c><00:12:27.520><c> If</c><00:12:27.680><c> you</c><00:12:27.720><c> have</c><00:12:27.880><c> questions,</c><00:12:28.600><c> let</c> 00:12:28.750 --> 00:12:28.760 align:start position:0% this video. If you have questions, let 00:12:28.760 --> 00:12:30.110 align:start position:0% this video. If you have questions, let me<00:12:28.800><c> know</c><00:12:28.920><c> in</c><00:12:28.960><c> the</c><00:12:29.040><c> comments</c><00:12:29.400><c> below.</c><00:12:29.880><c> You</c><00:12:29.960><c> can</c> 00:12:30.110 --> 00:12:30.120 align:start position:0% me know in the comments below. You can 00:12:30.120 --> 00:12:32.550 align:start position:0% me know in the comments below. You can contact<00:12:30.680><c> us</c><00:12:30.880><c> always.</c><00:12:31.840><c> Links</c><00:12:32.120><c> are</c><00:12:32.240><c> all</c><00:12:32.360><c> in</c><00:12:32.480><c> the</c> 00:12:32.550 --> 00:12:32.560 align:start position:0% contact us always. Links are all in the 00:12:32.560 --> 00:12:35.310 align:start position:0% contact us always. Links are all in the description.<00:12:33.440><c> Please</c><00:12:33.800><c> don't</c><00:12:33.960><c> hesitate.</c><00:12:35.200><c> We'd</c> 00:12:35.310 --> 00:12:35.320 align:start position:0% description. Please don't hesitate. We'd 00:12:35.320 --> 00:12:38.750 align:start position:0% description. Please don't hesitate. We'd love<00:12:35.560><c> to</c><00:12:35.920><c> help</c><00:12:36.280><c> out</c><00:12:36.720><c> and</c><00:12:37.680><c> yeah.</c> 00:12:38.750 --> 00:12:38.760 align:start position:0% love to help out and yeah. 00:12:38.760 --> 00:12:40.350 align:start position:0% love to help out and yeah. Thank<00:12:38.839><c> you</c><00:12:38.920><c> guys</c><00:12:39.080><c> so</c><00:12:39.160><c> much</c><00:12:39.320><c> for</c><00:12:39.480><c> watching</c><00:12:40.000><c> and</c> 00:12:40.350 --> 00:12:40.360 align:start position:0% Thank you guys so much for watching and 00:12:40.360 --> 00:12:41.829 align:start position:0% Thank you guys so much for watching and I'll<00:12:40.480><c> see</c><00:12:40.680><c> you</c><00:12:40.760><c> in</c><00:12:40.880><c> the</c><00:12:40.960><c> next</c><00:12:41.280><c> part</c><00:12:41.520><c> of</c><00:12:41.640><c> this</c> 00:12:41.829 --> 00:12:41.839 align:start position:0% I'll see you in the next part of this 00:12:41.839 --> 00:12:43.390 align:start position:0% I'll see you in the next part of this tutorial<00:12:42.240><c> series.</c><00:12:42.880><c> Thank</c><00:12:43.040><c> you</c><00:12:43.080><c> so</c><00:12:43.200><c> much</c><00:12:43.320><c> for</c> 00:12:43.390 --> 00:12:43.400 align:start position:0% tutorial series. Thank you so much for 00:12:43.400 --> 00:12:44.750 align:start position:0% tutorial series. Thank you so much for watching<00:12:43.640><c> once</c><00:12:43.760><c> again.</c><00:12:44.280><c> I'll</c><00:12:44.400><c> see</c><00:12:44.520><c> you</c><00:12:44.560><c> next</c> 00:12:44.750 --> 00:12:44.760 align:start position:0% watching once again. I'll see you next 00:12:44.760 --> 00:12:47.000 align:start position:0% watching once again. I'll see you next time.