Instructions

Originals Collection page

Edit the eight product cards on /originals-collection directly in Designer. Each card has an image, heading, description, and Learn More link. The separate More Ways to Pop gallery contains five linked cards in a native Webflow Slider. This is a static page; no CMS collection is required.

Edit the product grid, slider, and collection navigation

Select an rpc-product card in the Navigator to edit its image, text, alt text, and Learn More destination. For the five-card More Ways to Pop gallery, open the Slider’s Mask and select a Slide. Collection navigation links open homepage sections; they do not filter the product grid.

Shared components and responsive layouts

POP Navigation and Footer Nav - Main are shared across the site. Edit their component definitions to update every page, or use instance properties for page-specific values. Font and color variables are available in the Variables panel. Preview longer labels at desktop and mobile widths.

SUKI Product Pages

Edit SUKI Drops at /suki-original-pops and SUKI Originals at /suki-originals directly in Designer. These static product pages use Learn More links, native Webflow Sliders, and expandable FAQs. The Originals inspiration slider contains four cards. Open its Mask in the Navigator to edit each card, and use Slider settings for its arrows and dots.

Product page scroll motion

Select an animated element and open the Interactions panel to adjust its targets and timing. Preview the page after editing to check the resting layout, scroll effects, and reduced-motion behavior.

FAQs and inspiration cards

Edit each FAQ question in its summary element and the answer in the content below it. The occasion cards contain brand inspiration rather than customer reviews. Add product details from your own product information and packaging.

SUKI Homepage Sections

The homepage has two native Webflow Sliders: suki-halloween-slider contains four photo slides, and suki-inspiration-slider contains six linked image-and-caption slides. In the Navigator, open a Slider’s Mask and select a Slide to change its image, caption, or link. Adjust arrows, dots, and autoplay in Slider settings. Preview every slide at desktop and mobile widths.

The personality section pairs candy artwork with short text callouts. The good-times section contains outlined badges and an About link. Select these elements in the Navigator to edit their content and styles.

The homepage includes a candy hero, photo galleries, personality callouts, collection cards, and a newsletter form. Each section can be selected and edited in the Navigator.

CTA buttons combine uppercase text, rounded corners, and a separate suki-button-arrow element. Use POP Display Font for the label. Yellow buttons use POP Blue text and arrows.

Products Mega Menu and Scroll Motion

Edit POP Navigation to update the shared menu. Its Products Dropdown contains six collection cards; its collection finder contains a list of links. Open the Dropdown List in the Navigator to edit card images, text, and destinations. Adjust opening behavior in the native Dropdown settings, then test keyboard navigation and the mobile menu.

Scroll and hover effects are managed in the Interactions panel. Collection headings use SplitText reveals, while candy artwork uses scroll motion. The shared navigation stays visible and stationary. Slider controls are managed separately in native Slider settings. See the GSAP Guide for the named interactions, their targets, editable settings, and removal steps.

SUKI CANDY Homepage — Editing Guide

The homepage hero is built from editable heading text and separate candy images. POP Navigation and Footer Nav - Main provide the shared header and footer.

How to Edit GSAP Animations

Select a hero candy image to edit its image or position. Open the Interactions panel to adjust its animation, then preview the layout with motion enabled and reduced.

The homepage photo and inspiration galleries use native Webflow Sliders. Edit their slides and built-in controls through Slider settings. The Products and collection-finder panels use native Webflow Dropdowns. Keep these native controls intact when editing decorative scroll or hover animations.

Images and newsletter forms

Choose replacement images from Assets and set alt text in the image settings. Leave alt text empty for purely decorative artwork. Select the newsletter Form Block to edit fields, success and error messages, and submission settings.