> For the complete documentation index, see [llms.txt](https://guide.hypercape.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://guide.hypercape.com/brand-mall-studio/storefront-mall/storefront-mall-how-to-use.md). # Storefront Mall How-to Use ## Storefront Mall How-to Use Guide This guide explains how brand operators, MDs, marketers, and content managers can create and publish a Storefront Mall without developer support. A Storefront Mall is an online shopping storefront where customers can discover products, open product detail pages, add items to cart, and continue to checkout. The setup flow is organized into four main steps: `Theme`, `Products`, `Sections`, and `Publish`. *** ### 1. Storefront Mall Overview A Storefront Mall is not only a brand introduction page. It is a sales storefront designed to guide customers from product discovery to purchase. In a Storefront Mall, you manage the following areas. | Area | What it means | | -------- | ------------------------------------------------------------------------------------------------- | | Theme | Sets the overall design, colors, fonts, and page structure. | | Products | Selects the products shown in the storefront and controls their order. | | Sections | Builds the homepage: banners, menus, product areas, reviews, Instagram, trust badges, and footer. | | Publish | Reviews the storefront and makes it visible to visitors. | The safest setup order is: 1. Choose the overall design in `Theme`. 2. Select the products to sell in `Products`. 3. Build the homepage and menus in `Sections`. 4. Review the storefront, then publish it when everything is ready. It is important to understand the difference between `Save` and `Publish`. | Button | Meaning | | ------- | -------------------------------------------------------------------------------- | | Save | Saves your edits. Saving alone may not make the storefront visible to customers. | | Preview | Shows how the storefront will look to customers. | | Publish | Makes the storefront available to visitors. | *** ### 2. Before You Start Prepare the following materials before building the Storefront Mall. This makes the setup process faster and reduces the risk of publishing incomplete content. #### Brand Materials * Brand name * Logo image * Brand introduction copy * Official social media links * Customer service information * Company or seller information #### Product Materials * List of products to sell * Hero products * New arrivals * Best sellers * Sold-out or discontinued product status * Product images and price information #### Content Materials * Main banner images * Mobile banner images * Promotion copy * Review content * Instagram post links * Customer guidance copy such as shipping, returns, authenticity, or support messages If images or copy are not ready, it is better to hide the related section instead of publishing placeholder text or empty images. Incomplete content can reduce customer trust. *** ### 3. Overall Creation Flow The Storefront Mall editor is usually organized into four steps.
As shown above, the editor is divided into `Theme`, `Products`, `Sections`, and `Publish`. The preview area shows how the current settings will appear to customers. | Step | Screen label | What you do | | ------ | ------------ | ------------------------------------------------------------ | | Step 1 | Theme | Set the storefront design and base layout. | | Step 2 | Products | Select and organize products for the storefront. | | Step 3 | Sections | Configure the homepage, menus, banners, reviews, and footer. | | Step 4 | Publish | Review the final storefront and make it public. | These steps are connected. For example, if no products are selected in `Products`, product-based sections in `Sections` may appear empty. If you change the `Theme`, the same sections can look different. For a new storefront, work through the steps in order from 1 to 4. *** ## Step 1. Theme Setup The Theme step defines the overall design and structure of the Storefront Mall. This is not just about choosing a beautiful look. It decides the first impression customers get and how they browse products.
In the Theme step, you can review and adjust the base design in one place. Main items to check: * Theme template * Storefront version * Brand logo * Palette * Typography * Layout * Product display * Header style * Background mood * Card style * Desktop and mobile preview Theme is the foundation of the storefront. Before configuring products and sections, choose the Theme so you can predict how products and content will be displayed. *** ### 1.1 Choose a Theme Template A Theme template is the base design template for the Storefront Mall. For example, selecting a theme such as `Aesthe Journal` applies that theme's layout and visual mood. Use the following criteria when choosing a template. | Checkpoint | Description | | ------------------- | --------------------------------------------------------------------------------- | | Brand mood | Does the design match the brand: premium, trendy, practical, editorial, or clean? | | Product readability | Are product images and names easy to see? | | Visual complexity | Do decorative elements distract from products? | | Mobile fit | Does the first screen and product card layout work well on mobile? | If this is your first Storefront Mall, choose a stable Theme first, then customize colors and typography in the detailed settings. *** ### 1.2 Choose a Storefront Version The Storefront version changes the public storefront structure within the selected Theme. In simple terms, it controls how products and content are arranged. | Option | Simple explanation | Recommended use | | ----------- | --------------------------------------------------------------------- | ----------------------------------------------------- | | Classic | A standard shopping mall layout with balanced products and content. | When you want a familiar brand shopping experience. | | Framed Mall | Uses more spacing and clearer boundaries for a polished look. | When you need a premium or content-led storefront. | | Storefront | A shorter, simpler format for showing the brand and products quickly. | When the storefront is used like a public sales link. | Changing the Storefront version can change how the same products and sections appear. After changing it, always review the `Products`, `Sections`, desktop preview, and mobile preview again. *** ### 1.3 Set the Brand Logo The Brand logo is the key identity element shown in the top area of the Storefront Mall. It helps customers recognize the brand as soon as they arrive. You can usually use either a text logo or an image logo. Check the following: * Is the logo too small or too large? * Is it cut off on mobile? * Is it visible on the selected background color? * Does it match the official brand logo? * Does it overlap with the header menu? If a logo image is not ready, it is safer to show the brand name as clean text than to publish a temporary image. *** ### 1.4 Set the Palette The Palette controls the overall color mood of the Storefront Mall. Background colors, accent colors, button colors, and text colors may all be affected. In a shopping storefront, color should not interfere with products. Customers should notice the product image, product name, price, and action buttons first. Check the following: * Do product images stand out from the background? * Are buttons easy to notice? * Is text easy to read? * Does the color palette match the brand? * Is the overall screen too dark, too strong, or too noisy? Recommended direction: | Brand or product type | Suggested direction | | ------------------------ | ------------------------------------------------ | | Skincare or beauty | Bright, clean colors with soft accents. | | Premium brand | Controlled monochrome or low-saturation accents. | | Campaign storefront | One clear accent color. | | Large product assortment | Simple background so products are easy to scan. | *** ### 1.5 Set Typography Typography controls the style of text across the storefront: titles, descriptions, buttons, product names, and footer information. The most important rule is readability. A font can look attractive but still be unsuitable for a sales page if it is hard to read. Main settings: | Item | Description | | ------------------ | --------------------------------------- | | Heading style | The mood of large titles. | | Heading weight | The thickness of title text. | | Letter spacing | The spacing between letters. | | Title align | Aligns section titles left or center. | | Uppercase headings | Displays English headings in uppercase. | Be careful with: * Wide letter spacing can make small text difficult to read. * Uppercase headings can work for short English titles but feel awkward for long sentences. * Check that Korean, English, and numbers all look natural if the storefront uses multiple languages. * On mobile, readability matters more than decorative style. *** ### 1.6 Set the Layout Layout controls the storefront width, side padding, section spacing, and product arrangement. | Item | Description | What to check | | --------------- | ---------------------------------------------- | ---------------------------------------------------------------- | | Product layout | Controls how products are displayed. | A grid may be easier when there are many products. | | Max width | Controls the maximum content width on desktop. | Too wide can feel scattered; too narrow can feel cramped. | | Side padding | Controls horizontal spacing. | Make sure products do not become too small on mobile. | | Section spacing | Controls vertical spacing between sections. | Reduce it for dense content; increase it for a premium feel. | | Spacing | Quickly chooses the overall spacing mood. | Pick Compact, Regular, or Spacious based on the storefront goal. | | Header layout | Controls logo and menu placement. | Check that logo and menus do not overlap. | Selection tips: * Reduce spacing if you want to show many products quickly. * Increase spacing if you want a more premium and relaxed look. * If product images look too small, adjust max width or card size. * If mobile scrolling feels too long, reduce section spacing. *** ### 1.7 Product Display and Card Style Product display and Card style control the size and spacing of repeated cards, such as product cards, review cards, and Instagram tiles.
In the `Cards` tab, you can adjust the width and gap of product cards, review cards, and Instagram cards. After changing settings, check the live preview to confirm the card size feels natural. Check the following: * Are product images large enough? * Are product names and prices readable? * Is the gap between cards too narrow or too wide? * Are cards consistent within the same section? * Is the mobile view easy to scan? If product cards are too small, product appeal is reduced. If they are too large, customers see fewer products at once. Balance card size based on image quality and product count. *** ### 1.8 Set the Header Style The Header is the top area containing the logo and navigation menu. In the Theme step, you can decide how the header appears. Examples: * Center-aligned logo * Left-aligned logo * Compact header * Floating header * Header style that changes after scrolling Check the following: * Do the logo and menu overlap? * Are there too many menu items? * Is the menu easy to access on mobile? * Does the header still look natural after scrolling? * Are text and icons visible over the background? The Header is used throughout the shopping journey, so usability is more important than decoration. *** ### 1.9 Check Desktop and Mobile Preview After completing Theme settings, always check both desktop and mobile previews. A screen that looks good on desktop can have cropped images or overlapping text on mobile. Check the following: * Is the logo visible? * Does the header menu display correctly? * Is the main banner image cropped properly? * Are product cards an appropriate size? * Do titles and descriptions overlap? * Do buttons stay inside the screen? * Is section spacing too wide or too narrow? If most visitors are expected to use mobile, review the mobile version first. *** ### 1.10 Theme Completion Checklist The Theme step can be considered complete when: * A Theme template is selected. * The Storefront version matches the brand goal. * The logo displays correctly. * Colors and fonts match the brand mood. * Product cards look clean and readable. * The Header works on desktop and mobile. * Spacing and section gaps feel natural. * The first screen does not look awkward in Preview. After completing Theme, move to `Products`. *** ## Step 2. Select Products In the Products step, you choose which products will appear in the Storefront Mall. These products are used in product lists, keyword product sections, recommendation areas, review-linked products, and other product-based modules.
In this step, search for products on the left, manage selected product order and visibility in the middle, and review the storefront preview on the right. The important point is that not every catalog product is automatically displayed. Only products added to this Storefront Mall are shown to customers. *** ### 2.1 What You Do on the Products Screen The Products screen is usually split into product discovery and selected product management. | Area | What you do | | ------------------------- | ------------------------------------------------------------------ | | Search | Find products by product name, brand name, or keyword. | | Brand filter | Narrow the list to a specific brand. | | Product card | Check product image, name, price, and selling status. | | Add | Add an individual product to the Storefront Mall. | | Add all available results | Add all available products from the current search result. | | Added product list | Manage order, visibility, badges, and notes for selected products. | *** ### 2.2 Product Selection Flow 1. Go to the `Products` step. 2. Enter a product name, brand name, or keyword in the search field. 3. Use the brand filter if needed. 4. Check product image, name, price, and availability on the product card. 5. Add products one by one, or use `Add all available results`. 6. Arrange the order in the added product list. 7. Hide or show products if needed. 8. Add short badges or recommendation notes if useful. 9. Click `Save` to save product changes. 10. Use Preview to check the product list and product detail navigation. *** ### 2.3 Values Managed on Added Products | Value | Description | | ------------ | ------------------------------------------------------------------------------------------------- | | Order | Controls the order products appear in the public storefront. | | Show / hide | Controls whether a product is visible to visitors. | | Badge | A short label such as `Best seller` or `Staff pick`. | | Creator note | A short reason for recommending the product. | | Delete | Removes the product from this Storefront Mall only. It does not delete the original product data. | Adding or removing products here does not change the original product record. It only controls which products this storefront displays and how they are described. *** ### 2.4 Product Selection Criteria When building a Storefront Mall for the first time, prioritize: * Products that represent the brand * Products you want to sell right now * New arrivals * Best sellers * Promotion items * Products connected to reviews or content Review the following carefully before publishing: * Sold-out products * Products without prices * Products without images * Test products * Products that should not be sold * Products with incomplete detail information *** ### 2.5 Decide Product Order Product order controls the order in which customers discover products. A natural order is: 1. Hero products 2. Best sellers 3. Current promotion products 4. New arrivals 5. Category products 6. Add-on or supporting products The first row is especially important. The first products customers see can affect the brand impression and purchase intent. *** ### 2.6 Products Step Checklist | Checkpoint | Why it matters | | ---------------------------------------------- | ------------------------------------------------------------ | | Are all products you want to sell added? | Product sections cannot work well without selected products. | | Are products that should not be sold excluded? | Unprepared products could be published. | | Are sold-out products not placed at the front? | Customers should not see unavailable products first. | | Do product images load correctly? | Image quality directly affects trust. | | Is the product order saved as intended? | Recheck after saving in Preview. | | Are badges and notes free of placeholder text? | Avoid publishing labels such as `Sample` or `Test`. | *** ## Step 3. Configure Sections The Sections step builds the homepage and top/bottom areas of the Storefront Mall. You can think of it as the homepage builder.
Select a section on the left, edit it in the center panel, and review the customer-facing result on the right. This step controls what customers see first and in what order. Banners, menus, keyword products, recommendation cards, reviews, Instagram, trust badges, and footer information are all managed here. *** ### 3.1 Common Section Controls Most sections include the following controls. | Control | Description | | --------------- | ----------------------------------------------------------------------------------------- | | Edit | Changes copy, images, links, colors, products, or other section content. | | On / off toggle | Shows or hides the section for visitors. | | Move up / down | Changes the section order. | | Delete | Removes some user-added sections. Default sections are usually hidden instead of deleted. | | Preview | Shows the real display in the preview area. | Turning off a section does not immediately delete its content. When you turn it back on, check whether the previous copy and images are still there. *** ### 3.2 When to Show or Hide Sections Showing every section can make the page too long and push key products too far down. Use the following rules. | State | When to use it | | ------- | -------------------------------------------------------------------------- | | Show | Use when real content is ready and should be visible to visitors. | | Hide | Use when images, copy, or links are not ready or placeholder copy remains. | | Reorder | Use when important products, campaigns, or reviews should appear higher. | | Delete | Use when a user-added Card showcase is no longer needed. | Recommended default flow: 1. Announcement bar 2. Header 3. Main banner 4. Contents strip 5. Shop by keywords 6. Featured edit or Card showcase 7. Promo banner 8. Real Reviews 9. Trust badges 10. Instagram feed 11. Footer This creates a natural customer path: notice, brand recognition, product discovery, recommended products, trust signals, and official information. *** ### 3.3 Common Section Title Style Some sections include `Section title style`. This changes only the title inside that section. | Item | Description | | --------------- | ------------------------------------------------------ | | Title align | Aligns the section title left or center. | | Title treatment | Shows the title as plain text or with a bar treatment. | | Title size | Adjusts title size. | | Section CTA | Adds a button below the section. | If `Section CTA` is enabled, choose one of the following destinations. | CTA destination | Description | | --------------- | -------------------------------------------------------------------- | | Custom link | Opens a URL or an anchor inside the storefront. | | Product page | Opens a product page containing selected products. | | Content page | Opens a separate content page with text, images, and product blocks. | Operational tips: * Use Product page when you want to show more products. * Use Content page for brand stories or campaign explanations. * Use Custom link for external pages or specific sections. *** ### 3.4 Announcement Bar The Announcement bar is a short message displayed at the very top of the storefront. Use it for notices, shipping information, discount codes, or event messages that all visitors should see. Editable items: | Item | Description | | ---------------- | --------------------------------- | | Bar text | The message displayed at the top. | | Background color | The bar background color. | | Text color | The message text color. | Good copy examples: * Free shipping over $50 * Get 15% off your first order * Shipping options and delivery rates are calculated at checkout * New arrivals are updated every Friday Writing tips: * Keep the message short. * Communicate only one message at a time. * Avoid long sentences that are hard to read on mobile. * If you include a discount code, enter it exactly. Before publishing, check: * Is contrast between background and text strong enough? * Is the message cut off on mobile? * Does the copy match the real shipping or discount policy? * Are there any typos? *** ### 3.5 Header The Header contains the logo, navigation, account area, cart, and social links. It is the most important navigation area in the storefront.
In the Header editor, you manage social links and top navigation. Menu types can connect to internal pages, sections, external URLs, or hover menus. Main Header items: | Item | Description | | ------------ | ------------------------------------------------------------------ | | Logo | The brand logo or brand name shown at the top. | | Social links | Instagram, TikTok, YouTube, and Facebook links. | | Nav links | Top navigation links. Up to 8 can be configured. | | Points badge | A short badge next to the account icon. Leave empty if not needed. | *** #### 3.5.1 Nav Links Nav links are the menu items shown in the Header. They help customers move to products, collections, content, and external links. Menu types: | Type | Description | Example | | --------------------- | ------------------------------------------------------------------- | ---------------------------------- | | Page | Opens an internal Storefront page. | Contact, About, FAQ | | Multi-brand directory | Automatically displays multiple brands connected to the Storefront. | Brand menu, A-Z brand list | | Section | Moves to a section on the homepage. | `#shop`, `#reviews` | | Link | Opens a manually entered URL. | External brand site, campaign page | | Menu | Shows a hover menu when the customer hovers over the nav item. | Brand, Shop, Category | Tips: * Keep menu names short. * Do not create too many menu items. * If the mobile menu becomes difficult to use, keep only the core links. * Always test external links. * Multi-brand directory is suitable for multi-brand Storefronts. For a single-brand Storefront, Page or Section links usually feel more natural. *** #### 3.5.2 Hover Menu A Hover menu opens when the customer places the cursor over a Header menu item. Use it to show multiple brands, categories, product groups, or visual panels at once. Configurable items: | Item | Description | | ------------------ | ------------------------------------------------------------------ | | Group | A large group inside the menu. Up to 4 groups can be created. | | Menu item | Individual links inside each group. Up to 12 items per group. | | Menu products | Small product cards shown inside the hover menu. Up to 6 products. | | Menu visual panels | Image-based visual panels shown beside the menu. Up to 2 panels. | Hover menu destinations: | Destination | Description | | ------------ | ----------------------------------------------------------- | | Custom link | Opens a manually entered URL. | | Product page | Opens a page containing selected products. | | Content page | Opens a content page with text, images, and product blocks. | Good examples: * Add an A-Z brand list under `Brand`. * Add categories such as Skin care, Makeup, and Hair care under `Shop`. * Add best sellers and recommended product cards under `Best`. * Link routine guides or ingredient guides under `Guide`. Be careful: * A long brand hover menu may not be necessary for a single-brand Storefront. * Too many items make it difficult for customers to choose. * Group names and item names should not be confusing or duplicated. * Menu products should be selected from products added in the Products step. * Check image, title, description, and button link for every visual panel. Before publishing, check: * Does the menu open correctly on hover? * Does each menu item open the correct page? * Is the menu accessible on mobile? * Do product cards open real products? * Do visual panel images load correctly? *** ### 3.6 Main Banner The Main banner is the large banner customers see first. It shapes the first impression and is useful for hero campaigns, new arrivals, seasonal promotions, and key products.
In the Main banner editor, manage banner images, copy, buttons, desktop/mobile ratios, and banner order. Since this area appears on the first screen, always check the mobile preview. You can manage up to 4 main banners. If there are multiple banners, put the most important message first. Editable items: | Item | Description | | ------------------ | ----------------------------------------------------------------- | | Section size | Controls how large the banner appears. | | Transition speed | Controls autoplay speed when multiple banners exist. | | Desktop ratio | Controls the banner ratio on desktop. | | Mobile ratio | Controls the banner ratio on mobile. | | Desktop image | Banner image for desktop. | | Mobile image | Banner image for mobile. If empty, the desktop image may be used. | | Image alt text | Image description for accessibility and image loading fallback. | | Layout | Controls how image and copy are arranged. | | Image position | Sets whether the image appears on the left or right. | | Headline | Main banner title. | | Subhead | Supporting copy under the headline. | | CTA label | Button text. | | CTA URL | Destination opened by the button. | | Soft edge | Softens the image edge so it blends with the background. | | Banner destination | Destination for banner or CTA clicks. | | Banner order | Display order when multiple banners exist. | Setup flow: 1. Prepare the banner image. 2. Choose the Section size. 3. Add separate desktop and mobile images if possible. 4. Check desktop and mobile ratios. 5. Enter the Headline and Subhead. 6. Add CTA label and destination if needed. 7. Choose the Banner destination. 8. Put the most important banner first. 9. Confirm transition speed is not too fast or too slow. 10. Check both desktop and mobile preview. Banner destination options: | Option | Description | Example | | ------------ | ------------------------------------------------ | ----------------------------------- | | No click | Shows only the banner image with no destination. | Brand mood image | | Custom link | Opens a manually entered URL. | External campaign page, page anchor | | Product page | Opens a page containing selected products. | New arrivals, best sellers | | Content page | Opens a content page with text and images. | Brand story, campaign guide | Good banner criteria: * Customers can understand what is being sold from the first screen. * Important products or copy are not placed too close to the image edge. * The main subject is not cropped on mobile. * Button copy is short and action-oriented. * Multiple banners do not repeat the same message. CTA examples: * Shop now * View collection * Explore routine * Get the offer Before publishing, check: * Is the image clear and not pixelated? * Are faces, products, and text not cropped on mobile? * Does the CTA link open the correct destination? * Is the banner order natural? * Is autoplay speed slow enough for customers to read? *** #### 3.6.1 When Storefront Intro Is Available Some Storefront versions include a `Storefront intro` area together with the Main banner. This area can manage a short brand intro, banner list, social links, and contact details. Editable items: | Item | Description | | --------------------- | ------------------------------------------------------------------- | | One-line memo | A short sentence describing the storefront. | | Banner Manager | Adds, edits, hides, shows, and reorders banners. | | Transition speed | Controls autoplay speed for multiple banners. | | Web ratio | Banner ratio on desktop. | | Mobile ratio | Banner ratio on mobile. | | Entrance animation | Controls how the intro appears when customers enter. | | Scrolled header style | Controls how the Header looks after scrolling. | | Header social | Instagram, TikTok, YouTube, and Facebook links shown in the Header. | | Contact | Information opened from the Header Contact button. | Tips: * Keep the One-line memo short. * Add customer service, shipping/return guidance, or support email in Contact. * Make sure social links open real accounts. * Entrance animation can create a strong first impression, but avoid overusing it if product discovery should be fast. *** ### 3.7 Contents Strip The Contents strip is a compact horizontal link section. It helps customers move quickly to important content or sections.
Use it to place short links in the middle of the homepage. Good use cases: * Quick links such as Brand story, Best sellers, or New arrivals * Links to important homepage sections * Links to content pages or collections Tips: * Keep link names short. * 3 to 5 links usually work well. * Each link should have a clear destination. * Test each link in Preview. Avoid: * Long link names * Links that do not open anything * Multiple links with similar names *** ### 3.8 Shop by Keywords Shop by keywords groups products by keyword. It helps customers browse by concern, category, benefit, or use case.
Create keyword tabs and decide which products appear in each tab. The default product order from `Products` and the keyword-specific product order are managed separately. Up to 6 keywords can be used. Editable items: | Item | Description | | ------------------ | --------------------------------------------------------- | | Section title | Title for the keyword product area. | | Keywords | Tabs customers can click. | | Shown in this tab | Products displayed under the selected keyword. | | Available products | Products not yet added to the selected keyword. | | Reset order | Resets this keyword's product order to the default order. | Keyword examples: * Hydrating * Calming * Acne Care * Brightening * Sensitive Skin * Best Sellers Setup flow: 1. Enter the Section title. 2. Add the keywords you need. 3. Rename keywords so customers can understand them. 4. Select one keyword. 5. Choose products for that keyword from Available products. 6. Adjust product order in Shown in this tab. 7. Repeat for other keywords. 8. Use Preview to confirm each tab changes products correctly. Important difference: | Area | Meaning | | --------------------------------- | --------------------------------------------------- | | Product order in Products step | Default Storefront product order. | | Product order in Shop by keywords | Product order only inside the selected keyword tab. | Before publishing, check: * Does every visible keyword contain products? * Are keyword names easy for customers to understand? * Are empty keywords hidden? * Is the product order natural in each keyword? *** ### 3.9 Card Showcase Card showcase is a flexible card section that can be added by the operator. It can be used for product groups, image links, campaign banners, content pages, brand cards, and more.
First choose the section purpose, then combine card images, titles, descriptions, links, product pages, or content pages. A Card showcase can contain up to 16 cards. A keyword-style Card showcase can use up to 6 keywords. *** #### 3.9.1 Add a Card Showcase 1. Go to the `Sections` step. 2. Click `Add card showcase`. 3. Click `Edit` on the new Card showcase. 4. Select the Section purpose. 5. Enter title, image, link, and connected products. 6. Adjust card order. 7. Check desktop and mobile card spacing in Preview. 8. Click `Save`. *** #### 3.9.2 Choose Section Purpose | Option | Simple explanation | Recommended use | | ------------------- | ------------------------------------------------ | ----------------------------------------------- | | Keyword product row | Shows product groups by keyword in one row. | Routines, categories, or recommendation groups. | | Image link cards | Shows multiple image cards with links. | Brand, campaign, or category entry cards. | | Wide image carousel | Shows wide image cards in a horizontal carousel. | Visual campaigns or collections. | | Content cards | Looks like article or content cards. | Articles, how-to guides, brand stories. | | Banner cards | Shows multiple mixed banners. | Promotions, curated edits, seasonal campaigns. | *** #### 3.9.3 Card Showcase Layout Settings | Item | Description | | -------------- | --------------------------------------------------------------------------------------- | | Tile flow | Controls whether cards wrap into rows or scroll in one row. | | Card size | Sets card size to regular or compact. | | Layout preset | For Banner cards, choose layouts such as hero stack, three equal, two column, or bento. | | Text placement | Controls whether copy appears below, over, or in a separate band on the image. | | Text align | Aligns card copy left or center. | | Tone | Sets the card color mood: soft, light, brand, or dark. | Tips: * Use Keyword product row for product-led sections. * Use Image link cards for category entry points. * Use Wide image carousel when campaign images are important. * Use Content cards for articles or brand stories. * Use Banner cards for sales, events, and seasonal campaigns. *** #### 3.9.4 Card Input Fields | Item | Description | | ----------- | ------------------------------------------ | | Image | Image shown on the card. | | Title | Card title. | | Subtitle | Short supporting copy. | | CTA label | Button copy. | | Destination | Where customers go when clicking the card. | Destination options: | Option | Description | Example | | ------------ | ------------------------------------------ | --------------------------------------- | | No click | Decorative card with no destination. | Brand mood image | | Custom link | Opens a manually entered URL. | External campaign page | | Product page | Opens a page containing selected products. | Toner picks, Sunscreen edit | | Content page | Opens a content page with text and images. | Brand story, how-to guide, event notice | *** #### 3.9.5 Link to a Product Page A Product page shows only selected products. Setup flow: 1. Select `Product page` as the Destination. 2. Enter the Page URL. 3. Enter the Page title. 4. Enter the Page description. 5. Select products to include. 6. Confirm the page opens in Preview. Be careful: * If no products are selected, the page can appear empty. * Page URLs may be visible to customers, so keep them short and readable. * Avoid creating multiple pages with the same name. *** #### 3.9.6 Link to a Content Page A Content page combines text, images, quotes, and product blocks instead of showing only products. Available blocks: | Block | Description | | ------------ | ------------------------------------- | | Text | Basic title and body text block. | | Two columns | Two-column text layout. | | Image + text | Image and explanation shown together. | | Image | Large image block. | | Products | Shows selected products. | | Quote | Highlighted quote block. | A Content page can use up to 12 blocks. Recommended use cases: * Brand story * How-to guide * Ingredient explanation * Event announcement * Routine recommendation page Before publishing, check: * Is the Page title clear? * Is the body text not too long? * Are images not cropped on mobile? * Are real products connected to product blocks? * Do CTA and card links open the correct page? *** ### 3.10 Quote Block Quote block highlights a short quote or brand message. It is more useful for building mood and trust than for direct shopping.
If you do not have a prepared message, it is usually cleaner to hide this section. Editable items: | Item | Description | | --------- | --------------------------------------- | | Quote | Highlighted italic-style copy. | | Body | Supporting copy under the quote. | | CTA label | Button copy. Leave empty if not needed. | | CTA link | Destination opened by the button. | Good use cases: * Showing a short brand philosophy * Highlighting a customer review sentence * Telling a short product development story Be careful: * Long copy weakens the quote effect. * Placing a large Quote block before product discovery can slow down the shopping flow. * Hide it if no strong message is ready. *** ### 3.11 Featured Edit Featured edit highlights products or content curated by the operator.
Use it for recommended products, editor's picks, seasonal edits, or key campaign items. Good use cases: * This week's recommendations * Editor's picks * Routine by skin concern * Seasonal products * Core campaign products Tips: * Use a clear title. * Keep recommendation copy to one or two sentences. * Do not connect too many products. * Place the most important product first. Before publishing, check: * Are recommended products added in the Products step? * Does the title match the product selection? * Does the CTA open the correct page? * Does the card layout stay manageable on mobile? *** ### 3.12 Promo Banner Promo banner highlights promotions, discounts, collections, or events. It is a lighter CTA area than the Main banner.
Use an image or video to emphasize a specific campaign or benefit. Make sure CTA copy and links match the actual promotion. Editable items: | Item | Description | | -------------- | ------------------------------------------------------------------- | | Section size | Banner size. | | Layout | Split image or Full image layout. | | Image side | For split layout, controls whether the image appears left or right. | | Text alignment | Controls copy alignment. | | Media type | Image or video. | | Text position | Controls where copy appears over a full image or video. | | Background dim | Dark overlay to improve text readability over media. | | Promo image | Banner image. | | CTA label | Button copy. | | CTA link | Button destination. | Video notes: * MP4, WebM, and QuickTime formats can be used. * Keeping video files under 40 MB is safer. * If copy appears over video, adjust Background dim for readability. Examples: * Limited time offer * Shop bundles * New collection * Free shipping campaign * Holiday sale Before publishing, check: * Does the image or video load correctly? * Is copy readable over the media? * Does the CTA open the right page? * Does the button stay inside the mobile screen? * Does the promotion period and copy match the real operation? *** ### 3.13 Special Feature Special feature is a high-impact visual section used in the middle of the storefront. It can show brand names, campaign copy, or special visual effects.
This section is useful for emphasizing a brand lineup or campaign message. If it includes movement, check that it does not feel excessive on mobile. Editable items: | Item | Description | | -------------- | -------------------------------------------- | | Highlight text | Short number or word shown before the title. | | Heading text | Main title. | | Subcopy | Supporting copy under the title. | | Brand names | Names shown in moving or repeated text. | | Background | Section background color. | | Base text | Base text color. | | Accent color | Accent color. | Brand name input examples: ``` Jumiso LA PIGNE Lilybyred makeprem MEDICUBE ``` Or: ``` Jumiso, LA PIGNE, Lilybyred, makeprem, MEDICUBE ``` Good use cases: * Multi-brand Mall with many brands * Highlighting a specific brand lineup * Creating a strong campaign mood Be careful: * This may not be necessary for a single-brand Mall. * Moving text can feel fast on mobile. * If there are too few brand names, repetition may look awkward. * After changing background color, confirm text is still readable. *** ### 3.14 Real Reviews Real Reviews shows review videos or Instagram reviews. It can increase customer trust before purchase.
Manage review links, thumbnails, and connected products here. The review and connected product should match. Up to 12 reviews can be added. Editable items: | Item | Description | | ------------- | ---------------------------------------------------- | | Section title | Review section title. | | Review link | Instagram link, video link, or original review link. | | Fetch media | Imports thumbnail or video from an Instagram link. | | Thumbnail | Image shown on the review card. | | Product | Product connected to the review. | Setup flow: 1. Enter the Section title. 2. Click `Add review`. 3. Enter an Instagram or video link. 4. Click `Fetch media` to import the thumbnail. 5. If fetching fails, upload a thumbnail manually. 6. Select the related product. 7. Check the review card and product connection in Preview. Be careful: * If the review and product do not match, customers may be confused. * Instagram thumbnail fetching can fail, so prepare a manual image if possible. * Hide the section if you do not have enough real reviews. * Confirm the original review link opens. *** ### 3.15 Featured Articles Featured Articles shows short article cards for brand stories, how-to guides, ingredient explanations, and routine guides.
If content is not ready, hide this section before publishing. Up to 8 articles can be added. Editable items: | Item | Description | | -------------- | ---------------------------------------- | | Section title | Section title. | | Columns | Number of article cards per row. | | Article title | Title shown on the article card. | | Excerpt | Short article description. | | Read More link | Destination opened when customers click. | | Reorder | Changes article card order. | Good use cases: * Ingredient explanation * Product usage guide * Brand journal * Routine guide * Campaign introduction Tips: * Keep titles short and specific. * One or two sentences are enough for the excerpt. * Without a Read More link, customers cannot continue reading. * Hide the section if content is not ready. Before publishing, check: * Does each link open a real page? * Does the article title match the linked content? * Does the Columns setting look natural on mobile? * Is there any placeholder article copy? *** ### 3.16 Instagram Feed Instagram feed shows brand mood using Instagram-style image tiles.
Manage the account handle, post links, tile images, and captions here. The image tone should match the brand. Up to 16 tiles can be added. Editable items: | Item | Description | | ---------------- | ---------------------------------------- | | Section title | Section title. | | Instagram handle | Instagram account name to display. | | Tile image | Image shown in each tile. | | Link | Instagram post link opened by the tile. | | Caption | Short image description. | | Fetch thumbnail | Imports an image from an Instagram link. | Instagram link types: * Instagram post * Instagram reel * Instagram TV link Tips: * Keep image tone consistent. * Avoid blurry or overly dark images. * Confirm external links open correctly. * Do not add posts unrelated to the brand. Before publishing, check: * Do images load correctly? * Do Instagram links open? * Are tiles large enough on mobile? * Does the overall image tone match the brand? *** ### 3.17 Trust Badges Trust badges show three short trust messages for customers. The three badge cards are fixed.
Use this section for shipping, authenticity, secure checkout, and customer support information. Do not write messages that differ from real policy. Editable items: | Item | Description | | ------------- | ----------------------------------------- | | Section title | Section title. Leave empty if not needed. | | Icon | Icon shown on each card. | | Title | Short trust message. | | Body | Supporting explanation. | Available icon examples: * Gift * Leaf * Truck * Star * Heart * Package * Shield * Sparkles Copy examples: | Title | Body | | ------------------ | ------------------------------------------------------ | | Authentic Products | We source directly from verified brand partners. | | Secure Checkout | Payments are processed through a secure checkout flow. | | Fast Delivery | Shipping options are shown clearly at checkout. | | Easy Support | Contact us if you need help with your order. | Be careful: * Do not promise anything that does not match the real operation. * Free shipping, returns, and authenticity copy must match official policy. * Keep trust messages short and clear. *** ### 3.18 Footer The Footer is the official information area at the bottom of the storefront. If the Storefront Mall is used as a real sales page, this information must be accurate.
The Footer includes customer center information, company information, social links, quick links, and copyright copy. Confirm everything matches the real operation before publishing. Editable areas: | Area | Input | | --------------- | ------------------------------------------------------------------------------------------- | | Customer center | Customer service phone number and operating hours. | | Company info | Legal name, CEO, address, business registration number, e-commerce permit, privacy manager. | | Social links | Instagram, TikTok, YouTube, Facebook links. | | Quick links | Help, Contact, Shipping, Refund, and other quick links. | | Copyright | Footer copyright copy. | Up to 12 Quick links can be added. Footer tips: * Customer service information must match actual operating hours. * Company information must match official seller information. * Social links must open real accounts. * Missing policy links can increase customer inquiries. * Remove placeholder addresses or test copy. Before publishing, check: * Is customer service information real? * Is company information accurate? * Do social links open correctly? * Do all Quick links open the correct pages? * Does the copyright copy look natural? *** ### 3.19 Sections Checklist | Checkpoint | What to confirm | | ---------------------------------------- | ------------------------------------------------------------------------- | | Are only necessary sections turned on? | Hide sections with placeholder content. | | Is section order natural? | Check the flow from notice, header, banner, products, reviews, to footer. | | Do all buttons and cards have links? | Click them in Preview. | | Are product sections not empty? | Check Shop by keywords and Card showcase. | | Do desktop and mobile both look natural? | Check image cropping, text overlap, and button placement. | | Is Footer information real? | Check customer center, company info, and policy links. | *** ## Step 4. Preview, Review, and Publish In the final step, review the customer-facing storefront before making it public. Publishing is not just clicking a button. It is the final check that customers can browse and shop without issues.
In the Publish step, confirm the final state of Theme, Products, Sections, and the public link. *** ### 4.1 Check Preview Preview should be reviewed as close to the customer experience as possible. Check the following: * Does the homepage display correctly? * Does the Header menu work? * Does the Hover menu open? * Does the Main banner look natural on desktop and mobile? * Are product cards visible and readable? * Do product cards open product detail pages? * Do CTA buttons open the correct destinations? * Is Footer information accurate? The Preview state and the public link can sometimes differ. After publishing, always open the public link as well. *** ### 4.2 Design Checklist Before Publishing | Checkpoint | What to confirm | | ---------------------------------------------- | ------------------------------------------------- | | Is the Storefront version correct? | Classic / Framed Mall / Storefront | | Is the logo not cropped on desktop or mobile? | Be careful with long brand names. | | Is color contrast strong enough? | Check buttons, announcement bar, and banner copy. | | Do fonts look natural for all languages used? | Check titles, product names, and Footer. | | Are product card size and spacing appropriate? | Not too small and not too wide. | | Do images and text not overlap on mobile? | Check banners, cards, and Footer. | *** ### 4.3 Product Checklist Before Publishing | Checkpoint | What to confirm | | -------------------------------------------------------- | ------------------------- | | Are all products to sell added? | Check the Products step. | | Are sold-out or missing-price products not placed first? | Check product cards. | | Is product order saved as intended? | Save, then check Preview. | | Are hidden products not visible publicly? | Check Preview. | | Are badges and notes not placeholder text? | Check Added products. | | Do product detail pages open correctly? | Click product cards. | *** ### 4.4 Section Checklist Before Publishing | Checkpoint | What to confirm | | ---------------------------------------------------- | -------------------------------------------- | | Are unnecessary sections turned off? | Check toggles in Sections. | | Is section order natural? | Review the flow from first screen to Footer. | | Are banner images not cropped on desktop or mobile? | Check Main banner and Promo banner. | | Are keyword tabs not empty? | Check Shop by keywords. | | Do Card showcase cards open the correct links? | Click cards. | | Is Special feature not too fast or visually complex? | Check desktop and mobile preview. | | Do review and Instagram links work? | Check Real Reviews and Instagram feed. | | Is Footer information real? | Check customer center and company info. | *** ### 4.5 Publish the Storefront After all checks are complete, publish from the Publish step. Summary items shown in the Publish step: | Item | What to confirm | | --------------------------- | ------------------------------------------- | | Theme | Confirm the selected design is correct. | | Version | Confirm the Storefront version is correct. | | Storefront name / Shop name | Confirm the public name is correct. | | Products | Confirm the number of selected products. | | Sections | Confirm visible and hidden sections. | | Status | Confirm Draft, Live, or Unpublished status. | | Share link | Public link to share with visitors. | Status meanings: | Status | Meaning | | ----------- | ------------------------------------------------------------------ | | Draft | Not public yet. Edits can be saved, but visitors cannot see it. | | Live | Public and visible to visitors. | | Unpublished | Publishing has been stopped. Visitors cannot access it. | | Suspended | Restricted for operational reasons. Internal review may be needed. | If you only click `Save`, visitors may not be able to see the Storefront. To share the link with customers, complete `Publish`. *** ### 4.6 Check After Publishing After publishing, open the Share link in a new window and review the real visitor view. Must-check items: * Does the public link open? * Does the homepage look similar to Preview? * Does the Header menu work? * Do product detail pages open? * Does cart or purchase flow work correctly? * Does mobile display correctly? * Is there no placeholder copy? For anything that affects purchase, such as price, stock, shipping, or payment, recheck after every update. *** ## Common Confusing Situations | Situation | Likely reason | What to do | | -------------------------------------------------------------- | ----------------------------------------------------------------------------- | -------------------------------------------------- | | I saved it, but visitors cannot see it. | You may have clicked Save but not Publish. | Complete the Publish step. | | It looks correct in Preview, but different on the public link. | You may be viewing unsaved or unpublished edits. | Save, publish, then reopen the public link. | | Sections changed after switching Theme. | Each storefront version has different structure and density. | Recheck Products and Sections. | | Product order looks different in keyword tabs. | Default product order and keyword-specific order are separate. | Adjust order inside Shop by keywords. | | Card showcase looks empty. | Cards may not be added, or images/links may be empty. | Enter card content in Card showcase Edit. | | Instagram thumbnail cannot be fetched. | The link format may be unsupported, or the external image cannot be imported. | Upload the thumbnail manually. | | Publishing is blocked. | Required information may be missing, or placeholder copy may remain. | Check Footer, products, sections, and links again. | *** ## Final Summary Storefront Mall is a sales storefront feature that manages design, products, sections, and publishing status together. Remember the operation flow: 1. Set the base design and layout in Theme. 2. Add and order products in Products. 3. Configure banners, menus, keyword products, reviews, and Footer in Sections. 4. Check desktop and mobile in Preview. 5. Save your edits. 6. Publish the Storefront for visitors. 7. After publishing, open the real link and check the shopping flow. The most important point is that `Save` and `Publish` are different. `Save` stores edits. `Publish` makes the Storefront visible to visitors.