adartstudio

Add custom content to product page by using metadata


By default, Shopify does not allow to add custom content on a certain product page.
However, Aries supports some types of content that you can add to a specific product, including:
  • Product video
  • Product countdown
  • Total in stock progress bar
  • Short description
  • Recommended products
Follow the steps below to know how to add it:

Step 1: Install Metafields app

You need a Metafields app to have an editor to add your custom content (metadata).
We recommend to install Metafields Master by HulkApps (it's free), or you can go to Shopify Apps store to search for "Metafields" app.
In this instruction, we'll use Metafields Master app for example.

Step 2: Add metadata to specific products

  • Open Metafields app > select "Product" to add metafields to Product.


  • A list of all products in your inventory will show up. Click on the product you want to add custom content
  • Click "Create new" to add new metadata to selected product
  • Fill in the relevant data below for each content type

Namespace
Key
Value/String
Type
Product countdown
metadata
countdown

Type the date to countdown with format: yyyy-mm-dd hh:mm:ss
Example: fill "2019-01-20 18:30:00" then the timer will count down to this date

string
Product video
on gallery
metadata
video

If video shows on gallery, fill the youtube video url (NOTE: type the url without "https://", for example: www.youtube.com/watch?v=xxxxxxx)

string
Product video
on tab or accordions
metadata
video
If video shows on tab or accordion, fill the youtube embed url (instruction below)
string
Total in stock bar
metadata
total_instock

Fill a number of total products (must bigger than the actual available products), then the bar will show the number of available / total.
Example: fill "10" while product have 5 lefts in inventory, the bar will show 5/10 (1/2) progress

string
Short description
product_detail
short_description

Fill the description you want to add

string
Recommended products
recommended_
collections
collection_handle

Fill the collection handle of the collection you want to recommend (instruction below)

string

NOTE:
  • For the Short description, it'll show what text you add in Value; hence, the Short description words limit in Product pages settings will not work.
  • To find collection handle, go to your collection page, find its url, the handle is in the end of the url, right after "collections/"

  • To find youtube embed url, click on Share button under your youtube video > Embed > the link is inside the Embed code. Do not copy the whole code <iframe width..., just copy the link inside the quotation mark "www.youtube.com/embed/xxxxx" (remember to remove the "https://"). You may need to copy the whole code and paste to other place to copy only the link inside it.



Step 3: Change product template to product.metadata

You've added metafields to your product in step 2, now to show these metadata on the selected product page, please go to your Shopify admin > Products > All products > click on the product you added metadata > find the "Theme templates" card on the right > change the template to "product.metadata".



Note: if change template to product.metadata, this product page will show the "Sold count" and "View count" as well (if enabled).

Result:



    • Related Articles

    • Collection Page & Filter settings

      Collection Page Layout Navigate to Theme settings > Collection pages settings > Layout. Grid There are 3 types of grid:  Normal Grid:  Metro Grid:  Masonry Grid: Column number You can choose the number of products per row (column number) from 2 to 6. ...

    • Product Page settings

      Global settings Navigate to Theme settings > Product pages settings to customize all product pages. Product Gallery  You can change the position of gallery (top/left/right) in Product page layout.   Product Details Information There are 2 types to ...

    • Product Detail page

      Online Store > Themes > Customize Theme > General Settings tab > Product pages Product Gallery position: You can place it left side, right side or on top of content.   Details Information Togglable Tabs: After choosing Togglable tabs in Product pages ...

    • Product Detail page

      Online Store > Themes > Customize Theme > General Settings tab > Product pages Product Gallery position: You can place it left side, right side or on top of content.   Details Information Togglable Tabs: After choosing Togglable tabs in Product pages ...

    • Other Pages

      About us To create About page, navigate to Shopify admin > Online Store > Pages > Add page. Put your Page Title and Content, and then choose Template suffix (on the right sidebar) as page.about. To customize About page, navigate to Customize theme > ...