> For the complete documentation index, see [llms.txt](https://onestore-dev.gitbook.io/dev/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://onestore-dev.gitbook.io/dev/cht/webshop/builder.md). # Webshop Builder his menu lets you design the ONEshop sales page that users see. You can edit the shop information, hero banner, sections, theme, and Webshop settings, review published versions, and revert to a previous version. | Screen | Menu location | What you can do | | ------------------ | -------------------------------------------------- | ------------------------------------------------------------- | | Webshop Builder | `ONEconsole > Webshop > Webshop > Webshop Builder` | Edit the Webshop screen and save it as a Draft | | Webshop History | `ONEconsole > Webshop > Webshop > Webshop History` | Review published versions and load a previous version | | Fullscreen preview | Open from the version details in Webshop History | Check the page at actual window size without the console menu | {% hint style="info" %} **Draft and Publish** * What you save in Webshop Builder is **a single Draft**. Each save overwrites the Draft instead of creating a new version. * Webshop Builder has no publish button. A Draft is published with \[**Publish**] or \[**Republish**] on the Request Review screen (or the Title Status screen after sales begin). When you publish, the Draft is stacked as a new version (v1, v2 ...), and that version is applied to the live Webshop. * For details, see [Request a Review](https://onestore-dev.gitbook.io/dev/eng/webshop/request-for-review). {% endhint %} ### Webshop Builder On this screen, you build the Webshop and check the result right away in the preview on the right. The screen title is displayed as **ONEshop Editor**. #### Screen layout | Area | Contents | | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | Top left | Editing language selector, language management, device preview (PC / Tablet / Mobile), \[**Theme**], \[**Webshop Settings**] | | Left list | Displayed in the order of shop information (1) → hero banner (1) → sections. You can drag sections to reorder them, and the number next to a section is the number of products in it | | Bottom left | Use \[**+ Add Section**] to add a grid, card, or banner section | | Right | Live preview. At the bottom right, you can choose one of your sales countries as the access country to preview (the selection is not saved) | #### Saving rules * **Auto-save**: List structure changes such as adding, deleting, or reordering sections, and changes to the language list, are saved automatically. * \[**Save**]: Text, images, products, theme, and other values you enter in a panel are saved only when you select \[**Save**] at the bottom of the panel. \[**Save**] is enabled only when there are changes. * When you delete a section, a confirmation card opens in the list. The section is deleted only when you select \[**Delete**]. {% hint style="warning" %} **Notice** For a title that is on sale, if the saved Draft differs from the published Webshop, you need to \[**Republish**]. Saving alone does not change the live Webshop. {% endhint %} #### Panel settings | Panel | Settings | | ------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Shop information | Title, description, header image (transparent PNG recommended), button text (per language), button link, header style (Minimal / Card) | | Hero banner | Autoplay, transition interval (seconds), pagination (Dots / Numbers / Pill). Per slide: image (3:1 recommended, e.g. 1500×500px), title, description, and badge text (per language), text alignment, link (product / internal / external), decorative button on or off | | Section (Card / Grid / Banner) | Section name (per language), products to include (select multiple, drag to reorder, search by name). For Grid: page background image (if empty, the first product's image is used). For Banner: type (Classic / Spotlight / Carousel) and autoplay | | Theme | Preset (Dark / Light / Navy), brand color | | Webshop Settings | SEO (og:title, og:description, og:image 1200×630px, twitter:image 1200×600px), background (color or image of 1920×1080px or larger), card (effect, hover description, shadow, color, border, corner radius, transparent image background), popup corner radius | #### Images | Item | Requirement | | ---------- | ---------------------------------------------------- | | Format | PNG, JPG, WebP | | File size | Up to 5MB | | File name | 100 characters or fewer, including the extension | | Resolution | The values shown in each panel are recommended sizes | * You can upload a file or **enter a URL directly**. * If you leave a language-specific image empty, the default language image is used. #### Languages * When you change the editing language, all text and image fields and the preview switch to that language. * When you change the language list in language management, the change is saved to the same title language list as the title information. * When you select \[**AI Translate**] while editing a language other than the default, only the fields that have a default language value and are empty in the current language are filled in. The translation is saved only when you select \[**Save**] in the panel. #### Edit lock If the title is in the Under Review, Pending Sale, Scheduled, or Unavailable for Sale status, the editing area on the left is locked. You can still view the preview while it is locked. *** ### Webshop History This screen shows the published versions stacked by \[**Publish**] and \[**Republish**], along with the current Draft. | Row | Display | | ----------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- | | Draft (top) | The Draft currently saved in Webshop Builder | | vN | The version applied to the live Webshop is marked **Live**, and the others are marked **Previous version**. The deployment date is displayed in UTC+0 | Select \[**View details**] on a row to go to the version details. #### Version details * On the left, you can find the version status, \[**Fullscreen preview**], and \[**Load this version**] (published versions only). * A summary shows what would change in the Draft (text, sections, product composition, theme, languages, SEO) if you load that version now. * On the right, you can see how that version actually looks. #### Load a previous version When you select \[**Load this version**] and then select \[**Revert**] in the confirmation popup, the Draft in the builder is overwritten with the contents of that version. {% hint style="warning" %} **Notice** * Loading changes **only the Draft**. The live Webshop stays the same and is updated only after you \[**Republish**]. * If the Draft has edits that have not been published yet, you cannot recover them after loading. {% endhint %} *** ### Fullscreen preview Shows the selected version in a new tab at actual window size, without the console menu. You can close it with \[**✕ Close preview**] at the bottom right. * The access country is fixed to South Korea if the content includes Korean, and to the United States otherwise. {% hint style="info" %} If you sign in to the Webshop with a test ID, you can also see the Draft screen before publishing. For details, see [Web Shop Testing](https://onestore-dev.gitbook.io/dev/eng/webshop/test). {% endhint %} *** ### Webshop requirements before requesting a review Your Webshop must meet the following conditions before you can request a review. If the conditions are not met, the Request Review screen directs you to Webshop Builder. * You must have saved a Draft in Webshop Builder. * The Webshop must have at least one displayed item. Products placed in sections and products linked to banner buttons are counted as displayed items.
Related guides * [Catalog](https://onestore-dev.gitbook.io/dev/eng/webshop/register-item) * [Request a Review](https://onestore-dev.gitbook.io/dev/eng/webshop/request-for-review) * [Web Shop Testing](https://onestore-dev.gitbook.io/dev/eng/webshop/test) * [Image Creation Guidelines](https://onestore-dev.gitbook.io/dev/eng/tools/icon-guide)