GALLERY / SHOP THE LOOK
A Photo gallery with the ability to break up photos with a ‘text block’. Photo galleries should also be able to be ‘shop by look’ galleries where you can somehow attach metadata to each photograph that points out what clothes the model is wearing. Clicking a photo would take you to the product page with a carousel section at the top of the page showing the 3/4 products the person in the photo is wearing. The point of this “shop the look” feature is to allow a user to click a photo, be taken to a page which has pre-selected the products the person in the photo is wearing, and allows the customer to view each of those items
A. [login to view URL] - How a Photogallery may look, with the ability to add blocks of text within rows/columns.
B. [login to view URL] - Someone has clicked an image from the gallery, and is taken to the product page where a carousel option is at the top showing ‘only’ the products the person was wearing in the picture the user has clicked on.
Home to feature a split design where women occupy the left half of the page and men occupy the right. Each half should be able to accept a background video that auto plays or a background image. Should also have the option of adding a word to appear over the top of this video/image and a space for the client to enter a URL.
Below this top section, screens should be split 50/50, women on left, men on the right. 2 columns of products per side. We would like to be able to choose whether we feature specific products in each of these sections, or whether we insert a Photogallery in each half - again, if it’s a photogallery, it needs to be ‘shop by look’ enabled, as described in section one of this brief. Where clicking on an image takes you to the product page with the products in the image pre-selected in a carousel at the top of the page.
Reference: [login to view URL] - Note that the section of products at the bottom in our mockup shows men/women on both sides - in the real site though, only women should appear on left, and men on the right so there needs to be a way to choose what appears in both sides of the homepage.
A. The top half of the page has three columns. Main product image and second image on the left. Polaroids in the middle (need the ability to choose between 1 and 4 polaroids to be displayed here). Image will be uploaded without the polaroid frame so this needs to be added in code. And on the right, a technology section (with + button callout) and a shipping label.
B. A floating black bar should appear at all responsive breakpoints along the bottom edge of the browser window. It includes colour swatches, sizes, description (with + button callout) and size guide (with + button callout). Add to cart button.
C. 2 rows of instagram images that pulls images from the customers instagram account.
Product Page with no callouts activated: [login to view URL]
Product page with Technology Callout: [login to view URL]
Product page with Description Callout: [login to view URL]
Product page with Sizeguide Callout: [login to view URL]
How this might look on mobile: [login to view URL]
Some not so-obvious requirements:
Technology and shipping label: We want a place in the admin somewhere to upload these globally so that the client doesn’t need to enter this information on every single product. When uploaded globally, the client would then add a product as normal, and there would be two options to select the correct fabric technology, and shipping label.
Instagram: The instagram images would be different on a product-by-product basis. Client needs to designate a hashtag on each product. The instagram images that get pulled and displayed is then based on this hashtag.
Colours: Selecting a colour automatically changes the displayed images in the polaroids and product images section.
All other aspects of this build are pretty straight forward.