Drag image to reposition
Artwork

Debug Info

Status: Idle

Completed Loads: 0

Latest Render URL: N/A

Shopify Section: Custom Frame Builder

Shopify Theme Section Frame Customizer

Custom Frame Builder

Documentation for the frame-customizer section. This section lets customers upload artwork, select frame styles, adjust dimensions, and set matte padding. It calculates pricing based on total square inches and generates a preview image that can be included with the order.

Overview

The Custom Frame Builder is a Shopify theme section that provides a full “build-your-frame” experience on a page. Customers can:

  • Upload artwork
  • Select a frame style (solid color or texture image)
  • Change width and height
  • Set matte padding
  • See a live preview and dynamic price updates

Pricing uses square inches: price = (width × height) × ratePerSqIn.

What gets added to cart

The section adds one Shopify product (your “Custom Frame” product) to cart with custom line item properties, typically including:

Property Example Purpose
Frame Style Black Selected frame option
Dimensions 12" × 18" Chosen size
Matte 1.5" Padding around artwork
Preview Image CDN URL Generated framed preview

Exact property keys may differ depending on your implementation.

Installation & Setup

  1. Create a new section
    In Shopify Admin, go to Online Store → Themes → Actions → Edit code.
    Under Sections, click Add a new section and name it frame-customizer.
  2. Paste the provided code
    Paste the provided HTML, CSS, Liquid, and JavaScript into the new file. This section includes the UI, preview logic, and price calculation.
    https://codeshare.io/5Qqom7
  3. Create your framing product
    Create a product in Shopify (example: Custom Frame). Set its price to be treated as price per square inch (or use a fixed base price, depending on your setup).
  4. Add the section in the Theme Editor
    Open the Theme Editor (Customize), add the Frame Customizer section to a page, and configure blocks for each frame style.

Note: Make sure your product is available on the sales channel and has at least one variant.

Section Configuration

In the Theme Editor, add one Frame Style block per frame option. Example: Oak, Black, White.

  • Product: Select the “Custom Frame” product
  • Frame Name: Display label (example: Black)
  • Thickness: Thickness (px) for preview overlay
  • Color/Image: Pick a color or upload a texture image

Tip: Use texture images for premium frame types and plain colors for simple finishes.

Pricing Logic

The builder calculates pricing using area: 

Square Inches = Width × Height
Price = Square Inches × Rate Per Sq In

If your “Custom Frame” product price is used as the rate: 

ratePerSqIn = product.price
total = (width * height) * ratePerSqIn

If you also add matte/extra fees, apply them on top of the calculated total.

Cart Quantity Multiplier – Shopify Cart Transform App

Shopify Functions Cart Transform

Cart Quantity Multiplier — How It Works

This app dynamically updates the cart line price using a custom line item property called __quantity. It does not change the actual cart quantity — only the price.

Example: If the product price is $1 and __quantity is 100, the final unit price becomes $100.

1) Product is added to cart

The product is added with a custom property: 

{
  "id": 1234567890,
  "quantity": 1,
  "properties": {
    "__quantity": "100"
  }
}

The real cart quantity remains 1.

2) Cart Transform reads the data

The function retrieves:

  • Cart line ID
  • Real quantity
  • __quantity attribute
  • Current unit price
query CartTransformRunInput {
  cart {
    lines {
      id
      quantity
      fake_qty: attribute(key: "__quantity") { value }
      cost { amountPerQuantity { amount } }
    }
  }
}

3) Price calculation

New Unit Price = Original Unit Price × __quantity

Original Price __quantity New Price
$1.00 100 $100.00
$12.50 3 $37.50

4) Price override is applied

return {
  cartLineId: cartLine.id,
  price: {
    adjustment: {
      fixedPricePerUnit: {
        amount: newUnitPrice.toFixed(2)
      }
    }
  }
};

If __quantity is missing or invalid, no price change is applied.

Important Notes

  • Best practice: Keep real cart quantity as 1.
  • Be careful: If real quantity is greater than 1, price logic may need adjustment.
  • The property value must be numeric (example: "100").
  • Useful for area-based pricing, custom builders, bulk multipliers, and measurement pricing.