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:
You need a Metafields app to have an editor to add your custom content (metadata).
In this instruction, we'll use Metafields Master app for example.
- 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
|
| 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
| | |
Fill the description you want to add
| string
|
Recommended products
| | |
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.
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 > ...