Decoration Selector

What It Does

The PromoSync Decorations block lets shoppers choose a decoration location (e.g., Front Chest, Back) and a decoration method (e.g., Screen Print, Embroidery) directly on the product page. Their selections are saved as cart line item properties and appear in the order at checkout.

The block has two display modes:

No theme code changes are required. Just add the block in Theme Customizer.

Getting Started

Prerequisites

• The PromoSync app must be installed on your store
• Products must be synced through PromoSync (the app automatically populates the decoration data during product sync)

Adding the Block

1. Go to Online Store > Themes > Customize
2. Navigate to a Product page template
3. In the left sidebar, click Add block
4. Search for PromoSync Decorations and click to add it
5. Position the block where you want it on the product page (typically near the Add to Cart button)
6. Choose your Display mode:
   • Collapsible display — shows locations as expandable sections (default)
   • Dropdown selector — shows location and decoration dropdowns that attach to the cart
7. Click Save

That’s it. The block only appears on products that have decoration data — it hides itself automatically on products without decorations.

Settings

All settings are configured in Theme Customizer when the block is selected.

How It Works for Shoppers

When using Dropdown selector mode:

1. The shopper sees a Location dropdown pre-populated with available decoration locations (e.g., “Front Chest”, “Back”, “Left Sleeve”)
2. After selecting a location, the Decoration dropdown enables and shows the available methods for that location (e.g., “Screen Print”, “Embroidery”)
3. If a location only has one decoration method, it is auto-selected
4. When the shopper adds the product to their cart, the selected location and decoration appear as line item properties:
   • Location: Front Chest
   • Decoration: Screen Print
5. These properties are visible in the cart, at checkout, and on the order in Shopify admin

Customizing the Appearance

The block uses CSS custom properties that you can override in your theme to match your store’s design. Add these overrides to your theme’s CSS file:

:root {
  /* Colors */
  --promo-primary: #2c6ecb;        /* Focus/active border color */
  --promo-text: #1a1a1a;           /* Label and option text */
  --promo-text-muted: #6b7177;     /* Chevron icon color */
  --promo-border: #e1e3e5;         /* Dropdown border */
  --promo-bg: #ffffff;             /* Dropdown background */
  --promo-bg-alt: #f6f6f7;        /* Disabled dropdown background */
 
  /* Spacing */
  --promo-spacing-xs: 0.25rem;
  --promo-spacing-sm: 0.5rem;
  --promo-spacing-md: 1rem;
  --promo-spacing-lg: 1.5rem;
 
  /* Typography */
  --promo-font-size-sm: 0.8125rem; /* Label size */
  --promo-font-size-base: 0.875rem; /* Dropdown text size */
  --promo-font-size-lg: 1rem;      /* Heading size */
 
  /* Border radius */
  --promo-radius-sm: 0.25rem;      /* Dropdown corners */
}

You only need to override the properties you want to change.

Migrating from Custom Theme Code

If your theme currently has custom location/decoration selector code (e.g., custom snippets, JavaScript files, or hidden form inputs), you can replace it with this block:

1. Add the PromoSync Decorations block in Theme Customizer and set the mode to “Dropdown selector”
2. Verify it works — select a location and decoration, add to cart, and confirm the properties appear
3. Remove the old theme code:
   • Delete any custom location/decoration snippet files
   • Delete any custom decoration selector JavaScript files
   • Remove related <script> tags from your layout file
   • Hidden form inputs for properties[Location] and properties[Decoration] can be left in place (the block reuses them) or removed (the block creates them automatically)
4. Save and test the full flow again

Frequently Asked Questions

The block doesn’t appear on a product page. The block only renders when the product has decoration data. Make sure the product has been synced through PromoSync. You can verify by checking for the psrestful.location_decorations metafield in Shopify Admin > Products > [Product] > Metafields.

The Location dropdown is empty. The product’s decoration metafield is either missing or empty. Re-sync the product through PromoSync.

The Decoration dropdown stays disabled. This is expected until the shopper selects a location. Once a location is chosen, the decoration dropdown enables and shows the available options.

Properties don’t appear on the cart item. The block needs to find the product’s Add to Cart form. This works automatically with Dawn and most standard themes. If your theme uses a non-standard form structure, ensure the product page has a <form> with action="/cart/add".

Can I use both modes on the same page? Each block instance uses one mode. You could add two blocks with different modes, but typically you’d choose one.

Does this work with AJAX/dynamic carts? Yes. The hidden inputs are part of the product form, so they are included in any Add to Cart request — whether it’s a full page submit or an AJAX fetch.

Can shoppers add to cart without selecting a decoration? By default, yes — the dropdowns are optional. If you want to require a selection before adding to cart, that would need custom theme JavaScript to validate the form before submission.