Manage multiple blocks by leveraging metaobjects

Challenges in Coupon Management

Coupon.JP offers five types of app blocks:

• Get Coupon Button
• Product Page Discount Display
• Acquired Coupon List (All)
• Acquired Coupon List (Latest N Items)
• Coupon Overview

These blocks require a "Coupon SID" to be set to specify which coupon to display. The SID can be found on the coupon management screen.

When replacing coupons due to the end of a campaign or other reasons, you would typically need to change the SID for each block individually. If blocks are placed on multiple pages, the number of changes increases further.

Shopify's "metaobject" feature solves this problem.

Create a Metaobject Definition

Metaobjects allow you to manage coupon information in one place. First, you'll need to create a "definition."

Steps

1. From the Shopify admin screen, go to "Content" → "Metaobjects."
2. Click "Add definition."
3. Enter a name (e.g., Coupon.JP).
4. Create the necessary fields from "Add field."

Example Field Settings

Field Name	Type	Purpose
SID	Single line text	Stores the coupon SID
PC Image	File	Banner image for PC (optional)
SP Image	File	Banner image for smartphone (optional)

*Image fields are just an example. Add or change fields as needed for your specific use case.

5. Click "Save."

Register Entries

Once you've created a definition, register the actual coupon information as "entries."

Steps

1. Open the definition you created (Coupon.JP).
2. Click "Add entry."
3. Enter values for each field.

Field	Input Content
SID	SID confirmed on the coupon management screen
PC Image	Upload banner image
SP Image	Upload banner image

4. Click "Save."

Link with App Blocks

Link the registered metaobject to the app blocks in the theme editor.

Steps

1. Open the theme editor.
2. Select the Coupon.JP app block.
3. Click the "Connect dynamic source" icon to the right of the "Coupon SID" input field.
4. Select the metaobject entry you created.
5. Select the field (SID).
6. Click "Save."

Similarly, image fields can be selected from the dynamic source in the image settings of the metaobject.

By following the same steps for other blocks, all blocks will be linked to the metaobject.

Operational Overview

Once metaobjects are set up, changing coupons only requires the following steps:

1. Go to "Content" → "Metaobjects" → "Coupon.JP."
2. Change the SID of the entry to the new coupon's SID.
3. Replace images as needed.
4. Click "Save."

There's no need to open the theme editor. Changes made in one place within the metaobject will be reflected in all linked blocks.

Summary

• If you have multiple Coupon.JP blocks, replacement work can be cumbersome.
• Metaobjects allow you to manage SIDs and images in one place.
• When changing coupons, simply update the metaobject to reflect the changes across all blocks.