Drew's Dev Shop

Homepage | Collection Page | Product Page | Cart Page | MetaObject - Designer Pages

Visit Drew's Dev Shop =>

Store Password:

devdrew

Drew's Dev Shop is a customized version of Shopify's theme Dawn and utilizes popular apps. This store also features additional pages generated from MetaObjects to provide additional ways for merchants to customize their stores. This store's product and banner images are generated by the A.I. model DALL-E and are composited and edited with Photoshop.

Installed Apps:

1. Search & Discovery
2. Bundler
3. Rivo Product Reviews App

Store Preview

Home page

Customizations on the home page:

1. Header Menu Item's with Submenus will open on hover
2. Hero Banner uses a Custom CSS block to give the text and button one of the shop's gradient colors
3. Footer has collapsing menus on mobile

Collection Page

Customizations on the collection page:

1. Navigation Breadcrumbs (also on the product page)
2. Filter options for color show color swatches instead of text
3. Products with color variants display all the variants as separate product cards

Product Page

Customizations on the product page:

1. Navigation Breadcrumbs
2. Swatches for color variants instead of text
3. Trust Badges under Add To Cart button
4. Collapsible row using data from a MetaObject
5. Complimentary products block with the Search & Discovery App
6. Product bundles with the Bundler App
7. Product reviews with the Rivo Product Reviews App

Cart Page

Customizations on the cart page:

1. Trust Badges under Checkout button
2. Shipping details under Checkout button

MetaObject Designer Pages

Pages about the stores product Designers. These pages are a proof of concept for generating new pages quickly and easily by just creating a new MetaObject and associating it with a new page through a MetaField reference.

In this example a MetaObject Definition is created called Designer with some associated information:

1. Name
2. Short Description
3. Image

Three instances of this definition are created and a page called Designers is associated with a custom template that loops through all the Designer instances and outputs HTML for each.

A page is also created for each instance and associated with another custom template to create individual Designer pages.