# Table of Contents - [Greeting + Useful Resources | Ella Documentation](#greeting-useful-resources-ella-documentation) - [Feature | Shopify Theme Requirements](#feature-shopify-theme-requirements) - [Section | Shopify Theme Requirements](#section-shopify-theme-requirements) - [Yêu cầu về tính năng | Shopify Theme Requirements](#y-u-c-u-v-t-nh-n-ng-shopify-theme-requirements) - [Theme Settings | Shopify Theme Requirements](#theme-settings-shopify-theme-requirements) - [HTML | Shopify Theme Requirements](#html-shopify-theme-requirements) - [CSS | Shopify Theme Requirements](#css-shopify-theme-requirements) - [JS | Shopify Theme Requirements](#js-shopify-theme-requirements) - [Exclusive Offers 🔥 | Ella Documentation](#exclusive-offers-ella-documentation) - [Full Theme Features in Ella 6 | Ella Documentation](#full-theme-features-in-ella-6-ella-documentation) - [Changelog | Ella Documentation](#changelog-ella-documentation) - [Sticky Toolbar Mobile | Ella Documentation](#sticky-toolbar-mobile-ella-documentation) - [Shipping Rates | Ella Documentation](#shipping-rates-ella-documentation) - [Update Theme 🔔 | Ella Documentation](#update-theme-ella-documentation) - [Customer Registration | Ella Documentation](#customer-registration-ella-documentation) - [Update from Ella 1.0, 2.0, 3.0, 4.0, 5.0 to Ella 6.0 | Ella Documentation](#update-from-ella-1-0-2-0-3-0-4-0-5-0-to-ella-6-0-ella-documentation) - [Theme Update Service | Ella Documentation](#theme-update-service-ella-documentation) - [Navigation | Ella Documentation](#navigation-ella-documentation) - [Install App | Ella Documentation](#install-app-ella-documentation) - [Online Store 2.0 | Ella Documentation](#online-store-2-0-ella-documentation) - [Dynamic Source | Ella Documentation](#dynamic-source-ella-documentation) - [Color Gradient | Ella Documentation](#color-gradient-ella-documentation) - [General | Ella Documentation](#general-ella-documentation) - [Variant picker | Ella Documentation](#variant-picker-ella-documentation) - [Terms and conditions | Ella Documentation](#terms-and-conditions-ella-documentation) - [Hot stock function | Ella Documentation](#hot-stock-function-ella-documentation) - [X-shaped cursor | Ella Documentation](#x-shaped-cursor-ella-documentation) - [Add to cart action | Ella Documentation](#add-to-cart-action-ella-documentation) - [Update from Ella 6.0 to a higher version | Ella Documentation](#update-from-ella-6-0-to-a-higher-version-ella-documentation) - [Wishlist | Ella Documentation](#wishlist-ella-documentation) - [Lazy load image | Ella Documentation](#lazy-load-image-ella-documentation) - [Product card | Ella Documentation](#product-card-ella-documentation) - [Swatch | Ella Documentation](#swatch-ella-documentation) - [Product Action | Ella Documentation](#product-action-ella-documentation) - [Customization option | Ella Documentation](#customization-option-ella-documentation) - [Multiple Layouts | Ella Documentation](#multiple-layouts-ella-documentation) - [Customer login | Ella Documentation](#customer-login-ella-documentation) - [Pagination | Ella Documentation](#pagination-ella-documentation) - [Scroll down to the next section | Ella Documentation](#scroll-down-to-the-next-section-ella-documentation) - [Favicon | Ella Documentation](#favicon-ella-documentation) - [Slider arrows | Ella Documentation](#slider-arrows-ella-documentation) - [Change product card layout | Ella Documentation](#change-product-card-layout-ella-documentation) - [Slider dots | Ella Documentation](#slider-dots-ella-documentation) - [Positive vibes bundle | Ella Documentation](#positive-vibes-bundle-ella-documentation) - [Theme Language | Ella Documentation](#theme-language-ella-documentation) - [Install Theme 🎯 | Ella Documentation](#install-theme-ella-documentation) - [Recently Viewed Popup | Ella Documentation](#recently-viewed-popup-ella-documentation) - [Notify Me When Out Of Stock | Ella Documentation](#notify-me-when-out-of-stock-ella-documentation) - [Quick Search | Ella Documentation](#quick-search-ella-documentation) - [Product badges | Ella Documentation](#product-badges-ella-documentation) - [Multi-Level Categories | Ella Documentation](#multi-level-categories-ella-documentation) - [Someone Purchased Notification Popup | Ella Documentation](#someone-purchased-notification-popup-ella-documentation) - [Before You Leave | Ella Documentation](#before-you-leave-ella-documentation) - [Animations | Ella Documentation](#animations-ella-documentation) - [GDPR Popup | Ella Documentation](#gdpr-popup-ella-documentation) - [Ask An Expert | Ella Documentation](#ask-an-expert-ella-documentation) - [Social Media | Ella Documentation](#social-media-ella-documentation) - [Custom JS | Ella Documentation](#custom-js-ella-documentation) - [How to set up a different language? | Ella Documentation](#how-to-set-up-a-different-language-ella-documentation) - [Quick Cart/ Quick Edit Cart | Ella Documentation](#quick-cart-quick-edit-cart-ella-documentation) - [Checkout | Ella Documentation](#checkout-ella-documentation) - [Brand image | Ella Documentation](#brand-image-ella-documentation) - [Free Shipping Calculator Message | Ella Documentation](#free-shipping-calculator-message-ella-documentation) - [Quick Shop | Ella Documentation](#quick-shop-ella-documentation) - [Adding custom CSS to your theme | Ella Documentation](#adding-custom-css-to-your-theme-ella-documentation) - [Multiple Currencies | Ella Documentation](#multiple-currencies-ella-documentation) - [Product Swatch | Ella Documentation](#product-swatch-ella-documentation) - [Saved price | Ella Documentation](#saved-price-ella-documentation) - [Dynamic browser tab title | Ella Documentation](#dynamic-browser-tab-title-ella-documentation) - [Marquee | Ella Documentation](#marquee-ella-documentation) - [View documentation | Ella Documentation](#view-documentation-ella-documentation) - [Header For Mobile / Tablet | Ella Documentation](#header-for-mobile-tablet-ella-documentation) - [Countdown | Ella Documentation](#countdown-ella-documentation) - [Popup | Ella Documentation](#popup-ella-documentation) - [Trusted image | Ella Documentation](#trusted-image-ella-documentation) - [Set up for product card | Ella Documentation](#set-up-for-product-card-ella-documentation) - [Label For Menu | Ella Documentation](#label-for-menu-ella-documentation) - [How to set up Multiple Languages? | Ella Documentation](#how-to-set-up-multiple-languages-ella-documentation) - [Quick View | Ella Documentation](#quick-view-ella-documentation) - [Product Colors | Ella Documentation](#product-colors-ella-documentation) - [Set up Advanced Mega Menu/ Drop Down Menu | Ella Documentation](#set-up-advanced-mega-menu-drop-down-menu-ella-documentation) - [Typography | Ella Documentation](#typography-ella-documentation) - [Mobile Menu | Ella Documentation](#mobile-menu-ella-documentation) - [Header For Desktop | Ella Documentation](#header-for-desktop-ella-documentation) - [General colors | Ella Documentation](#general-colors-ella-documentation) - [Section On Every Page | Ella Documentation](#section-on-every-page-ella-documentation) - [Home 07 - Electronics | Ella Documentation](#home-07-electronics-ella-documentation) - [Home 11 - Health & Beauty | Ella Documentation](#home-11-health-beauty-ella-documentation) - [Home 10 - Jewelry | Ella Documentation](#home-10-jewelry-ella-documentation) - [Home 05 - Surfing | Ella Documentation](#home-05-surfing-ella-documentation) - [Home 13 - Winter Sport | Ella Documentation](#home-13-winter-sport-ella-documentation) - [Footer Layout | Ella Documentation](#footer-layout-ella-documentation) - [Home 01 - Classic | Ella Documentation](#home-01-classic-ella-documentation) - [Home 08 - Large Catalogs | Ella Documentation](#home-08-large-catalogs-ella-documentation) - [Home 12 - Men Fashion | Ella Documentation](#home-12-men-fashion-ella-documentation) - [Home 18 - Shoes | Ella Documentation](#home-18-shoes-ella-documentation) - [Home 15 - Automotive 2 | Ella Documentation](#home-15-automotive-2-ella-documentation) - [Home 21 - Yoga | Ella Documentation](#home-21-yoga-ella-documentation) - [Home 22 - Eyes Wears | Ella Documentation](#home-22-eyes-wears-ella-documentation) - [Home 03 - In vogue | Ella Documentation](#home-03-in-vogue-ella-documentation) - [Home 09 - Pet Supplies | Ella Documentation](#home-09-pet-supplies-ella-documentation) - [Home 06 - SuperMarket | Ella Documentation](#home-06-supermarket-ella-documentation) - [Home 02 - Trendy Style | Ella Documentation](#home-02-trendy-style-ella-documentation) - [Home 23 - Plant+ Garden | Ella Documentation](#home-23-plant-garden-ella-documentation) - [Home 25 - Swimwear 2 | Ella Documentation](#home-25-swimwear-2-ella-documentation) - [Home 04 - High Fashion | Ella Documentation](#home-04-high-fashion-ella-documentation) - [Home 31 - Hair Wigs | Ella Documentation](#home-31-hair-wigs-ella-documentation) - [Home 16 - Game | Ella Documentation](#home-16-game-ella-documentation) - [Home 14 - Automotive 1 | Ella Documentation](#home-14-automotive-1-ella-documentation) - [Home 27 - Men Fashion 02 | Ella Documentation](#home-27-men-fashion-02-ella-documentation) - [Home 37 - Craft Beer | Ella Documentation](#home-37-craft-beer-ella-documentation) - [Home 30 - POD Store | Ella Documentation](#home-30-pod-store-ella-documentation) - [Home 20 - Furniture | Ella Documentation](#home-20-furniture-ella-documentation) - [Home 26- Bagratica | Ella Documentation](#home-26-bagratica-ella-documentation) - [Home 35 - Dietary Supplement | Ella Documentation](#home-35-dietary-supplement-ella-documentation) - [Home 36 - Deluxe Interior | Ella Documentation](#home-36-deluxe-interior-ella-documentation) - [Home 34 - Lunch Set | Ella Documentation](#home-34-lunch-set-ella-documentation) - [Collection section | Ella Documentation](#collection-section-ella-documentation) - [Quick Order List | Ella Documentation](#quick-order-list-ella-documentation) - [Home 24 - Bicycle | Ella Documentation](#home-24-bicycle-ella-documentation) - [Home 32 - Suitcase | Ella Documentation](#home-32-suitcase-ella-documentation) - [Home 29 - Chic Couture | Ella Documentation](#home-29-chic-couture-ella-documentation) - [Home 19 - Swimwear 1 | Ella Documentation](#home-19-swimwear-1-ella-documentation) - [Home 33 - Coffee Shop | Ella Documentation](#home-33-coffee-shop-ella-documentation) - [Home 28 - Single Product | Ella Documentation](#home-28-single-product-ella-documentation) - [Home 01 - Classic | Ella Documentation](#home-01-classic-ella-documentation) - [Home 04 - High Fashion | Ella Documentation](#home-04-high-fashion-ella-documentation) - [Home 03 - In vogue | Ella Documentation](#home-03-in-vogue-ella-documentation) - [Home 17 - Gym | Ella Documentation](#home-17-gym-ella-documentation) - [Home 02 - Trendy Style | Ella Documentation](#home-02-trendy-style-ella-documentation) - [Demo & Settings Data | Ella Documentation](#demo-settings-data-ella-documentation) - [Home 08 - Large Catalogs | Ella Documentation](#home-08-large-catalogs-ella-documentation) - [Home 06 - SuperMarket | Ella Documentation](#home-06-supermarket-ella-documentation) - [Sub Collection | Ella Documentation](#sub-collection-ella-documentation) - [Demo & Settings Data | Ella Documentation](#demo-settings-data-ella-documentation) - [Home 05 - Surfing | Ella Documentation](#home-05-surfing-ella-documentation) - [Home 12 - Men Fashion | Ella Documentation](#home-12-men-fashion-ella-documentation) - [Home 14 - Automotive 1 | Ella Documentation](#home-14-automotive-1-ella-documentation) - [Home 13 - Winter Sport | Ella Documentation](#home-13-winter-sport-ella-documentation) - [Product Combo | Ella Documentation](#product-combo-ella-documentation) - [Home 10 - Jewelry | Ella Documentation](#home-10-jewelry-ella-documentation) - [Home 15 - Automotive 2 | Ella Documentation](#home-15-automotive-2-ella-documentation) - [Home 09 - Pet Supplies | Ella Documentation](#home-09-pet-supplies-ella-documentation) - [Home 07 - Electronics | Ella Documentation](#home-07-electronics-ella-documentation) - [Home 11 - Health & Beauty | Ella Documentation](#home-11-health-beauty-ella-documentation) - [Sold In Last Period | Ella Documentation](#sold-in-last-period-ella-documentation) - [Color Comparison | Ella Documentation](#color-comparison-ella-documentation) - [Dynamic Checkout Button | Ella Documentation](#dynamic-checkout-button-ella-documentation) - [Variant Image Grouped | Ella Documentation](#variant-image-grouped-ella-documentation) - [Sticky Add To Cart | Ella Documentation](#sticky-add-to-cart-ella-documentation) - [Custom Information | Ella Documentation](#custom-information-ella-documentation) - [Customers Viewing | Ella Documentation](#customers-viewing-ella-documentation) - [Collection header | Ella Documentation](#collection-header-ella-documentation) - [Delivery Time | Ella Documentation](#delivery-time-ella-documentation) - [Filter | Ella Documentation](#filter-ella-documentation) - [List Tags | Ella Documentation](#list-tags-ella-documentation) - [Description | Ella Documentation](#description-ella-documentation) - [Main collection | Ella Documentation](#main-collection-ella-documentation) - [Product Bundle | Ella Documentation](#product-bundle-ella-documentation) - [How To Set Up Product Description For Each Variant? | Ella Documentation](#how-to-set-up-product-description-for-each-variant-ella-documentation) - [Product Media | Ella Documentation](#product-media-ella-documentation) - [Home 37 - Craft Beer | Ella Documentation](#home-37-craft-beer-ella-documentation) - [Home 18 - Shoes | Ella Documentation](#home-18-shoes-ella-documentation) - [Home 16 - Games | Ella Documentation](#home-16-games-ella-documentation) - [Product Tabs | Ella Documentation](#product-tabs-ella-documentation) - [Positive Vibes Bundle | Ella Documentation](#positive-vibes-bundle-ella-documentation) - [Home 20 - Furniture | Ella Documentation](#home-20-furniture-ella-documentation) - [Home 28 - Single Product | Ella Documentation](#home-28-single-product-ella-documentation) - [Home 26 - Bagratica | Ella Documentation](#home-26-bagratica-ella-documentation) - [Home 22 - Eyes Wears | Ella Documentation](#home-22-eyes-wears-ella-documentation) - [How To Set Up Product Property By Metafields? | Ella Documentation](#how-to-set-up-product-property-by-metafields-ella-documentation) - [How To Set Up Complementary Products? | Ella Documentation](#how-to-set-up-complementary-products-ella-documentation) - [Home 27 - Men Fashion 02 | Ella Documentation](#home-27-men-fashion-02-ella-documentation) - [Home 25 - Swimwear 2 | Ella Documentation](#home-25-swimwear-2-ella-documentation) - [Home 19 - Swimwear 1 | Ella Documentation](#home-19-swimwear-1-ella-documentation) - [Home 33 - Coffee Shop | Ella Documentation](#home-33-coffee-shop-ella-documentation) - [Home 23 - Plant+ Garden | Ella Documentation](#home-23-plant-garden-ella-documentation) - [Home 31 - Hair Wigs | Ella Documentation](#home-31-hair-wigs-ella-documentation) - [Size Chart | Ella Documentation](#size-chart-ella-documentation) - [Home 17 - Gym | Ella Documentation](#home-17-gym-ella-documentation) - [Home 34 - Lunch Set | Ella Documentation](#home-34-lunch-set-ella-documentation) --- # Greeting + Useful Resources | Ella Documentation > First of all, we would like to give a big thank to our valued customers who paid attention to our themes and chose ELLA for your website. > > We sincerely hope that ELLA template will be one of key factors that contributes to the success of your business. > > Ella has been updated to version 6.0. This version is a new generation of Ella and we have built everything from scratch for 1 year to bring to you more values. > > — From the [Halo Teamarrow-up-right](https://1.envato.market/qnNyjL) > with love. [hashtag](https://halosoft.gitbook.io/ella-documentation#ella-multipurpose-shopify-theme-os-2.0) Ella - Multipurpose Shopify Theme OS 2.0 ---------------------------------------------------------------------------------------------------------------------------------------------- **Subscribe our** [**YouTube Channel**arrow-up-right](https://www.youtube.com/channel/UCn44kvlkxSFrjlP7SYZvL1w) **to watch our Template Video Guides, Tutorials, Tips...** ![](https://halosoft.gitbook.io/ella-documentation/~gitbook/image?url=https%3A%2F%2F3284033180-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fag3h7ZduRGWlquTgGUHi%252Fuploads%252FCD2qornliPH2oxTJSiQS%252Fyoutube.png%3Falt%3Dmedia%26token%3D3e82c9bd-8cd0-429d-8291-32b82a2bcc34&width=768&dpr=3&quality=100&sign=b6e4008&sv=2) [**Join our Community**arrow-up-right](https://www.facebook.com/groups/halothemescommunity/) to get **the latest news about our templates**, **upcoming projects**, **sale events**, and **discounts**. ![](https://halosoft.gitbook.io/ella-documentation/~gitbook/image?url=https%3A%2F%2F3284033180-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fag3h7ZduRGWlquTgGUHi%252Fuploads%252F9ez9b2Yf1choyelFkCyV%252Fcommunity.png%3Falt%3Dmedia%26token%3D367df3c5-a932-4e77-9a2a-709166b59e72&width=768&dpr=3&quality=100&sign=213b2287&sv=2) [hashtag](https://halosoft.gitbook.io/ella-documentation#below-are-useful-resources-for-you) Below are useful resources for you: ------------------------------------------------------------------------------------------------------------------------------------- ►► Getting to know Shopify: [https://shopify.pxf.io/doxgxq arrow-up-right](https://shopify.pxf.io/doxgxq) ►► Shopify Apps: [https://shopify.pxf.io/KeVmox arrow-up-right](https://shopify.pxf.io/KeVmox) ►► Free tools to run your business: [https://shopify.pxf.io/oqaVDearrow-up-right](https://shopify.pxf.io/oqaVDe) ►► Free stock photos and images: [https://shopify.pxf.io/GjaNAnarrow-up-right](https://shopify.pxf.io/GjaNAn) [NextExclusive Offers 🔥chevron-right](https://halosoft.gitbook.io/ella-documentation/exclusive-offers) Last updated 1 year ago * [Ella - Multipurpose Shopify Theme OS 2.0](https://halosoft.gitbook.io/ella-documentation#ella-multipurpose-shopify-theme-os-2.0) * [Below are useful resources for you:](https://halosoft.gitbook.io/ella-documentation#below-are-useful-resources-for-you) --- # Feature | Shopify Theme Requirements Theme được xây dựng dựa trên source [theme Dawnarrow-up-right](https://dawn-theme-default.myshopify.com/) mới nhất. Tất cả các theme đều phải có những tính năng sau: 1. [Sections Everywherearrow-up-right](https://shopify.dev/themes/store/requirements#templates) 2. [Discountsarrow-up-right](https://shopify.dev/themes/pricing-payments/discounts) 3. Dynamic checkout buttons: bao gồm [Dynamic checkout buttonsarrow-up-right](https://shopify.dev/themes/architecture/templates/product#dynamic-checkout-buttons) và [Accelerated checkout buttonsarrow-up-right](https://shopify.dev/themes/pricing-payments/accelerated-checkout#implementing-accelerated-checkout-buttons-in-your-theme) . Tính năng này sẽ được hiển thị ở Product Page/Quick View và Cart Page (đối với Accelerated checkout buttons). Màu của các button như Shopify Pay, Paypal,...không được sửa khác màu mặc định. 4. [Faceted search filteringarrow-up-right](https://shopify.dev/themes/navigation-search/filtering) : hiển thị trên Collection Page và Search Page. 5. [Gift Cardarrow-up-right](https://shopify.dev/themes/architecture/templates/gift-card-liquid) : giữ nguyên mặc định của theme Dawn. 6. [Images for social sharingarrow-up-right](https://shopify.dev/api/liquid/objects/page#page-image) 7. [Multi-level menusarrow-up-right](https://shopify.dev/themes/navigation-search/navigation) : bao gồm dropdown menu và mega menu. 8. [Newsletter formsarrow-up-right](https://shopify.dev/themes/customer-engagement/email-consent#newsletter-sign-up-form) : bao gồm Newsletter popup, Newsletter form section và Newsletter form ở Footer. 9. [Pickup availabilityarrow-up-right](https://shopify.dev/themes/store/requirements) 10. [Product recommendationsarrow-up-right](https://shopify.dev/themes/store/requirements) 11. [Rich product mediaarrow-up-right](https://shopify.dev/themes/product-merchandising/media) 12. [Search box or a link to searcharrow-up-right](https://shopify.dev/themes/architecture/templates/search) 13. [Selling plansarrow-up-right](https://shopify.dev/themes/pricing-payments/purchase-options/support-purchase-options#customer-order-selling-plan-display) 14. [Shop Pay Installmentsarrow-up-right](https://shopify.dev/themes/pricing-payments/installments) : hiển thị trên Product page. 15. [Unit pricingarrow-up-right](https://shopify.dev/themes/pricing-payments/unit-pricing) : hiển thị trên Product page/ Quick view, Cart page/ Quick cart, Customer page và trên các Product card ở các block product. 16. [Variant imagesarrow-up-right](https://shopify.dev/themes/product-merchandising/variants) Các tính năng trên đều có sẵn trong theme Dawn, những tính năng nào cần customize lại layout hoặc bổ sung theme chức năng thì mới tùy chỉnh lại, còn lại sẽ giữ nguyên như theme Dawn. [hashtag](https://halosoft.gitbook.io/shopify-theme-requrements#cac-tinh-nang-can-xem-xet) Các tính năng cần xem xét ------------------------------------------------------------------------------------------------------------------------- Hiện tại có hai tính năng cần xem xét có tiếp tục sử dụng theo code của bên mình hay sử dụng mặc định của Shopify: 1. [Country selectionarrow-up-right](https://shopify.dev/themes/internationalization/multiple-currencies-languages#the-country-selector) 2. [Language selectionarrow-up-right](https://shopify.dev/themes/internationalization/multiple-currencies-languages#the-language-selector) [hashtag](https://halosoft.gitbook.io/shopify-theme-requrements#cac-tinh-nang-bo-sung) Các tính năng bổ sung ----------------------------------------------------------------------------------------------------------------- Các tính năng sau được xây dựng từ bên mình, sẽ bổ sung vào các theme khi làm, tùy vào layout để tùy chỉnh cho phù hợp: 1. Recently viewed products: bao gồm popup và section ở Product page 2. Pre-order: hiển thị trên Product Page/Quick view 3. Quick shop 4. Quick view 5. Cookie popup 6. Product bundle 7. Quick edit cart 8. Product listing layout 9. Notify me: Out of stock: hiển thị trên Product page/Quick view và trên các Product card ở các block product. 10. Sticky add to cart 11. Countdown: hiển thị theo Product type, product collection, product metafield hoặc trên tất cả product. 12. Size chart: hiển thị theo Product type, product collection, product metafield hoặc trên tất cả product. [hashtag](https://halosoft.gitbook.io/shopify-theme-requrements#cac-app-can-cai-dat) Các app cần cài đặt ------------------------------------------------------------------------------------------------------------- 1. [Product reviewsarrow-up-right](https://apps.shopify.com/product-reviews) 2. [Search & Discoveryarrow-up-right](https://apps.shopify.com/search-and-discovery) [NextYêu cầu về tính năngchevron-right](https://halosoft.gitbook.io/shopify-theme-requrements/feature/yeu-cau-ve-tinh-nang) Last updated 3 years ago * [Các tính năng cần xem xét](https://halosoft.gitbook.io/shopify-theme-requrements#cac-tinh-nang-can-xem-xet) * [Các tính năng bổ sung](https://halosoft.gitbook.io/shopify-theme-requrements#cac-tinh-nang-bo-sung) * [Các app cần cài đặt](https://halosoft.gitbook.io/shopify-theme-requrements#cac-app-can-cai-dat) --- # Section | Shopify Theme Requirements Tất cả các page ngoại trừ Customer Account page, Gift Card và Checkout thì đều phải viết dưới dạng JSON template. Các section riêng của từng page không sử dụng preset. [hashtag](https://halosoft.gitbook.io/shopify-theme-requrements/section#cach-dat-ten-section) Cách đặt tên section ----------------------------------------------------------------------------------------------------------------------- * Tên file: dùng tiền tố halo-tên-section.liquid * Tên section và preset: đặt theo chức năng của section hoặc dạng layout của section đang cần làm. Thường dùng là Image banner, Custom banner, Slideshow, Fullwidth banner, Image gallery, Icon with text,...Nếu có nhiều section trùng tên thì thêm số thứ tự như 1, 2, 3...vào cuối mỗi tên section để phân biệt. [hashtag](https://halosoft.gitbook.io/shopify-theme-requrements/section#yeu-cau-ve-section) Yêu cầu về section ------------------------------------------------------------------------------------------------------------------- ### [hashtag](https://halosoft.gitbook.io/shopify-theme-requrements/section#dieu-huong-content-tren-tablet-va-desktop) Điều hướng content trên tablet và desktop * Canh chỉnh content theo chiều ngang: Left, Center, Right. * Canh chỉnh content theo chiều dọc: Top, Middle, Bottom. * Canh chỉnh text: Left, Center, Right, Justify Các section như slideshow, fullwidth banner hoặc các section có banner lớn chiểm khoảng nửa màn hình thì điều hướng conntent sẽ viết section cho khách chọn như ví dụ sau: ![](https://halosoft.gitbook.io/shopify-theme-requrements/~gitbook/image?url=https%3A%2F%2F3810038871-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F7wRGiGMySPoVEOT9Sw6O%252Fuploads%252FiCGbaXbjqkL1QKOOD2l9%252Fimage.png%3Falt%3Dmedia%26token%3D20839766-741a-4532-af1f-40d98e8df5fb&width=300&dpr=3&quality=100&sign=95e49452&sv=2)![](https://halosoft.gitbook.io/shopify-theme-requrements/~gitbook/image?url=https%3A%2F%2F3810038871-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F7wRGiGMySPoVEOT9Sw6O%252Fuploads%252FaGVO41cQFwzAzme2hcIN%252Fimage.png%3Falt%3Dmedia%26token%3D78907459-e28f-4159-839c-eadd49a91ef3&width=300&dpr=3&quality=100&sign=da28c1e5&sv=2) ### [hashtag](https://halosoft.gitbook.io/shopify-theme-requrements/section#dieu-huong-content-tren-mobile) Điều hướng content trên mobile * Canh chỉnh content theo chiều ngang: Center. * Canh chỉnh content theo chiều dọc: nằm trên banner (absolute) hoặc nằm phía dưới banner (relative). * Canh chỉnh text: Left, Center, Right, Justify ![](https://halosoft.gitbook.io/shopify-theme-requrements/~gitbook/image?url=https%3A%2F%2F3810038871-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F7wRGiGMySPoVEOT9Sw6O%252Fuploads%252FkCyf2Zgrbm4DAZ5AmCDp%252Fimage.png%3Falt%3Dmedia%26token%3D01d3410e-ab4f-4708-b761-4c8fd1a3b64e&width=300&dpr=3&quality=100&sign=b8e1b948&sv=2)![](https://halosoft.gitbook.io/shopify-theme-requrements/~gitbook/image?url=https%3A%2F%2F3810038871-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F7wRGiGMySPoVEOT9Sw6O%252Fuploads%252FB8PsIOqeBvyEzxv8h82z%252Fimage.png%3Falt%3Dmedia%26token%3D8e4ef49f-6e67-4bb3-bee6-0b25cf42ff30&width=300&dpr=3&quality=100&sign=d1b50a9d&sv=2) ### [hashtag](https://halosoft.gitbook.io/shopify-theme-requrements/section#tieu-de-cua-section) Tiêu đề của section Phần lớn mỗi section sẽ bao gồm một phần tiêu đề gồm: Heading, Description và Button/Link. Các setting cần có cho phần này: * Input text: nhập Heading * Rich text: nhập Description * Input text: nhập Button text/Link text * Input URL: nhập Button URL/Link url * Select dropdown: chọn style cho Button/Link * Select dropdown: chọn canh chỉnh text theo Left, Center, Right. ![](https://halosoft.gitbook.io/shopify-theme-requrements/~gitbook/image?url=https%3A%2F%2F3810038871-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F7wRGiGMySPoVEOT9Sw6O%252Fuploads%252FI6vjG5QP71dDahQklwKZ%252Fimage.png%3Falt%3Dmedia%26token%3D23b791b0-92d2-4203-a85a-fbfa6f9d87ab&width=300&dpr=3&quality=100&sign=b9b3b7f9&sv=2) ### [hashtag](https://halosoft.gitbook.io/shopify-theme-requrements/section#layout-va-style) Layout và Style Mỗi section có ít nhất một layout mặc định như design. Khi làm theme có thể bổ sung theme layout và style để cho section đó được đa dạng phong cách, khách hàng có thể dễ dàng tùy biến nếu cần. Tuy nhiên, việc bổ sung layout và style cần xem xét đến việc ảnh hưởng đến các setting khác hiện đã có, một section nên giới hạn tối đa 4 layout và style. Các layout thường dùng: * Grid và Slider trên desktop * Grid, Swipe và Slider trên mobile * Image first và Content first trên desktop. Ở mobile mặc định sẽ show image first. Các style thường dùng để điều chỉnh về khoảng cách giữa các phần trong content. ### [hashtag](https://halosoft.gitbook.io/shopify-theme-requrements/section#container) Container Mỗi section sẽ có một setting để có thể chọn được container cho section đó. ![](https://halosoft.gitbook.io/shopify-theme-requrements/~gitbook/image?url=https%3A%2F%2F3810038871-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F7wRGiGMySPoVEOT9Sw6O%252Fuploads%252F0ckIeQ2geHF6dsiKc1cU%252Fimage.png%3Falt%3Dmedia%26token%3D02ffc9ad-bc9c-4ab0-9260-14a94fd58060&width=300&dpr=3&quality=100&sign=fbd5b007&sv=2) ### [hashtag](https://halosoft.gitbook.io/shopify-theme-requrements/section#spacing) Spacing Mỗi section sẽ có setting điều chỉnh khoảng cách giữa các section trên mobile, tablet và desktop ![](https://halosoft.gitbook.io/shopify-theme-requrements/~gitbook/image?url=https%3A%2F%2F3810038871-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F7wRGiGMySPoVEOT9Sw6O%252Fuploads%252FTQY2HxXfBrqFYnUJs8c7%252Fimage.png%3Falt%3Dmedia%26token%3D5a2f8e35-9838-4b90-8994-3abac5f1b160&width=300&dpr=3&quality=100&sign=a56521a4&sv=2) ### [hashtag](https://halosoft.gitbook.io/shopify-theme-requrements/section#grid-gap-va-column) Grid Gap và Column Đối với những section có layout Grid hoặc Slider gồm nhiều item thì phải có những setting như sau: * Grid Gap hoặc Column Spacing: Khoảng cách giữa các column/item với nhau * Column: Số lượng item được show trên một hàng ![](https://halosoft.gitbook.io/shopify-theme-requrements/~gitbook/image?url=https%3A%2F%2F3810038871-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F7wRGiGMySPoVEOT9Sw6O%252Fuploads%252FpNyoiC5dx0x3kTxETir1%252Fimage.png%3Falt%3Dmedia%26token%3Dbb8d55dc-7cf2-492a-ad61-4c4578642d5b&width=300&dpr=3&quality=100&sign=ac1171d0&sv=2) ### [hashtag](https://halosoft.gitbook.io/shopify-theme-requrements/section#image) Image Đối với những section như slideshow, fullwidth banner hoặc các section có banner lớn chiểm khoảng nửa màn hình thì phải có setting để có thể upload image riêng cho mobile: ![](https://halosoft.gitbook.io/shopify-theme-requrements/~gitbook/image?url=https%3A%2F%2F3810038871-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F7wRGiGMySPoVEOT9Sw6O%252Fuploads%252FP1ylpVix25E5J6y6aHRB%252Fimage.png%3Falt%3Dmedia%26token%3De29581ce-8945-4ce0-9fb7-c18c915539d0&width=300&dpr=3&quality=100&sign=1a8ed536&sv=2) ### [hashtag](https://halosoft.gitbook.io/shopify-theme-requrements/section#image-ratio) Image Ratio Đối với những section có layout Grid hoặc Slider gồm nhiều item thì phải có setting để lựa chọn được kích thước của image sau đó phù hợp: * Adapt to image: image sẽ tự động canh chỉnh theo tỉ lệ kích thước gốc của image * Portrait: image sẽ tự động canh chỉnh theo một tỉ lệ nhất định, tất cả các image khách trên cùng section sẽ có kích thước theo tỉ lệ này. Khi lựa chọn option này, khách hàng sẽ điều chỉnh tỉ lệ của image bằng một setting khác. * Square: image sẽ tự động canh chỉnh thành hình vuông. * Circle: image sẽ tự động canh chỉnh thành hình tròn. ![](https://halosoft.gitbook.io/shopify-theme-requrements/~gitbook/image?url=https%3A%2F%2F3810038871-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F7wRGiGMySPoVEOT9Sw6O%252Fuploads%252FVALJkLNwNPPCJqAVOewb%252Fimage.png%3Falt%3Dmedia%26token%3D85b5aad9-2a3e-4c2f-8450-090d9aeca941&width=300&dpr=3&quality=100&sign=17ec2152&sv=2) ### [hashtag](https://halosoft.gitbook.io/shopify-theme-requrements/section#slider) Slider Đối với những section có layout dạng Slider thì phải có những setting như sau: * Show dots * Show arrows ![](https://halosoft.gitbook.io/shopify-theme-requrements/~gitbook/image?url=https%3A%2F%2F3810038871-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F7wRGiGMySPoVEOT9Sw6O%252Fuploads%252FR6wsozVV4s8cwc9llAWu%252Fimage.png%3Falt%3Dmedia%26token%3D3b79efec-eff3-4102-a514-39f2843da335&width=300&dpr=3&quality=100&sign=eb185167&sv=2) ### [hashtag](https://halosoft.gitbook.io/shopify-theme-requrements/section#typography) Typography Những setting về typography liên quan đến content của section (không bao gồm tiêu đề của section): * Font-family: cho title và text * Font-size: cho tiêu đề và text ở mobile và desktop * Font-weight: cho title và text * Text-transform: cho tiêu đề và text ![](https://halosoft.gitbook.io/shopify-theme-requrements/~gitbook/image?url=https%3A%2F%2F3810038871-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F7wRGiGMySPoVEOT9Sw6O%252Fuploads%252FE1UIW7cwStZP8E2fMecf%252Fimage.png%3Falt%3Dmedia%26token%3De509c251-6b81-451c-b9a2-08b4a06c84d0&width=300&dpr=3&quality=100&sign=88f80f84&sv=2) ### [hashtag](https://halosoft.gitbook.io/shopify-theme-requrements/section#background-va-color) Background và Color * **Background color** * **Bacground gradient**: sử dụng màu gradient cho background, khi không có màu gradient sẽ sử dụng màu **Background color** * **Background image**: sử dụng image cho background, thêm setting để có thể tùy chỉnh thành dạng parallax nếu có thể. * **Color**: tùy mỗi section để viết setting cho title, text,...color riêng biệt. ![](https://halosoft.gitbook.io/shopify-theme-requrements/~gitbook/image?url=https%3A%2F%2F3810038871-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F7wRGiGMySPoVEOT9Sw6O%252Fuploads%252FIoG0qFrhLPW0ZlVritJo%252Fimage.png%3Falt%3Dmedia%26token%3Dbc06f9f1-daec-4ffb-b746-dc7ff6ee46b3&width=300&dpr=3&quality=100&sign=a8e9ff78&sv=2)![](https://halosoft.gitbook.io/shopify-theme-requrements/~gitbook/image?url=https%3A%2F%2F3810038871-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F7wRGiGMySPoVEOT9Sw6O%252Fuploads%252Flf5Uj1JErriJjUZCGJnc%252Fimage.png%3Falt%3Dmedia%26token%3Dd9ae7025-dfcd-46ce-a917-c39f0d222236&width=300&dpr=3&quality=100&sign=7c56f6b4&sv=2) [PreviousYêu cầu về tính năngchevron-left](https://halosoft.gitbook.io/shopify-theme-requrements/feature/yeu-cau-ve-tinh-nang) [NextTheme Settingschevron-right](https://halosoft.gitbook.io/shopify-theme-requrements/theme-settings) Last updated 3 years ago * [Cách đặt tên section](https://halosoft.gitbook.io/shopify-theme-requrements/section#cach-dat-ten-section) * [Yêu cầu về section](https://halosoft.gitbook.io/shopify-theme-requrements/section#yeu-cau-ve-section) * [Điều hướng content trên tablet và desktop](https://halosoft.gitbook.io/shopify-theme-requrements/section#dieu-huong-content-tren-tablet-va-desktop) * [Điều hướng content trên mobile](https://halosoft.gitbook.io/shopify-theme-requrements/section#dieu-huong-content-tren-mobile) * [Tiêu đề của section](https://halosoft.gitbook.io/shopify-theme-requrements/section#tieu-de-cua-section) * [Layout và Style](https://halosoft.gitbook.io/shopify-theme-requrements/section#layout-va-style) * [Container](https://halosoft.gitbook.io/shopify-theme-requrements/section#container) * [Spacing](https://halosoft.gitbook.io/shopify-theme-requrements/section#spacing) * [Grid Gap và Column](https://halosoft.gitbook.io/shopify-theme-requrements/section#grid-gap-va-column) * [Image](https://halosoft.gitbook.io/shopify-theme-requrements/section#image) * [Image Ratio](https://halosoft.gitbook.io/shopify-theme-requrements/section#image-ratio) * [Slider](https://halosoft.gitbook.io/shopify-theme-requrements/section#slider) * [Typography](https://halosoft.gitbook.io/shopify-theme-requrements/section#typography) * [Background và Color](https://halosoft.gitbook.io/shopify-theme-requrements/section#background-va-color) --- # Yêu cầu về tính năng | Shopify Theme Requirements * **Before You Leave** cho tùy thời gian để show. * Bổ sung video MP4 khi hover cho product card (nếu product có video MP4). * **Metafield** dùng cho các chức năng của theme được viết theo dạng **metafield.c\_f**. * Những section có scroll ngang bằng overflow: ẩn thanh scroll đi * "Read More" Button, "Read Less" cho Description tab trên Product page ở màn hình mobile [hashtag](https://halosoft.gitbook.io/shopify-theme-requrements/feature/yeu-cau-ve-tinh-nang#countdown) Countdown ---------------------------------------------------------------------------------------------------------------------- Có 3 option cho khách chọn: * Countdown cho sản phẩm thuộc 1 collection * Countdown giống nhau cho tất cả sản phẩm * Countdown khác nhau cho mỗi sản phẩm [hashtag](https://halosoft.gitbook.io/shopify-theme-requrements/feature/yeu-cau-ve-tinh-nang#size-chart) Size Chart ------------------------------------------------------------------------------------------------------------------------ Có 4 option cho khách chọn: * Sử dụng product type. Các product có cùng type sẽ show cùng một size chart * Sử dụng product vendor. Các product có cùng vendor sẽ show cùng một size chart * Sử dụng metafield. Mỗi product sẽ có size chart được nhập trong metafield của product đó * Upload một hình dùng chung cho tất cả sản phẩm [hashtag](https://halosoft.gitbook.io/shopify-theme-requrements/feature/yeu-cau-ve-tinh-nang#menu-mobile) Menu Mobile -------------------------------------------------------------------------------------------------------------------------- Có 2 option cho khách chọn: * Sử dụng Menu được responsive từ desktop * Sử dụng Menu riêng biệt cho mobile, có tối đa 3 tab. [hashtag](https://halosoft.gitbook.io/shopify-theme-requrements/feature/yeu-cau-ve-tinh-nang#label-tren-menu) Label trên Menu ---------------------------------------------------------------------------------------------------------------------------------- * Các label trên menu sẽ show cho cả 3 level menu. [hashtag](https://halosoft.gitbook.io/shopify-theme-requrements/feature/yeu-cau-ve-tinh-nang#special-menu-item) Special Menu Item -------------------------------------------------------------------------------------------------------------------------------------- Khách nhập tên menu item để show item đó có màu sắc khác với các menu item còn lại. Có thể show được trên cả 3 level menu. [hashtag](https://halosoft.gitbook.io/shopify-theme-requrements/feature/yeu-cau-ve-tinh-nang#product-tabs) Product Tabs ---------------------------------------------------------------------------------------------------------------------------- Bao gồm **Vertical tab** và **Horizontal tab**. Mỗi tab sẽ nhập giống nhau hoặc khác nhau cho mỗi sản phẩm. * Các tab cần có: description tab, custom tab. * Add block để show tab. [hashtag](https://halosoft.gitbook.io/shopify-theme-requrements/feature/yeu-cau-ve-tinh-nang#ask-an-expert) Ask An Expert ------------------------------------------------------------------------------------------------------------------------------ * Nếu ở Product page hoặc Quick view thì form khi submit phải bao gồm product title, product variant (nếu có). * Sử dụng server themevale để gửi mail. [hashtag](https://halosoft.gitbook.io/shopify-theme-requrements/feature/yeu-cau-ve-tinh-nang#sold-in-last) Sold In Last ---------------------------------------------------------------------------------------------------------------------------- * Nếu sản phẩm hết hàng thì không show lên [hashtag](https://halosoft.gitbook.io/shopify-theme-requrements/feature/yeu-cau-ve-tinh-nang#quick-view-wish-list) Quick View / Wish List ---------------------------------------------------------------------------------------------------------------------------------------------- * Tạo option bật/tắt ở mobile * Tùy vào style của product card để tạo option show icon hoặc show text. [hashtag](https://halosoft.gitbook.io/shopify-theme-requrements/feature/yeu-cau-ve-tinh-nang#compare-product) Compare Product ---------------------------------------------------------------------------------------------------------------------------------- * Show ở mỗi product card. * Show "Compare" button khi có ít nhất 2 product được chọn. [hashtag](https://halosoft.gitbook.io/shopify-theme-requrements/feature/yeu-cau-ve-tinh-nang#ajax-add-to-cart) Ajax Add To Cart ------------------------------------------------------------------------------------------------------------------------------------ Có 3 option để khách lựa chọn: * Show Quick Cart (Side Cart hoặc Cart Dropdown) * Show Popup Cart (Minimal Popup hoặc Upsell Popup) * Đi thẳng đến Cart page [hashtag](https://halosoft.gitbook.io/shopify-theme-requrements/feature/yeu-cau-ve-tinh-nang#customization-options) Customization Options ---------------------------------------------------------------------------------------------------------------------------------------------- Viết sẵn trong theme 2 option dạng Input Text và Input. Có 3 option để khách lựa chọn: * Sử dụng product tag để show đối với những product nào mong muốn. * Show trên các product trong cùng một collection. * Show trên tất cả product. [PreviousFeaturechevron-left](https://halosoft.gitbook.io/shopify-theme-requrements) [NextSectionchevron-right](https://halosoft.gitbook.io/shopify-theme-requrements/section) Last updated 3 years ago * [Countdown](https://halosoft.gitbook.io/shopify-theme-requrements/feature/yeu-cau-ve-tinh-nang#countdown) * [Size Chart](https://halosoft.gitbook.io/shopify-theme-requrements/feature/yeu-cau-ve-tinh-nang#size-chart) * [Menu Mobile](https://halosoft.gitbook.io/shopify-theme-requrements/feature/yeu-cau-ve-tinh-nang#menu-mobile) * [Label trên Menu](https://halosoft.gitbook.io/shopify-theme-requrements/feature/yeu-cau-ve-tinh-nang#label-tren-menu) * [Special Menu Item](https://halosoft.gitbook.io/shopify-theme-requrements/feature/yeu-cau-ve-tinh-nang#special-menu-item) * [Product Tabs](https://halosoft.gitbook.io/shopify-theme-requrements/feature/yeu-cau-ve-tinh-nang#product-tabs) * [Ask An Expert](https://halosoft.gitbook.io/shopify-theme-requrements/feature/yeu-cau-ve-tinh-nang#ask-an-expert) * [Sold In Last](https://halosoft.gitbook.io/shopify-theme-requrements/feature/yeu-cau-ve-tinh-nang#sold-in-last) * [Quick View / Wish List](https://halosoft.gitbook.io/shopify-theme-requrements/feature/yeu-cau-ve-tinh-nang#quick-view-wish-list) * [Compare Product](https://halosoft.gitbook.io/shopify-theme-requrements/feature/yeu-cau-ve-tinh-nang#compare-product) * [Ajax Add To Cart](https://halosoft.gitbook.io/shopify-theme-requrements/feature/yeu-cau-ve-tinh-nang#ajax-add-to-cart) * [Customization Options](https://halosoft.gitbook.io/shopify-theme-requrements/feature/yeu-cau-ve-tinh-nang#customization-options) --- # Theme Settings | Shopify Theme Requirements Tùy theo từng theme mà cách viết và sắp xếp setting có sự khác biệt phù hợp với mỗi theme. * Quick view được viết setting tách riêng với Product page * Có setting để khách có thể bật / tắt Custom CSS/JS * Có setting cho Product Card, những setting trong phần này không liên quan đến Product page * Các function được sử dụng đồng thời ở nhiều nơi thì viết setting chung để setup một lần như: Coundown, Hot stock,... * Để tránh bị giới hạn ở file en.default.scheme.json thì sử dụng chung các biến ngôn ngữ để có thể sử dụng lại nhiều lần và thống nhất cách viết trên theme. [hashtag](https://halosoft.gitbook.io/shopify-theme-requrements/theme-settings#cach-viet-setting) Cách viết setting ------------------------------------------------------------------------------------------------------------------------ * Đặt tên setting chỉ viết hoa từ đầu tiên và danh từ riêng. * Sử dụng tên setting mô tả chức năng của setting đó. Tránh việc dùng nhiều số thứ tự trên setting: ![](https://halosoft.gitbook.io/shopify-theme-requrements/~gitbook/image?url=https%3A%2F%2F3810038871-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F7wRGiGMySPoVEOT9Sw6O%252Fuploads%252FaU0Ut8u4OANe0qIop8wN%252Fimage.png%3Falt%3Dmedia%26token%3Dc7b4bbb8-f4cc-4c99-831f-9eed8b635b7b&width=768&dpr=3&quality=100&sign=82d87f41&sv=2) * Sử dụng ngôn ngữ trực quan, dễ hiểu cho người dùng. * Sử dụng tiếng Anh của người Mỹ: ![](https://halosoft.gitbook.io/shopify-theme-requrements/~gitbook/image?url=https%3A%2F%2F3810038871-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F7wRGiGMySPoVEOT9Sw6O%252Fuploads%252FWxekjQi2FO4jHRhyBNFb%252Fimage.png%3Falt%3Dmedia%26token%3Dafe162fb-29a4-4fcd-bd95-ca6bb6738a22&width=300&dpr=3&quality=100&sign=acb6030d&sv=2) * Tiêu đề của section chỉ dùng một lần trên phần tên section / preset, không dùng cho các setting bên trong section. * Tất cả các button và action đều phải bắt đầu bằng một động từ. * Tất cả các thông số kỹ thuật phải tuân theo format chung: ![](https://halosoft.gitbook.io/shopify-theme-requrements/~gitbook/image?url=https%3A%2F%2F3810038871-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F7wRGiGMySPoVEOT9Sw6O%252Fuploads%252FCVagIk189viohFEoQnt7%252Fimage.png%3Falt%3Dmedia%26token%3D9ff85b8b-2660-4db5-b7b7-799a22db5565&width=768&dpr=3&quality=100&sign=194d6760&sv=2) * Sử dụng thuật ngữ mà Shopify cho phép dùng: ![](https://halosoft.gitbook.io/shopify-theme-requrements/~gitbook/image?url=https%3A%2F%2F3810038871-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F7wRGiGMySPoVEOT9Sw6O%252Fuploads%252FVvwTQkyUDm0RVzsDe0T9%252Fimage.png%3Falt%3Dmedia%26token%3Dc55ad887-eb30-4ccc-9e1d-e3e4805608c7&width=768&dpr=3&quality=100&sign=c098d0d&sv=2) ![](https://halosoft.gitbook.io/shopify-theme-requrements/~gitbook/image?url=https%3A%2F%2F3810038871-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F7wRGiGMySPoVEOT9Sw6O%252Fuploads%252FWYD6aUAlSNPkddjFZTws%252Fimage.png%3Falt%3Dmedia%26token%3D194da066-3206-438f-9b11-f3673ad5a168&width=768&dpr=3&quality=100&sign=b00a96cd&sv=2) * Sử dụng [icon placeholderarrow-up-right](https://www.shopify.com/ca/partners/blog/placeholder-images?shpxid=0910ecc5-F409-47F0-495A-1F8B73C8665C) của Shopify để đối với các banner mặc định của theme. [hashtag](https://halosoft.gitbook.io/shopify-theme-requrements/theme-settings#multiple-layouts) Multiple Layouts ---------------------------------------------------------------------------------------------------------------------- Viết các setting để tùy chọn Header, Footer, Password Page, Mobile Menu, Product card. ![](https://halosoft.gitbook.io/shopify-theme-requrements/~gitbook/image?url=https%3A%2F%2F3810038871-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F7wRGiGMySPoVEOT9Sw6O%252Fuploads%252F8en26N9apmaKmrU5Mexn%252Fimage.png%3Falt%3Dmedia%26token%3Dd008d7bb-fbfa-4718-a18c-64b7911e6e9d&width=300&dpr=3&quality=100&sign=56ac2ec6&sv=2) [hashtag](https://halosoft.gitbook.io/shopify-theme-requrements/theme-settings#colors) Colors -------------------------------------------------------------------------------------------------- Có hai cách viết setting cho colors: Color scheme và Color custom. ### [hashtag](https://halosoft.gitbook.io/shopify-theme-requrements/theme-settings#color-schema) Color Schema Đây là cách setting và phối màu cho theme Dawn của Shopify. Mỗi section, block hay content sẽ có 3 loại setting color cơ bản gồm: * **Foreground color**: dùng cho màu text * **Background color**: dùng cho màu background * **Background gradient**: dùng màu gradient cho background, trong trường hợp không nhập Background graidient thì màu ![](https://halosoft.gitbook.io/shopify-theme-requrements/~gitbook/image?url=https%3A%2F%2F3810038871-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F7wRGiGMySPoVEOT9Sw6O%252Fuploads%252FqD8EsY5S408TmbPU9wHA%252Fimage.png%3Falt%3Dmedia%26token%3Dd11288d3-7700-42aa-9286-1c6faf18022a&width=300&dpr=3&quality=100&sign=b74a83d5&sv=2) Theme Dawn sẽ setup thành 5 color schema dự theo cách setting trên. Ở mỗi section, block hoặc content thì khách hàng có thể lựa chọn color schema mà mình muốn sử dụng. Các text, background, border sẽ được áp dụng theo cách phối màu này theo tỉ lệ phù hợp: ![](https://halosoft.gitbook.io/shopify-theme-requrements/~gitbook/image?url=https%3A%2F%2F3810038871-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F7wRGiGMySPoVEOT9Sw6O%252Fuploads%252Fh2jYg3DcGRRvbsjQmcAw%252Fimage.png%3Falt%3Dmedia%26token%3D874eadc9-8ac7-4c10-8b70-abcfecbb6cd9&width=300&dpr=3&quality=100&sign=8a8e8303&sv=2) ### [hashtag](https://halosoft.gitbook.io/shopify-theme-requrements/theme-settings#custom-color) Custom Color Đây là cách setting phổ biến và đơn giản nhất. Mỗi setting về color sẽ riêng biệt: ![](https://halosoft.gitbook.io/shopify-theme-requrements/~gitbook/image?url=https%3A%2F%2F3810038871-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F7wRGiGMySPoVEOT9Sw6O%252Fuploads%252FGtocO4Lo9sY9NtR9VSZg%252Fimage.png%3Falt%3Dmedia%26token%3D568602ca-61f1-4138-a49b-d8bf96b22dfa&width=300&dpr=3&quality=100&sign=464b50da&sv=2) [hashtag](https://halosoft.gitbook.io/shopify-theme-requrements/theme-settings#typography) Typography ---------------------------------------------------------------------------------------------------------- * Viết setting để chọn font cho toàn theme. Cho khách có thể chọn 2-3 font có thể sử dụng được trên theme. Mỗi font sẽ được lựa chọn từ Shopify font, Google font và Normal font. ![](https://halosoft.gitbook.io/shopify-theme-requrements/~gitbook/image?url=https%3A%2F%2F3810038871-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F7wRGiGMySPoVEOT9Sw6O%252Fuploads%252FqCTcYZTwTAWQelKcg44l%252Fimage.png%3Falt%3Dmedia%26token%3D4308ab99-098d-4387-91ab-0162689d04ec&width=300&dpr=3&quality=100&sign=74c94db1&sv=2) * Thêm các setting để điều chỉnh letter-spacing và line-height chung cho cả theme: ![](https://halosoft.gitbook.io/shopify-theme-requrements/~gitbook/image?url=https%3A%2F%2F3810038871-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F7wRGiGMySPoVEOT9Sw6O%252Fuploads%252FZG4TCzZTIAspkwznMI80%252Fimage.png%3Falt%3Dmedia%26token%3D90b9182f-6dbf-4ec7-8138-385188961f4d&width=300&dpr=3&quality=100&sign=35df11e3&sv=2) ### [hashtag](https://halosoft.gitbook.io/shopify-theme-requrements/theme-settings#heading) Heading Chọn các setting về font-size, font-size trên mobile, font-weight, text-transform cho toàn bộ heading ở các section: ![](https://halosoft.gitbook.io/shopify-theme-requrements/~gitbook/image?url=https%3A%2F%2F3810038871-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F7wRGiGMySPoVEOT9Sw6O%252Fuploads%252F16HuLu8GwmszQFnIRsll%252Fimage.png%3Falt%3Dmedia%26token%3D8a3d6379-88fe-4af8-9a2d-e73bb5cdee94&width=300&dpr=3&quality=100&sign=1f848c3e&sv=2) ### [hashtag](https://halosoft.gitbook.io/shopify-theme-requrements/theme-settings#body) Body Chọn các setting về font-size, font-weight chung cho các text. ![](https://halosoft.gitbook.io/shopify-theme-requrements/~gitbook/image?url=https%3A%2F%2F3810038871-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F7wRGiGMySPoVEOT9Sw6O%252Fuploads%252FbnzDjYH44GZFjlDFHXxw%252Fimage.png%3Falt%3Dmedia%26token%3D467641d7-b7ea-474a-976e-7f665bdb848c&width=300&dpr=3&quality=100&sign=b92e309e&sv=2) ### [hashtag](https://halosoft.gitbook.io/shopify-theme-requrements/theme-settings#page-title) Page Title Chọn các setting về font-size, font-size trên mobile, font-weight, text-transform cho toàn bộ page title ở phần lớn các page (trừ product page,...) ![](https://halosoft.gitbook.io/shopify-theme-requrements/~gitbook/image?url=https%3A%2F%2F3810038871-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F7wRGiGMySPoVEOT9Sw6O%252Fuploads%252FKMBaO12njAQJe0hNkHpG%252Fimage.png%3Falt%3Dmedia%26token%3D3042503d-a2db-4656-9d52-9bcbb115f061&width=300&dpr=3&quality=100&sign=454b0ff6&sv=2) [hashtag](https://halosoft.gitbook.io/shopify-theme-requrements/theme-settings#button-styles) Button Styles ---------------------------------------------------------------------------------------------------------------- Viết các setting về button chung cho theme. * Phải có các setting để điều chỉnh về Border width, Border style, Border corner, Box shadow: ![](https://halosoft.gitbook.io/shopify-theme-requrements/~gitbook/image?url=https%3A%2F%2F3810038871-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F7wRGiGMySPoVEOT9Sw6O%252Fuploads%252FfDGtYg2bqzDwNZECkhtq%252Fimage.png%3Falt%3Dmedia%26token%3Df262fd2c-e42a-4446-a592-8d75c08c897e&width=300&dpr=3&quality=100&sign=ad7916ab&sv=2) * Thêm setting cho khách có thể chọn màu của 3-5 loại button: ![](https://halosoft.gitbook.io/shopify-theme-requrements/~gitbook/image?url=https%3A%2F%2F3810038871-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F7wRGiGMySPoVEOT9Sw6O%252Fuploads%252FfikqdmLZKek6o6OBegRN%252Fimage.png%3Falt%3Dmedia%26token%3D7164c4a7-c06e-4553-85f1-ed3ff3b362f4&width=300&dpr=3&quality=100&sign=fe75ac52&sv=2) [PreviousSectionchevron-left](https://halosoft.gitbook.io/shopify-theme-requrements/section) [NextHTMLchevron-right](https://halosoft.gitbook.io/shopify-theme-requrements/html) Last updated 3 years ago * [Cách viết setting](https://halosoft.gitbook.io/shopify-theme-requrements/theme-settings#cach-viet-setting) * [Multiple Layouts](https://halosoft.gitbook.io/shopify-theme-requrements/theme-settings#multiple-layouts) * [Colors](https://halosoft.gitbook.io/shopify-theme-requrements/theme-settings#colors) * [Color Schema](https://halosoft.gitbook.io/shopify-theme-requrements/theme-settings#color-schema) * [Custom Color](https://halosoft.gitbook.io/shopify-theme-requrements/theme-settings#custom-color) * [Typography](https://halosoft.gitbook.io/shopify-theme-requrements/theme-settings#typography) * [Heading](https://halosoft.gitbook.io/shopify-theme-requrements/theme-settings#heading) * [Body](https://halosoft.gitbook.io/shopify-theme-requrements/theme-settings#body) * [Page Title](https://halosoft.gitbook.io/shopify-theme-requrements/theme-settings#page-title) * [Button Styles](https://halosoft.gitbook.io/shopify-theme-requrements/theme-settings#button-styles) --- # HTML | Shopify Theme Requirements * HTML được viết đúng chuẩn [W3schoolarrow-up-right](https://www.w3schools.com/html/) . Sau khi làm xong phải check lại tại link này: [https://validator.w3.org/arrow-up-right](https://validator.w3.org/) * Bỏ các thuộc tính **href="javascript:void(0)"** trên tất cả các thẻ . Nếu một button / phần tử dùng để click, ưu tiên đổi thẻ thành thẻ