Instructions

These instructions will show you how to get started editing your website. If you are just beginning with Webflow, I recommend you to take the Webflow 101 Crash Course and/or Webflow Ecommerce Crash Course first so you understand the basics of using the software.

This template takes advantage of Finsweet Custom Attributes to enable the filter system for the Category Pages. If you would like to understand how these work in-depth, their Webflow CMS Complex Filter Walkthrough on Youtube can help you do so.

Updating links post URL change

Currently, the following links correlate to sweet-spot-store.webflow.io/link. You will need to update these once you change your domain.
Shop All - Update the link associated with the 'Shop All' button in the cart.
FAQ - Update the link associated with 'FAQ' in the footer.
Shop the Latest - Update the link associated with 'Shop the Latest' within the homepage hero.
Shop Trending - Update the link associated with 'Shop Trending' within the nav dropdown.

Add any new prducts to Shop All category

After uploading products, be sure to add them to the 'Shop All' category in the ecommerce settings. This insures all products appear on the 'Shop All' page.
screenshot of webflow ui displaying the 'shop all' category in the ecommerce settings

Pop Ups, Preloader, & Banner Functionality

I have designed the Newsletter Pop Up, Cookies Pop Up, Preloader, and Banner elements for you to use if you wish. For these to work as they should (appearing only once) they will require you to utilise external custom code as this functionality is not native to Webflow. If you do not wish to use these elements, simply remove the Page Trigger animation associated with each element.

Changing the You may also be interested in... Suggested Products

I have set this section to suggest products that are included in the Selling Fast category, and products that have Popular switch turned on in the Products CMS collection. To change this conditional visibiliy:

01. Select the suggested-list-wrapper element in the navigator, then head over to the element settings.

02. You will see the filters that are currently set. Keep the filter ‘Product - is not - Current Product’ so that the current product does no appear in the suggested list.

03. From here you can select which category in the dropdown to suggest, or perhaps choose a certain brand to suggest in the list.
screenshot of webflow ui displaying filters for conditional visibilityscreenshot of webflow ui displaying dropdown filters for conditional visibility

Updating the Maximum Price on the Price Range Slider

The price range slider on the category page will need it’s maximum amount updated manually if you upload a product with a price above the current €150 default amount I have set. Please bear in mind that inside the filters-breakpoint-container there are two breakpoint-filters div blocks. One holds the filters for the desktop breakpoint, and the other for the iPad and mobile breakpoint. If you change the attributes for an element inside of one breakpoint-filters div blocks, remember to do the same for the second. To change the price range:

01. Go to the Category page and select the range-slider-wrapper, then head over to the element settings and scroll to ‘Custom Attributes’.
screenshot of webflow ui displaying custom attributes for the price range slider
02. Find ‘fs-rangeslider-max=“150”

03. Click this attribute and change the value from 150 to your chosen maximum price that will be shown on the range slider. Remember that the filter custom attribute functionality will not show in the designer and only take effect in the published site.
screenshot of webflow ui displaying custom attributes for the price range slider