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.
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 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.
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.
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.
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.
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.
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.
//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>
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.
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>`
}
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’);
});
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>
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.
<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>
<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>
Use slider/slide show components to load dynamic / tagged images.
Statically load, or Fetch from Dynamic/GraphQL API/image management.
<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>
<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>
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.
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.
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>
<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>
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>
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 %}
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 to CMS/Continuous Integration/Ruby workflows: WordPress/Woo Commerce, Shopify, Netlify, Ghost. Shopify, ACF, Google Sheets Widgets.
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.
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)
CLI/Command Line Shopify Customization Workflow.
Shopify Node based customization. React/Next Design Pattern.
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.
Modular, drag and drop components, that can be set up with schema, and integrate into React/VUE/data stream dependent Build/Content Systems