🎉 Try Slides With Friends — Zoom Trivia, Live Polls, Icebreakers & more! Check it out →
How to Use the Active Store UI Kit to Create a Layout

How to Use the Active Store UI Kit to Create a Layout

A guide to using premium design resources

If you've ever seen our UI kits and aren't sure how to start using them, then this is a must-read. This guide will show you how easy it is to create stunning ecommerce web layouts in a matter of minutes using the Active Store UI Kit.

How to Create a Homepage Layout

Please note that Active Store UI Kit is a premium resource that can be downloaded by members or via a single purchase.

Step 1

Launch Photoshop and create a new document (Width: 1400 Pixels, Height 2680 Pixels). web store layout tutorial

Step 2

The Active Store UI Kit uses a 12 column grid, 1200 pixels in total with 80 pixel columns and 20 pixel gutters. If your version of Photoshop has it, you can use the View > New Guide Layout.. function to create a matching grid. Alternatively, you can duplicate one of the Active Store UI Kit documents, open it in Photoshop and delete all of the contents which will leave you with just the grid and a blank document. web store layout tutorial

Step 3

Create a new Fill Layer (Layer > New Fill Layer > Solid Color) and set the fill color to #f6f6f6 for a very subtle light grey background. web store layout tutorial

Step 4

Open 1 - Navigation & Promo Blocks.psd from the Active Store UI Kit and copy the 'Navigation' group into your blank document. Here's how to do that: How to Duplicate Groups and Layers Between Documents in Photoshop. web store layout tutorial

Step 5

The 'Navigation' group includes a hover dropdown state which we can hide for now. To do this set the fill color for the 'Women' text layer and associated 'Arrow' shape layer to #444444. Then turn off visibility for the 'Dropdown' group layer and 'Active State' shape layers. web store layout tutorial

Step 6

Let's also make the navigation menu full width. Move the whole 'Navigation' group to the top of the canvas, and then use the Direct Selection Tool to select the top and bottom vector points on either side of the 'Background' shape layer and drag them to the edges of the document. The image below will help explain this. web store layout tutorial

Step 7

Open the 1 - Navigation & Promo Blocks.psd file again and this time copy over the 'Banner' group. Place it below the 'Navigation' group in the Layers panel. web store layout tutorial

Step 8

Let's also make the banner full width, use the Direct Selection Tool to select the top and bottom vector points on either side of the 'Background' shape layer and drag them to the edges of the document. web store layout tutorial

Step 9

We now have a bit more space for the arrows on the banner, so we can Nudge them 70 pixels out towards the edges of the document. web store layout tutorial

Step 10

Open 2 - Catalog.psd from the Active Store UI Kit and copy the first 'Featured Products' group into your document. Place it in the center of the document, just below the banner. web store layout tutorial

Step 11

Duplicate the 'Featured Products' group and place the duplicated copy directly below the first instance. web store layout tutorial

Step 12

Update the title to say 'New Additions' instead and hide the shape layer 'Rectangle 1' to remove the white background and create a distinction between this section and the Featured Products section. web store layout tutorial

Step 13

Open the 1 - Navigation & Promo Blocks.psd file again and this time copy over the 'Newsletter' and 'Footer' groups. Place them below the other group layers and align the bottom of the footer with the bottom of the document canvas. web store layout tutorial

Step 14

Use the Direct Selection Tool to select the top and bottom vector points on either side of the 'Background' shape layer (in the 'Footer' group) and drag them to the edges of the document. web store layout tutorial

Homepage Layout Result

You should now have a layout that looks something like this. web store layout tutorial

How to Create a Catalog Page Layout

Step 15

Save the homepage layout as a PSD and then Save As.. and choose a new name for the catalog layout. Hide or delete the 'Banner', 'Featured Products' and 'New Additions' group layers. web store layout tutorial

Step 16

Open 2 - Catalog.psd from the Active Store UI Kit and copy the first 'New Additions' group into your document. Place it in the center of the document, just below the navigation menu. You can update the text to say 'Browse Products' or something similar. web store layout tutorial

Step 17

Move the fourth 'Product' group layer and place it below the others to start a new row of products. web store layout tutorial

Step 18

Duplicate the first and second 'Product' group layers and also move them to the new row. web store layout tutorial

Step 19

Repeat this process until you have 4 rows of products with 3 columns each. web store layout tutorial

Step 20

We now have space to add in a sidebar with filters. However, I think it is more intuitive to have the sidebar on the left, so lets move the products over to the right instead. Select the whole 'Products' group and drag or nudge it over to the other side. web store layout tutorial

Step 21

Open 2 - Catalog.psd and copy over the modules that you want to have in the sidebar. You can create a new group layer called 'Sidebar' to keep them organised. I recommend having the 'Filters' module first. web store layout tutorial

Step 22

Next I copied over the second 'Categories' module: web store layout tutorial

Step 23

I also copied 'Price Range', 'Sizes' and 'Recommended Products' module into the sidebar. You can choose whichever modules you would like to use. Keep 20 pixels of vertical spacing between each module web store layout tutorial

Step 24

The catalog layout is now complete, but we can also add a product card which would appear when clicking a product image or name. Create a new Fill Layer (Layer > New Fill Layer > Solid Color) called 'Overlay'. web store layout tutorial

Step 25

Set the fill color of the 'Overlay' layer to black and change the Opacity to 80%. This gives the effect of fading the background to black. web store layout tutorial

Step 26

Open 3 - Product Detail.psd and select one of the Product Detail layers to use. Copy your chosen layout over and align it to the center of the document canvas. web store layout tutorial web store layout tutorial

Conclusion

These are just a few of the many possibilities you have at your fingertips with the Active Store UI Kit. Every single UI element included is completely editable too so it couldn't be easier to completely change the look of your design. I hope you enjoyed following this tutorial, and have fun creating online store design concepts with the Active Store UI Kit!

Comments

X

You've successfully logged in!