Description:

Product Price is a dynamic component that shows the price of a product. It has a current price, sale price and original price (compare at price), as well as a price range—each will conditionally show the right one based on the data you have set up in your Shopify store per product.

Shopify Prerequisites

To display sale pricing, you must configure the "Compare-at price" in your Shopify admin. This value represents the original price and must be higher than the current selling price.

Setting a compare-at price

1. Go to Products in your Shopify Admin
2. Click the product you want to put on sale
3. Scroll to the Pricing section
4. Enter the original amount in the Compare-at price field
5. Enter the new lower amount in the Price field
6. Click Save

Note If your product has variants, you must edit the pricing for each variant individually or use the bulk editor to apply the compare-at price across all options. If the sale price appears on the product page but not the collection page, ensure that all variants have a consistent Compare-at price set.

Shipcode Configuration

ADDING THE COMPONENT TO A LAYOUT

• To add the component to a layout, navigate to the components panel, select the Libraries tab in the header, then find the component in the Shopify Template Library accordion. Drag and drop it on to your desired layout, or inside another component/layer.

PRODUCT HANDLE

• With the first layer selected, navigate to the Interactions tab and find the Product Handle input
• • Enter the product handle for the product you want to design for on the Layout
  • • To find the product handle in Shopify, select ‘Products’ in the left navigation panel, then select a product. With the product page open, scroll to the bottom and copy the last string in the URL after /products
  • Note: If you use this component on in a PDP scaffolding component, you will need to add it to the success slot, ensure the scaffolding component is configured with a product handle, and leave the field blank for the title component

SIMULATE SALE STATE

• Select the first layer, then navigate to the Interactions tab and find the Simulate Sale toggle
• • Toggle the Simulate Sale State toggle to True
  • • Note: Edit only one state at a time
  • Make the edits you see fit for the sale state elements
  • Then return to the main layer, select the interactions tab, and turn the toggle back to False