Custom liquid on product page

[Grace_01]

I want to add different custom liquid for every product. Can anyone help how can we connect dynamic sources and what should select in metafield  so that we can dynamically add custom liquid.

[devcoders · Accepted solution]

Hello @Grace_01 

Step 1: Define Metafields in Shopify Admin

Go to your Shopify Admin panel.

Click on Settings > Custom Data > Products.

Add a new metafield for your custom Liquid code:

Namespace and Key: Give it a namespace (like custom) and key (like liquid_code).
Content Type: Choose Single Line Text or Multi-Line Text depending on your code's length.
Save the metafield definition.

Step 2: Add Custom Liquid Code to Each Product's Metafield

Go to Products > All Products.

Select the product you want to add custom Liquid code to.
Scroll down to the Metafields section.

Find the custom.liquid_code metafield and add the specific Liquid code you want for that product.

Step 3: Modify Your Theme Code to Display Metafield Content

In Shopify Admin, go to Online Store > Themes > Customize.

Click on Edit code (usually found under the theme's menu).

Find and open the product template file (product.liquid or main-product.liquid).

Add Liquid code to render the custom code in the product template, using:

{% if product.metafields.custom.liquid_code %}
{{ product.metafields.custom.liquid_code }}
{% endif %}

This will display the specific Liquid code stored in the custom.liquid_code metafield for each product. You can add conditions or customize this further to suit your needs.

Example: Adding HTML with Liquid Logic

If you want to dynamically display content like additional text, images, or custom layouts, you can insert HTML in the metafield content. Liquid conditions can also be embedded.

For instance, adding HTML to your metafield such as:

<div class="custom-message">
{% if product.tags contains "Special" %}
<p>This product is on sale!</p>
{% endif %}
</div>

Using metafields makes your products highly customizable without needing to modify the core product template for each product! Let me know if you need further help with this setup.

[Grace_01]

Hi @devcoders Thanks for the detail guide, it's working

[devcoders]

Hello @Grace_01 

You're very welcome! I'm thrilled to hear that you're pleased with the outcome. Don't hesitate to reach out if you need further assistance.

like and accepting the All solution. Thank you!