Bestsellers Widget

10 minutes
Share the link to this page
Copied
  Completed
You need to have access to the item to view this lesson.
One-time Fee
$10
List Price:  $49
You save:  $39
€9.59
List Price:  €47.03
You save:  €37.43
£7.98
List Price:  £39.10
You save:  £31.12
CA$13.98
List Price:  CA$68.51
You save:  CA$54.53
A$15.37
List Price:  A$75.34
You save:  A$59.97
S$13.46
List Price:  S$65.98
You save:  S$52.51
HK$77.84
List Price:  HK$381.43
You save:  HK$303.59
CHF 8.93
List Price:  CHF 43.78
You save:  CHF 34.84
NOK kr110.72
List Price:  NOK kr542.55
You save:  NOK kr431.83
DKK kr71.58
List Price:  DKK kr350.75
You save:  DKK kr279.17
NZ$17.13
List Price:  NZ$83.98
You save:  NZ$66.84
د.إ36.73
List Price:  د.إ179.97
You save:  د.إ143.24
৳1,194.68
List Price:  ৳5,853.94
You save:  ৳4,659.26
₹844.38
List Price:  ₹4,137.47
You save:  ₹3,293.09
RM44.68
List Price:  RM218.93
You save:  RM174.25
₦16,928.83
List Price:  ₦82,951.27
You save:  ₦66,022.44
₨2,778
List Price:  ₨13,612.20
You save:  ₨10,834.20
฿344.66
List Price:  ฿1,688.84
You save:  ฿1,344.17
₺345.52
List Price:  ₺1,693.07
You save:  ₺1,347.54
B$58.01
List Price:  B$284.24
You save:  B$226.23
R181.15
List Price:  R887.65
You save:  R706.49
Лв18.77
List Price:  Лв91.97
You save:  Лв73.20
₩14,045.10
List Price:  ₩68,820.99
You save:  ₩54,775.89
₪37.02
List Price:  ₪181.39
You save:  ₪144.37
₱589.39
List Price:  ₱2,888.01
You save:  ₱2,298.62
¥1,547.70
List Price:  ¥7,583.73
You save:  ¥6,036.03
MX$204.28
List Price:  MX$1,000.99
You save:  MX$796.71
QR36.46
List Price:  QR178.65
You save:  QR142.19
P136.72
List Price:  P669.92
You save:  P533.20
KSh1,294.68
List Price:  KSh6,343.97
You save:  KSh5,049.28
E£496.50
List Price:  E£2,432.85
You save:  E£1,936.35
ብር1,223.88
List Price:  ብር5,997.06
You save:  ብር4,773.17
Kz9,130
List Price:  Kz44,737
You save:  Kz35,607
CLP$9,866.80
List Price:  CLP$48,347.32
You save:  CLP$38,480.52
CN¥72.43
List Price:  CN¥354.90
You save:  CN¥282.47
RD$602.52
List Price:  RD$2,952.36
You save:  RD$2,349.84
DA1,342.75
List Price:  DA6,579.47
You save:  DA5,236.72
FJ$22.75
List Price:  FJ$111.52
You save:  FJ$88.76
Q77.17
List Price:  Q378.14
You save:  Q300.97
GY$2,091.55
List Price:  GY$10,248.64
You save:  GY$8,157.08
ISK kr1,396.80
List Price:  ISK kr6,844.32
You save:  ISK kr5,447.52
DH100.57
List Price:  DH492.81
You save:  DH392.23
L182.21
List Price:  L892.86
You save:  L710.64
ден590.47
List Price:  ден2,893.34
You save:  ден2,302.87
MOP$80.15
List Price:  MOP$392.76
You save:  MOP$312.61
N$181.30
List Price:  N$888.37
You save:  N$707.07
C$367.86
List Price:  C$1,802.55
You save:  C$1,434.68
रु1,350.16
List Price:  रु6,615.78
You save:  रु5,265.62
S/37.90
List Price:  S/185.75
You save:  S/147.84
K40.25
List Price:  K197.23
You save:  K156.98
SAR37.54
List Price:  SAR183.96
You save:  SAR146.42
ZK276.45
List Price:  ZK1,354.63
You save:  ZK1,078.18
L47.78
List Price:  L234.13
You save:  L186.34
Kč243.26
List Price:  Kč1,191.98
You save:  Kč948.72
Ft3,950
List Price:  Ft19,355
You save:  Ft15,405
SEK kr110.36
List Price:  SEK kr540.77
You save:  SEK kr430.41
ARS$10,038.49
List Price:  ARS$49,188.63
You save:  ARS$39,150.14
Bs69.08
List Price:  Bs338.50
You save:  Bs269.41
COP$43,897.49
List Price:  COP$215,097.74
You save:  COP$171,200.24
₡5,092.37
List Price:  ₡24,952.62
You save:  ₡19,860.25
L252.64
List Price:  L1,237.94
You save:  L985.30
₲78,046.70
List Price:  ₲382,428.84
You save:  ₲304,382.14
$U426.22
List Price:  $U2,088.50
You save:  $U1,662.27
zł41.63
List Price:  zł204.01
You save:  zł162.37
Already have an account? Log In

Transcript

All right, welcome back guys. Now let's make our best seller section. So click on this plus and select the structure. We'll select this one, okay. Now there's a data section properties go to Advanced No, go to layouts, section content with full width, columns gap, no gap. Okay?

Now let's bring it down. So, from advanced, go to margin unlink. And from top let's bring it 50 pixels down. Okay. Now, go to widgets and bring the blue l product tab. Pick it up and drag it in this.

All right. Cool. So we have this. Now let's select the product style, product style. to filter by best selling products. columns, let's make it let's make it one.

No, we don't know. Let's make it four. All right now rows one product count. Let's make this how many best selling products that we want to show? Let's show 20 best selling products. Rose one and turn on this product slider thing.

Okay. Yeah, now we have this All right. Let's scroll down here in the slider options. slider Oh no, we don't want it. Okay. slider dots we don't want pause on hover.

Yes. autoplay yes slider items to scroll. Let's make this too. Okay. No, let's make it four. All right.

Slider controller style. We don't have any control up. Okay, now let's move on to style. Here. Let's scroll down. And title alignment center.

Type orthography. Let's adjust the size. I think 15 is good. Okay. And product price. Let's add just a typo.

Graffitis size. I think let's make it 13. All right, and Okay, alignment center. Okay, let's preview this. All right, we need to autoscroll these. So let's go back here and go to content slider options.

Slider autoplay make it on. autoplay speed 3000 Okay, autoplay animation speed 300 milliseconds slider items to scroll for now let's preview this okay now we can drag the products and see all the best selling products All right, now let's go back and update cool let's see your blueprint website whoo 2020 dot crazy design dot space all right and so we have this written bestseller shop all Amman arrow, okay so let's do that and to do that we need to make an intersection inside this section okay so drag this intersection thing here okay we have this click on this intersection Go to structure and select this one. No, select this one, right? We need more space towards the right. Okay, now let's bring the heading and put it here. Let's write best sellers.

Okay, size large an HTML tag h1. Okay, let's go to style text color. Let's make it black. Okay nice now typography I think Robert we made it Roboto Yeah, it's Roboto Alright, now the next thing we have to write shop all so let's bring another intersection below this one okay yeah who later destructure Okay, go back here. Now we have to bring another heading. Let's put it in here and right shop.

All right, HTML tag, it's to size, medium style, text color, black. All right. Now we have to put an arrow below this. So go to elements again, bring in our section, put it below this one, and structure. Okay, go back and search for icon. Alright, pick it up and put it here.

Select the icon. Okay, right arrow. Let's select. Let's select this one and insert or right Now alignment towards the left go to style and I just the size Yeah, and primary color. Let's make it black. Okay now let's just add just all these things I need to increase the size of this bestsellers and make it lower caps.

All right, what else? Actually this thing is not entirely black, it's somewhere here 47 Okay, be sharp all as well. next color. Yeah. And I can as well. Okay.

All right, this looks okay. Now if you want this arrow thing here, you can bring it back. So go to your whatever wl product tab, okay, and slider arrow if you want it, you can turn it on. As you can see we have this arrow and you can adjust the properties from the controller style. But I don't want it here. So let me remove it.

Cool. Now, update. let's preview this. All right. All right, this looks okay, but I think we need more space up here. So let's click here and advanced.

Top 100 and update yeah now it looks much better person this weird thing is happening. I don't know what this is. Okay, let me fix this. This should not happen. Products Taiwan. Okay, I think there is some problem with the Yeah, there is some problem with the plugin.

Actually an update came yesterday so not today itself maybe because of that testing is happening. Okay if this is happening to you as well just update it okay and here right click anywhere Inspect Element, select this arrow thing, okay, now click on this button and it will take you to its properties all right so This is the HTML and the site is the CSS. Alright guys, I found the settings. So actually, I have the CSS file in the resources with the resources file, so go that go there. And in the CSS file, there is a code, which is called. Okay, so there is this thing called product buttons.

So inside is the code, copy this. Okay, go back here, go to Customize. And in here, go to custom CSS and paste the entire thing. All right. Okay, now let's see. Yeah, it's fixed and publish Let me close this.

Alright. Oh, we need to connect this link as well. And I think we will do that in the next video because we first need to create the bestsellers page. Okay, so we'll do that. So we'll do that in the next video. I'll see you there bye

Sign Up

Share

Share with friends, get 20% off
Invite your friends to LearnDesk learning marketplace. For each purchase they make, you get 20% off (upto $10) on your next purchase.