GAMBIT MILK · TEMPLATE RESOURCES

Make it your own.

A practical guide to editing Gambit's pages, products, journal, and shared design system without losing the little details.

Start with the essentials

  1. Duplicate or back up your project before making a large change.
  2. Replace Gambit with your own name, logos, contact details, and approved product information.
  3. Read the Licenses page before redistributing or replacing artwork and fonts.
  4. Preview your edits on desktop, tablet, and mobile before deciding to publish.

Gambit is a demonstration storefront. Product copy, prices, editorial selections, and serving suggestions are examples. Add your own verified ingredients, allergen information, storage directions, availability, and business details before operating a store.

Edit products and categories

Edit products in Ecommerce → Products. Set Theme class to gambitstrawberrytheme, gambitblueberrytheme or gambitpistachiotheme. These native classes select Strawberry, Blueberry or Pistachio in Variables → Product Palette; the hero, navigation, mobile menu, gallery and accent controls update together without a theme code embed. Edit palette colors through the existing Colors variables. Keep the three Gambit theme classes even if the Style selectors panel lists them as unused: CMS references them dynamically. The older ProductTheme field does not control the palette. Update copy, gallery images and SKU price, then preview all screen sizes. The Shop page is deliberately static: update its flavor descriptions, displayed prices, carton images and product links separately whenever product details change.

Keep category membership consistent

  • All Products: all three demo products.
  • Best Sellers: Strawberry and Pistachio; their Best seller switches are on.
  • Fruit Flavors: Strawberry and Blueberry.

When changing Categories membership, also update Category slug 1, 2, and 3 with the exact slugs of the assigned categories. Leave unused slots blank. The category page matches these slots to its current slug. Keep Best seller and Best Sellers membership aligned. This demonstration selection is not evidence of real sales performance.

Use the right image field

  • SKU main image: the primary carton image for native commerce.
  • Collection image: artwork for product cards.
  • Flavor image: the matching carton in flavor choices and related products.
  • Social image: a dedicated 1200 × 630 JPEG or PNG card, optimized below 150 KB.

Publish a journal story

The Journal is a native CMS Collection List connected to Blog Articles. It currently contains seven original examples covering everyday rituals, breakfast, tastings, picnics, milkshakes, brunch, and snack boards. Editing an article's name, topic, excerpt, or thumbnail updates its Journal card automatically.

  1. Open CMS → Blog Articles and create or select an item.
  2. Write a concise Name, a relevant Hero subheading, and one of the existing Topic labels.
  3. Write a unique Short description of 150–160 characters. Keep the Name to 37 characters or fewer so the branded SEO title stays under 60 characters.
  4. Write the Body with H2 section headings and H3 subsections. The page supplies the main H1.
  5. Add a relevant Thumbnail image and a 1200 × 630 JPEG or PNG Social image. Add meaningful alt text.
  6. Preview the article and Journal card, then save. Publishing is a separate action.

Set Article URL to /blog-article/ followed by the article slug; Journal cards use this Link field. Article slugs now match their milk-focused titles. If you rename a slug, update Article URL and internal links, and configure an appropriate redirect before publishing.

Article typography is native: BlogPostRichText uses the Typography collection’s Article Desktop mode on the main breakpoint and Article Mobile mode on the small breakpoint and below. Edit the existing heading-size and line-height variables in those modes to change article reading sizes without changing display headings elsewhere. The old Blog typography CSS Embed is no longer needed.

Work with shared components

Headers, the footer, and recurring buttons are reusable Webflow Components. Edit a component's main definition to update its connected instances, and use available properties or variants for intentional differences. Check the homepage and a product page after shared navigation edits.

Avoid detaching a component just to change a label. Review the Navigator and confirm which definition an instance uses. The Journal and these resource pages use shared header and footer instances.

Use variables and responsive styles

Open Variables to find brand colors, typography, spacing, radii, and container values. Change an existing variable when you intend to update every connected use; use a class override for a genuine exception. Do not delete or rename a token until its references have been checked.

Preview at narrow mobile widths, tablet widths, desktop, and intermediate sizes. Test long headings, product names, and menus. A breakpoint override affects that breakpoint and its inherited smaller layouts; verify the result instead of assuming three screenshots cover every size.

See colors, typography, controls, and states in the Style Guide.

Edit native product previews

The homepage flavor buttons open native HTML dialogs. Each button uses command="show-modal" and commandfor matching one dialog ID: gambit-strawberry-dialog, gambit-pistachio-dialog or gambit-blueberry-dialog. Keep these IDs unique and update the opener and close button together if you rename or duplicate a preview. Close buttons use command="close".

The browser supplies modal focus behavior and Escape dismissal. Preserve the dialog label and labelled close control. Product previews use a View product link connected to the current CMS product URL; purchasing and quantity selection happen on the product page through native Add to Cart. Do not add a custom form-submit or keyboard controller to the preview.

Only the entrance motion lives in the second Home footer script: dialog.gambitproductdialog targets the native dialog and .popupcontainer targets its animated panel. The GSAP Guidelines page contains the selector map, editable code examples and safe-removal steps. Test every flavor, keyboard controls and product destination after changing a preview.

SVG and icon instructions

For uploaded SVG artwork, replace the asset while keeping its aspect ratio and accessible purpose. Give the file a descriptive name and preview it at desktop, tablet, and phone widths.

Edit inline SVG safely

For SVGs inside an Embed, preserve the viewBox and any IDs referenced by masks, gradients, or animation code. Keep a copy of the original markup before editing. Use an image with width 100% and height auto when the full artwork needs to remain visible.

Accessible icons and artwork

Decorative images should use empty alt text. Meaningful images need a short description of their content or purpose. Icon-only buttons and links need an accessible name on the control. Avoid repeating nearby text or adding keywords that do not describe the image.

Open GSAP Guidelines for animation and popup editing.

Before you launch

  • Replace demonstration claims with verified business and product information.
  • Review metadata, social cards, form destinations, accessibility, and every important link.
  • Test Contact delivery using an approved destination; do not assume a preview validates email delivery.
  • Review Ecommerce setup and test transactions through the appropriate safe workflow.
  • Keep Marketplace template defaults separate from the setup of an operating store.
  • Obtain the actual Marketplace validator and quality review results before claiming submission readiness.