Request for Code: Shopify Product Page Metafield Integration

Jackson-pollock
Excursionist
23 0 2

I need to incorporate two metafields into the product page layout:

 

ISBN-Number Metafield: This metafield will remain constant for all product variations and should be displayed using the following liquid code: { product.metafields.Neato.ISBN13 }.


Book-Condition Metafield: Unlike the ISBN, this metafield will vary across different variations of the product. It should be displayed using the liquid code: { product.metafields.Neato.Condition }.

 

Additionally, we require a feature that enables users to switch between different conditions or redirect to other pages based on the variations of the product. These conditions include "New," "Like New," "Very Good," "Good," and "Acceptable."

 

We aim to generate URLs based on the ISBN and condition metafields.

 

This functionality is crucial for enhancing the user experience and ensuring seamless navigation across product variations.

 

Your expertise would be greatly appreciated in implementing these requirements.

21.04.2024_22.41.59_REC.png

Replies 2 (2)

theycallmemakka
Shopify Partner
1482 337 360

Hi @Jackson-pollock ,

 

If you want the metafield "Book-Condition Metafield" to change as per variant, you should create a meta field on the variant. 

 

And the requirement is to create "New", "Like New", "Very Good" button which on clicked, the respective product will be loaded?

Buy me a Coffee


Enjoy Shopify for $1. Sign up now


For quick response - Message Me


Ping me at: theycallmemakka@gmail.com

PageFly-Theodor
Globetrotter
576 76 88

Hi @Amandalman,
This is Theodore from PageFly - Shopify Page Builder App.

Incorporating Metafields and Product Variation Functionality

Here's how to achieve your goals:

1. Displaying Metafields:

  • Use the provided Liquid code:
    • ISBN: { product.metafields.Neato.ISBN13 }
    • Condition: { product.metafields.Neato.Condition }
  • Insert these codes in your product page template where you want the info displayed.

2. Switching Between Variations:

  • Recommended: Use Radio Buttons or a Dropdown Menu:
    • Create a selection section with options for each condition.
    • Link each option to the corresponding variant ID using Liquid:
    Đoạn mã
    <a href="{{ product.url | append: '?variant={{ variant.id }}' }}">{{ variant.option1 }}</a>
     
  • Advanced Option: Redirecting Based on URL Parameters:
    • Requires theme code and potentially server-side logic modifications.
    • Users are redirected based on a condition parameter in the URL.

3. Generating URLs with Metafields:

  • Shopify doesn't support dynamic URLs based on metafields. Alternatives:
    • Manual URL Creation: Create unique URLs with ISBN and condition for each variation (complex to manage).
    • Third-Party App: Explore Shopify apps for "product URLs" or "SEO" that might offer dynamic URL generation with metafields.

Complexity Breakdown:

  • Easiest: Displaying metafields & radio buttons/dropdown menu.
  • Moderate: Manual URL creation.
  • Hardest: Redirects or third-party app integration.

Remember to test your implementation thoroughly.


Best regards,
Theodore | PageFly

 

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.