Build an e-commerce page layout in SGEN

How to set up a product grid, product detail view, and checkout layout in SGEN

An e-commerce store is three distinct surfaces working together: the product grid (where visitors browse), the product detail page (where they decide), and the checkout (where they commit). Each has a different job. Getting all three right — the right information at each stage, in the right order — is the difference between a store visitors convert on and one they exit from.

SGEN handles the commerce logic — inventory, variants, cart, checkout — through its native commerce surfaces. This guide covers the layout and configuration of those surfaces: how to set up a product grid that shows what you sell without overwhelming, how to configure a product detail view that gives buyers what they need to decide, and how to review the checkout flow to confirm it is working before you open the store.

The SGEN team's internal demo store is the example throughout this guide. It sells digital resources in two categories: single-tool add-ons and bundles. They have eighteen active products, each with two variants (monthly and annual), and a flat-rate shipping structure. The setup principles apply to any SGEN store, regardless of category count or variant depth.

By the end of this guide, the product grid is organized by category and showing accurate inventory, the product detail view is complete with description, variants, and images, and you will have walked through the checkout flow to confirm it processes without error.

What is this for?

This guide is for anyone setting up or reviewing an e-commerce store on SGEN. It is useful for first-time store launches and for existing stores that need to review whether the product grid and detail pages are configured correctly.

This guide covers the layout and configuration of store pages — not payment gateway setup, shipping rules, or tax configuration. Those settings are in the SGEN commerce settings and are prerequisites to this guide. This guide assumes payment and shipping are already configured and active.

Good use cases

This setup approach fits these situations.

• A first store launch.

Your team is launching an online store for the first time. Eighteen products, two variants each, one shipping tier. The product grid needs to be organized by category. Each product detail page needs its full description and variant pricing. The checkout needs to be tested end-to-end before the URL goes live.

• A store refresh after a product catalog update.

If you have added new products, retired old ones, or changed variant pricing, reviewing the product grid and detail pages confirms that the storefront reflects the updated catalog before customers encounter the changes.

• A store audit before a seasonal campaign.

Before driving paid traffic to the store, confirm the grid layout, detail pages, and checkout are all working. Campaign traffic to a broken checkout is expensive.

• A store where the default grid layout is not matching the catalog structure.

If your products belong to distinct categories and the grid shows all products in a single undifferentiated list, category-based organization will improve navigation.

• A store where the product detail pages are incomplete.

Missing images, placeholder descriptions, or absent variant pricing on detail pages undermines buyer confidence. A systematic review of detail pages before launch catches these.

• A store testing checkout for the first time.

The checkout flow involves payment processing, shipping calculation, and order confirmation. Testing it with a real (or test) transaction before opening to customers is required, not optional.

What NOT to use this for

• Do not use SG-Builder to build the product grid or product detail pages.

The product grid and product detail pages are rendered by SGEN's commerce surfaces, not by SG-Builder. SG-Builder is appropriate for a promotional landing page that promotes the store or a product line. The actual product listing and detail pages are configured through the Products and E-commerce settings.

• Do not skip checkout testing before opening the store to customers.

Payment processing errors, shipping miscalculations, and broken order confirmation emails do not show up on the product page — they show up at checkout, in real transactions. Test the full checkout flow with a real (or test mode) transaction before going live.

• Do not publish products with placeholder descriptions or missing images.

A product detail page with "Add description here" or a broken image slot tells the buyer nothing and signals an unfinished store. Every product should have a complete description, at least one image, and correct variant pricing.

• Do not configure variants without confirming pricing for each.

If a product has a 250g and a 1kg variant, each variant needs its own price. Variant pricing is not inherited from the base product price by default. Review each variant on each product before publishing.

How this connects to other features

• Media — Product images are stored in the Media library.

Upload your product photographs before creating product records. The product editor's image field draws from the Media library. High-resolution images are important on product detail pages — these are the images buyers use to decide. See Upload and manage media.

• Pages (SEO) — Product pages have SEO fields: product title,

meta description, and URL slug. These are set on each product record. After the store is configured, review the SEO fields on your highest-priority products to confirm they are descriptive and under the character limits.

• Custom CSS — The default product grid and detail page styles come from your site's theme.

If the grid card layout, the add-to-cart button style, or the detail page typography needs adjusting, Custom CSS applied at the site level will carry through. See Custom CSS basics.

• Theme customization — Global button styles, color palette, and typography

all apply to product pages. If the product grid looks off-brand, the issue is often in the theme globals, not in the product configuration. See Theme customization.

• Settings (E-commerce) — Payment gateway, shipping rules, and tax configuration

are prerequisites to this guide. If these are not yet configured, complete them in Settings before working through this guide.

Before you start

Before setting up the product grid and detail pages, have these things ready.

Have all product images uploaded to Media. Product detail pages are image-dependent. Buyers use images to evaluate a product before purchasing. Upload all product visuals to the Media library before creating product records. Use a consistent visual style — product screenshots or feature illustrations work well for digital products.

Have your product descriptions written. Each product needs a description that tells the buyer what they are purchasing and why it matters. For an add-on: what it unlocks, who it is for, and how to get started. For a bundle: what is included, the combined value, and which plan it suits. Write these before you create the product records. Copying and pasting into the product editor is faster than writing in the editor.

Know your variant structure. Decide the billing options, variant labels, and pricing for each product before creating records. Consistent variant structure across all products makes the grid scannable.

Have payment and shipping configured. The checkout will not process correctly without an active payment gateway and at least one shipping rule. Confirm both are set up in E-commerce settings before testing checkout at the end of this guide.

Where to go

Go to E-commerce (or Store) in the left sidebar of your SGEN dashboard. The E-commerce section includes Products, Categories, Orders, and Settings. Start in Products to create or review your product catalog.

Steps — Set up product grid, detail pages, and checkout

These steps take you from a product catalog in SGEN to a verified, ready-to-open store.

1. Create or review product categories

Go to E-commerce then Categories (or Product Categories). Categories determine how the product grid is organized. A grid with no categories shows all products in one undifferentiated list. A grid with categories lets buyers navigate to the product type they want.

For this example: two categories — Add-ons and Bundles.

For each category:

• Click Add Category (or Add New).
• Enter the Name — "Add-ons."
• Enter the Slug — "add-ons." Edit the auto-generated slug if needed.
• Set a Description if the theme displays category descriptions on the grid page.

For example: "Individual tools and integrations — each one solves a specific workflow."

• Click Save.

2. Create product records with descriptions and images

Go to E-commerce then Products. For each product, click Add New Product (or open an existing product to review it).

In the product editor, set:

• Product title — the name of the product as it appears in the grid and on the detail page.

"SG-Builder Pro Add-on" not "SGB-PRO-2026." Write for the buyer, not the inventory system.

• Description — the full product story.

For a tool add-on: what it does, who it is for, what it unlocks, and how to get started. For a bundle: what is included, the combined value, and which plan tier it suits. Write two to four paragraphs. Buyers read this before purchasing.

• Category — assign the product to the correct category.

Uncategorized products appear at the bottom of the grid or not at all in category-filtered views.

• Product images — upload from the Media library or directly in the product editor.

Add at least three images per product: flat lay, bag, and lifestyle. The first image in the order is the featured image shown in the product grid.

• Status — keep as Draft while setting up.

Publish only when the description, images, and variants are complete.

3. Configure product variants and pricing

Still on the product record, find the Variants section. For each variant:

• Click Add Variant.
• Set the Variant label — "Monthly" or "Annual."
• Set the Price for this variant.

Variant prices are independent — they do not inherit from each other.

• Set the SKU if you track inventory by variant.
• Set the Stock quantity if you manage inventory in SGEN.

If inventory is managed externally, leave the stock field empty or set to unlimited.

Repeat for all variants. After saving, preview the product detail page to confirm the variant selector displays correctly and that each variant's price updates when the variant is selected.

4. Review the product grid layout

After creating or updating products, go to the product grid page on your public site in a private browser window.

The product grid is the page that shows all your products in a browsable layout. Navigate to it via your store URL (e.g., yoursite.com/shop or yoursite.com/store).

Check:

• Products appear in the correct categories.
• The featured image for each product loads correctly.
• The product title and price are visible on each card.
• The "Add to cart" or "View product" action is visible on each card.
• Category filter links appear if you have multiple categories.

If the grid is showing uncategorized products in the wrong order, go back to the product records and confirm each product has the correct category assigned.

5. Review the product detail page

Click any product card in the grid to open the product detail page. This is the page a buyer lands on when they click a product. Review:

• Headline — the product title is the page H1.
• Images — all product images are loading. The image gallery shows multiple images

if you uploaded more than one.

• Description — the full product description is visible and correctly formatted.
• Variant selector — the variant dropdown or button group is present.

Selecting a variant updates the displayed price.

• Add to Cart button — the button is present and active.

Out-of-stock variants should show a different state (greyed out, or a "Notify me" option).

• Price — the price shown matches the variant selected.

If the description is missing or the images are broken, go back to the product record and confirm the fields were saved correctly.

6. Walk through the checkout flow

Add a product to the cart and complete the checkout end-to-end. Do this in a private browser window so the admin session does not interfere.

The checkout flow in SGEN is typically: cart review → contact information → shipping method → payment → order confirmation.

At each stage, check:

• Cart — the product name, variant, quantity, and price are all correct.

The cart total matches the product price plus any shipping estimate shown.

• Contact information — the form accepts email address, name, and shipping address.
• Shipping — the shipping method options match the rules configured in E-commerce settings.

At least one shipping option is available. The shipping cost is correct.

• Payment — the payment form loads.

In test mode, use the payment gateway's test card number to complete a test transaction. Do not use real card numbers for checkout testing.

• Order confirmation — after a successful test purchase,

the order confirmation page loads and the order confirmation email is received at the test email address.

If any stage of the checkout is not working, check E-commerce settings for the affected area: shipping rules for shipping errors, payment gateway settings for payment errors.

What success looks like

When the store is configured and ready, these things are true.

• The product grid page is visible at the store URL in a private browser window.
• All published products appear in the grid with correct images, titles, and prices.
• Category filter links appear and filter the grid correctly.
• Clicking a product opens the detail page with full description, all images, and the variant selector.
• Selecting a variant updates the displayed price.
• The Add to Cart button is active on in-stock variants.
• The checkout flow processes a test transaction end-to-end without error.
• The order confirmation email is received after a test purchase.

What to do if it does not work

• Products are not appearing in the grid.

Confirm each product's status is Published, not Draft. Draft products do not appear in the public grid. Also confirm the product is assigned to a category — on some themes, uncategorized products are hidden from the grid.

• Product images are broken or not loading.

Check the product record to confirm images were saved correctly. Broken image slots usually mean the image was removed from the Media library after being assigned to the product. Re-upload the image and re-assign it on the product record.

• Variant prices are not updating when I select a variant.

This is typically a theme or JavaScript issue. Try the store in a different browser. If the problem persists, the variant prices may not be saved correctly on the product record — open each variant in the product editor and confirm the price is set.

• The checkout is failing at the payment step.

Confirm the payment gateway is active and configured correctly in E-commerce settings. In test mode, use the gateway's official test card numbers — not real card numbers. If the gateway credentials are correct and payment still fails, contact your payment gateway's support team.

• No shipping options are appearing at checkout.

Go to E-commerce then Settings then Shipping. Confirm at least one shipping rule is active and covers the shipping destination you are testing from. If a shipping rule exists but is not appearing at checkout, check whether the rule has a minimum order value that the test cart is not meeting.

• The order confirmation email is not arriving after a test purchase.

Check the email address used for the test order. Also check your spam folder. If the email is not arriving at all, confirm the outbound email settings in SGEN are configured with a valid SMTP or sending service.

Tips for a strong store setup

• Treat the product description as sales copy.

The description on the product detail page is often the last thing a buyer reads before clicking Add to Cart. "Add description here" is not sales copy. Origin story, tasting notes, and brewing guidance are.

• Keep variant labels buyer-friendly.

"250g" and "1kg" are clear. "SKU-250-STANDARD" and "SKU-1000-BULK" are not. Variant labels appear in the selector the buyer interacts with. Write them for the buyer.

• Test checkout before every campaign.

Payment gateways, shipping services, and email providers can change configurations in ways that break checkout without warning. Before driving traffic to the store from a paid campaign, run a test transaction.

• Upload at least three images per product.

One image is not enough for a buyer to feel confident. Flat lay, packaging, and a context or lifestyle shot give the buyer enough visual information to decide without touching the product.

• Review the mobile product grid before opening.

Product grids at mobile often collapse to one column. Confirm the image, title, and price are all legible on a 375px screen. Buyers shop on phones.