Store widget

The Store widget allows you to display products directly on your page and turn any section into a shoppable product feed. It connects to your existing store and product catalog and gives you full control over which products are shown, how they are displayed, and how visitors interact with them.

The widget is highly flexible and can be styled to match your brand, layout, and sales strategy—whether you want a fast “buy now” experience or a traditional add-to-cart flow.

What the Store Widget Is Used For

Use the Store widget when you want to:

  • Showcase products on landing pages, homepages, or sales pages
  • Highlight latest products, selected products, or specific categories
  • Create product grids or carousels
  • Enable quick purchases or cart-based shopping
  • Control how products look and behave without building a full store page

Common examples:

  • Featured products on a homepage
  • Product sections on sales pages
  • Upsells or cross-sells below content
  • Highlighting discounted or limited-stock products

Products to Show

Product Source

Choose which products should appear in the widget:

  • Latest Products Automatically displays your most recently added products.Best for: homepages, “new arrivals”, frequently updated stores.
  • All from selected categories Displays all products from one or more chosen categories.Best for: category-focused sections or themed collections.
  • Selected products Manually choose exactly which products to show.Best for: curated offers, bundles, featured items.

Max Number of Products to Show

Controls how many products are displayed in the feed.

Use this to:

  • Keep layouts clean and focused
  • Avoid overwhelming visitors
  • Create teaser sections that link to a full store

Create a Product

Click Create a Product to add a new product directly without leaving the Web Studio if none exist or if you want to expand your catalog.

Product Feed Layout

The layout defines how products are arranged on the page.

Layout Types

There are two main layout types:

  • Grid Products are displayed in rows and columns.Best for browsing, comparisons, and product overviews.
  • Carousel Products are displayed in a horizontal slider.Best for featured products, limited space, or visual storytelling.

Number of Products per Row

Controls how many products appear per row in both grid and carousel view.

  • Fewer per row = larger product cards, more focus
  • More per row = denser layout, more products visible

Product Padding

Controls spacing inside each product card.

  • Smaller padding = compact, tight layout
  • Larger padding = spacious, premium feel

When using the Carousel layout, you can enable Change slides automatically to let products rotate automatically without user interaction.

Slide delay controls how long each slide is shown before moving to the next one (measured in milliseconds).

When to use this:

  • To highlight multiple products in a limited space
  • For homepage sections or promotional areas
  • When you want a dynamic, attention-grabbing product display

💡 Best practice

Use a moderate delay (for example 3–5 seconds) so users have enough time to view each product without feeling rushed.

Product Visibility Options

You can toggle the following elements on or off:

  • Show Product Name – displays the product name
  • Show Product Price – displays the product price
  • Enable Quick View – Allows visitors to preview product details in a popup without leaving the page.
  • Show “Add to Cart” / “Buy Now” Button
  • Show “Left in stock” remaining inventory – Creates urgency by showing low stock levels.

Store Process (Add to Cart vs Buy Now)

Add to Cart

When enabled:

  • Clicking the button adds the product to the cart
  • Visitors can continue shopping
  • Multiple items can be added before checkout

Best for:

  • Stores with multiple products
  • Bundle or upsell strategies
  • Traditional e-commerce flows

Buy Now

When enabled:

  • Clicking the button takes the visitor directly to checkout
  • The selected product is ready for purchase immediately

Best for:

  • Single-product offers
  • Fast conversion funnels
  • Landing pages and campaigns

💡 Tip

Choose Add to Cart for browsing experiences and Buy Now for focused, high-conversion offers.

Product Feed Looks

This section controls the visual presentation of each product card.

Layout Variants

There are three main visual layout designs for product cards (as shown in the interface previews).

Below is a clear description of the available Product Feed Looks, explained from left to right, with guidance on when each layout works best.

1. Classic Card Layout (Image on Top, Text Below)

The product image is displayed at the top, with the product name, price, and optional buttons stacked below in a clean vertical structure. This is the most familiar and widely used e-commerce layout.

Best for:

  • Standard product listings
  • Clear product comparison
  • Physical and digital products
  • First-time visitors

Why use this layout:

  • Easy to understand at a glance
  • Balanced focus on image and information
  • Works equally well on desktop and mobile

💡 UX tip

This is the safest default choice. If you’re unsure which layout to use, start here.

2. Compact Text-Focused Layout (Minimal Image Emphasis)

A more compact layout where the image takes less visual space and text elements such as title, price, and actions become more prominent. The design feels efficient and information-driven.

Best for:

  • Large product catalogs
  • Simple or well-known products
  • Returning users or internal shops
  • Scenarios where speed matters more than visuals

Why use this layout:

  • Displays more products within limited space
  • Reduces visual noise
  • Encourages quick scanning and decision-making

💡 UX tip

Ideal when users already know what they’re looking for and don’t need heavy visual persuasion.

3. Framed / Card-Style Layout (Strong Container)

Each product is displayed inside a clearly defined container, giving both the image and text a structured, card-like appearance. This layout feels more designed and premium.

Best for:

  • Premium products or services
  • Digital products, courses, or offers
  • Landing pages and promotional sections
  • Highlighting a smaller number of products

Why use this layout:

  • Creates strong visual separation between products
  • Makes each product feel like an individual offer
  • Enhances perceived value and focus

💡 UX tip

Combine with generous padding, subtle shadows, and fewer products per row for a polished, high-end look.

💡 Quick Guidance

  • Need clarity and familiarity? → Layout 1
  • Need efficiency and density? → Layout 2
  • Need emphasis and premium feel? → Layout 3

Always preview your chosen layout on both desktop and mobile, as spacing and hierarchy can feel very different depending on screen size and content length.

Content Alignment

Choose how text content is aligned:

  • Left
  • Center
  • Right

💡 Tip

Center alignment works well for minimal or promotional sections, while left alignment is often best for readability and product comparisons.

Product Box Styling

Controls the container that wraps each product.

Options include:

  • Box Padding
  • Box Border Radius
  • Box Background Color
  • Shadow Settings
    • No shadow
    • Outer shadow
    • Inner shadow

Use box styling to:

  • Create card-based layouts
  • Separate products from the background
  • Add depth and hierarchy

Image Size & Styling

Image Position

Controls how the image fits inside its container:

  • Fit the image in the container
  • Other fill or crop behaviors (depending on image proportions)

Image Size (Width/Height Ratio)

Controls the aspect ratio of product images, such as:

  • Wide formats
  • Square formatsChoose a ratio that matches your product photography for consistent layouts.

Image Border Radius

Rounds image corners for a softer look.

Image Background Color

Used when images don’t fully fill the container.

Text Styling

Product Title Styling

Customize:

  • Text color
  • Font family
  • Font size
  • Letter spacing
  • Font style (bold, italic, underline)

Product Price Tag Styling

Customize:

  • Text color
  • Font family
  • Font size
  • Letter spacing
  • Font style

💡 Tip

Make prices slightly more prominent than titles to support quick scanning.

Discounted Products Badge Type

If a product has a discount applied, you can visually highlight it using a badge.

Available options:

  • None No discount badge is shown.
  • Text “Sale” Displays a simple “Sale” badge.
  • Discount amount Shows the discounted currency value (e.g. “–$12”).
  • Discount percentage Shows the percentage discount (e.g. “–10%”).

Use badges to:

  • Draw attention to promotions
  • Increase urgency
  • Improve conversion on discounted items

Quick View Button Style

Controls how the Quick View button looks:

  • Regular button
  • Icons

Icon-style quick views work well for clean, modern designs, while regular buttons provide stronger visibility and clarity.

Best Practices

  • Keep the number of products manageable per section
  • Use consistent image ratios for a clean grid
  • Match fonts and colors to your global brand styles
  • Use Buy Now for focused campaigns, Add to Cart for browsing
  • Highlight discounts clearly, but avoid visual clutter
  • Test layouts on both desktop and mobile

Summary

The Store widget lets you:

  • Display products dynamically on any page
  • Choose product sources, layouts, and interaction flows
  • Control visual styling down to box, image, and text level
  • Support both cart-based and instant-purchase experiences
  • Highlight discounts, stock levels, and quick views

Used thoughtfully, the Store widget turns any page into a flexible, conversion-focused shopping experience that adapts to your products, brand, and sales strategy.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.