TopShelf is a premium Framer template built to work with Shopify via the Frameship plugin. It comes with collection pages, a product detail page, a cart, mega menu, hero gallery, and FAQ — all pre-built and ready to connect to your store.

What you need before starting

You need two things in place before the template will function:

1. A Frameship account — you can get 10% off using the discount code included in the template.

2. A live Shopify store with your products set up.

All the Shopify data in the template (product names, images, tags, types) is placeholder content. You will replace it by syncing your own store.

💡 For a full walkthrough of connecting Shopify to Frameship, see Connecting Shopify to Framer.

How to sync your Shopify data

1. Open the Frameship plugin inside your TopShelf Framer project.

2. In the Framer CMS, click the sync tag on the existing collection.

3. You will be prompted to connect your Frameship account and sync your Shopify products.

4. Once synced, your store's products will populate the CMS and flow through to the template automatically.

How components work

Every interactive element in TopShelf is a component. You can identify them by their purple outline when selected on the canvas.

When you select a component, the Properties panel on the right shows all the fields you can update — images, backgrounds, text, and links — without touching any code. Editing a field updates the component everywhere it appears on your site.

How to update your collection list filters

This is the most important step when setting up TopShelf with your own store. Every collection list on the template is pre-filtered using placeholder Shopify data. You need to update each filter to match your actual product data.

TopShelf filters by three main fields:

• Tags — used to surface things like sale items or bestsellers

• Product Type — used to separate category pages (e.g. menswear, homeware)

• Category — used for broader product groupings

To update a filter:

1. Click into the relevant collection list in your layers panel.

2. Open the filter settings.

3. Update the value to exactly match what exists in your Shopify store and CMS — spelling and case must be identical.

4. The collection list will update automatically once the filter matches.

⚠️ If products aren't showing on a page, a mismatched filter is almost always the cause. Check the field value against what's actually in your CMS.

Updating category pages

The template includes individual category pages (e.g. homeware, menswear) each filtered by product type. If you sell different categories, update each page's collection list filter to match your own product types from Shopify.

If you don't sell a particular category, you can repurpose or remove those pages entirely.

Product detail page

The CMS detail page pulls through product-specific data like tags, variants, and descriptions. Most of this will update automatically once your Shopify data is synced. Some conditional display logic (showing or hiding tags based on product data) can be adjusted using the component properties panel if needed.

How to update the mega menu

TopShelf includes two menus accessible from the navbar — a search menu and a mega menu triggered by the category links.

1. Double-click into the navbar on the canvas.

2. Double-click again to enter the mega menu component.

3. Update the content in each menu section. Changes here update globally across the whole site.

The mega menu uses the same category structure as your collection pages, so make sure the labels match your updated category pages.

Mobile breakpoints

All components have both desktop and mobile designs. After making any changes to a component on desktop, switch to the mobile breakpoint and check the layout still looks correct. Both views need to be updated independently.

Final page checklist

Once your data is synced and your filters are set, do a full pass of every page in the template:

• Update any static content (copy, images, brand colours, logo)

• Check each collection list is showing the right products

• Test the cart and checkout flow

• Review the FAQ page and update the content to match your own

All text, images, and content are set via the properties panel — there's no need to edit code.

💡 If you run into issues with the template or have questions about the Frameship connection, reach out via the Frameship support channel.