Search

Template guide

Master your Framer template: Expert guidance for advanced features.

Template guide

Master your Framer template: Expert guidance for advanced features.

Template guide

Master your Framer template: Expert guidance for advanced features.

Template guide

Master your Framer template: Expert guidance for advanced features.

Products

Bundles

The Bundles feature allows you to bundle multiple products into a single item for sale.

Selling discounted bundles not only encourages larger purchases but also fosters customer loyalty, offering long-term benefits that outweigh short-term profit reductions.

How to add a product to a bundle

  1. Ensure you have at least one item in the CMS collection named Bundles.

  2. Copy the slug of the desired bundle.

  3. Paste it into the Bundle field of a product.

  4. Visit the bundle page to confirm that the product appears there.

Image of a bundle page that does not yet include any products.
Image of a bundle page that does not yet include any products.
Image of a bundle page that does not yet include any products.
Image of a bundle page that does not yet include any products.

Initially we have a Bundle that does not include any products.

Image showing a bundle in the CMS section, highlighting where the Slug field is located.
Image showing a bundle in the CMS section, highlighting where the Slug field is located.
Image showing a bundle in the CMS section, highlighting where the Slug field is located.
Image showing a bundle in the CMS section, highlighting where the Slug field is located.

Copy the slug of the Bundle where you want to add a product.

Image showing a product in the CMS section, highlighting where the Bundle field is located.
Image showing a product in the CMS section, highlighting where the Bundle field is located.
Image showing a product in the CMS section, highlighting where the Bundle field is located.
Image showing a product in the CMS section, highlighting where the Bundle field is located.

Paste the slug in the Bundle field of the intended product.

Image of a bundle page that, after completing the steps described above, now includes a listed product.
Image of a bundle page that, after completing the steps described above, now includes a listed product.
Image of a bundle page that, after completing the steps described above, now includes a listed product.
Image of a bundle page that, after completing the steps described above, now includes a listed product.

The product will now be listed in the Bundle.

Categories

Product categories leverage advanced Framer CMS functionality to dynamically list products by category.

By streamlining navigation and enhancing user experience, product categories simplify backend management, promoting efficient organization and discovery.

How to add a product to a category

  1. Ensure you have at least one category in the CMS collection named Product Categories.

  2. Copy the slug of the desired category.

  3. Paste it into the Category field of a product.

  4. Visit the category page to confirm that the product appears there.

Image of a product category page that does not yet include any products.
Image of a product category page that does not yet include any products.
Image of a product category page that does not yet include any products.
Image of a product category page that does not yet include any products.

Initially we have a Category that does not include any products.

Image of a product category in the CMS section, pointing out where the Slug field is located.
Image of a product category in the CMS section, pointing out where the Slug field is located.
Image of a product category in the CMS section, pointing out where the Slug field is located.
Image of a product category in the CMS section, pointing out where the Slug field is located.

Copy the slug of the Category where you want to add a product.

Image of a product in the CMS section, pointing out where the Category field is located.
Image of a product in the CMS section, pointing out where the Category field is located.
Image of a product in the CMS section, pointing out where the Category field is located.
Image of a product in the CMS section, pointing out where the Category field is located.

Paste the slug in the Category field of the intended product.

Image of a product category page that, after completing the steps above, now includes a product.
Image of a product category page that, after completing the steps above, now includes a product.
Image of a product category page that, after completing the steps above, now includes a product.
Image of a product category page that, after completing the steps above, now includes a product.

The product will now be listed in the Category.

Publish or unpublish products

This feature allows you to work on products in the CMS section without them appearing in your project until you're ready.

How to publish or unpublish a product

  1. Locate the desired product in the CMS section.

  2. Enable or disable the Published switch.

  3. Confirm that the product is shown or hidden from the appropriate listings.

Image of a product category page listing a single product.
Image of a product category page listing a single product.
Image of a product category page listing a single product.
Image of a product category page listing a single product.

Initially we have a product published in a Category.

Image of a product in the CMS section, highlighting the location of the Published field.
Image of a product in the CMS section, highlighting the location of the Published field.
Image of a product in the CMS section, highlighting the location of the Published field.
Image of a product in the CMS section, highlighting the location of the Published field.

Edit the product and make sure to disable the switch in the Published field.

Image of the product category that is empty because the only product it contained has been unpublished.
Image of the product category that is empty because the only product it contained has been unpublished.
Image of the product category that is empty because the only product it contained has been unpublished.
Image of the product category that is empty because the only product it contained has been unpublished.

The product will no longer be visible.

Display a "View demo" button on product pages

For digital assets with demos, such as templates, you can display a "View demo" button on product pages.

How to display the "View demo" button

  1. Locate the desired product in the CMS section.

  2. Enable the Link to Demo switch.

  3. Add the demo link in the ↳ Link to Demo field.

  4. Confirm that the product page now displays the View Demo button after the Buy now button.

Image of a product page, indicating the position of the buy button.
Image of a product page, indicating the position of the buy button.
Image of a product page, indicating the position of the buy button.
Image of a product page, indicating the position of the buy button.

Initially the product only displays the Buy now button.

Image of a product in the CMS section, highlighting where the fields related to the link to a product demo are located.
Image of a product in the CMS section, highlighting where the fields related to the link to a product demo are located.
Image of a product in the CMS section, highlighting where the fields related to the link to a product demo are located.
Image of a product in the CMS section, highlighting where the fields related to the link to a product demo are located.

We edit the product making sure to enable the Link to demo switch and then enter a valid URL in the ↳ Link to demo field.

Image of a product page that, after completing the steps described above, now includes a button linking to the demo, just below the purchase button.
Image of a product page that, after completing the steps described above, now includes a button linking to the demo, just below the purchase button.
Image of a product page that, after completing the steps described above, now includes a button linking to the demo, just below the purchase button.
Image of a product page that, after completing the steps described above, now includes a button linking to the demo, just below the purchase button.

Below the Buy now button will appear the View demo button, which when clicked will open the provided link in a new browser tab.

Blog posts

Categories

Blog article categories dynamically list posts by category, enhancing navigation and backend management.

How to add a post to a category

Blog article categories dynamically list posts by category, enhancing navigation and backend management.

  1. Ensure you have at least one category in the CMS collection named Blog Categories.

  2. Copy the slug of the desired category.

  3. Paste it into the Category field of a blog post.

  4. Visit the category page to confirm that the post appears there.

Image of a category in the Blog section that does not yet contain any articles.
Image of a category in the Blog section that does not yet contain any articles.
Image of a category in the Blog section that does not yet contain any articles.
Image of a category in the Blog section that does not yet contain any articles.

Initially we have a Blog Category that does not include any article.

Image of a blog category in the CMS section, highlighting the location of the Slug field.
Image of a blog category in the CMS section, highlighting the location of the Slug field.
Image of a blog category in the CMS section, highlighting the location of the Slug field.
Image of a blog category in the CMS section, highlighting the location of the Slug field.

Copy the slug of the Category where you want to add an article.

Image of a blog article in the CMS section, highlighting the location of the Category field.
Image of a blog article in the CMS section, highlighting the location of the Category field.
Image of a blog article in the CMS section, highlighting the location of the Category field.
Image of a blog article in the CMS section, highlighting the location of the Category field.

Paste the slug in the Category field of the intended article.

Image of a Blog section page that, after completing the steps described above, now displays a listed article.
Image of a Blog section page that, after completing the steps described above, now displays a listed article.
Image of a Blog section page that, after completing the steps described above, now displays a listed article.
Image of a Blog section page that, after completing the steps described above, now displays a listed article.

The article will now be listed in the Category.

Back to top