Bricks to
Clicks

We are facing an E Commerce Revolution. Stakeholders who maintain e commerce have to pivot to digital sales and strategies. Additionally, stakeholders have to look at how they are achieving these goals with a new need for unknown remote distributed work force requirements. Teams need to gear up with new tools to manage change. 

Escalation of online commerce increases the need for fast easy to use tools and for added methods to ensure security and privacy. New workflows offer improved security and ease of use.

Rapid development of tools and methods has outpaced the resources of Enterprise organizations. Ability to facilitate design that happens simultaneous to development has become real time. This change has come unexpectedly. Support tools were designed for in office use. The expectation to login from home, does not accommodate resources that need to be securely accessible from many remote access and security points.  A previous asset management system, designed for print production worked fine, in prior workforce architecture. Access and usage radically changes, when the workforce logins in from home, independent from real time input, of colleagues, legal, and content contributors. File Transfer, communication, approvals look a lot different, when the face to face interaction of office is no longer a possibility.

A new look at Asset Management, Collaboration, Design and execution is required. Meeting the needs of a new workforce is an opportunity to embrace new tools.

Commerce platforms like Shopify can be used 2 ways. As a stand alone, or as a feed. Open source tools/CMS platforms can be used to data model and as asset management. Familiar CMS platforms like WordPress, Contentful can have extended use, for Asset Management and Entitlement.

Tools like Vue Storefront uses modular tools in front of back end services. The addition of VUE offers clean management components. Organization of these components creates opportunity for increased strategy, collaboration, and design. Webflow gives you the ability to model sample API data in addition to building responsive atomic design patterns. Real time, UI can be built from XD, Figma, Invision concepts. Deployment can push to simultaneous web, media, social and point of purchase.

Remote digital design includes responsive design, merchandising with CGI, deployment and provisioning for mobile and for point of purchase that synchronizes to remote shoppers.

If you don’t have flexible tools, that can iterate rapidly, your remote teams, 360 strategies and ability to design will suffer, from rigid dependency on legacy workflows.

It is time, to clean house, and lose using Dropbox as your asset management system, communication and record keeping via emails, design by committee strategies.

Content, Assets and Data needs to be revised and new tools need to be introduced. The opportunity and the business need has never been greater.

Key Principles

  • Webflow / Udesly Export Generates a Slate Theme.
  • Webflow / Udesly can live update WordPress Theme.
  • Static Exports can CDN LESS/SASS managed custom themes outside of proprietary UI/UX.
  • Webflow Generates Vanilla JS/CSS that can be used in any development Template, including Woo Commerce, Drupal, Salesforce Commerce, Magento, Proprietary Builds etc.
  • Shopify Standard (Shopify Theme used inside of Shopify) can be extended outside of Shopify using Storefront API with standalone app development environments: WordPress, React, VUE, Svelte.
  • The same principals can be applied to any ecommerce: Salesforce Commerce, Magento
  • Any MVC architecture can loop through Product Feed Collections with any type, custom fields and tags
  • Headless APIs and Legacy Data (including SAP) can be supported/integrated with real time, moderation and updates. This is a critical component of GDPR.
  • 360 Product Development Life Cycles, can integrate to Web, Native Mobile, Native Point of Sale, AR/VR
  • Client can use plugins and WYSWYG tools provided by Shopify ecosystem AND have the flexibility of outside of the box Shopify workflow.
  • Open Source tools / flexible scaling provide additional security with real time backup and duplication.
  • Shopify, WordPress, VUE Storefront, are not mutually exclusive. Use as standalone, or use the API architecture to push content bi directionally.
  • Tools like Unity UI (UI Builder is essentially the same tool as Webflow) provide a “vanilla” Canvas/Viewport that will mount/animate any set of code.
  • Unity has Omni Channel/Device Provisioning that can export to Native IOS, Android, App, Desktop Application AND responsive Web/Web GL workflows.
  • C# utilizes the same principles of Flash/Action Script, CSS, SVG and XML.
  • SVG and Unity (Illustrator based splines can be used to model Symbol based workflows, with reusable code components).
  • Illustrator based Artboards are the core of Prototyping Tools: Figma, XD, Sketch, InVision. Export to Unity and utilize Distributed / Entitlement Project Sharing without fees.

360 Product Development

Omni Channel Approach

Use all tools to extend free and easy to use product dev.

  • Use Webflow as an easy WYSWYG (“Photoshop for API Prototyper”) concept development platform
  • API data, can be securely real time synced using AirTable/Google Sheets/Zapier.
  • Export to WordPress  Shopify static VUE/Svelte. Insert your proprietary E Commerce, ERP, CRM, Marketing ecosystem.
  • Use APIs from any open source tool: WordPress, Shopify Feed, Mongo, Firebase, Mailchimp, YouTube, Google Maps, Facebook/Instagram Segmentation
  • GDPR compliant Retargeting Notifications user journeys can be mapped using secure tools and entitlement.
  • Custom Build Apps, Personalization, and user journeys using robust tools with an enormous development community.
  • Free to use/scale PIM tools: Contentful, Sapper, Sanity.io, can live feed front end and E Commerce support systems.

 

Vocabulary

Use of free to use tools: GIT/Netlify/Mongo/Static Webflow Code, is not an either or choice. They are open source and free. The ability to use without capital cost increases security and enables Design and Marketing teams with real time tools that extend to 360 Marketing, Search, API ideation.

Headless Tools: Vue Storefront, Commerce JS. Are tools that can be agnostically put in front of any e commerce system.

Webflow Prototyping. Webflow is a WYSWYG responsive prototyping system, that exports static code. Code can be used in snippets in any agnostic CMS, CRM, Native App development lifecycle, component build system.

Netlify/Heroku/Mongo are open source continuous integration tools. Netlify offers publishing from real time, GIT commits. Functions, Entitlement, Forms, and a free to use CMS can be used in addition to Cloud Services: AWS/Google Cloud/Azure. Cloud services are extremely expensive and costs escalate with Global Scaling. Use of management tools reduces size/bandwidth fees in orders of magnitude by millions, for Enterprise Organizations. All of them offer robust free tier usage, that add additional security and Global Distribution Tools for real time automation.

Storyblok/Contentful/Sanity/Sapper/Prismic offer headless PIM/API built live feeds for real time data and product fetching, using modern API strategies: VUE, React, Svelte. They offer robust free to use, and real time scaling for application, globalization, personalization optimal use.

CLI / Node based product development. Installable packages are prepared to be accessed via Terminal to set up 1 click full stack application development tools. These packages are available for common libraries (Bootstrap) and for newer module based UI libraries: Ant, UI Kit, Bulma, Tailwind.

GraphQL is a RESTful data stream of “typed” live loading content. It can be styled and offered using robust GraphQL/Custom Field Management Tools. Shopify and WordPress have big GraphQL architectures, that are natively supported in core functionality. You don’t have to use either Shopify or WordPress, to access the GraphQL feed.

 

 

Vue Storefront is a Design Pattern that can be used in front of any E Commerce Backend (Shopify, Woo Commerce, Magento, Custom/Proprietary). WordPress and Drupal are more familiar CMS front end management strategies that can push to and receive feeds from e commerce backends: Shopify, Magento, Snipcart. Headless e commerce can be used as stand alone, or folded into tools that can be easily utilized by Marketing, Design, and Social Media teams.

Vue Storefront uses an Atomic Design Library that is modular/BEM named. Tailwind.

Vue Storefront has UX modules that consist of the core usability functions ie: Add to Cart, Wishlist, Catalog.

Unlike Shopify, Vue Storefront, let’s you establish custom endpoints for PIM feed, and for Assets. Assets can use easy to use endpoints like WordPress, Webflow, Shopify, Contentful, Sapper.

Gridsome is an already linked Shopify Starter, with Bulma UI Kit, in CLI package.

Typing and APIs can be built using flexible / free data and asset modeling.

WordPress has a React based Blocks system and a robust GraphQL architecture, that is also supported to and from Shopify.

Nuxt is a framework that wraps Vue. Normalized workflow tools like: Routing, Middleware, State Management, API fetch methods, Server Side, Client Side build management are automatically configured. Run Time Script/Component Mounting Config management can be simply managed using pre wired full stack development modules.

A rich plugin system that can integrate into headless / component build strategies and GRAPHQL, feed, that can be CMS, PIM, Blog, ERP sourced, can be set up with .env secure keyed workflows.

Universal Applications, code splitting, and content development can be managed using easy to use tools and “free” publishing environments with secure SSL, PCI compliant gates and guardrails.

Programatic Meta Tags at context optimizes SEO/Search/Index with real time compile.

Static serve with (free tier) Netlify/AWS/Mongo. Or embed snippets to Shopify/Magento/Wordpress/Woo Commerce.

Use as stand alone, or on top of legacy Angular/Bootstrap 3, React Based modeling native to WordPress/Shopify stack workflows.

 

Shopify Restrictions

 

Issues for Shopify/Slate Development Workflow

  • Shopify restricts object/functions. In order to introduce new functions into workflow, developers need to go into core node architecture. (KOA/Entitlement, Node, Next CLI workflow is very complex. Deep knowledge of GraphQL/React/DOM injection is required)
  • Background Images do not natively have ALT/Accessibility built into the themes and the native digital rasterization doesn’t accommodate progressive enhancement like Source Set Optimization.
  • Shopify image compression automatically renders default, to baked in ‘large’, ‘medium’, ‘small’  “traditional Shopify” optimization. The image size needs to be manually set in theme.
  • Many older Shopify Themes are dependent on Bootstrap 3, that will break when upgraded to Bootstrap 4. Vertical centering is extremely difficult to do in legacy library.
  • JQuery/Popper/GSAP are sample libraries that need to be added and maintained with theme and template. UI strategies: like Progressive, enhancement, programatic grid with lazy loading need to be added to design strategy. JS and CSS bundling gets complex. 
  • Media is very difficult to integrate without global component/css rules that manage 16/9 ratio of video platforms. Incoporation of Media with responsive UI, requires additional Global CSS.

Creating a clean image with dynamic ALT Tags can be accomplished, using 2 methods. Image rendering, and attaching ALT tags to dynamic background image can be done in a few ways.

Webflow/Shopify Template Engines and UI Kit can be combined to facilitate snippet creation that can be reused in Slate Theme customization.

Shopify can be used as standalone, or with identical UI, as the storefront. 

Standard Shopify

Plugin Dependency

Information/Data gathered from plugins are not available for Shopify Storefront API

Any interactions/information provided by standard plugin scripts, will not be available for export/feed. Tools to manage this can utilize Metafields / Shopify Custom Fields tools, like Air Power, Metafields Plugins.

This includes bundling, filter, tag management, that is dependent on Standard Shopify Build Tools/ecosystem.

Data from plugins are not available in headless Shopify API porting.

PIM/Asset Management

Dynamic Content Management Feeds

There is a plethora of no code no cost SECURE, API accessible ways to handle data typing, and strategy. Utilize GraphQL, that is built into cost and speed effective ways to ideate product development. This is extremely advantageous to remote teams for non coders who need to supply content for developers and project execution.

Data dynamically renders and scales on demand Globally, with conditional location, personalization, language logic built into device, platform agnostic presentation serving.

Flexible Asset Managment Strategies support GLOBALLY Accessible, free to scale Data Modeling, Image Rendering with full 360 Elastic Searchable Image Tags, can be used to serve Programatic Render Feeds in GraphQL and in JSON fetch methods.

Automation with SSL security can be applied to assets. Pixels with event managed triggers can fold into Facebook/Google Pixel Tracking and Segmentation with cart and email UTM parameters.

Webflow / Udesly

Prototype with Dynamic API Modeling

Prototype using API friendly Responsive tools. Vanilla CSS/JS exports can be folded into any component based Atomic Design strategy/system.

Webflow and API let’s you Prototype, and generate Atomic Design Patterns that can be used with anywhere.

Easy to use CLEAN JS/CSS can be base 64 into Enterprise managed secure head configuration.

Tools like Udesly can 1 click convert code to WordPress, Shopify, 11ty, Ghost/Ruby, Native Shopify Liquid/Spree – Ruby IA. Continuous integration tools (Netlify/AWS Lamdas) can auto update code from a centralized secure repository that is client managed CDN. Static Webflow export can compile to Ruby workflow: Liquid/Jekyll. Snippets/Blocks in React infrastructure of WordPress and Shopify can be built into the core themes for both.

This CDN is not vulnerable to Cloudflare / Shopify / Salesforce fees or system outages. It can be globally distributed and monitored, real time.

Shopify Theme Helpers

//SLIDE WITH DYNAMIC BACKGROUND IMAGE / ALT TAG

<div class="container-list">
 <div class="div-block-179">
	{% for image in product.images %}
	   <img src="{{ image.src | product_img_url: 'large' }}" 
	     alt="{{ product.title }}" class="image-38" 
	     data-product-image-id="{{ forloop.index }}"
	  >
	{% endfor %}
 </div>
</div>
//sale button
<div class="single-product-info">
   {% if product.compare_at_price > product.price %}
         <div class="on-sale-badge">
           <div class="on-sale-label">
             {{ 'product.DIV_9' | t }}
           </div>
         </div>
   {% endif %} 
</div>

//Product Title
<h1 class="wrapper--text__title">{{ product.title }}</h1>


//Price
<div class="link__text-2 blog">
    {% if product.price_varies %}
    {{ product.price_min | money }} - {{ product.price_max | money }}
    {% else %}
    {{ product.price | money }}{% endif %}
</div>

//Description
<p class="_00product">{{ product.description }}</p>
            

UI KIT

WHY UI KIT

This is a modular library, that can be used in addition to UI libraries and custom styles.

This library can be used alone, or in addition to a existing/legacy system.

It depends on a BEM naming convention that will not conflict with Global Naming or architecture.

Styles can side load data, making it particularly adaptive for API and data fetching IAs.

If you want to use a Vertical/Ratio dependent component like Video 16/9 responsively, you will need normalized Atomic CSS provided by either inline, or CLI managed UI Kit components.

YooThemes, can be used in WordPress.

UIKit, can be used with Vue, (VUKIT), React, Svelte. For 360 product developement.

Declarative UI Kit can be brought into Standard Shopify Custom Theming, to extend Liquid Global and Scoped snippets. UI Kit can be placed outside of legacy “as is” Bootstrap 3 / Angular 1/ JQuery, and accommodate modern Grid/Flex/data and schema to semantic elements like Navigation, Sliders, Footers, Sidebars.

UI KIT Node

Use Modular UI Kit Themes from CLI Install. @import into VUE/React LESS/SASS variables. 

Bring in Shopify Storefront Feed using Axios/JSON Feed.

Feed can be “PIM” managed in Storyblok, Contentful, Sanity, Sapper.

npm install vue
npm install vuikit
npm install @vuikit/icons
npm install @vuikit/theme
// You may as well lower the bundle size by
// cherry-picking only the resources you need
import Vue from 'vue'
import { Card } from 'vuikit/lib/card'
import { Button, ButtonLink } from 'vuikit/lib/button'

// register globally
Vue.component('Card', Card)

export default {
  // or locally
  components: {
    VkButton: Button,
    VkButtonLink: ButtonLink
  },
  template: `<vk-card>
    <vk-button>...</vk-button>
  </vk-card>`
}

Side Load Data

UI Kit modularly modifies data. You can side load any number of modules and directives. JQuery is eliminated, and makes the dependency requirement for a lot of UI, simpler.

Eliminate JQuery

$('.my-element').on('click', () => {
    $(this).addClass('active');
});

UI Kit Method

const { $, addClass, on } = UIkit.util;
const element = $('.my-element');

on(element, 'click', () => {
    addClass(element, ‘active’);
});

Component usage

Use “vanilla” JS modifiers without JQuery. Paired with React / VUE, extends global Atomic Design Patterns. Data can be typed information (that can be filtered) or inline scoped design updates.

You can use UIkit components by adding uk-* or data-uk-* attributes to your HTML elements without writing a single line of JavaScript. This is UIkit’s best practice of using its components and should always be considered first.

Utilization of design pattern (VUE) v-for looping with UI Pattern (UI Kit) that loads dynamic data, is ideal for simplified UI / Design Strategy.  This strategy is highly maintainable.

<div uk-sticky="offset: 50;"></div>

<div data-uk-sticky="offset: 50;"></div>

Flex/Grid

UK-FLEX UK-GRID

Use Flex and Grid to wrap legacy divs for themes that do not have flex/grid (Bootstrap 3).

Flex/Grid can nest within 12 col functionality to expand rigid column system to a percentage based width design.

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
<div class="uk-grid-small uk-child-width-1-4@s uk-flex-center uk-text-center" uk-grid>
    <div>
        <div class="uk-card uk-card-default uk-card-body">Item 1</div>
    </div>
    <div class="uk-flex-last">
        <div class="uk-card uk-card-secondary uk-card-body">Item 2</div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-card-body">Item 3</div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-card-body">Item 4</div>
    </div>
    <div class="uk-flex-first">
        <div class="uk-card uk-card-primary uk-card-body">Item 5</div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-card-body">Item 6</div>
    </div>
</div>

WITH PARRALLAX
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
<div class="uk-child-width-1-2@s uk-child-width-1-3@m uk-child-width-1-4@l uk-text-center" uk-grid="parallax: 150">
    <div>
        <div class="uk-card uk-card-default uk-card-body">Item</div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-card-body">Item</div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-card-body">Item</div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-card-body">Item</div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-card-body">Item</div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-card-body">Item</div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-card-body">Item</div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-card-body">Item</div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-card-body">Item</div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-card-body">Item</div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-card-body">Item</div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-card-body">Item</div>
    </div>
</div>

Slide Show

Dynamic slide show

Use slider/slide show components to load dynamic / tagged images.

Statically load, or Fetch from Dynamic/GraphQL API/image management. 

  • This is your searchable tag

    1

  • Searchable Tag 2

    2

  • Searchable Tag 3

    3

  • Searchable Tag 4

    4

  • Searchable Tag 5

    5

  • Searchable Tag 6

    6

  • Searchable Tag 7

    7

  • Searchable Tag 8

    8

  • Searchable Tag 9

    9

  • Searchable Tag 10

    10

<div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1" uk-slider>

    <ul class="uk-slider-items uk-child-width-1-2 uk-child-width-1-3@s uk-child-width-1-4@m">
        
//Use static components or dynamic load from API/PIM
        <li>
            <img src="https://www.yslbeta.com/article/wp-content/uploads/2020/09/Free-People-Well-Traveled-241906ce.jpeg" alt="This is your searchable tag">
            <div class="uk-position-center uk-panel"><h1>1</h1></div>
        </li>
        <li>
            <img src="https://www.yslbeta.com/article/wp-content/uploads/2020/09/tshirt.jpg" alt="Searchable Tag 2">
            <div class="uk-position-center uk-panel"><h1>2</h1></div>
        </li>
        <li>
            <img src="https://www.yslbeta.com/article/wp-content/uploads/2020/09/cropjeanshorts.jpg" alt="Searchable Tag 3">
            <div class="uk-position-center uk-panel"><h1>3</h1></div>
        </li>
        <li>
            <img src="https://www.yslbeta.com/article/wp-content/uploads/2020/09/lonestarjacket.jpg" alt="Searchable Tag 4">
            <div class="uk-position-center uk-panel"><h1>4</h1></div>
        </li>
        <li>
            <img src="https://www.yslbeta.com/article/wp-content/uploads/2020/09/Free-People-Well-Traveled-241906ce.jpeg" alt="Searchable Tag 5">
            <div class="uk-position-center uk-panel"><h1>5</h1></div>
        </li>
        <li>
            <img src="https://www.yslbeta.com/article/wp-content/uploads/2020/09/cropjeanshorts.jpg" alt="Searchable Tag 6">
            <div class="uk-position-center uk-panel"><h1>6</h1></div>
        </li>
        <li>
            <img src="https://www.yslbeta.com/article/wp-content/uploads/2020/09/lonestarjacket.jpg" alt="Searchable Tag 7">
            <div class="uk-position-center uk-panel"><h1>7</h1></div>
        </li>
        <li>
            <img src="https://www.yslbeta.com/article/wp-content/uploads/2020/09/Free-People-Well-Traveled-241906ce.jpeg" alt="Searchable Tag 8">
            <div class="uk-position-center uk-panel"><h1>8</h1></div>
        </li>
        <li>
            <img src="https://www.yslbeta.com/article/wp-content/uploads/2020/09/cropjeanshorts.jpg" alt="Searchable Tag 9">
            <div class="uk-position-center uk-panel"><h1>9</h1></div>
        </li>
        <li>
            <img src="https://www.yslbeta.com/article/wp-content/uploads/2020/09/tshirt.jpg" alt="Searchable Tag 10">
            <div class="uk-position-center uk-panel"><h1>10</h1></div>
        </li>
    </ul>

    <a class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slider-item="previous"></a>
    <a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slider-item="next"></a>

</div>

WITH PARRALLAX
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
<div class="uk-child-width-1-2@s uk-child-width-1-3@m uk-child-width-1-4@l uk-text-center" uk-grid="parallax: 150">
    <div>
        <div class="uk-card uk-card-default uk-card-body">Item</div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-card-body">Item</div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-card-body">Item</div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-card-body">Item</div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-card-body">Item</div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-card-body">Item</div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-card-body">Item</div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-card-body">Item</div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-card-body">Item</div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-card-body">Item</div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-card-body">Item</div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-card-body">Item</div>
    </div>
</div>

Dynamic Data

 

using storefront api in WordPress

Even, if you don’t use WordPress, in app build, use this tool to block out pages and VUE enabled Data / Schema. Custom Fields, Taxonomies, Search and SEO enrichment. Utilize live feed/data sourcing to “wireframe” live application methodology.

Fetch Storefront API, for Real Time Product/Customer Data. This can be outside of Shopify in CMS or a Native App.

This template uses WordPress embedded VUE/UI KIT. You can use snippet strategy with React enabled WordPress Blocks.

Modules &
Components

 

Drag and Drop Components to prototype “wireframe” live Dynamic Data.

Components and Modules can be duplicated in Native Vue/Nuxt/API Collections IA.

This tool can be accessed by non technical designer, marketing team.

Images

SOURCE SET

Source Set Image directive, resizes frame and crop of image, to adjust for media break of browser or device. Themeing can be made dynamic, with 3 size dynamic image loading. Desktop, Tablet, Mobile optimization can also dynamically upload position / cropping restrictions.

<img data-src="https://www.yslbeta.com/article/wp-content/uploads/2020/09/Free-People-Well-Traveled-241906ce.jpeg?fit=crop&w=650&h=433&q=80"
     data-srcset="https://www.yslbeta.com/article/wp-content/uploads/2020/09/Free-People-Well-Traveled-241906ce.jpeg?fit=crop&w=650&h=433&q=80 650w,
                  https://www.yslbeta.com/article/wp-content/uploads/2020/09/Free-People-Well-Traveled-241906ce.jpeg?fit=crop&w=1300&h=866&q=80 1300w"
     sizes="(min-width: 650px) 650px, 100vw" width="650" height="433" alt="" uk-img>

DYNAMIC BACKGROUND IMAGE WITH ACCESSIBILITY

Background Image

<div>
    <div class="uk-height-viewport uk-flex uk-flex-center uk-flex-middle uk-background-cover uk-light"
     data-src="https://www.yslbeta.com/article/wp-content/uploads/2020/09/Free-People-Well-Traveled-241906ce.jpeg?fit=crop&w=650&h=650&q=80"
     data-srcset="https://www.yslbeta.com/article/wp-content/uploads/2020/09/Free-People-Well-Traveled-241906ce.jpeg?fit=crop&w=650&h=650&q=80 650w,
                  https://www.yslbeta.com/article/wp-content/uploads/2020/09/Free-People-Well-Traveled-241906ce.jpeg?fit=crop&w=1300&h=866&q=80 1300w"
     data-sizes="(min-width: 650px) 650px, 100vw" uk-img  alt="This is your 140 char search" > 
    <h1>Background Image</h1>
</div>
</div>
Shopify Liquid

Use UI Kit in Standard Shopify Slate Theme.

Use UI Kit Background Image with dynamic Shopify Liquid Tags.

UI Kit and VUE can be used in and out of  Slate Based Theme and plugin system.



<div>
   <div class="uk-height-viewport uk-flex uk-flex-center uk-flex-middle uk-background-cover uk-light"
     data-src="{{ image.src | product_img_url: 'large' }}?fit=crop&w=650&h=650&q=80"
     data-srcset="{{ image.src | product_img_url: 'large' }}?fit=crop&w=650&h=650&q=80 650w,
                  {{ image.src | product_img_url: 'large' }}?fit=crop&w=1300&h=866&q=80 1300w"
     data-sizes="(min-width: 650px) 650px, 100vw" uk-img  alt="{{ product.title }}" > 
    <h1>{{ product.title }}</h1>
  </div>
</div>



Schema

Customer Editable Fields
Shopify

 

Client editable regions

Shopify has a schema markup that let’s the client update images, tags, text in styled template setup.

Client Stakeholder does not need to know how to edit Slate Code or inject any custom JS, to update publish.

<img src="{{ section.settings.top_hero | img_url: '2500x800' }}" width="2500" height="800" alt="{{ section.settings.top_hero.alt }}" class="image-43">
      <div class="uk-grid">
        <div class="uk-container">
          <div>
            <div>
              <h1 class="uk-heading-small">{{ section.settings.heading_text }}</h1>
            </div>
          </div>
        </div>
      </div>
    

{% schema %}
{
  "name": "Maintop",
  "class": "maintop",
  "tag": "div",
  "settings": [
    {
      "type": "text",
      "id": "heading_text",
      "label": "Heading Text",
      "default": "Heading"
    },
    {
      "type": "image_picker",
      "id": "top_hero",
      "label": "Top Hero"
    }
  ]
}
{% endschema %}

Deployment
Real Time Data

All of your UI, Data, Customer Tagging, can be securely and flexibly stored in list management tools like: Excel, Google Sheets, Air Table. These sheets serve as backup, collaboration, scheduling tools.

These sheets can also drive custom Functions and Scripts, that can be securely stored along with Assets, Media, Documents and Timelime enabled event tools.

The vulnerability of a single point of failure master database is reduced.

Distributed UI, Data, Customer Tagging, can be managed with conversion tools and can scale real time. This opportunity impacts ability to design, personalize and globalize with tremendous ease. 

360 Product Development has never been easier to execute. Workflow and tooling has also iterated from extremely expensive and time consuming to “free” and immediate.

You can choose to use your code in as is workflows: WordPress, Shopify, Drupal, and or duplicate UI/custom script in Native, App, IOT/Point of Sale Mirroring.

Social Media and Google/Amazon Merchant Accounts can also utilize duplicate code to style and define/UI/UX components.

Internal webhooks, in Shopify Plus, Klaviyo, Zapier and Microsoft Flows, can sync data and UI’s real time, with moderation, reporting and event triggers.

  • Publish to GIT (securely managed by private team)
  • GIT is continuously moderated
  • GIT can be rolled back
  • Entitlement is secure
  • Link to Continuous Deployment Netlify with GIT watch capabilities
  • Generate any AWS backed functions using Netlify LAMBDAS (Netlify is free-1 click publish tools are available to non technical team)
  • Shopify restricts Shopify only Functions/Objects
  • This is ideal for a secure distributed remote team (access to core AWS/Google Cloud/Azure is never accessed)
  • GIT can be used in Native Distribution Hashable Architectures that can be folded into Local/IOT – Machine IP endpoints.
  • Critical API keys and private TLS tokens are saved in cloaked .env file management in Netlify secure workflow
  • Housing Assets in free to use free to scale GIT management system, never fails and saves money with ability to Globally distribute fault failovers and services. Critical for Globalization.

Resources


Webflow

WYSWYG responsive component builder. Vanilla JS/CSS export. 

MVC Type/Collection Builder with style builder.

Live API fetch and typing.

Static UI development with full responsive code.

WEBFLOW


Udesly Converters

Webflow to CMS/Continuous Integration/Ruby workflows: WordPress/Woo Commerce, Shopify, Netlify, Ghost. Shopify, ACF, Google Sheets Widgets.


UI KIT

Component based, design system. System includes responsive flex, grid tools. Animation and Media with native aspect ratio components.

UI Kit can be used as a Node Generated Package, Inline, Static and within Native Product Development.


Yoo Themes

WordPress Page Builder that is API/GraphQL friendly. With Dynamic Data Sources, ACF Taxonomy and GraphQL Feed Management.

GraphQL can be a bi directional Shopify Feed.

WordPress is open source CMS. Will scale infinitely / Globally without Capital Cost.

Can be used to scale Personalization Programs.

Yoo Theme


Shopify Slate

Shopify Custom Themes. CLI supported custom theme workflow. Works with Udesly Converter, output. Identical Core File System.

Use Plugins and as is API and Webhooks. (Zapier, Klaviyo, Mailchimp, Bundlers)

SHOPIFY SLATE


Shopify Node

CLI/Command Line Shopify Customization Workflow.

Shopify Node based customization. React/Next Design Pattern.

SHOPIFY NODE

STOREFRONT API


Nuxt

Prebuilt VUE JS framework. Includes configuration management, routers, data fetching, looping, stage, prod, dev deploy and publishing methods. IA is intuitive and easy to manage.

Meta module is built in. SEO / Search is a core feature.

Similar to React, with React Helmut, Context, Router, Stage Prod Dev, Config System in a single package install. Plugin in system can be managed with built in unit testing/scripts.


Nuxt Content


Storybloks

Modular, drag and drop components, that can be set up with schema, and integrate into React/VUE/data stream dependent Build/Content Systems

© 2020 All rights reserved. Powered by Yoonsun Lee.