Build Dynamic Websites With Shopify

ESTIMATE 6-MINUTE READ

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 impor­tantly, 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 website 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.

  1. A Bit More Healthy: Health blog for medical professionals and patients
  2. Site News: Product announcements, sales, fulfillment, and website updates
  3. Feature: Special offers, programming, and marketing articles
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.

Related Blog Articles

The code for related blog articles shares character­istics of the article schedule in a miniature area. When enabled, a few published articles with matching tags appear beneath the main articles or on product pages. Using CSS, this feature may be hidden on small mobile devices.

Buy Buttons

Shopify provides a way to create portable Buy Buttons that feature your products. A sizable chunk of code is generated to paste on various pages throughout your website or even other platforms. Most of the ClinicalPosters health articles relate to products within the store. Tying them together with Buy Buttons is useful. Managing them can be a nightmare. What if you want to change the color for hundreds of Buy Buttons? If a new product becomes available, how do you update all the articles that feature the old one?

Using Liquid programming, deconstruct the code to separate common variables. Concatenate them with the unique variables. Then make them appear based on matching article tags. Edit Liquid code if there is a need for global edits. I am obviously speaking to programmers here.

Guest Author Biographies

The majority of articles on the ClinicalPosters website are written by internal authors. A short­coming 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 correspond­ingly 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.

Contextual Site Search

The third-party Shopify theme for ClinicalPosters includes settings to choose the scope of the search query. It can be limited to products or the entire site. By manipulating the Liquid code, it becomes possible to establish the scope based on the current template with a settings dropdown menu.

Liquid code sample

Contextual site search

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 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!

Join Discussion