PageFly Shopify Page Builder App

WEBVTT
Kind: captions
Language: en

00:00:00.080 --> 00:00:01.589 align:start position:0%
 
have<00:00:00.240><c> you</c><00:00:00.359><c> ever</c><00:00:00.680><c> paused</c><00:00:01.040><c> while</c><00:00:01.199><c> browsing</c>

00:00:01.589 --> 00:00:01.599 align:start position:0%
have you ever paused while browsing
 

00:00:01.599 --> 00:00:03.590 align:start position:0%
have you ever paused while browsing
glossier's<00:00:02.240><c> website</c><00:00:02.600><c> and</c><00:00:02.760><c> thought</c><00:00:03.280><c> how</c><00:00:03.399><c> do</c>

00:00:03.590 --> 00:00:03.600 align:start position:0%
glossier's website and thought how do
 

00:00:03.600 --> 00:00:05.309 align:start position:0%
glossier's website and thought how do
they<00:00:03.760><c> make</c><00:00:04.000><c> shopping</c><00:00:04.359><c> for</c><00:00:04.640><c> skincare</c><00:00:05.160><c> and</c>

00:00:05.309 --> 00:00:05.319 align:start position:0%
they make shopping for skincare and
 

00:00:05.319 --> 00:00:07.789 align:start position:0%
they make shopping for skincare and
beauty<00:00:05.759><c> products</c><00:00:06.359><c> feel</c><00:00:06.720><c> so</c><00:00:07.080><c> personal</c><00:00:07.600><c> and</c>

00:00:07.789 --> 00:00:07.799 align:start position:0%
beauty products feel so personal and
 

00:00:07.799 --> 00:00:10.350 align:start position:0%
beauty products feel so personal and
inviting<00:00:08.639><c> glossier's</c><00:00:09.280><c> minimalist</c><00:00:09.840><c> design</c>

00:00:10.350 --> 00:00:10.360 align:start position:0%
inviting glossier's minimalist design
 

00:00:10.360 --> 00:00:12.629 align:start position:0%
inviting glossier's minimalist design
and<00:00:10.599><c> thoughtful</c><00:00:11.120><c> product</c><00:00:11.480><c> presentation</c><00:00:12.360><c> make</c>

00:00:12.629 --> 00:00:12.639 align:start position:0%
and thoughtful product presentation make
 

00:00:12.639 --> 00:00:15.470 align:start position:0%
and thoughtful product presentation make
shopping<00:00:13.000><c> a</c><00:00:13.200><c> luxurious</c><00:00:13.960><c> experience</c><00:00:14.920><c> today</c>

00:00:15.470 --> 00:00:15.480 align:start position:0%
shopping a luxurious experience today
 

00:00:15.480 --> 00:00:16.950 align:start position:0%
shopping a luxurious experience today
we're<00:00:15.599><c> going</c><00:00:15.719><c> to</c><00:00:15.799><c> show</c><00:00:16.039><c> you</c><00:00:16.160><c> how</c><00:00:16.279><c> to</c><00:00:16.480><c> replicate</c>

00:00:16.950 --> 00:00:16.960 align:start position:0%
we're going to show you how to replicate
 

00:00:16.960 --> 00:00:19.429 align:start position:0%
we're going to show you how to replicate
glossier's<00:00:17.720><c> iconic</c><00:00:18.240><c> product</c><00:00:18.600><c> pages</c><00:00:19.279><c> and</c>

00:00:19.429 --> 00:00:19.439 align:start position:0%
glossier's iconic product pages and
 

00:00:19.439 --> 00:00:21.509 align:start position:0%
glossier's iconic product pages and
create<00:00:19.760><c> a</c><00:00:19.880><c> seamless</c><00:00:20.560><c> inviting</c><00:00:21.039><c> shopping</c>

00:00:21.509 --> 00:00:21.519 align:start position:0%
create a seamless inviting shopping
 

00:00:21.519 --> 00:00:24.589 align:start position:0%
create a seamless inviting shopping
experience<00:00:22.240><c> for</c><00:00:22.400><c> your</c><00:00:22.600><c> own</c><00:00:22.960><c> online</c><00:00:23.439><c> store</c><00:00:24.439><c> by</c>

00:00:24.589 --> 00:00:24.599 align:start position:0%
experience for your own online store by
 

00:00:24.599 --> 00:00:27.109 align:start position:0%
experience for your own online store by
the<00:00:24.680><c> end</c><00:00:24.880><c> of</c><00:00:25.039><c> this</c><00:00:25.240><c> video</c><00:00:25.840><c> you'll</c><00:00:26.039><c> know</c><00:00:26.279><c> how</c><00:00:26.400><c> to</c>

00:00:27.109 --> 00:00:27.119 align:start position:0%
the end of this video you'll know how to
 

00:00:27.119 --> 00:00:30.070 align:start position:0%
the end of this video you'll know how to
one<00:00:27.679><c> build</c><00:00:27.960><c> your</c><00:00:28.160><c> product</c><00:00:28.599><c> page</c><00:00:28.960><c> from</c><00:00:29.199><c> scratch</c>

00:00:30.070 --> 00:00:30.080 align:start position:0%
one build your product page from scratch
 

00:00:30.080 --> 00:00:33.790 align:start position:0%
one build your product page from scratch
two<00:00:30.800><c> configure</c><00:00:31.320><c> elements</c><00:00:31.840><c> like</c><00:00:32.000><c> a</c><00:00:32.279><c> pro</c><00:00:33.120><c> three</c>

00:00:33.790 --> 00:00:33.800 align:start position:0%
two configure elements like a pro three
 

00:00:33.800 --> 00:00:37.190 align:start position:0%
two configure elements like a pro three
check<00:00:34.120><c> responsiveness</c><00:00:34.879><c> across</c><00:00:35.440><c> devices</c><00:00:36.440><c> four</c>

00:00:37.190 --> 00:00:37.200 align:start position:0%
check responsiveness across devices four
 

00:00:37.200 --> 00:00:40.310 align:start position:0%
check responsiveness across devices four
preview<00:00:37.760><c> and</c><00:00:38.079><c> publish</c><00:00:38.360><c> your</c><00:00:38.719><c> page</c><00:00:39.719><c> five</c>

00:00:40.310 --> 00:00:40.320 align:start position:0%
preview and publish your page five
 

00:00:40.320 --> 00:00:43.150 align:start position:0%
preview and publish your page five
template<00:00:40.719><c> or</c><00:00:40.879><c> pre-made</c><00:00:41.520><c> section</c><00:00:42.520><c> to</c><00:00:42.800><c> build</c>

00:00:43.150 --> 00:00:43.160 align:start position:0%
template or pre-made section to build
 

00:00:43.160 --> 00:00:45.110 align:start position:0%
template or pre-made section to build
this<00:00:43.399><c> product</c><00:00:43.840><c> page</c><00:00:44.520><c> the</c><00:00:44.680><c> first</c><00:00:44.879><c> thing</c><00:00:45.000><c> you</c>

00:00:45.110 --> 00:00:45.120 align:start position:0%
this product page the first thing you
 

00:00:45.120 --> 00:00:47.709 align:start position:0%
this product page the first thing you
need<00:00:45.360><c> is</c><00:00:45.480><c> your</c><00:00:45.600><c> brand</c><00:00:45.960><c> colors</c><00:00:46.879><c> here</c><00:00:47.120><c> glossier</c>

00:00:47.709 --> 00:00:47.719 align:start position:0%
need is your brand colors here glossier
 

00:00:47.719 --> 00:00:49.750 align:start position:0%
need is your brand colors here glossier
uses<00:00:48.039><c> a</c><00:00:48.280><c> primary</c><00:00:48.680><c> color</c><00:00:49.079><c> palette</c><00:00:49.399><c> of</c><00:00:49.600><c> white</c>

00:00:49.750 --> 00:00:49.760 align:start position:0%
uses a primary color palette of white
 

00:00:49.760 --> 00:00:52.990 align:start position:0%
uses a primary color palette of white
and<00:00:49.960><c> black</c><00:00:50.960><c> next</c><00:00:51.440><c> Define</c><00:00:51.800><c> your</c><00:00:52.000><c> font</c><00:00:52.359><c> Styles</c>

00:00:52.990 --> 00:00:53.000 align:start position:0%
and black next Define your font Styles
 

00:00:53.000 --> 00:00:56.270 align:start position:0%
and black next Define your font Styles
here<00:00:53.199><c> I</c><00:00:53.320><c> chose</c><00:00:53.680><c> monay</c><00:00:54.680><c> note</c><00:00:55.039><c> that</c><00:00:55.320><c> page</c><00:00:55.640><c> V</c><00:00:56.000><c> only</c>

00:00:56.270 --> 00:00:56.280 align:start position:0%
here I chose monay note that page V only
 

00:00:56.280 --> 00:00:58.389 align:start position:0%
here I chose monay note that page V only
supports<00:00:56.760><c> Google</c><00:00:57.079><c> fonts</c><00:00:57.760><c> but</c><00:00:57.879><c> if</c><00:00:58.000><c> you</c><00:00:58.120><c> want</c><00:00:58.239><c> to</c>

00:00:58.389 --> 00:00:58.399 align:start position:0%
supports Google fonts but if you want to
 

00:00:58.399 --> 00:01:00.709 align:start position:0%
supports Google fonts but if you want to
use<00:00:58.640><c> other</c><00:00:58.879><c> fonts</c><00:00:59.480><c> you</c><00:00:59.600><c> can</c><00:01:00.000><c> upload</c><00:01:00.399><c> custom</c>

00:01:00.709 --> 00:01:00.719 align:start position:0%
use other fonts you can upload custom
 

00:01:00.719 --> 00:01:02.950 align:start position:0%
use other fonts you can upload custom
fonts<00:01:01.160><c> by</c><00:01:01.320><c> clicking</c><00:01:01.719><c> here</c><00:01:02.519><c> let's</c><00:01:02.719><c> start</c>

00:01:02.950 --> 00:01:02.960 align:start position:0%
fonts by clicking here let's start
 

00:01:02.960 --> 00:01:04.549 align:start position:0%
fonts by clicking here let's start
impressing<00:01:03.399><c> your</c><00:01:03.640><c> customers</c><00:01:04.159><c> with</c><00:01:04.280><c> a</c>

00:01:04.549 --> 00:01:04.559 align:start position:0%
impressing your customers with a
 

00:01:04.559 --> 00:01:07.109 align:start position:0%
impressing your customers with a
Flawless<00:01:05.239><c> online</c><00:01:05.799><c> experience</c><00:01:06.720><c> here</c><00:01:06.880><c> we</c><00:01:07.000><c> are</c>

00:01:07.109 --> 00:01:07.119 align:start position:0%
Flawless online experience here we are
 

00:01:07.119 --> 00:01:09.469 align:start position:0%
Flawless online experience here we are
in<00:01:07.240><c> the</c><00:01:07.400><c> pagefly</c><00:01:08.040><c> editor</c><00:01:08.960><c> first</c><00:01:09.200><c> thing</c><00:01:09.360><c> you</c>

00:01:09.469 --> 00:01:09.479 align:start position:0%
in the pagefly editor first thing you
 

00:01:09.479 --> 00:01:11.710 align:start position:0%
in the pagefly editor first thing you
need<00:01:09.600><c> to</c><00:01:09.799><c> do</c><00:01:10.159><c> is</c><00:01:10.280><c> to</c><00:01:10.520><c> assign</c><00:01:11.000><c> at</c><00:01:11.159><c> least</c><00:01:11.439><c> a</c>

00:01:11.710 --> 00:01:11.720 align:start position:0%
need to do is to assign at least a
 

00:01:11.720 --> 00:01:14.310 align:start position:0%
need to do is to assign at least a
product<00:01:12.200><c> for</c><00:01:12.479><c> this</c><00:01:12.720><c> product</c><00:01:13.119><c> page</c><00:01:13.920><c> then</c><00:01:14.080><c> drag</c>

00:01:14.310 --> 00:01:14.320 align:start position:0%
product for this product page then drag
 

00:01:14.320 --> 00:01:16.590 align:start position:0%
product for this product page then drag
a<00:01:14.479><c> three</c><00:01:14.720><c> block</c><00:01:14.960><c> Flex</c><00:01:15.280><c> layout</c><00:01:15.720><c> into</c><00:01:16.040><c> the</c>

00:01:16.590 --> 00:01:16.600 align:start position:0%
a three block Flex layout into the
 

00:01:16.600 --> 00:01:19.550 align:start position:0%
a three block Flex layout into the
editor<00:01:17.600><c> next</c><00:01:18.200><c> pull</c><00:01:18.400><c> in</c><00:01:18.640><c> image</c><00:01:18.960><c> elements</c>

00:01:19.550 --> 00:01:19.560 align:start position:0%
editor next pull in image elements
 

00:01:19.560 --> 00:01:22.109 align:start position:0%
editor next pull in image elements
product<00:01:19.880><c> media</c><00:01:20.600><c> and</c><00:01:20.840><c> product</c><00:01:21.159><c> details</c><00:01:21.960><c> which</c>

00:01:22.109 --> 00:01:22.119 align:start position:0%
product media and product details which
 

00:01:22.119 --> 00:01:24.230 align:start position:0%
product media and product details which
can<00:01:22.280><c> be</c><00:01:22.400><c> found</c><00:01:22.720><c> under</c><00:01:22.960><c> the</c><00:01:23.119><c> Shopify</c><00:01:23.720><c> Element</c>

00:01:24.230 --> 00:01:24.240 align:start position:0%
can be found under the Shopify Element
 

00:01:24.240 --> 00:01:25.380 align:start position:0%
can be found under the Shopify Element
Section

00:01:25.380 --> 00:01:25.390 align:start position:0%
Section
 

00:01:25.390 --> 00:01:31.069 align:start position:0%
Section
[Music]

00:01:31.069 --> 00:01:31.079 align:start position:0%
[Music]
 

00:01:31.079 --> 00:01:33.030 align:start position:0%
[Music]
now<00:01:31.280><c> let's</c><00:01:31.479><c> assign</c><00:01:31.759><c> the</c><00:01:31.920><c> glossier</c><00:01:32.720><c> you</c>

00:01:33.030 --> 00:01:33.040 align:start position:0%
now let's assign the glossier you
 

00:01:33.040 --> 00:01:34.749 align:start position:0%
now let's assign the glossier you
product<00:01:33.360><c> to</c><00:01:33.560><c> both</c><00:01:33.799><c> product</c><00:01:34.079><c> media</c><00:01:34.560><c> and</c>

00:01:34.749 --> 00:01:34.759 align:start position:0%
product to both product media and
 

00:01:34.759 --> 00:01:37.389 align:start position:0%
product to both product media and
product<00:01:35.040><c> details</c><00:01:35.560><c> here</c><00:01:36.079><c> in</c><00:01:36.280><c> pagefly</c><00:01:37.119><c> you</c><00:01:37.240><c> can</c>

00:01:37.389 --> 00:01:37.399 align:start position:0%
product details here in pagefly you can
 

00:01:37.399 --> 00:01:39.270 align:start position:0%
product details here in pagefly you can
assign<00:01:37.680><c> the</c><00:01:37.880><c> product</c><00:01:38.200><c> to</c><00:01:38.360><c> all</c><00:01:38.640><c> products</c><00:01:39.159><c> by</c>

00:01:39.270 --> 00:01:39.280 align:start position:0%
assign the product to all products by
 

00:01:39.280 --> 00:01:41.469 align:start position:0%
assign the product to all products by
choosing<00:01:39.680><c> the</c><00:01:39.799><c> auto</c><00:01:40.200><c> option</c><00:01:40.880><c> for</c><00:01:41.159><c> product</c>

00:01:41.469 --> 00:01:41.479 align:start position:0%
choosing the auto option for product
 

00:01:41.479 --> 00:01:43.590 align:start position:0%
choosing the auto option for product
Source<00:01:41.880><c> or</c><00:01:42.079><c> just</c><00:01:42.280><c> assign</c><00:01:42.759><c> one</c><00:01:43.119><c> specific</c>

00:01:43.590 --> 00:01:43.600 align:start position:0%
Source or just assign one specific
 

00:01:43.600 --> 00:01:48.069 align:start position:0%
Source or just assign one specific
product<00:01:43.960><c> by</c><00:01:44.119><c> selecting</c>

00:01:48.069 --> 00:01:48.079 align:start position:0%
 
 

00:01:48.079 --> 00:01:50.709 align:start position:0%
 
custom<00:01:49.079><c> now</c><00:01:49.320><c> delete</c><00:01:49.719><c> the</c><00:01:49.840><c> product</c><00:01:50.159><c> media</c><00:01:50.600><c> in</c>

00:01:50.709 --> 00:01:50.719 align:start position:0%
custom now delete the product media in
 

00:01:50.719 --> 00:01:53.510 align:start position:0%
custom now delete the product media in
the<00:01:50.880><c> first</c><00:01:51.200><c> flex</c><00:01:51.600><c> block</c><00:01:52.320><c> let's</c><00:01:52.560><c> start</c><00:01:52.880><c> styling</c>

00:01:53.510 --> 00:01:53.520 align:start position:0%
the first flex block let's start styling
 

00:01:53.520 --> 00:01:55.910 align:start position:0%
the first flex block let's start styling
the<00:01:53.680><c> product</c><00:01:54.119><c> details</c><00:01:55.079><c> I'll</c><00:01:55.240><c> set</c><00:01:55.479><c> the</c><00:01:55.600><c> font</c>

00:01:55.910 --> 00:01:55.920 align:start position:0%
the product details I'll set the font
 

00:01:55.920 --> 00:01:58.109 align:start position:0%
the product details I'll set the font
style<00:01:56.320><c> and</c><00:01:56.560><c> font</c><00:01:56.920><c> size</c><00:01:57.159><c> for</c><00:01:57.360><c> smaller</c><00:01:57.799><c> text</c>

00:01:58.109 --> 00:01:58.119 align:start position:0%
style and font size for smaller text
 

00:01:58.119 --> 00:02:00.469 align:start position:0%
style and font size for smaller text
elements<00:01:58.640><c> within</c><00:01:58.880><c> the</c><00:01:59.039><c> product</c><00:01:59.479><c> detail</c>

00:02:00.469 --> 00:02:00.479 align:start position:0%
elements within the product detail
 

00:02:00.479 --> 00:02:02.749 align:start position:0%
elements within the product detail
the<00:02:00.640><c> font</c><00:02:00.960><c> style</c><00:02:01.399><c> here</c><00:02:01.640><c> will</c><00:02:01.759><c> be</c><00:02:01.960><c> monserate</c>

00:02:02.749 --> 00:02:02.759 align:start position:0%
the font style here will be monserate
 

00:02:02.759 --> 00:02:04.830 align:start position:0%
the font style here will be monserate
and<00:02:02.840><c> I'll</c><00:02:03.039><c> set</c><00:02:03.280><c> the</c><00:02:03.439><c> product</c><00:02:03.759><c> title</c><00:02:04.159><c> size</c><00:02:04.640><c> to</c>

00:02:04.830 --> 00:02:04.840 align:start position:0%
and I'll set the product title size to
 

00:02:04.840 --> 00:02:07.870 align:start position:0%
and I'll set the product title size to
32<00:02:05.439><c> pixel</c><00:02:06.439><c> for</c><00:02:06.640><c> smaller</c><00:02:07.039><c> elements</c><00:02:07.520><c> like</c><00:02:07.680><c> the</c>

00:02:07.870 --> 00:02:07.880 align:start position:0%
32 pixel for smaller elements like the
 

00:02:07.880 --> 00:02:14.390 align:start position:0%
32 pixel for smaller elements like the
descriptions<00:02:08.800><c> set</c><00:02:09.039><c> the</c><00:02:09.160><c> font</c><00:02:09.520><c> size</c><00:02:09.800><c> to</c><00:02:10.039><c> 16</c>

00:02:14.390 --> 00:02:14.400 align:start position:0%
 
 

00:02:14.400 --> 00:02:17.150 align:start position:0%
 
pixel<00:02:15.400><c> next</c><00:02:15.959><c> with</c><00:02:16.080><c> the</c><00:02:16.239><c> product</c><00:02:16.560><c> darant</c>

00:02:17.150 --> 00:02:17.160 align:start position:0%
pixel next with the product darant
 

00:02:17.160 --> 00:02:19.670 align:start position:0%
pixel next with the product darant
choose<00:02:17.560><c> don't</c><00:02:17.879><c> combine</c><00:02:18.519><c> options</c><00:02:19.120><c> and</c><00:02:19.280><c> use</c><00:02:19.519><c> the</c>

00:02:19.670 --> 00:02:19.680 align:start position:0%
choose don't combine options and use the
 

00:02:19.680 --> 00:02:21.949 align:start position:0%
choose don't combine options and use the
swatches<00:02:20.360><c> option</c><00:02:21.200><c> here</c><00:02:21.400><c> you</c><00:02:21.519><c> can</c><00:02:21.680><c> click</c>

00:02:21.949 --> 00:02:21.959 align:start position:0%
swatches option here you can click
 

00:02:21.959 --> 00:02:24.190 align:start position:0%
swatches option here you can click
manage<00:02:22.360><c> swatches</c><00:02:22.959><c> to</c><00:02:23.120><c> set</c><00:02:23.319><c> them</c><00:02:23.480><c> up</c><00:02:23.599><c> as</c><00:02:23.720><c> labels</c>

00:02:24.190 --> 00:02:24.200 align:start position:0%
manage swatches to set them up as labels
 

00:02:24.200 --> 00:02:28.589 align:start position:0%
manage swatches to set them up as labels
like<00:02:24.360><c> I'm</c><00:02:24.480><c> doing</c>

00:02:28.589 --> 00:02:28.599 align:start position:0%
 
 

00:02:28.599 --> 00:02:31.509 align:start position:0%
 
here<00:02:29.599><c> on</c><00:02:30.000><c> check</c><00:02:30.200><c> the</c><00:02:30.280><c> show</c><00:02:30.519><c> option</c><00:02:30.879><c> name</c><00:02:31.200><c> and</c>

00:02:31.509 --> 00:02:31.519 align:start position:0%
here on check the show option name and
 

00:02:31.519 --> 00:02:34.550 align:start position:0%
here on check the show option name and
lastly<00:02:32.280><c> set</c><00:02:32.599><c> the</c><00:02:32.760><c> option</c><00:02:33.160><c> values</c><00:02:33.680><c> layout</c><00:02:34.160><c> to</c>

00:02:34.550 --> 00:02:34.560 align:start position:0%
lastly set the option values layout to
 

00:02:34.560 --> 00:02:36.869 align:start position:0%
lastly set the option values layout to
horizontal<00:02:35.560><c> adjust</c><00:02:35.920><c> the</c><00:02:36.080><c> spacing</c><00:02:36.519><c> of</c><00:02:36.680><c> the</c>

00:02:36.869 --> 00:02:36.879 align:start position:0%
horizontal adjust the spacing of the
 

00:02:36.879 --> 00:02:38.710 align:start position:0%
horizontal adjust the spacing of the
option<00:02:37.280><c> values</c><00:02:37.599><c> to</c><00:02:37.879><c> Zer</c>

00:02:38.710 --> 00:02:38.720 align:start position:0%
option values to Zer
 

00:02:38.720 --> 00:02:41.350 align:start position:0%
option values to Zer
pixel<00:02:39.720><c> let's</c><00:02:39.959><c> start</c><00:02:40.239><c> styling</c><00:02:40.680><c> the</c><00:02:40.840><c> variant</c>

00:02:41.350 --> 00:02:41.360 align:start position:0%
pixel let's start styling the variant
 

00:02:41.360 --> 00:02:43.830 align:start position:0%
pixel let's start styling the variant
here<00:02:42.040><c> there</c><00:02:42.159><c> are</c><00:02:42.360><c> two</c><00:02:42.599><c> states</c><00:02:43.200><c> normal</c><00:02:43.599><c> and</c>

00:02:43.830 --> 00:02:43.840 align:start position:0%
here there are two states normal and
 

00:02:43.840 --> 00:02:45.330 align:start position:0%
here there are two states normal and
active<00:02:44.120><c> to</c><00:02:44.319><c> selected</c>

00:02:45.330 --> 00:02:45.340 align:start position:0%
active to selected
 

00:02:45.340 --> 00:02:48.910 align:start position:0%
active to selected
[Music]

00:02:48.910 --> 00:02:48.920 align:start position:0%
[Music]
 

00:02:48.920 --> 00:02:51.350 align:start position:0%
[Music]
State<00:02:49.920><c> I</c><00:02:50.000><c> will</c><00:02:50.239><c> adjust</c><00:02:50.720><c> each</c><00:02:50.920><c> state</c><00:02:51.239><c> by</c>

00:02:51.350 --> 00:02:51.360 align:start position:0%
State I will adjust each state by
 

00:02:51.360 --> 00:03:00.030 align:start position:0%
State I will adjust each state by
choosing<00:02:51.760><c> from</c><00:02:51.920><c> the</c><00:02:52.040><c> drop-</c><00:02:52.400><c> down</c><00:02:52.680><c> here</c>

00:03:00.030 --> 00:03:00.040 align:start position:0%
 
 

00:03:00.040 --> 00:03:01.949 align:start position:0%
 
to<00:03:00.159><c> show</c><00:03:00.440><c> the</c><00:03:00.599><c> product</c><00:03:01.000><c> description</c><00:03:01.599><c> in</c><00:03:01.720><c> a</c>

00:03:01.949 --> 00:03:01.959 align:start position:0%
to show the product description in a
 

00:03:01.959 --> 00:03:04.110 align:start position:0%
to show the product description in a
compact<00:03:02.400><c> layout</c><00:03:03.080><c> select</c><00:03:03.440><c> the</c><00:03:03.640><c> compact</c>

00:03:04.110 --> 00:03:04.120 align:start position:0%
compact layout select the compact
 

00:03:04.120 --> 00:03:07.149 align:start position:0%
compact layout select the compact
description<00:03:04.640><c> display</c><00:03:05.159><c> option</c><00:03:06.120><c> by</c><00:03:06.319><c> default</c><00:03:06.760><c> 30</c>

00:03:07.149 --> 00:03:07.159 align:start position:0%
description display option by default 30
 

00:03:07.159 --> 00:03:08.990 align:start position:0%
description display option by default 30
characters<00:03:07.560><c> will</c><00:03:07.799><c> be</c><00:03:07.920><c> shown</c><00:03:08.560><c> but</c><00:03:08.720><c> I</c><00:03:08.799><c> will</c>

00:03:08.990 --> 00:03:09.000 align:start position:0%
characters will be shown but I will
 

00:03:09.000 --> 00:03:12.710 align:start position:0%
characters will be shown but I will
leave<00:03:09.319><c> this</c><00:03:09.760><c> as</c><00:03:10.080><c> is</c><00:03:10.319><c> for</c><00:03:10.920><c> now</c><00:03:11.920><c> finally</c><00:03:12.400><c> select</c>

00:03:12.710 --> 00:03:12.720 align:start position:0%
leave this as is for now finally select
 

00:03:12.720 --> 00:03:14.670 align:start position:0%
leave this as is for now finally select
show<00:03:13.000><c> more</c><00:03:13.159><c> link</c><00:03:13.720><c> you</c><00:03:13.840><c> can</c><00:03:14.080><c> customize</c><00:03:14.560><c> the</c>

00:03:14.670 --> 00:03:14.680 align:start position:0%
show more link you can customize the
 

00:03:14.680 --> 00:03:17.070 align:start position:0%
show more link you can customize the
more<00:03:14.920><c> text</c><00:03:15.239><c> or</c><00:03:15.440><c> less</c><00:03:15.799><c> text</c><00:03:16.080><c> option</c><00:03:16.400><c> here</c><00:03:16.599><c> as</c>

00:03:17.070 --> 00:03:17.080 align:start position:0%
more text or less text option here as
 

00:03:17.080 --> 00:03:19.949 align:start position:0%
more text or less text option here as
well<00:03:18.080><c> now</c><00:03:18.480><c> move</c><00:03:18.760><c> the</c><00:03:18.879><c> elements</c><00:03:19.319><c> to</c><00:03:19.440><c> better</c><00:03:19.680><c> fit</c>

00:03:19.949 --> 00:03:19.959 align:start position:0%
well now move the elements to better fit
 

00:03:19.959 --> 00:03:22.390 align:start position:0%
well now move the elements to better fit
the<00:03:20.080><c> layout</c><00:03:20.840><c> for</c><00:03:21.040><c> the</c><00:03:21.159><c> add</c><00:03:21.360><c> to</c><00:03:21.560><c> cart</c><00:03:21.840><c> button</c>

00:03:22.390 --> 00:03:22.400 align:start position:0%
the layout for the add to cart button
 

00:03:22.400 --> 00:03:24.070 align:start position:0%
the layout for the add to cart button
I'll<00:03:22.599><c> adjust</c><00:03:22.959><c> the</c><00:03:23.080><c> background</c><00:03:23.480><c> color</c><00:03:23.840><c> in</c><00:03:23.959><c> the</c>

00:03:24.070 --> 00:03:24.080 align:start position:0%
I'll adjust the background color in the
 

00:03:24.080 --> 00:03:38.830 align:start position:0%
I'll adjust the background color in the
styling<00:03:24.560><c> Tab</c><00:03:25.120><c> and</c><00:03:25.280><c> add</c><00:03:25.440><c> a</c><00:03:25.560><c> border</c>

00:03:38.830 --> 00:03:38.840 align:start position:0%
 
 

00:03:38.840 --> 00:03:41.509 align:start position:0%
 
to<00:03:39.000><c> add</c><00:03:39.120><c> an</c><00:03:39.360><c> image</c><00:03:39.920><c> first</c><00:03:40.200><c> click</c><00:03:40.400><c> on</c><00:03:40.519><c> the</c><00:03:40.680><c> image</c>

00:03:41.509 --> 00:03:41.519 align:start position:0%
to add an image first click on the image
 

00:03:41.519 --> 00:03:43.429 align:start position:0%
to add an image first click on the image
then<00:03:41.760><c> navigate</c><00:03:42.159><c> to</c><00:03:42.319><c> the</c><00:03:42.480><c> general</c><00:03:42.959><c> Tab</c><00:03:43.239><c> and</c>

00:03:43.429 --> 00:03:43.439 align:start position:0%
then navigate to the general Tab and
 

00:03:43.439 --> 00:03:46.350 align:start position:0%
then navigate to the general Tab and
select<00:03:43.760><c> your</c><00:03:43.959><c> desired</c>

00:03:46.350 --> 00:03:46.360 align:start position:0%
select your desired
 

00:03:46.360 --> 00:03:48.750 align:start position:0%
select your desired
image<00:03:47.360><c> now</c><00:03:47.680><c> when</c><00:03:47.799><c> it</c><00:03:47.920><c> comes</c><00:03:48.120><c> to</c><00:03:48.280><c> the</c><00:03:48.439><c> product</c>

00:03:48.750 --> 00:03:48.760 align:start position:0%
image now when it comes to the product
 

00:03:48.760 --> 00:03:55.270 align:start position:0%
image now when it comes to the product
image<00:03:49.239><c> I'll</c><00:03:49.519><c> display</c><00:03:49.879><c> the</c><00:03:50.000><c> media</c><00:03:50.360><c> list</c><00:03:50.680><c> like</c>

00:03:55.270 --> 00:03:55.280 align:start position:0%
 
 

00:03:55.280 --> 00:03:58.589 align:start position:0%
 
this<00:03:56.280><c> next</c><00:03:56.640><c> glossier</c><00:03:57.519><c> has</c><00:03:57.760><c> added</c><00:03:58.040><c> a</c><00:03:58.239><c> video</c>

00:03:58.589 --> 00:03:58.599 align:start position:0%
this next glossier has added a video
 

00:03:58.599 --> 00:04:00.550 align:start position:0%
this next glossier has added a video
element<00:03:59.040><c> here</c><00:03:59.360><c> to</c><00:03:59.760><c> enhance</c><00:04:00.120><c> the</c><00:04:00.239><c> product</c>

00:04:00.550 --> 00:04:00.560 align:start position:0%
element here to enhance the product
 

00:04:00.560 --> 00:04:03.229 align:start position:0%
element here to enhance the product
details<00:04:01.480><c> to</c><00:04:01.640><c> build</c><00:04:02.000><c> this</c><00:04:02.159><c> section</c><00:04:02.760><c> I'll</c><00:04:03.000><c> drag</c>

00:04:03.229 --> 00:04:03.239 align:start position:0%
details to build this section I'll drag
 

00:04:03.239 --> 00:04:05.509 align:start position:0%
details to build this section I'll drag
a<00:04:03.360><c> twoof</c><00:04:03.640><c> flex</c><00:04:03.879><c> block</c><00:04:04.159><c> layout</c><00:04:04.599><c> into</c><00:04:04.799><c> the</c>

00:04:05.509 --> 00:04:05.519 align:start position:0%
a twoof flex block layout into the
 

00:04:05.519 --> 00:04:08.149 align:start position:0%
a twoof flex block layout into the
editor<00:04:06.519><c> placing</c><00:04:06.799><c> a</c><00:04:06.959><c> video</c><00:04:07.239><c> element</c><00:04:07.720><c> in</c><00:04:07.920><c> one</c>

00:04:08.149 --> 00:04:08.159 align:start position:0%
editor placing a video element in one
 

00:04:08.159 --> 00:04:10.589 align:start position:0%
editor placing a video element in one
block<00:04:08.480><c> and</c><00:04:08.599><c> an</c><00:04:08.840><c> icon</c><00:04:09.319><c> heading</c><00:04:09.879><c> and</c><00:04:10.120><c> paragraph</c>

00:04:10.589 --> 00:04:10.599 align:start position:0%
block and an icon heading and paragraph
 

00:04:10.599 --> 00:04:19.469 align:start position:0%
block and an icon heading and paragraph
in<00:04:10.760><c> the</c>

00:04:19.469 --> 00:04:19.479 align:start position:0%
 
 

00:04:19.479 --> 00:04:22.150 align:start position:0%
 
other<00:04:20.479><c> just</c><00:04:20.639><c> like</c><00:04:20.799><c> with</c><00:04:20.919><c> the</c><00:04:21.079><c> image</c><00:04:21.440><c> element</c>

00:04:22.150 --> 00:04:22.160 align:start position:0%
other just like with the image element
 

00:04:22.160 --> 00:04:24.030 align:start position:0%
other just like with the image element
click<00:04:22.400><c> on</c><00:04:22.520><c> the</c><00:04:22.680><c> video</c><00:04:23.000><c> element</c><00:04:23.360><c> to</c><00:04:23.520><c> select</c><00:04:23.880><c> the</c>

00:04:24.030 --> 00:04:24.040 align:start position:0%
click on the video element to select the
 

00:04:24.040 --> 00:04:26.790 align:start position:0%
click on the video element to select the
video<00:04:24.320><c> you</c><00:04:24.440><c> want</c><00:04:24.560><c> to</c>

00:04:26.790 --> 00:04:26.800 align:start position:0%
 
 

00:04:26.800 --> 00:04:30.070 align:start position:0%
 
use<00:04:27.800><c> let's</c><00:04:28.080><c> adjust</c><00:04:28.440><c> the</c><00:04:28.600><c> font</c><00:04:28.919><c> color</c><00:04:29.479><c> and</c><00:04:29.840><c> size</c>

00:04:30.070 --> 00:04:30.080 align:start position:0%
use let's adjust the font color and size
 

00:04:30.080 --> 00:04:33.469 align:start position:0%
use let's adjust the font color and size
for<00:04:30.320><c> the</c><00:04:30.479><c> icon</c>

00:04:33.469 --> 00:04:33.479 align:start position:0%
 
 

00:04:33.479 --> 00:04:36.310 align:start position:0%
 
elements<00:04:34.479><c> while</c><00:04:34.680><c> adjusting</c><00:04:35.280><c> Styles</c><00:04:35.960><c> you</c><00:04:36.039><c> can</c>

00:04:36.310 --> 00:04:36.320 align:start position:0%
elements while adjusting Styles you can
 

00:04:36.320 --> 00:04:38.189 align:start position:0%
elements while adjusting Styles you can
copy<00:04:36.639><c> the</c><00:04:36.800><c> styles</c><00:04:37.240><c> from</c><00:04:37.400><c> the</c><00:04:37.560><c> elements</c><00:04:38.039><c> you</c>

00:04:38.189 --> 00:04:38.199 align:start position:0%
copy the styles from the elements you
 

00:04:38.199 --> 00:04:40.350 align:start position:0%
copy the styles from the elements you
adjusted<00:04:38.680><c> earlier</c><00:04:39.199><c> and</c><00:04:39.400><c> paste</c><00:04:39.680><c> them</c><00:04:39.840><c> to</c><00:04:40.000><c> save</c>

00:04:40.350 --> 00:04:40.360 align:start position:0%
adjusted earlier and paste them to save
 

00:04:40.360 --> 00:05:10.469 align:start position:0%
adjusted earlier and paste them to save
time

00:05:10.469 --> 00:05:10.479 align:start position:0%
 
 

00:05:10.479 --> 00:05:12.469 align:start position:0%
 
to<00:05:10.759><c> increase</c><00:05:11.199><c> the</c><00:05:11.360><c> video's</c><00:05:11.800><c> width</c><00:05:12.199><c> click</c><00:05:12.360><c> on</c>

00:05:12.469 --> 00:05:12.479 align:start position:0%
to increase the video's width click on
 

00:05:12.479 --> 00:05:15.070 align:start position:0%
to increase the video's width click on
the<00:05:12.600><c> flex</c><00:05:12.919><c> block</c><00:05:13.280><c> on</c><00:05:13.440><c> the</c><00:05:13.639><c> right</c><00:05:14.560><c> then</c><00:05:14.840><c> go</c><00:05:14.960><c> to</c>

00:05:15.070 --> 00:05:15.080 align:start position:0%
the flex block on the right then go to
 

00:05:15.080 --> 00:05:17.189 align:start position:0%
the flex block on the right then go to
The<00:05:15.199><c> Styling</c><00:05:15.759><c> tab</c><00:05:16.039><c> select</c><00:05:16.440><c> custom</c><00:05:16.800><c> for</c><00:05:17.039><c> the</c>

00:05:17.189 --> 00:05:17.199 align:start position:0%
The Styling tab select custom for the
 

00:05:17.199 --> 00:05:19.990 align:start position:0%
The Styling tab select custom for the
width<00:05:17.880><c> and</c><00:05:18.000><c> set</c><00:05:18.199><c> it</c><00:05:18.319><c> to</c><00:05:18.520><c> 250</c>

00:05:19.990 --> 00:05:20.000 align:start position:0%
width and set it to 250
 

00:05:20.000 --> 00:05:22.550 align:start position:0%
width and set it to 250
pixels<00:05:21.000><c> the</c><00:05:21.160><c> next</c><00:05:21.440><c> section</c><00:05:22.000><c> is</c><00:05:22.160><c> about</c><00:05:22.440><c> the</c>

00:05:22.550 --> 00:05:22.560 align:start position:0%
pixels the next section is about the
 

00:05:22.560 --> 00:05:25.350 align:start position:0%
pixels the next section is about the
ingredients<00:05:23.080><c> used</c><00:05:23.319><c> in</c><00:05:23.440><c> the</c><00:05:23.520><c> gloer</c><00:05:24.360><c> perfume</c>

00:05:25.350 --> 00:05:25.360 align:start position:0%
ingredients used in the gloer perfume
 

00:05:25.360 --> 00:05:26.909 align:start position:0%
ingredients used in the gloer perfume
first<00:05:25.639><c> I</c><00:05:25.720><c> will</c><00:05:25.880><c> add</c><00:05:26.000><c> a</c>

00:05:26.909 --> 00:05:26.919 align:start position:0%
first I will add a
 

00:05:26.919 --> 00:05:29.990 align:start position:0%
first I will add a
heading<00:05:27.919><c> here</c><00:05:28.199><c> I'll</c><00:05:28.440><c> also</c><00:05:28.759><c> drag</c><00:05:29.080><c> a</c><00:05:29.240><c> two</c><00:05:29.720><c> Flex</c>

00:05:29.990 --> 00:05:30.000 align:start position:0%
heading here I'll also drag a two Flex
 

00:05:30.000 --> 00:05:34.070 align:start position:0%
heading here I'll also drag a two Flex
block<00:05:30.280><c> layout</c><00:05:30.720><c> into</c><00:05:30.960><c> the</c>

00:05:34.070 --> 00:05:34.080 align:start position:0%
 
 

00:05:34.080 --> 00:05:36.749 align:start position:0%
 
editor<00:05:35.080><c> and</c><00:05:35.240><c> use</c><00:05:35.440><c> an</c><00:05:35.639><c> accordion</c><00:05:36.199><c> element</c><00:05:36.600><c> for</c>

00:05:36.749 --> 00:05:36.759 align:start position:0%
editor and use an accordion element for
 

00:05:36.759 --> 00:05:38.230 align:start position:0%
editor and use an accordion element for
the<00:05:36.880><c> block</c><00:05:37.160><c> on</c><00:05:37.280><c> the</c><00:05:37.400><c> right</c><00:05:37.600><c> side</c><00:05:37.800><c> of</c><00:05:37.919><c> the</c>

00:05:38.230 --> 00:05:38.240 align:start position:0%
the block on the right side of the
 

00:05:38.240 --> 00:05:41.390 align:start position:0%
the block on the right side of the
screen<00:05:39.240><c> now</c><00:05:39.639><c> I</c><00:05:39.720><c> will</c><00:05:40.000><c> add</c><00:05:40.319><c> content</c><00:05:40.880><c> and</c><00:05:41.039><c> adjust</c>

00:05:41.390 --> 00:05:41.400 align:start position:0%
screen now I will add content and adjust
 

00:05:41.400 --> 00:06:12.830 align:start position:0%
screen now I will add content and adjust
the<00:05:41.560><c> styling</c><00:05:41.960><c> for</c><00:05:42.160><c> these</c><00:05:42.360><c> elements</c>

00:06:12.830 --> 00:06:12.840 align:start position:0%
 
 

00:06:12.840 --> 00:06:14.990 align:start position:0%
 
for<00:06:13.039><c> the</c><00:06:13.160><c> full</c><00:06:13.440><c> ingredients</c><00:06:14.000><c> list</c><00:06:14.240><c> label</c><00:06:14.800><c> use</c>

00:06:14.990 --> 00:06:15.000 align:start position:0%
for the full ingredients list label use
 

00:06:15.000 --> 00:06:19.749 align:start position:0%
for the full ingredients list label use
a<00:06:15.160><c> heading</c><00:06:15.680><c> element</c><00:06:16.680><c> adjust</c><00:06:17.039><c> styling</c><00:06:17.479><c> for</c>

00:06:19.749 --> 00:06:19.759 align:start position:0%
 
 

00:06:19.759 --> 00:06:22.830 align:start position:0%
 
it<00:06:20.759><c> then</c><00:06:20.960><c> in</c><00:06:21.080><c> the</c><00:06:21.240><c> general</c><00:06:21.680><c> tab</c><00:06:22.319><c> select</c><00:06:22.680><c> the</c>

00:06:22.830 --> 00:06:22.840 align:start position:0%
it then in the general tab select the
 

00:06:22.840 --> 00:06:25.350 align:start position:0%
it then in the general tab select the
click<00:06:23.080><c> action</c><00:06:23.479><c> as</c><00:06:23.720><c> open</c><00:06:24.120><c> popup</c><00:06:24.840><c> here</c><00:06:25.120><c> I've</c>

00:06:25.350 --> 00:06:25.360 align:start position:0%
click action as open popup here I've
 

00:06:25.360 --> 00:06:27.710 align:start position:0%
click action as open popup here I've
already<00:06:25.720><c> prepared</c><00:06:26.160><c> the</c><00:06:26.400><c> popup</c><00:06:26.840><c> page</c><00:06:27.360><c> so</c><00:06:27.520><c> I'll</c>

00:06:27.710 --> 00:06:27.720 align:start position:0%
already prepared the popup page so I'll
 

00:06:27.720 --> 00:06:29.990 align:start position:0%
already prepared the popup page so I'll
just<00:06:27.880><c> select</c><00:06:28.199><c> it</c><00:06:28.440><c> here</c>

00:06:29.990 --> 00:06:30.000 align:start position:0%
just select it here
 

00:06:30.000 --> 00:06:31.710 align:start position:0%
just select it here
the<00:06:30.160><c> next</c><00:06:30.479><c> section</c><00:06:30.919><c> has</c><00:06:31.080><c> an</c><00:06:31.240><c> image</c><00:06:31.479><c> on</c><00:06:31.599><c> the</c>

00:06:31.710 --> 00:06:31.720 align:start position:0%
the next section has an image on the
 

00:06:31.720 --> 00:06:33.749 align:start position:0%
the next section has an image on the
right<00:06:31.919><c> and</c><00:06:32.120><c> text</c><00:06:32.520><c> on</c><00:06:32.759><c> the</c><00:06:33.000><c> left</c><00:06:33.560><c> I'll</c>

00:06:33.749 --> 00:06:33.759 align:start position:0%
right and text on the left I'll
 

00:06:33.759 --> 00:06:35.469 align:start position:0%
right and text on the left I'll
duplicate<00:06:34.280><c> the</c><00:06:34.479><c> section</c><00:06:34.880><c> with</c><00:06:35.000><c> the</c><00:06:35.120><c> video</c>

00:06:35.469 --> 00:06:35.479 align:start position:0%
duplicate the section with the video
 

00:06:35.479 --> 00:06:37.550 align:start position:0%
duplicate the section with the video
background<00:06:36.240><c> I</c><00:06:36.360><c> just</c><00:06:36.560><c> created</c><00:06:37.080><c> and</c><00:06:37.199><c> move</c><00:06:37.360><c> it</c>

00:06:37.550 --> 00:06:37.560 align:start position:0%
background I just created and move it
 

00:06:37.560 --> 00:06:39.589 align:start position:0%
background I just created and move it
down<00:06:37.800><c> to</c><00:06:38.000><c> this</c><00:06:38.199><c> new</c><00:06:38.560><c> section</c><00:06:38.919><c> to</c><00:06:39.080><c> maintain</c><00:06:39.479><c> the</c>

00:06:39.589 --> 00:06:39.599 align:start position:0%
down to this new section to maintain the
 

00:06:39.599 --> 00:06:43.830 align:start position:0%
down to this new section to maintain the
same

00:06:43.830 --> 00:06:43.840 align:start position:0%
 
 

00:06:43.840 --> 00:06:46.629 align:start position:0%
 
style<00:06:44.840><c> next</c><00:06:45.400><c> I'll</c><00:06:45.680><c> replace</c><00:06:46.080><c> the</c><00:06:46.240><c> video</c>

00:06:46.629 --> 00:06:46.639 align:start position:0%
style next I'll replace the video
 

00:06:46.639 --> 00:06:49.150 align:start position:0%
style next I'll replace the video
element<00:06:47.120><c> with</c><00:06:47.280><c> an</c><00:06:47.520><c> image</c><00:06:47.919><c> element</c><00:06:48.599><c> and</c><00:06:48.800><c> adjust</c>

00:06:49.150 --> 00:06:49.160 align:start position:0%
element with an image element and adjust
 

00:06:49.160 --> 00:06:50.629 align:start position:0%
element with an image element and adjust
the<00:06:49.319><c> content</c><00:06:49.759><c> of</c><00:06:49.880><c> the</c><00:06:50.039><c> left</c><00:06:50.280><c> block</c>

00:06:50.629 --> 00:06:50.639 align:start position:0%
the content of the left block
 

00:06:50.639 --> 00:07:06.150 align:start position:0%
the content of the left block
accordingly

00:07:06.150 --> 00:07:06.160 align:start position:0%
 
 

00:07:06.160 --> 00:07:08.230 align:start position:0%
 
similar<00:07:06.520><c> to</c><00:07:06.680><c> the</c><00:07:06.879><c> video</c><00:07:07.280><c> with</c><00:07:07.560><c> text</c><00:07:07.840><c> section</c>

00:07:08.230 --> 00:07:08.240 align:start position:0%
similar to the video with text section
 

00:07:08.240 --> 00:07:10.430 align:start position:0%
similar to the video with text section
above<00:07:08.680><c> in</c><00:07:08.879><c> this</c><00:07:09.080><c> section</c><00:07:09.800><c> I</c><00:07:09.879><c> will</c><00:07:10.080><c> click</c><00:07:10.319><c> on</c>

00:07:10.430 --> 00:07:10.440 align:start position:0%
above in this section I will click on
 

00:07:10.440 --> 00:07:12.710 align:start position:0%
above in this section I will click on
the<00:07:10.520><c> flex</c><00:07:10.960><c> section</c><00:07:11.360><c> on</c><00:07:11.479><c> the</c><00:07:11.680><c> right</c><00:07:12.240><c> select</c>

00:07:12.710 --> 00:07:12.720 align:start position:0%
the flex section on the right select
 

00:07:12.720 --> 00:07:16.629 align:start position:0%
the flex section on the right select
custom<00:07:13.039><c> for</c><00:07:13.240><c> the</c><00:07:13.360><c> width</c><00:07:13.720><c> and</c><00:07:13.840><c> set</c><00:07:14.039><c> it</c><00:07:14.160><c> to</c><00:07:14.400><c> 350</c>

00:07:16.629 --> 00:07:16.639 align:start position:0%
custom for the width and set it to 350
 

00:07:16.639 --> 00:07:19.189 align:start position:0%
custom for the width and set it to 350
pixels<00:07:17.639><c> you</c><00:07:17.800><c> may</c><00:07:18.039><c> also</c><00:07:18.319><c> like</c><00:07:18.680><c> section</c><00:07:19.039><c> is</c>

00:07:19.189 --> 00:07:19.199 align:start position:0%
pixels you may also like section is
 

00:07:19.199 --> 00:07:23.150 align:start position:0%
pixels you may also like section is
important<00:07:19.560><c> for</c>

00:07:23.150 --> 00:07:23.160 align:start position:0%
 
 

00:07:23.160 --> 00:07:25.830 align:start position:0%
 
upselling<00:07:24.160><c> you</c><00:07:24.240><c> can</c><00:07:24.479><c> add</c><00:07:24.720><c> this</c><00:07:24.919><c> section</c><00:07:25.680><c> by</c>

00:07:25.830 --> 00:07:25.840 align:start position:0%
upselling you can add this section by
 

00:07:25.840 --> 00:07:32.070 align:start position:0%
upselling you can add this section by
using<00:07:26.120><c> a</c><00:07:26.319><c> product</c><00:07:26.639><c> list</c><00:07:26.919><c> element</c>

00:07:32.070 --> 00:07:32.080 align:start position:0%
 
 

00:07:32.080 --> 00:07:34.390 align:start position:0%
 
for<00:07:32.599><c> the</c><00:07:32.800><c> product</c><00:07:33.120><c> Source</c><00:07:33.800><c> you</c><00:07:33.960><c> can</c><00:07:34.120><c> choose</c>

00:07:34.390 --> 00:07:34.400 align:start position:0%
for the product Source you can choose
 

00:07:34.400 --> 00:07:36.869 align:start position:0%
for the product Source you can choose
all<00:07:34.759><c> products</c><00:07:35.319><c> custom</c><00:07:35.720><c> collection</c><00:07:36.560><c> or</c>

00:07:36.869 --> 00:07:36.879 align:start position:0%
all products custom collection or
 

00:07:36.879 --> 00:07:38.670 align:start position:0%
all products custom collection or
related<00:07:37.560><c> products</c><00:07:38.039><c> depending</c><00:07:38.360><c> on</c><00:07:38.520><c> your</c>

00:07:38.670 --> 00:07:38.680 align:start position:0%
related products depending on your
 

00:07:38.680 --> 00:07:51.990 align:start position:0%
related products depending on your
upsell<00:07:39.240><c> strategy</c><00:07:40.160><c> here</c><00:07:40.400><c> I'll</c><00:07:40.639><c> select</c><00:07:41.120><c> custom</c>

00:07:51.990 --> 00:07:52.000 align:start position:0%
 
 

00:07:52.000 --> 00:07:54.029 align:start position:0%
 
collection<00:07:53.000><c> now</c><00:07:53.159><c> that</c><00:07:53.319><c> we've</c><00:07:53.560><c> created</c><00:07:53.879><c> the</c>

00:07:54.029 --> 00:07:54.039 align:start position:0%
collection now that we've created the
 

00:07:54.039 --> 00:07:56.710 align:start position:0%
collection now that we've created the
product<00:07:54.360><c> page</c><00:07:54.919><c> inspired</c><00:07:55.440><c> by</c><00:07:55.639><c> glossier</c><00:07:56.479><c> don't</c>

00:07:56.710 --> 00:07:56.720 align:start position:0%
product page inspired by glossier don't
 

00:07:56.720 --> 00:07:58.790 align:start position:0%
product page inspired by glossier don't
forget<00:07:57.000><c> to</c><00:07:57.199><c> check</c><00:07:57.360><c> it</c><00:07:57.520><c> on</c><00:07:57.800><c> mobile</c><00:07:58.199><c> devices</c><00:07:58.639><c> to</c>

00:07:58.790 --> 00:07:58.800 align:start position:0%
forget to check it on mobile devices to
 

00:07:58.800 --> 00:08:00.909 align:start position:0%
forget to check it on mobile devices to
ensure<00:07:59.120><c> resp</c><00:07:59.520><c> responsiveness</c><00:08:00.520><c> since</c><00:08:00.720><c> you</c>

00:08:00.909 --> 00:08:00.919 align:start position:0%
ensure resp responsiveness since you
 

00:08:00.919 --> 00:08:03.110 align:start position:0%
ensure resp responsiveness since you
designed<00:08:01.280><c> for</c><00:08:01.479><c> all</c><00:08:01.720><c> devices</c><00:08:02.599><c> most</c><00:08:02.800><c> of</c><00:08:02.919><c> the</c>

00:08:03.110 --> 00:08:03.120 align:start position:0%
designed for all devices most of the
 

00:08:03.120 --> 00:08:05.230 align:start position:0%
designed for all devices most of the
Styles<00:08:03.479><c> will</c><00:08:03.639><c> be</c><00:08:03.879><c> preserved</c><00:08:04.639><c> when</c><00:08:04.840><c> switching</c>

00:08:05.230 --> 00:08:05.240 align:start position:0%
Styles will be preserved when switching
 

00:08:05.240 --> 00:08:08.110 align:start position:0%
Styles will be preserved when switching
to<00:08:05.479><c> mobile</c><00:08:06.479><c> however</c><00:08:07.039><c> some</c><00:08:07.319><c> Styles</c><00:08:07.800><c> may</c><00:08:07.960><c> need</c>

00:08:08.110 --> 00:08:08.120 align:start position:0%
to mobile however some Styles may need
 

00:08:08.120 --> 00:08:10.710 align:start position:0%
to mobile however some Styles may need
to<00:08:08.240><c> be</c><00:08:08.400><c> adjusted</c><00:08:08.879><c> for</c><00:08:09.120><c> smaller</c><00:08:09.520><c> screens</c><00:08:10.520><c> to</c>

00:08:10.710 --> 00:08:10.720 align:start position:0%
to be adjusted for smaller screens to
 

00:08:10.720 --> 00:08:12.469 align:start position:0%
to be adjusted for smaller screens to
reverse<00:08:11.120><c> the</c><00:08:11.199><c> order</c><00:08:11.440><c> of</c><00:08:11.560><c> the</c><00:08:11.639><c> two</c><00:08:11.879><c> Flex</c><00:08:12.159><c> blocks</c>

00:08:12.469 --> 00:08:12.479 align:start position:0%
reverse the order of the two Flex blocks
 

00:08:12.479 --> 00:08:14.830 align:start position:0%
reverse the order of the two Flex blocks
on<00:08:12.639><c> mobile</c><00:08:13.319><c> click</c><00:08:13.520><c> on</c><00:08:13.639><c> the</c><00:08:13.759><c> flex</c><00:08:14.159><c> section</c><00:08:14.639><c> and</c>

00:08:14.830 --> 00:08:14.840 align:start position:0%
on mobile click on the flex section and
 

00:08:14.840 --> 00:08:17.110 align:start position:0%
on mobile click on the flex section and
select<00:08:15.240><c> order</c><00:08:15.639><c> reverse</c><00:08:16.520><c> note</c><00:08:16.840><c> that</c><00:08:17.000><c> this</c>

00:08:17.110 --> 00:08:17.120 align:start position:0%
select order reverse note that this
 

00:08:17.120 --> 00:08:32.230 align:start position:0%
select order reverse note that this
won't<00:08:17.400><c> affect</c><00:08:17.680><c> the</c><00:08:17.840><c> layout</c><00:08:18.240><c> on</c><00:08:18.479><c> other</c><00:08:18.800><c> devices</c>

00:08:32.230 --> 00:08:32.240 align:start position:0%
 
 

00:08:32.240 --> 00:08:34.029 align:start position:0%
 
we've<00:08:32.519><c> already</c><00:08:32.919><c> assigned</c><00:08:33.399><c> the</c><00:08:33.599><c> product</c><00:08:33.880><c> to</c>

00:08:34.029 --> 00:08:34.039 align:start position:0%
we've already assigned the product to
 

00:08:34.039 --> 00:08:36.070 align:start position:0%
we've already assigned the product to
the<00:08:34.200><c> page</c><00:08:34.479><c> Above</c><00:08:35.080><c> So</c><00:08:35.279><c> now</c><00:08:35.440><c> let's</c><00:08:35.640><c> go</c><00:08:35.760><c> to</c><00:08:35.919><c> the</c>

00:08:36.070 --> 00:08:36.080 align:start position:0%
the page Above So now let's go to the
 

00:08:36.080 --> 00:08:37.949 align:start position:0%
the page Above So now let's go to the
theme<00:08:36.399><c> settings</c><00:08:36.839><c> to</c><00:08:37.120><c> hide</c><00:08:37.399><c> the</c><00:08:37.560><c> default</c>

00:08:37.949 --> 00:08:37.959 align:start position:0%
theme settings to hide the default
 

00:08:37.959 --> 00:08:40.469 align:start position:0%
theme settings to hide the default
Shopify<00:08:38.640><c> section</c><00:08:39.640><c> please</c><00:08:39.919><c> note</c><00:08:40.240><c> that</c><00:08:40.360><c> if</c>

00:08:40.469 --> 00:08:40.479 align:start position:0%
Shopify section please note that if
 

00:08:40.479 --> 00:08:43.350 align:start position:0%
Shopify section please note that if
you're<00:08:40.680><c> using</c><00:08:41.039><c> Shopify</c><00:08:41.640><c> store</c><00:08:42.159><c> 2.0</c><00:08:43.159><c> you'll</c>

00:08:43.350 --> 00:08:43.360 align:start position:0%
you're using Shopify store 2.0 you'll
 

00:08:43.360 --> 00:08:45.070 align:start position:0%
you're using Shopify store 2.0 you'll
need<00:08:43.519><c> to</c><00:08:43.640><c> go</c><00:08:43.760><c> to</c><00:08:43.880><c> online</c><00:08:44.200><c> store</c><00:08:44.560><c> customize</c>

00:08:45.070 --> 00:08:45.080 align:start position:0%
need to go to online store customize
 

00:08:45.080 --> 00:08:47.190 align:start position:0%
need to go to online store customize
theme<00:08:45.399><c> to</c><00:08:45.640><c> hide</c><00:08:45.880><c> the</c><00:08:46.040><c> default</c><00:08:46.519><c> section</c><00:08:47.000><c> if</c><00:08:47.120><c> you</c>

00:08:47.190 --> 00:08:47.200 align:start position:0%
theme to hide the default section if you
 

00:08:47.200 --> 00:08:49.670 align:start position:0%
theme to hide the default section if you
don't<00:08:47.360><c> want</c><00:08:47.519><c> it</c><00:08:47.640><c> to</c><00:08:47.760><c> show</c><00:08:48.519><c> alternatively</c><00:08:49.519><c> you</c>

00:08:49.670 --> 00:08:49.680 align:start position:0%
don't want it to show alternatively you
 

00:08:49.680 --> 00:08:51.550 align:start position:0%
don't want it to show alternatively you
can<00:08:49.839><c> choose</c><00:08:50.120><c> to</c><00:08:50.320><c> keep</c><00:08:50.480><c> it</c><00:08:50.720><c> depending</c><00:08:51.080><c> on</c><00:08:51.240><c> your</c>

00:08:51.550 --> 00:08:51.560 align:start position:0%
can choose to keep it depending on your
 

00:08:51.560 --> 00:08:54.230 align:start position:0%
can choose to keep it depending on your
specific<00:08:52.040><c> needs</c><00:08:52.920><c> in</c><00:08:53.080><c> this</c><00:08:53.279><c> case</c><00:08:53.680><c> I</c><00:08:53.760><c> will</c><00:08:54.040><c> hide</c>

00:08:54.230 --> 00:08:54.240 align:start position:0%
specific needs in this case I will hide
 

00:08:54.240 --> 00:08:57.269 align:start position:0%
specific needs in this case I will hide
it<00:08:55.120><c> time</c><00:08:55.360><c> to</c><00:08:55.600><c> save</c><00:08:55.959><c> and</c><00:08:56.160><c> publish</c><00:08:56.480><c> your</c><00:08:56.680><c> page</c>

00:08:57.269 --> 00:08:57.279 align:start position:0%
it time to save and publish your page
 

00:08:57.279 --> 00:08:59.110 align:start position:0%
it time to save and publish your page
take<00:08:57.440><c> a</c><00:08:57.600><c> final</c><00:08:57.959><c> look</c><00:08:58.120><c> in</c><00:08:58.320><c> live</c><00:08:58.600><c> view</c><00:08:58.880><c> to</c><00:08:59.000><c> make</c>

00:08:59.110 --> 00:08:59.120 align:start position:0%
take a final look in live view to make
 

00:08:59.120 --> 00:09:01.990 align:start position:0%
take a final look in live view to make
sure<00:08:59.760><c> everything</c><00:09:00.200><c> is</c>

00:09:01.990 --> 00:09:02.000 align:start position:0%
sure everything is
 

00:09:02.000 --> 00:09:04.750 align:start position:0%
sure everything is
perfect<00:09:03.000><c> however</c><00:09:03.279><c> with</c><00:09:03.519><c> page</c><00:09:03.920><c> fly</c><00:09:04.519><c> you</c><00:09:04.600><c> can</c>

00:09:04.750 --> 00:09:04.760 align:start position:0%
perfect however with page fly you can
 

00:09:04.760 --> 00:09:07.190 align:start position:0%
perfect however with page fly you can
use<00:09:05.040><c> templates</c><00:09:05.519><c> or</c><00:09:05.720><c> pre-made</c><00:09:06.200><c> sections</c><00:09:06.959><c> we've</c>

00:09:07.190 --> 00:09:07.200 align:start position:0%
use templates or pre-made sections we've
 

00:09:07.200 --> 00:09:09.710 align:start position:0%
use templates or pre-made sections we've
prepared<00:09:07.600><c> to</c><00:09:07.680><c> build</c><00:09:07.880><c> a</c><00:09:08.079><c> product</c><00:09:08.440><c> page</c><00:09:08.800><c> faster</c>

00:09:09.710 --> 00:09:09.720 align:start position:0%
prepared to build a product page faster
 

00:09:09.720 --> 00:09:11.350 align:start position:0%
prepared to build a product page faster
for<00:09:09.920><c> example</c><00:09:10.399><c> I'll</c><00:09:10.560><c> choose</c><00:09:10.880><c> the</c><00:09:11.000><c> template</c>

00:09:11.350 --> 00:09:11.360 align:start position:0%
for example I'll choose the template
 

00:09:11.360 --> 00:09:13.829 align:start position:0%
for example I'll choose the template
digisnap<00:09:12.079><c> because</c><00:09:12.320><c> its</c><00:09:12.519><c> tone</c><00:09:12.959><c> and</c><00:09:13.160><c> layout</c><00:09:13.600><c> are</c>

00:09:13.829 --> 00:09:13.839 align:start position:0%
digisnap because its tone and layout are
 

00:09:13.839 --> 00:09:15.550 align:start position:0%
digisnap because its tone and layout are
quite<00:09:14.040><c> similar</c><00:09:14.399><c> to</c><00:09:14.519><c> the</c><00:09:14.680><c> sample</c><00:09:15.079><c> page</c><00:09:15.399><c> from</c>

00:09:15.550 --> 00:09:15.560 align:start position:0%
quite similar to the sample page from
 

00:09:15.560 --> 00:09:18.430 align:start position:0%
quite similar to the sample page from
glossier<00:09:16.519><c> next</c><00:09:17.120><c> all</c><00:09:17.279><c> you</c><00:09:17.399><c> need</c><00:09:17.560><c> to</c><00:09:17.760><c> do</c><00:09:18.240><c> is</c>

00:09:18.430 --> 00:09:18.440 align:start position:0%
glossier next all you need to do is
 

00:09:18.440 --> 00:09:20.670 align:start position:0%
glossier next all you need to do is
adjust<00:09:18.880><c> and</c><00:09:19.160><c> add</c><00:09:19.480><c> elements</c><00:09:20.000><c> to</c><00:09:20.160><c> make</c><00:09:20.279><c> it</c><00:09:20.519><c> fit</c>

00:09:20.670 --> 00:09:20.680 align:start position:0%
adjust and add elements to make it fit
 

00:09:20.680 --> 00:09:21.730 align:start position:0%
adjust and add elements to make it fit
your

00:09:21.730 --> 00:09:21.740 align:start position:0%
your
 

00:09:21.740 --> 00:09:24.430 align:start position:0%
your
[Music]

00:09:24.430 --> 00:09:24.440 align:start position:0%
[Music]
 

00:09:24.440 --> 00:09:26.910 align:start position:0%
[Music]
need<00:09:25.440><c> and</c><00:09:25.600><c> there</c><00:09:25.720><c> you</c><00:09:25.920><c> have</c><00:09:26.079><c> it</c><00:09:26.720><c> you've</c>

00:09:26.910 --> 00:09:26.920 align:start position:0%
need and there you have it you've
 

00:09:26.920 --> 00:09:28.670 align:start position:0%
need and there you have it you've
learned<00:09:27.200><c> how</c><00:09:27.320><c> to</c><00:09:27.480><c> design</c><00:09:27.760><c> a</c><00:09:27.959><c> product</c><00:09:28.320><c> page</c>

00:09:28.670 --> 00:09:28.680 align:start position:0%
learned how to design a product page
 

00:09:28.680 --> 00:09:30.949 align:start position:0%
learned how to design a product page
that<00:09:28.880><c> captures</c><00:09:29.399><c> the</c><00:09:29.560><c> essence</c><00:09:29.880><c> of</c><00:09:30.079><c> glossier</c>

00:09:30.949 --> 00:09:30.959 align:start position:0%
that captures the essence of glossier
 

00:09:30.959 --> 00:09:33.710 align:start position:0%
that captures the essence of glossier
all<00:09:31.240><c> with</c><00:09:31.600><c> pagefly</c><00:09:32.600><c> get</c><00:09:32.800><c> ready</c><00:09:33.040><c> with</c><00:09:33.200><c> us</c><00:09:33.560><c> and</c>

00:09:33.710 --> 00:09:33.720 align:start position:0%
all with pagefly get ready with us and
 

00:09:33.720 --> 00:09:35.470 align:start position:0%
all with pagefly get ready with us and
start<00:09:34.000><c> creating</c><00:09:34.320><c> your</c><00:09:34.480><c> glossier</c><00:09:34.959><c> inspired</c>

00:09:35.470 --> 00:09:35.480 align:start position:0%
start creating your glossier inspired
 

00:09:35.480 --> 00:09:38.150 align:start position:0%
start creating your glossier inspired
product<00:09:35.839><c> page</c><00:09:36.320><c> with</c><00:09:36.519><c> pagefly</c><00:09:37.120><c> now</c><00:09:37.839><c> in</c><00:09:37.959><c> the</c>

00:09:38.150 --> 00:09:38.160 align:start position:0%
product page with pagefly now in the
 

00:09:38.160 --> 00:09:40.230 align:start position:0%
product page with pagefly now in the
next<00:09:38.519><c> video</c><00:09:39.040><c> we'll</c><00:09:39.240><c> take</c><00:09:39.399><c> things</c><00:09:39.600><c> up</c><00:09:39.760><c> a</c><00:09:39.920><c> notch</c>

00:09:40.230 --> 00:09:40.240 align:start position:0%
next video we'll take things up a notch
 

00:09:40.240 --> 00:09:41.710 align:start position:0%
next video we'll take things up a notch
and<00:09:40.399><c> show</c><00:09:40.600><c> you</c><00:09:40.760><c> how</c><00:09:40.839><c> to</c><00:09:40.959><c> build</c><00:09:41.200><c> a</c><00:09:41.320><c> luxury</c>

00:09:41.710 --> 00:09:41.720 align:start position:0%
and show you how to build a luxury
 

00:09:41.720 --> 00:09:44.110 align:start position:0%
and show you how to build a luxury
landing<00:09:42.160><c> page</c><00:09:42.800><c> that</c><00:09:43.000><c> truly</c><00:09:43.399><c> speaks</c><00:09:43.760><c> to</c><00:09:43.920><c> your</c>

00:09:44.110 --> 00:09:44.120 align:start position:0%
landing page that truly speaks to your
 

00:09:44.120 --> 00:09:47.550 align:start position:0%
landing page that truly speaks to your
Brand's<00:09:44.640><c> high-end</c><00:09:45.399><c> identity</c><00:09:46.399><c> don't</c><00:09:46.720><c> miss</c><00:09:46.959><c> it</c>

00:09:47.550 --> 00:09:47.560 align:start position:0%
Brand's high-end identity don't miss it
 

00:09:47.560 --> 00:09:50.279 align:start position:0%
Brand's high-end identity don't miss it
see<00:09:47.760><c> you</c><00:09:47.920><c> soon</c>