How can I pass variables to an App block in a Shopify theme?

Shopify Apps
1

Hi guys,

I’m creating a theme app extension (App block) to show custom text on the collection page. I am trying with the Dawn theme.

In the snippet file /snippets/card-product.liquid I have some code like this

            {% render 'price', product: card_product, price_class: '' %} // card_product is Product liquid object
            // Below is my additional code
            {% for block in blocks %}
              {% case block.type %}  
                {% when '@app' %}
                  {% render block, product_item: card_product %}
              {% endcase %}
            {% endfor %}

I want to pass the Product liquid object (card_product) to my app block and named it product_item.

Now, I call product_item in theme-app-extension\blocks\app-block.liquid

<div
  data-id="{{ block.id }}"
  style="font-size: {{ block.settings.text_size }}px;">
  <div data-product-price="{{ product_item.price | money_without_currency }}">
    Split your payment & pay
    <span >{{ product_item.price | money_without_currency }}</span>
    today
</div>

When I push the extension to Shopify, it hits error

Undefined object product_item at blocks/app-block.liquid:

I don’t know what I missed. Please help me on this. Thanks

2

To show custom text on a collection page using the Dawn theme, you’ll need to edit the card-product.liquid snippet file.

In the code you posted, you can add your custom text by adding a new line of code that outputs the text. For example, you can add the following code to display custom text:

cssCopy code
<p>{{ product.description }}</p>

 

This code will show the product description for each product on the collection page. You can replace {{ product.description }} with any other information you want to display, such as the product title or a custom field you created

3

Thanks @olasunkanmi

In my case, I want to place my custom text at my app block file (using theme app extension). This is because I don’t want the merchant have to edit any theme code (in this case is card-product.liquid snippet file).

So is there anyway to render my app block in card-product.liquid snippet file and passing product liquid object to that app block?

4

@EddieLuong Hi, have you got any solution to this yet?