Build Dynamic Websites Within Shopify

Once you go dynamic, you will not want to go back.

Static web pages are the digital equivalent of a printed flyer. The text is constant, regardless of the visitor’s intent. You may associate dynamic websites with animation. The movement of elements is optional. Dynamic, more importantly, describes a method of displaying information that is relevant to the viewer.

Examples of dynamic data are flight schedules, monthly activities, or time-sensitive sales. While it is possible to post different static pages on a regular basis, it is better to schedule these types of data in advance, appearing when appropriate.

In conjunction with dynamic data, the ability to use a centralized interface to globally edit variables for use throughout a website is desirable. For example, updating author biographies appearing with blog articles should not require editing each one of the author’s pages. Shopify admin supports centrally editable biographies for blog author. The number selectable from a dropdown menu is based on the plan you purchase and their being one of the designated admin users (whether or not they actually have access).

The Shopify Database

Programmers prepare to take off

Ideally, data is pulled from a database when queried. A database is essentially a repository of structured data whose parts are independently accessible. A simple example is an address book. From this repository, you may pull names, addresses, or phone numbers. Visualize separate columns for city, state, province, and postal code. You might then choose to provide geographically relevant information.

When visitors log into a Shopify hosted site, very limited customer data is globally accessible to customize their visits: Name, subscription status, and tags (keywords). Crafting a personal user experience that does more than says, “Welcome, John” depends upon the most versatile of these: tags. Products and articles likewise use tags that may match up with customer tags. So the manner and consistency of tag usage is important.

In 2019, Shopify did something else that contributes to dynamic data: the programming language used to manipulate theme settings moved from Json (JavaScript Object Notation) to more user-friendly schema. Hence, theme developers can easily create fields for various types of data (plain text, rich text, numeric, flags, url, image, menu sections). Use these variables to build a database for dynamic data.

See Dynamic Data in Action

As someone with decades of experience using databases, the notion of building databases within Shopify themes makes me giddy. Nevertheless, detailing the intricacies of these features from a code level is beyond the scope of this article. You can, however, see examples of them in action!

Home Page

The home page is a rearrangeable assortment of up to 25 sections (or slices). With custom coding, visibility of sections can be date-sensitive. They may correspond with various sales, a countdown timer, the day of the week, or whether a user is logged in. The ClinicalPosters home page changes daily.

Monthly Discounts

Within the custom theme on this site, twelve distinct records within global schema store description, duration and promo codes for each monthly sale. A page template includes placeholders that are coded to replace with corresponding database records to highlight active discounts. The information fed to a homepage banner when active. The programming language known as Liquid, binds them together.

Blogs

The most ubiquitous way to feature dynamic content is to regularly publish a blog. Search engines love fresh content with dates. Search engine position climbs in proportion to the volume of quality content you publish. Write something once a week, twice a week or everyday. Shopify allows you to schedule articles months in advance. Entire articles or excerpts can be featured on your home page. Sharpen your pencil. You can publish multiple blogs on Shopify. ClinicalPosters has three:

ClinicalReads: Health blog for medical professionals and patients
News: Product announcements, sales, fulfillment, and website updates
ClinicalInsights: Useful tips for blogging, programming, and marketing

Article Schedule

Manually editable tables of articles for each year help visualize upcoming articles and archive historical titles. Working within the Liquid pagination limit of 50 articles per blog, an aggregated list combines published titles from three blogs with sortable columns using Liquid programming. When a visitor logs in, a customer tag that matches one within article tags highlights appropriate titles on the schedule.

Exhibit Conference Schedule

The code for the conference schedule highlights activities for the current month while suppressing expired months. The responsive table conforms to everything from wide desktop displays to narrow smartphone screens.

Guest Author Biographies

The majority of articles on the ClinicalPosters website are written by internal authors. A shortcoming is identifying guest authors who are not admin users. Giving guest bloggers admin access to all articles in order to identify them as authors is not practical. It jeopardizes security and limits the amount of actual employees that access the system. Using global theme settings (schema), the names, bios, avatars, and identifying tags are now accessible for a finite number of guest authors. Proper attribution with links to a list of all their articles is activated by including the corresponding article tag.

Author biography schema sample

Author biography schema

Banner Advertisements

ClinicalPosters has the ability to feature a finite number of banner ads within correspondingly tagged articles. Their duration, position, and content is controlled within theme settings. Banner ads are useful for internal announcements or may be sold to third-party advertisers.

Responsive Layouts

Another feature of dynamic websites is their responsiveness to mobile devices. I have yet to see a Shopify theme that does not support mobile devices—some better than others. The important thing to remember is that any modifications must likewise conform to various device widths.

More Under The Hood

This is not a complete list of dynamic features on this website. Some features were progressively refined over a many months. Others that repurpose existing code are up and running within hours. Programming is ongoing.

Dynamic data cannot be cached. Your site will take a performance hit as you increase the length and complexity of your code. Optimize by testing snippets, minimizing and combining scripts. The tradeoff is that people engage more with your site and revisit to see what’s new.

When you initially launch a virgin Shopify e-commerce site, it is possible to explore different free or fee themes. Any third-party apps that you license add elements to underlying Liquid code. Hence, switching themes ether requires reinstallation or assistance from the app developers. Only after settling upon a permanent theme should you consider extensive code modification. Liquid programming expert developers can then assist you with building the ultimate dynamic website!

Build Dynamic Websites With Shopify