Source URL: https://seller-vn.tiktok.com/university/essay?knowledge_id=6837790809687809 Title: Shop
Trust: ★★★☆☆ (0.90) · 0 validations · factual
Published: 2026-05-08 · Source: crawler_authoritative
Insight
Shop Page Design 04/07/2026What is Shop Page Design? Store page is merchants’ own storefront on TikTok Shop that facilitates merchants to showcase their products and brands. Apart from default homepage, TikTok Shop also provides design tools in order to allow merchants to personalize their store pages. It’s easy to design a TikTok Store with simple drag-and-drop tiles.Decorating a store manually facilitates merchants to customize their default home page so that they are able to enhance their business performance and raise their Thương hiệu awareness.Benefits of Shop Page Design Better display products in order to enhance sales performanceImprove session duration and click rate with banners and attractive layoutHighlight promotions to boost conversion rateHere are some examples of personalized store pages after using Shop Page Design features:Note: the image above is for reference purpose only. The actual layout might differ. How to design a store? Currently, Shop Page Design allows merchants to customize banner, product and campaign sections with the tiles of text, images, videos and products.Step 1:In Seller Center, go to the “Shop Tab” tab > Shop Page Builder > Shop Page Design > Duplicate to editStep 2:On the Shop Page Design workbench, merchants have the ability to customise banners, products, and promotions. This is done by adding components from the options on the left side and making adjustments on the right side. The manual design tiles currently consist of visual, product, and promotional components.Within the Shop Page Design workbench:Store Design Modules:These modules contain various decoration components that are available for use. Merchants can simply drag and drop these modules onto the canvas. Each component’s specific requirements are displayed below it.Canvas:The canvas provides a visual representation of how the added components will appear on the store page.Component Property Panel:Merchants can further customize each component by selecting it on the canvas, which opens up the Component Property Panel for editing. This panel allows for specific adjustments to be made to each component.Store components For more details of each component, please refer to the table below.HeaderEnable sellers to customize their homepage header, to make it aligned with their brand style.This content is only supported in a Feishu DocsWhat it looks like:Exclusive feature for Mall shops: Sellers can upload the background image and logo to strengthen their brand image at “header image” menu. VisualsThis feature allows merchants to easily incorporate either a single image or a series of images arranged in a carousel, each accompanied by text and a hyperlink. Additionally, the Multi-click Image component enables users to navigate to various products or categories by interacting with different sections within a single image.Component Name FormatSizeModule RatioNumber of picturesConfigurable ItemsSingle ImageJPG, JPEG,PNGMinimum 800px;Maximum 5M16:91 pictureTitleImageLink (a single product or a category)CarouselJPG, JPEG,PNG8:10, 10:88:10, 10:8, Free8:10, 10:8, 8:10, Free2-5 picturesTitleImageLink (a single product or a category)Multi-click ImageJPG, JPEG,PNGRecommended size 1200675, width greater than 800. Maximum 2MB.Free1 pictureTitleImageHotspot (max 10, can configure:size, position and link to a single product or a category)Multi-ImageJPG, JPEG,PNGThe recommended size is 800800 pixels. The maximum file size is 2MB.Free2-4 picturesTitleImageLinkLink to a product After uploading an image, click “Add” - “Link to a product”, then select one product and click “OK”.Link to a categoryAfter uploading an image, click “Add” - “Link to a category”, then select one category and click “OK”.Use Multi-click Image component to link to more products! Unleash your creativity with Multi-Click Image component, by allowing you to showcase multiple products or categories within a single image. Follow these simple steps to make the most of this feature:Drag the Multi-Click Image component from the left side of the interface to the center of the canvas.Upload your desired image.Define hotspots on the image.Attach links to each hotspot, connecting to either specific products or categories. This functionality provides a dynamic way to highlight and link multiple elements within a single image, offering a seamless and interactive user experience.Products and CategoriesProducts and Categories module facilitates merchants to add “Featured Products” section by arranging the product cards and text and also supports the store being decorated with smart products and categories modules like “New Release” & “Top Sales” Note: products shown above are for test only.Self-ArrangeComponent NameLayoutNumberComponent PropertyDemoFeatured ProductsHorizontal layout: display at most 6 products (3 each roll) and click ”>” to view more products.Downward layout: display at most 3 products and click ”>” to view more products.You can select at most 30 productsProductsTitle (text)Product orderHorizontal layoutDownward layoutSecondary pageBy CategoryHorizontal layoutDownward layoutWill display 1-3 products (and click the > for more in the secondary page)Select a CategoryTitle (text)Horizontal layoutDownward layoutSecondary pageCollection Image(Only 1 image allowed. Formats: jpg, jpeg, and png files; Width: over 800px; Max. Size: 2MB.)You can select at most 30 products, at least 4 products.Upload ImageCollection Name (text)Products/CategoryButton (text & Color)Tips: Use the “Collections” feature to curate seasonal product selections. Organize your products into themed collections like Summer Sales and Spring Floral to provide a unique and exciting shopping experience for your customers.Smart Components: New Release & Top ProductsAs smart components, “New Release” & Top Products do not ask merchants to edit much more information. All you need to do is to select the component in Store Modules panel and the system will display the products that meet the requirements of this module automatically and dynamically.CollectionsTo group products based on the latest thematic collections that your shop has. Eg: Summer Collection, Winter Collection, etc.What it looks like on Customers-end:Set up in Seller Center:Promotion componentMerchants can add smart promotion components like “Special Deals” “Vouchers”, “Flash Deal” and “Buy More Save More” to store page. However, due to its smart component identity, the specific information of each promotion cannot be edited here. Merchants can only follow the instructions to fulfill the requirements if there are promotions. Promotion TypeWhat will be displayed?Component PropertyDemoVouchers1-3 couponsPriority of vouchers: no threshold> with threshold, higher discount> lower discount,Nearer expiration time > Further expiration timeTitle Flash Deal1-3 products that are under the nearest ongoing Flash Sale promotionTitleSeller Buy More Save More1-3 products that are under the ongoing Seller Buy More Save More promotion (products with higher last 30 days sales will be displayed first)If there are multiple ongoing promotions at the same time, the one that ends first will be displayed.Title Special Deals1-3 products that are discounted (percentage off or fixed price) The displayed products will be sorted by discount from highest to lowestTitleStep 3: Once you finished building out your new store page, you just need to click “publish” as the last step. After submission, TikTok Shop will Reviews it. Once it’s approved, it will be displayed to customers at storefront. Merchants are also allowed to “preview” or “save” it if you do not want to publish it directly.There will be rejection reasons if the design does not pass review. Merchants can revise the Shop Page Design by following the instructions.How to manage Shop Page Design drafts? Merchants can manage different store drafts on Seller Center—Shop Page Design page. Online Version shows the information of the online store page and merchants can click “Replace with default” to recover the default homepage.Unpublished Version displays “Under Review”, “Change Needed” and “Default Home” versions. “Change Needed” version allows merchants to edit, duplicate, publish and delete.Version Preview exhibits the preview of the Shop Page Design.Shop Page Design Review and Link Sharing When some components of the draft do not pass the review, the newly designed store page cannot be successfully published. Sellers will be informed by emails and seller notifications.The draft with “Change Needed” tag indicates that it does not pass the review and should be editedShop Page Design workbench also guides sellers to adjust the wrong designSellers can share their shop page link by clicking the Share Store button on the top right, and download the QR code or copy the link.FAQ Why do some customers say they cannot see my designed homepage? (They still see the default version)Since there is an ongoing experiment for the display of various versions, buyers may see different versions of Store Page.Why is my shop Voucher not displayed in the promotion module in Design Workbench?Only the voucher with active status is going to be displayed. If your voucher status is still upcoming, it will be displayed when the status changes to active.Is the content above helpful? PreviousIntroduction of Store PageNext Store Category ManagementTable of contentsWhat is Shop Page Design?Benefits of Shop Page DesignHow to design a store?Step 1:Step 2:Store componentsHeaderVisualsProducts and CategoriesPromotion componentStep 3:How to manage Shop Page Design drafts?Shop Page Design Review and Link SharingFAQ
Nội dung gốc (Original)
Shop Page Design 04/07/2026What is Shop Page Design? Store page is merchants’ own storefront on TikTok Shop that facilitates merchants to showcase their products and brands. Apart from default homepage, TikTok Shop also provides design tools in order to allow merchants to personalize their store pages. It’s easy to design a TikTok Store with simple drag-and-drop tiles.Decorating a store manually facilitates merchants to customize their default home page so that they are able to enhance their business performance and raise their brand awareness.Benefits of Shop Page Design Better display products in order to enhance sales performanceImprove session duration and click rate with banners and attractive layoutHighlight promotions to boost conversion rateHere are some examples of personalized store pages after using Shop Page Design features:Note: the image above is for reference purpose only. The actual layout might differ. How to design a store? Currently, Shop Page Design allows merchants to customize banner, product and campaign sections with the tiles of text, images, videos and products.Step 1:In Seller Center, go to the “Shop Tab” tab > Shop Page Builder > Shop Page Design > Duplicate to editStep 2:On the Shop Page Design workbench, merchants have the ability to customise banners, products, and promotions. This is done by adding components from the options on the left side and making adjustments on the right side. The manual design tiles currently consist of visual, product, and promotional components.Within the Shop Page Design workbench:Store Design Modules:These modules contain various decoration components that are available for use. Merchants can simply drag and drop these modules onto the canvas. Each component’s specific requirements are displayed below it.Canvas:The canvas provides a visual representation of how the added components will appear on the store page.Component Property Panel:Merchants can further customize each component by selecting it on the canvas, which opens up the Component Property Panel for editing. This panel allows for specific adjustments to be made to each component.Store components For more details of each component, please refer to the table below.HeaderEnable sellers to customize their homepage header, to make it aligned with their brand style.This content is only supported in a Feishu DocsWhat it looks like:Exclusive feature for Mall shops: Sellers can upload the background image and logo to strengthen their brand image at “header image” menu. VisualsThis feature allows merchants to easily incorporate either a single image or a series of images arranged in a carousel, each accompanied by text and a hyperlink. Additionally, the Multi-click Image component enables users to navigate to various products or categories by interacting with different sections within a single image.Component Name FormatSizeModule RatioNumber of picturesConfigurable ItemsSingle ImageJPG, JPEG,PNGMinimum 800px;Maximum 5M16:91 pictureTitleImageLink (a single product or a category)CarouselJPG, JPEG,PNG8:10, 10:88:10, 10:8, Free8:10, 10:8, 8:10, Free2-5 picturesTitleImageLink (a single product or a category)Multi-click ImageJPG, JPEG,PNGRecommended size 1200675, width greater than 800. Maximum 2MB.Free1 pictureTitleImageHotspot (max 10, can configure:size, position and link to a single product or a category)Multi-ImageJPG, JPEG,PNGThe recommended size is 800800 pixels. The maximum file size is 2MB.Free2-4 picturesTitleImageLinkLink to a product After uploading an image, click “Add” - “Link to a product”, then select one product and click “OK”.Link to a categoryAfter uploading an image, click “Add” - “Link to a category”, then select one category and click “OK”.Use Multi-click Image component to link to more products! Unleash your creativity with Multi-Click Image component, by allowing you to showcase multiple products or categories within a single image. Follow these simple steps to make the most of this feature:Drag the Multi-Click Image component from the left side of the interface to the center of the canvas.Upload your desired image.Define hotspots on the image.Attach links to each hotspot, connecting to either specific products or categories. This functionality provides a dynamic way to highlight and link multiple elements within a single image, offering a seamless and interactive user experience.Products and CategoriesProducts and Categories module facilitates merchants to add “Featured Products” section by arranging the product cards and text and also supports the store being decorated with smart products and categories modules like “New Release” & “Top Sales” Note: products shown above are for test only.Self-ArrangeComponent NameLayoutNumberComponent PropertyDemoFeatured ProductsHorizontal layout: display at most 6 products (3 each roll) and click ”>” to view more products.Downward layout: display at most 3 products and click ”>” to view more products.You can select at most 30 productsProductsTitle (text)Product orderHorizontal layoutDownward layoutSecondary pageBy CategoryHorizontal layoutDownward layoutWill display 1-3 products (and click the > for more in the secondary page)Select a CategoryTitle (text)Horizontal layoutDownward layoutSecondary pageCollection Image(Only 1 image allowed. Formats: jpg, jpeg, and png files; Width: over 800px; Max. Size: 2MB.)You can select at most 30 products, at least 4 products.Upload ImageCollection Name (text)Products/CategoryButton (text & Color)Tips: Use the “Collections” feature to curate seasonal product selections. Organize your products into themed collections like Summer Sales and Spring Floral to provide a unique and exciting shopping experience for your customers.Smart Components: New Release & Top ProductsAs smart components, “New Release” & Top Products do not ask merchants to edit much more information. All you need to do is to select the component in Store Modules panel and the system will display the products that meet the requirements of this module automatically and dynamically.CollectionsTo group products based on the latest thematic collections that your shop has. Eg: Summer Collection, Winter Collection, etc.What it looks like on Customers-end:Set up in Seller Center:Promotion componentMerchants can add smart promotion components like “Special Deals” “Vouchers”, “Flash Deal” and “Buy More Save More” to store page. However, due to its smart component identity, the specific information of each promotion cannot be edited here. Merchants can only follow the instructions to fulfill the requirements if there are promotions. Promotion TypeWhat will be displayed?Component PropertyDemoVouchers1-3 couponsPriority of vouchers: no threshold> with threshold, higher discount> lower discount,Nearer expiration time > Further expiration timeTitle Flash Deal1-3 products that are under the nearest ongoing flash sale promotionTitleSeller Buy More Save More1-3 products that are under the ongoing Seller Buy More Save More promotion (products with higher last 30 days sales will be displayed first)If there are multiple ongoing promotions at the same time, the one that ends first will be displayed.Title Special Deals1-3 products that are discounted (percentage off or fixed price) The displayed products will be sorted by discount from highest to lowestTitleStep 3: Once you finished building out your new store page, you just need to click “publish” as the last step. After submission, TikTok Shop will review it. Once it’s approved, it will be displayed to customers at storefront. Merchants are also allowed to “preview” or “save” it if you do not want to publish it directly.There will be rejection reasons if the design does not pass review. Merchants can revise the Shop Page Design by following the instructions.How to manage Shop Page Design drafts? Merchants can manage different store drafts on Seller Center—Shop Page Design page. Online Version shows the information of the online store page and merchants can click “Replace with default” to recover the default homepage.Unpublished Version displays “Under Review”, “Change Needed” and “Default Home” versions. “Change Needed” version allows merchants to edit, duplicate, publish and delete.Version Preview exhibits the preview of the Shop Page Design.Shop Page Design Review and Link Sharing When some components of the draft do not pass the review, the newly designed store page cannot be successfully published. Sellers will be informed by emails and seller notifications.The draft with “Change Needed” tag indicates that it does not pass the review and should be editedShop Page Design workbench also guides sellers to adjust the wrong designSellers can share their shop page link by clicking the Share Store button on the top right, and download the QR code or copy the link.FAQ Why do some customers say they cannot see my designed homepage? (They still see the default version)Since there is an ongoing experiment for the display of various versions, buyers may see different versions of Store Page.Why is my shop voucher not displayed in the promotion module in Design Workbench?Only the voucher with active status is going to be displayed. If your voucher status is still upcoming, it will be displayed when the status changes to active.Is the content above helpful? PreviousIntroduction of Store PageNext Store Category ManagementTable of contentsWhat is Shop Page Design?Benefits of Shop Page DesignHow to design a store?Step 1:Step 2:Store componentsHeaderVisualsProducts and CategoriesPromotion componentStep 3:How to manage Shop Page Design drafts?Shop Page Design Review and Link SharingFAQ