Unicorn Shopify Theme
  • Getting Started
  • Demo
  • Section Groups
    • Header
      • Menu icons
      • Badges
      • Popup menu
      • Image with button (Mobile)
      • Featured promotion (Mobile)
      • Contacts
    • Cart drawer
    • Search popup
    • Mega menu
      • Menu
      • Image with button
      • Featured promotion
      • Custom HTML
      • Empty column
      • Badges
    • Footer
      • Menu
      • Text
    • Popups
  • Dynamic Theme Sections
    • Before/after image
    • Blog posts
    • Brand list
    • Collage
      • Image
      • Collection products
      • Video
    • Collage of images
      • Image
      • List item
    • Collection list
    • Collection slider
    • Contact form
    • Countdown timer
    • Custom Liquid
    • Email signup
      • Heading
      • Subheading
      • Email form
    • FAQ
    • Featured collage
      • Product
      • Image
    • Featured collection
    • Featured collections
    • Featured product
    • Featured promotions
      • Content, Text on image
      • Content, Text below the image
      • Content, Button on image
    • Image with text overlay
      • Second image
      • Mobile settings
      • Heading
      • Text and Custom HTML
      • Buttons
    • Image gallery
    • Lookbook
    • Map
    • Media
    • Multicolumn
    • Page
    • Popup
      • Image
      • Text
      • Newsletter form
      • Buttons
      • Social media
      • Time countdown
      • Collection
      • Promotional code
    • Reels
    • Rich text
      • Heading
      • Text
      • Button
    • Slideshow
    • Tags
    • Testimonials
    • Ticker
  • Page Categories
    • Products
      • Product information
      • Product recommendations
    • Collections
      • Collection banner
      • Product grid
    • Collections list
    • Cart
    • Blogs
    • Blog posts
    • Search
    • Password
      • Email signup
    • 404 page
  • Theme Settings
    • Top bars
    • Header and Logo
    • Colors
    • Typography
    • Layout
    • Styles
    • Product
    • Variant picker
    • Social media
    • Search
    • Favicon
    • Currency format
    • Cart
    • Popups
    • Performance
    • Advanced settings
    • Custom CSS
    • Theme style
  • SVG Icons
  • FAQ
    • How to customize Metafields
    • How to group product images by variants?
    • How to create a template?
    • How to create webpages?
    • How to set up filters?
    • Understanding of metaobjects and their use in a store
Powered by GitBook
On this page
  • Time countdown
  • Custom badges
  1. FAQ

How to customize Metafields

Metafieds can be helpful in your store if you need to display custom information on the storefront that is not supported by general specifications in your admin.

PreviousFAQNextHow to group product images by variants?

Last updated 1 month ago

More about Metafields, the functionality of Metafilelds, and the requirements for displaying custom data in your store, read .

Time countdown

With the Metafields, you can display the Time countdown on product and collection pages. How to set up the required settings in your admin for the following displaying on your online store, you can find below:

Step 1

Go to your Shopify admin -> Settings -> Custom data, and press the "Products" tab to add a metafield definition specifically for products:

Step 2

Then, hit "Add definition":

Step 3

In the opened dashboard, edit the fields. Here is an example of the settings:

  • Name - Time Countdown

  • Namespace and key - custom.time_countdown

  • Description - Sale countdown (optional)

  • Type - Date and time (One value)

Save the settings.

Step 4

Now you can decide on the product for which the Time countdown will be displayed.

For this, go to Products in your Shopify admin, and select a product:

Step 5

On the opened product page, scroll down to the "Metafields". Here you can view the available metafield to edit for the product. In the "Time Countdown" field, enter an expiration date and time:

Step 6

When you complete the settings in your admin, navigate to the theme Editor. In Shopify admin -> Online Store, hit "Customize".

  • Then, select the product template in the top drop-down of the Theme Editor. And add the "Time countdown" block to the product page:

Custom badges

Use the Metafields to build custom badges in your admin.

The theme provides eight badges that are already built into the theme and four custom badges that can be displayed from images. In the following help page, we will provide detailed instructions on the store configurations to display custom badges using both methods.

Step 1

To build a new badge, go to your Shopify admin -> Settings -> Custom data, and press the "Products" tab to add a metafield definition specifically for products:

Step 2

Then, hit "Add definition":

Step 3

Theme badges

The theme uses a unique Namespace and key to display badges on the storefront. So, make sure to create a definition for each custom badge using the metafield identity:

Badge
Name
Namespace and key

custom_badge_buy_3_get_1_free

custom.custom_badge_buy_3_get_1_free

custom_badge_back_in_stock

custom.custom_badge_back_in_stock

custom_badge_bestseller

custom.custom_badge_bestseller

custom_badge_buy_1_get_1_free

custom.custom_badge_buy_1_get_1_free

custom_badge_buy_2_get_1_free

custom.custom_badge_buy_2_get_1_free

custom_badge_coming_soon

custom.custom_badge_coming_soon

custom_badge_free_shipping

custom.custom_badge_free_shipping

custom_badge_outlet

custom.custom_badge_outlet

In the opened dashboard, edit the fields. Here is an example of the settings:

  • Name - custom_badge_outlet

  • Namespace and key - custom.custom_badge_outlet

  • Description - optional

  • Type - True or false

Save the settings.

Badges from images

To display badges as images, build metafield definitions with either "True or false" or "File" types. The theme provides options to create four custom badges displayed from images. If you need more than one badge, add a metafield definition for each one.

Example 1:

Check the example settings for the boolean type:

  • Name - custom_badge_1 (custom_badge_2, custom_badge_3, custom_badge_4)

  • Namespace and key - custom.custom_badge_1 (custom.custom_badge_2, custom.custom_badge_3, custom.custom_badge_4)

  • Description - optional

  • Type - True or false

Example 2:

Here are the example settings of the metafield definition to display an image from a file:

  • Name - custom_badge_1 (custom_badge_2, custom_badge_3, custom_badge_4)

  • Namespace and key - custom.custom_badge_1 (custom.custom_badge_2, custom.custom_badge_3, custom.custom_badge_4)

  • Description - optional

  • Type - File - One file

  • Accept specific file types - Images

Step 4

Now, assign custom badges to products. For this, go to Products in your Shopify admin, and select a product:

Step 5

On the opened product page, scroll down to the "Metafields". Here you can view the available metafields to edit for the product. Hit each metafield to link a badge.

Theme badges

To display badges on the storefront, hit the "True" value in the corresponding fields. You can display all the created custom badges or specify only the selected ones for a product.

In our example, all the badges have been used for the product:

Badges from images

Example 1:

Example 2:

To display a badge using a custom image for a specific product, add the desired file to the corresponding field, in our example we used the "custom_badge_4" metafield.

View the example settings below:

Press the "Save" button to accept the settings for a product.

To add the Time countdown on the product card of the collection listing, activate the "Show time countdown" option in Theme settings -> Product -> .

If you use the boolean type to display images as badges, use the "True" value. This method displays an image assigned in the Theme Editor. Go to the Theme Editor, Theme settings -> to link images.

Time countdown
Product
here