Revitalize your website with simple dynamic code that inserts the current day of the week on your home page or product pages within Shopify themes.
Publish Insights 27 January 2022
Now is the Time
Even with useful information, static web pages quickly lose the appeal of visitors and search engines. People want to see something current and relevant. This is why popular sites utilize technologies to serve dynamic content like product or article recommendations. When a user logs in, they can view customized interfaces that include their name and order history.
Another way to convey a fresh appearance is to display the current date at key locations on your site. A home page, for example, might say something like, “News for Monday” or “Monday Sale.” You could manually change the title every day, but a little bit of coding can automate the process.
Stay Current
Although the principle works on many platforms, as a Shopify Partner, I will explain how to implement it with simple code within your Shopify theme. For this, use the programming language called Liquid.
Before making modifications to your Shopify theme, it is wise to duplicate it. Within Admin, under the lefthand navigation, choose Online Store: Themes. Click the menu for the active theme, Actions: Duplicate. Work on the duplicate and preview before activating when done.
Caution: Modifying Liquid code may invalidate your theme for future updates by the developer. Anything you add will require manual migration to a different theme, with possible incompatibility.
Modern Shopify themes build pages in horizontal sections. Access the Liquid programming code with Actions: Edit code menu. Within the Sections area, open the section you wish to modify. (Each theme uses different naming conventions.) It could be a product page or a section appearing on the home page.
When I add a new feature, I like to include an option to disable it without digging back into the code. We accomplish this by adding a toggle within the schema. Scroll to the bottom to insert the following code:
{
"type": "checkbox",
"id": "sale_day",
"label": "Append today to sale price",
"default": false
},This creates a checkbox, defaulted to the off position, that you can enable within the “Customize” theme interface. Now build the code to display the current day when sale_day is set to true.
{% comment %} // custom code: append current day after sale {% endcomment %}
{% assign current_sale = '20% Off' %}
{% if section.settings.sale_day %}
{% assign current_sale = 'now' | date: '%A' | prepend: ' ' %}
{% endif %}How you define {{ current_sale }} is up to you. In the example, it’s ‘20% Off.’ Likely it will be a data-driven variable. Place it wherever appropriate. It may appear below the product name. You might find uses for the current day within product collection grids, or as mentioned earlier, within sections on your home page.
