How to add specific content in product detail page?

The following tutorial is going to show how to add specific content in product detail page.

• Created: 25/07/2016
• Latest Update: 25/07/2016
• By: Apollotheme
• Email: apollotheme@gmail.com

First of all, we would like the thank you for using our theme.

Apollotheme - a website where you can find the best shopify theme and Extensions as well. We are proud of our professional themes, extensions. With long-term experience working on Opensource, we have created a number of great extensions for Shopify like: Apollo Shopify Framework, Apollo Shopify Megamenu Module ...

Apollotheme is also famous for custom work, if you encounter trouble or need help with your website, coding, .... you can find us on Apollotheme.com then we will support you or give you suggestions.

Demo

1/ Install the applications (for add new metafield).

Shopify system default doesn't support for specific content, except product's description, so you need to create new fields for each product, below are 2 free applications for you to do that:

1/ Shopify FD, or you can install Chrome extension here

2/ Metafields editor: you can install this apps in your shop.

If you don't know what is metafield, you can refer here

2/ Add a new metafield (specific content)

A/ If you use Shopify FD (chrome extension)

You can go to product page, click ShopifyFD extension icon

Then, enter variable like below:

namespace: apc_description2 (you can replace this by your variable, but it must synch in step 3)

key: content (you can replace this by your variable, but it must synch in step 3)

value: enter your specific content may be HTML, shortcode,...

Remember: Click Save button at the bottom, NOT the one on the top right

B/ If you use Metafield Editor (Shopify application)

You can go to Metafield Editor, select product and enter variable like Shopify FD:

namespace: apc_description2 (you can replace this by your variable, but it must synch in step 3)

key: content (you can replace this by your variable, but it must synch in step 3)

value: enter your specific content may be HTML, shortcode,...

3/ Add new code in product detail. (to show specific content)

- Example: I want show specific content in 2nd tab on product page (like demo), so I will go Themes -> HTML/CSS -> product.liquid

- I added below code in position where I want to show 2nd tab content:

{% if product.metafields.apc_description2.content != blank %}  {% comment %} if this value isn't blank  {% endcomment %}
	{{ product.metafields.apc_description2.content }} {% comment %} print specific value {% endcomment %}
{% endif %}
			

The code which I've added have form: product.metafields.namespace.key

So, in above example, apc_description2 is namespace, content is key

( You can replace apc_description2 and content by your namespace and your key ) but it must synch in step 2

Click Save and see your result