Request for Code: Shopify Product Page Metafield Integration

Store Design
, , , , , ,
1

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
21.04.2024_22.41.59_REC.png1453×663 129 KB

2

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?

3

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