Theme extensions are a new feature that lets you display metafields on your storefront using custom blocks—no coding required. They make implementation easier, give you more flexibility, and allow you to control exactly how your content appears.

For example, if you're customizing a product page and prefer not to edit theme code, you can simply add a theme extension instead.

This article will guide you through the basics of using theme extensions and how to get started.

At this point, our app offers the following theme extensions:

  1. Color 
  2. Date
  3. Link
  4. Plain Text
  5. Product Variant Link
  6. Product Variant Text
  7. Rating
  8. Reference
  9. Text


STEP 1

To get started with Theme Extensions, go to your Shopify admin panel and navigate to "Online Store" > "Themes", then click "Customize" on your active theme. From there, find and select the specific product you want to modify. This is where you’ll be able to insert custom blocks powered by theme extensions.


STEP 2

Once you’ve selected where you’d like to place the theme extension block, click "Add block” and go to the "Apps" section. Here, you choose one of the available theme extensions provided by the app. This will insert the block directly into your storefront layout.



STEP 3

Once you’ve added a block to your theme, customize its settings to control how your metafield content is displayed. When you're satisfied with the layout and content, click "Save" to apply the changes to your storefront.


Next, we’ll walk you through practical examples to show how theme extensions work in action. This will help you better understand how to apply them to your own storefront.


  • Color

This image shows how to add and configure a Theme Extension block using the Hulk Custom Fields.

On the left side, under your product template structure, you can add a theme extension block. On the right side, you’ll find the customization panel where you can configure the block's settings.


  • Date

For the Date block example, the steps are exactly the same — just select the "Date" block instead of "Color" when adding it to your product template.


  • Link


  • Plain Text

As you can see, the process for adding each theme extension block follows the same simple steps. From now on, we will just show a closer look at the customization settings available for each block.


  • Product Variant Link


  • Product Variant Text


  • Rating


  • Reference


  • Text


If you have any questions or need further assistance, our support team is here to help, just reach out via chat.