Code Monkey home page Code Monkey logo

drews-dev-shop's Introduction

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

screenshot-homepage

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

homepage-customizations-1

homepage-customizations-2

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

collection-customizations-1

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

product-customizations-1 product-customizations-2 product-customizations-3

Cart Page

Customizations on the cart page:

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

cart-customizations-1

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.

designers-page-1

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

designers-page-2

drews-dev-shop's People

Contributors

gulrugar avatar shopify[bot] avatar

Stargazers

 avatar  avatar  avatar

Watchers

 avatar

drews-dev-shop's Issues

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.