Components

79 Shopify components for Framer

Product, cart, checkout, accounts, filters and upsells. Drag them in from the plugin, style them however you want, and live Shopify data flows in. No embeds, no code.

Start building free

Product12

Cards, galleries, variant pickers and live prices. Every product page is yours to design, bound to the synced CMS.

About this feature
  • Add To CartFreeShopifyAddToCartAdds the selected variant to the Shopify Storefront cart.
  • Quantity SelectorFreeShopifyQuantitySelectorLets shoppers choose the quantity to add to the cart.
  • Subscription SelectorProShopifySubscriptionSelectorSwitches between one-time purchase and available selling plans.
  • Variant SelectorFreeShopifyVariantSelectorSelects product options with swatches, pills or a dropdown.
  • Purchase TotalFreeShopifyPurchaseTotalShows the live selected-purchase total in a custom button or product-page layout.
  • Product CardFreeShopifyProductCardDisplays product media, title, price and an add-to-cart action.
  • Product GalleryFreeShopifyProductGalleryDisplays a product image gallery with selectable thumbnails.
  • Product PriceFreeShopifyProductPriceShows live price, compare-at sale state and currency.
  • Stock StatusFreeShopifyStockStatusShows product availability and inventory state.
  • Product Category CountProShopifyProductCategoryCountShows the current product category with its matching product count.
  • Country FlagProShopifyCountryFlagDisplays the active market country flag or a selected country flag.
  • Sale BadgeFreeShopifySaleBadgeDisplays a badge when the current product is on sale.

Cart14

A cart drawer, line items and totals that match the site, wired to the live Shopify cart.

About this feature
  • Cart TotalFreeShopifyCartTotalDisplays the cart subtotal and total with discounts applied.
  • Cart DrawerProShopifyCartDrawerProvides a slide-out cart drawer connected to live cart state.
  • Cart PageFreeShopifyCartPageRenders a complete cart page experience.
  • Cart Line ItemsFreeShopifyCartLineItemsRenders cart lines with quantity and remove controls.
  • Clear CartFreeShopifyClearCartRemoves every item from the current Shopify cart.
  • Discount Code InputProShopifyDiscountCodeInputApplies discount codes and displays automatic discounts.
  • Cart Total AmountFreeShopifyCartTotalAmountShows a live subtotal, discount or total amount in a custom cart summary.
  • Cart ListProShopifyCartListRepeats a custom item design for every line in the live cart.
  • Cart Item ImageProShopifyCartItemImageDisplays the image of a cart line item.
  • Cart Item PriceProShopifyCartItemPriceShows the price of a cart line item.
  • Cart Item QuantityProShopifyCartItemQuantityUpdates the quantity of a cart line item.
  • Cart Item RemoveProShopifyCartItemRemoveRemoves a line item from the live cart.
  • Cart Item TitleProShopifyCartItemTitleDisplays the product title of a cart line item.
  • Cart Item VariationProShopifyCartItemVariationShows the selected variant options of a cart line item.

Checkout2

Shopify’s own checkout and Shop Pay. Your design right up to payment, Shopify’s security after.

About this feature
  • Checkout ButtonFreeShopifyCheckoutButtonSends shoppers to the Shopify hosted checkout.
  • Express CheckoutProShopifyExpressCheckoutAdds a Shop Pay accelerated checkout button with a checkout fallback.

Upsells9

Quantity breaks, BOGO, cart upsells and rewards on real Shopify discounts, with bundles coming soon. No app bills for your client.

About this feature
  • Buy X Get YProShopifyBuyXGetYBOGO and gift-with-purchase offers that add the qualifying items together.
  • Frequently Bought TogetherProShopifyFrequentlyBoughtTogetherAdds the current product and selected Shopify Search & Discovery complementary products together.
  • Low Stock CounterProShopifyLowStockCounterShows live stock with a low-stock message and an optional progress bar.
  • Quantity BreaksProShopifyQuantityBreaksBundle & Save quantity tiers priced to match your Shopify automatic discounts.
  • Cart UpsellProShopifyCartUpsellRecommends complementary and related products for cart items through Shopify Search & Discovery.
  • Free Shipping BarProShopifyFreeShippingBarShows cart subtotal progress toward a configured free-shipping threshold.
  • Post Add-to-cart UpsellProShopifyPostAddtocartUpsellOffers complementary products in a popup after a shopper adds a product to the cart.
  • Offer ValueProShopifyOfferValueDisplays live tier labels, prices, badges or selection in a custom Quantity Breaks card.
  • Offer VariantsProShopifyOfferVariantsRepeats a variant selector for each item inside a Quantity Breaks card slot.

Product options10

Custom fields on the product page: engraving, gift messages, swatches, dates. Answers land on the order and paid extras are charged at checkout.

  • Option TextProShopifyOptionTextEngraving, monogram or name field saved on the order line.
  • Option TextareaProShopifyOptionTextareaGift message or special instructions.
  • Option NumberProShopifyOptionNumberA number input with min and max, like length or count.
  • Option SelectProShopifyOptionSelectA dropdown of choices, with an optional fee per choice.
  • Option RadioProShopifyOptionRadioOne choice from a short list.
  • Option Button GroupProShopifyOptionButtonGroupPill buttons for single or multiple choices.
  • Option Image ButtonProShopifyOptionImageButtonImage or color swatches to pick from.
  • Option CheckboxProShopifyOptionCheckboxA single yes/no extra like gift wrap, with an optional fee.
  • Option Checkbox GroupProShopifyOptionCheckboxGroupSeveral extras at once.
  • Option DateProShopifyOptionDateA delivery or event date picker.

Customer accounts5

Sign in, order history with tracking and saved addresses, designed in Framer on Shopify customer accounts.

About this feature
  • Account ViewProShopifyAccountViewDisplays the signed-in customer profile and account details.
  • Login ButtonProShopifyLoginButtonStarts Shopify Customer Account sign-in for shoppers.
  • Logout ButtonProShopifyLogoutButtonSigns the customer out and clears the local session.
  • Order HistoryProShopifyOrderHistoryLists recent orders with totals, dates and fulfillment status.
  • Register ButtonProShopifyRegisterButtonStarts Shopify Customer Account registration for new shoppers.

Wishlist13

Hearts and a saved-for-later page that follow the shopper across devices.

About this feature
  • Wishlist ButtonProShopifyWishlistButtonSaves or removes the current product in the customer wishlist.
  • Wishlist CountProShopifyWishlistCountShows the number of products saved to the customer wishlist.
  • Wishlist ListProShopifyWishlistListRepeats a custom item design for products saved to the customer wishlist.
  • Wishlist Item Add To CartProShopifyWishlistItemAddToCartAdds the selected wishlist item variant to the cart.
  • Wishlist Item CategoryProShopifyWishlistItemCategoryShows the category, collections or product type of a wishlist item.
  • Wishlist Item ImageProShopifyWishlistItemImageDisplays the image of a wishlist item.
  • Wishlist Item PriceProShopifyWishlistItemPriceShows the live price of a wishlist item.
  • Wishlist Item QuantityProShopifyWishlistItemQuantityLets shoppers choose the quantity for a wishlist item.
  • Wishlist Item RemoveProShopifyWishlistItemRemoveRemoves a product from the customer wishlist.
  • Wishlist Item Sale BadgeProShopifyWishlistItemSaleBadgeDisplays the sale state of a wishlist item.
  • Wishlist Item StockProShopifyWishlistItemStockShows the availability of a wishlist item.
  • Wishlist Item TitleProShopifyWishlistItemTitleDisplays the product title of a wishlist item.
  • Wishlist Item VariationProShopifyWishlistItemVariationShows the selected variant options of a wishlist item.

Filters & search11

Facets with counts, search, sort and pagination for big catalogs on Framer CMS pages.

About this feature
  • Active Filter CountProShopifyActiveFilterCountDisplays the number of active product filters.
  • Clear All FiltersProShopifyClearAllFiltersClears active Shopify product filters and search state.
  • Shopify CollectionProShopifyShopifyCollectionConnects a Framer CMS collection to Shopify product filtering.
  • Filter Result CountProShopifyFilterResultCountShows the number of products matching the active filters.
  • FacetsProShopifyFacetsDisplays available product facet values and their result counts.
  • FiltersProShopifyFiltersBuilds advanced Shopify product filter rules for a collection.
  • PaginationProShopifyPaginationPages through filtered Shopify product results.
  • SearchProShopifySearchSearches the synced Shopify product catalog.
  • Previous / NextProShopifyPreviousNextProvides previous and next navigation for filtered product results.
  • SortProShopifySortSorts Shopify product results by the selected catalog field.
  • Sort ToggleProShopifySortToggleToggles the active Shopify product sort direction.

Header3

Cart badge, account link and a country selector for local prices with Shopify Markets.

About this feature
  • Wishlist BadgeProShopifyWishlistBadgeShows the live count of products saved to the customer wishlist.
  • Country SelectorProShopifyCountrySelectorSwitches country and currency for localized prices and checkout.
  • Cart BadgeFreeShopifyCartBadgeShows the live number of items in the cart.
ShopifyProductCard

One product card. Every style your client asks for.

Badges, swatches, stock, wishlist, compare-at prices and subscriptions are switches and slots on the same component. Restyle it however you want, no code.

Browse all componentsHow styling works

Say yes to the next Shopify project

Start free with 15 products. Upgrade when the client signs.

Start building free