# HOME ## AppSections Docs In this knowledge base, we offer **Product documentation** for users who want to build converting sites with **AppSections**. {% embed url="" %} ### Popular
Getting startedThe best way of learning anything is by doing./files/lTurGVRl5tHyd4KEps7K/pages/nntvfxM57vON8CSteCaH
SectionsLearn about our ready-to-use sections/files/KY3ifWzPTNHlgAZ7RDMb/pages/66It2QeHkiVY9vWjOIcK
Templates (Coming Soon)Learn about our ready-to-use templates/files/QNspj7VWzWaMJSPSGkQN/pages/oRqqRjPtyHTnvCV131DZ
Brand Styles Learn about our ready-to-use brand styles /files/I9DY7WAZiK1FRdpnEivJ/pages/csvRKtM02Q4LF4U7b01n
Video TutorialsWatch short videos explaining the core features of AppSections/files/sAhKQ27aZ1Um20DSdU5fhttps://www.youtube.com/@BlockLoads
Discord CommunityDiscuss with us and other merchants !/files/CJMzNfbhqUYXHQwsKV4phttps://discord.gg/RMhWTv7duM
### Main Sections
Getting StartedLearn on how to get started with AppSections/pages/nntvfxM57vON8CSteCaH
SettingsDive into the Builder & its tools/pages/TejrZoqq1mivgpiW9J9O
ApplicationLearn how to manage your app/pages/Yg2SPVKESNH1JKVM485G
# Get Started Here Welcome to AppSections, your ultimate solution for enhancing your Shopify store with seamless integration, flexible design, and powerful functionality. Our application provides a comprehensive suite of tools designed to make your store stand out, all with no coding required. {% embed url="" %} ### **What Are AppSections?** AppSections are innovative sections, templates, and brand styles that can be directly added to your existing Shopify theme. Each product within AppSections enhances your store by adding functional or stylistic elements that may be missing from your current theme. ### **Why Choose AppSections?** ### **Flexibility and Compatibility:** * **Built on Online Store 2.0 Principles:** AppSections leverage the advanced capabilities of Online Store 2.0, ensuring compatibility and enhanced functionality. * **Compatible with 1.0 Themes:** Even if you’re using a 1.0 theme, our 2.0 templates will seamlessly add 2.0 functionality to your store, ensuring you benefit from the latest advancements. ### **Unmatched Flexibility:** * **Sections:** Our sections are the most flexible on the market, allowing you to customize your store’s layout and design with ease. Whether you need advanced parallax effects, sticky behaviors, or dynamic animations, our sections have you covered. * **Brand Styles:** Choose from the most comprehensive brand styles available. Easily apply cohesive color schemes, typography, and design elements to ensure a consistent and appealing brand presence. * **Templates (Coming Soon):** Get ready for a variety of full-page templates that will streamline your store setup and design process, making it faster and easier to create a stunning storefront. ### **No Code, Hyper-Efficient:** * **User-Friendly:** Designed for users of all skill levels, AppSections allows you to install and manage sections, styles, and templates without any coding knowledge. * **Efficiency:** Save time and effort with our intuitive interface, enabling you to make impactful changes quickly and efficiently. ### Summary AppSections is your one-stop solution for enhancing your Shopify store. With the most flexible sections, the most comprehensive brand styles, and upcoming templates, our application empowers you to create a stunning and functional storefront effortlessly. Designed for efficiency and ease of use, AppSections ensures that you can achieve professional results without any coding. Get started today and transform your Shopify store with AppSections. If you have any questions or need further assistance, our customer support team is here to help. Welcome to a new era of e-commerce design and functionality! # Installation ### **Step-by-Step Guide to Adding AppSections:** 1. **Access the Shopify App Store**: * Open your Shopify admin panel. * Navigate to the Shopify App Store. 2. **Search for AppSections**: * In the search bar, type "AppSections". * Select the AppSections app from the search results. 3. **Install the Application**: * Click the "Add app" button. * Follow the prompts to install AppSections. 4. **Select Your Active Theme**: * Open the AppSections app from your Shopify admin panel. * In the app interface, select the active theme you want to integrate with AppSections. 5. **Integration Complete**: * Once your active theme is selected, AppSections will automatically integrate. * You can now customize your store with thousands of sections and hundreds of styles without touching any code. With these steps, AppSections will be fully integrated with your Shopify store, providing powerful customization options and seamless operation. If you encounter any issues, our support team is ready to assist you. # Themes Compatibility AppSections is designed to be fully compatible with all Shopify themes. This ensures seamless integration and smooth operation, regardless of your store's layout or visual style. {% embed url="" %} ### **Key Benefits:** 1. **Universal Compatibility**: Works with all Shopify themes, both free and paid. 2. **Effortless Integration**: Integrates without the need for complex modifications or touching any code. 3. **Powerful Customization**: Offers thousands of sections and hundreds of styles to enhance your store without compromising existing aesthetics or functionality. 4. **Robust Support**: Our dedicated support team is ready to assist with any compatibility issues, ensuring successful integration. ### **Want to make sure your theme is compatible with the Shopify AppSections app?** Here's a short list: | Shopify Theme Name | Compatibility with AppSections | | ------------------ | ------------------------------ | | Dawn | Fully Compatible | | Trade | Fully Compatible | | Spotlight | Fully Compatible | | Refresh | Fully Compatible | | Sense | Fully Compatible | | Craft | Fully Compatible | | Ride | Fully Compatible | | Origin | Fully Compatible | | Taste | Fully Compatible | | Studio | Fully Compatible | | Publisher | Fully Compatible | | Crave | Fully Compatible | | Colorblock | Fully Compatible | | Prestige | Fully Compatible | | Impulse | Fully Compatible | | Impact | Fully Compatible | | Symmetry | Fully Compatible | | Broadcast | Fully Compatible | | Enterprise | Fully Compatible | | Empire | Fully Compatible | | Stiletto | Fully Compatible | | Motion | Fully Compatible | | Be Yours | Fully Compatible | | Concept | Fully Compatible | # Application Overview ### Application Overview Our application offers a comprehensive suite of tools designed to enhance your Shopify store's design and functionality. Below is an overview of the key features and resources available within the application: {% embed url="" %} ### Libraries 1. **Section Library:** * A diverse collection of pre-built sections that you can browse, favorite, and install to customize your store's layout and design. 2. **Brand Styles Library:** * A variety of brand styles that provide cohesive color schemes, typography, and other design elements. You can browse, favorite, and install these styles to ensure your store's branding is consistent and visually appealing. 3. **Templates Library (Coming Soon):** * A selection of full-page templates that will help you quickly set up and design your store. Templates can be browsed, favorited, and installed for comprehensive store design. ### My Library * **Favorites:** * Sections and brand styles that you have favorited for easy access and quick installation. * **Installed:** * Sections and brand styles that you have already installed and are using in your store. ### Resources 1. **Discord Group:** * Access to our community Discord group where you can connect with other users, share tips, and get support. 2. **Newsletter:** * Stay updated with the latest news, features, and tips by subscribing to our newsletter. 3. **Documentation:** * Comprehensive guides and documentation to help you make the most of the application and its features. ### Settings 1. **Theme Selector:** * Choose the active theme you want to work on within your Shopify store. 2. **Plan:** * Manage your subscription plan and access additional features based on your plan level. 3. **Clean Uninstall:** * Easily uninstall the application and remove all associated data from your store to ensure a clean uninstall process. ### Summary Our application provides a robust set of tools and resources to help you customize and enhance your Shopify store. Whether you are looking to install new sections, apply cohesive brand styles, or access community resources, our application has everything you need. Stay tuned for the upcoming templates library to further streamline your store setup and design process. If you have any questions or need further assistance, please contact our customer support team. # Library ### Library Welcome to the Library page of AppSections. This is your gateway to exploring, managing, and customizing a wide range of design elements to enhance your Shopify store. The Library is divided into several subpages, each serving a specific purpose to help you find and organize the perfect components for your store. ### **Sections Library** {% content-ref url="/pages/z5ewl2zE3OnyvqfEHxQn" %} [Sections Library](/in-app/library/sections-library) {% endcontent-ref %} * **Discover Pre-Built Sections:** Access a diverse collection of pre-built sections that can be added to your Shopify theme. Each section is designed to be flexible and customizable, allowing you to enhance your store’s layout and functionality. * **Favorite and Install:** Easily mark sections as favorites for quick access and install them directly from the library to your store. ### **Templates Library (Coming Soon)** {% content-ref url="/pages/zZNe35FFxHJeJJ8Gr01x" %} [Templates Library (Coming Soon)](/in-app/library/templates-library-coming-soon) {% endcontent-ref %} * **Explore Full-Page Templates:** Get ready for a variety of full-page templates that will help you set up and design your store quickly and efficiently. These templates are designed to provide comprehensive layouts that meet various business needs. * **Favorite and Install:** Once available, you will be able to mark templates as favorites and install them directly to your store. ### **Brand Styles Library** {% content-ref url="/pages/Z07VMMXG2bWpp7tjOacm" %} [Brand Styles Library](/in-app/library/brand-styles-library) {% endcontent-ref %} * **Browse Brand Styles:** Explore a wide range of brand styles that include cohesive color schemes, typography, and design elements. These styles are crafted to ensure your store’s branding is consistent and visually appealing. * **Favorite and Install:** Mark your preferred brand styles as favorites for easy access and install them to apply a unified look across your store. ### **Wishlist** {% content-ref url="/pages/GXWDvtUz1vWSFiiKqb5v" %} [Wishlist](/in-app/library/wishlist) {% endcontent-ref %} * **Save for Later:** Use the wishlist to save sections, templates, and brand styles that you’re interested in but not ready to install. This helps you keep track of potential additions for your store without losing them. * **Easy Management:** Access and manage your wishlist items in one convenient place. ### **My Library** {% content-ref url="/pages/ViAzkpaqqhoi0jKuZpje" %} [My Library](/in-app/library/my-library) {% endcontent-ref %} * **Manage Favorites and Installs:** * **Favorites:** Quickly access sections, templates, and brand styles you have marked as favorites. * **Installed:** View and manage all the sections, templates, and brand styles you have installed on your store. * **Organized View:** Keep your design elements organized and easily accessible, making it simple to update and customize your store as needed. ### Summary The Library page is your comprehensive resource for exploring and managing all the design elements available in AppSections. Whether you are looking for new sections to enhance your layout, brand styles to ensure consistent branding, or full-page templates to streamline your store design, the Library has you covered. Use the Wishlist to save potential additions and My Library to manage your favorites and installed items. Stay tuned for the launch of the Templates Library and other exciting updates. If you have any questions or need further assistance, please contact our customer support team. Happy designing with AppSections! # Sections Library ### Introduction The Sections Library is an essential feature of our Shopify AppSections application. It allows merchants to easily navigate and find available sections to customize their online stores. Thanks to an intuitive user interface, merchants can apply various filters to refine their search and discover the sections that best suit their needs. ### Main Features #### Search and Filter Sections Library offers advanced filtering options to help merchants quickly find the sections they need. Available filters include, but are not limited to: * Categories: Allows sections to be filtered by type, such as headers, footers, products, collections, etc. * Popularity: Rank sections by their use and appreciation by other merchants. * What's New: View sections recently added to the library. #### Weekly Updates We update our Sections Library every week to offer new options and improve existing ones. This frequency of updates ensures that merchants always have the latest features and trends to optimize their online stores. #### Available plans Sections of our library are available according to three subscription plans: 1. **Free (Forever)** : This plan offers limited access to a selection of basic sections, enabling you to start customizing your store at no initial cost. 2. **Starter ($7,99 / month)** : The Starter plan includes all the sections of the Free plan, plus an expanded set of intermediate sections for more advanced customization. 3. **Pro (Coming Soon)** : The Pro plan gives access to our entire library, including premium sections and new sections as soon as they are released. 4. **Premium (Coming Soon)** : The Premium plan gives you access to all the features of the Pro plan, plus exclusive application features to be added at a future date. #### Future prospects As we're still in our infancy, many new sections will be arriving in the coming months. We are committed to constantly enriching our library to offer a diversity of choices and meet the evolving needs of Shopify merchants. The Sections Library is designed to give merchants maximum flexibility in customizing their online stores. With weekly updates and a variety of subscription plans, we ensure that every merchant, whatever their budget or needs, will find sections tailored to enhance their customers' experience. If you have any questions or need assistance, please don't hesitate to contact us via our customer support. We're here to help you get the most out of our application. # Templates Library (Coming Soon) ## Shopify AppSections Templates Library documentation ### Introduction The Templates Library is an essential feature of our Shopify AppSections application. It will allow merchants to easily browse and find predefined templates to customize their online stores. Thanks to an intuitive user interface, merchants will be able to apply various filters to refine their search and discover the templates that best suit their needs. ### Main features #### Search and Filter Templates Library will offer advanced filtering options to help merchants quickly find the templates they need.Available filters include, but are not limited to: * Categories: Allows templates to be filtered by type, such as home pages, product pages, collection pages, etc. * Popularity: Rank templates by their use and appreciation by other merchants. * What's New: View templates recently added to the library. #### Weekly Updates We'll be updating our Templates Library every week to offer new options and improve existing ones. This update frequency will ensure that merchants always have the latest templates and trends to optimize their online stores. #### Available plans The models in our library will be available according to three subscription plans: 1. **Free (Forever)** : This plan will offer limited access to a selection of basic templates, enabling you to start customizing your store at no initial cost. 2. **Starter ($7,99 / month)** : The Starter plan will include all the templates of the Free plan, plus an expanded set of intermediate templates for more advanced customization. 3. **Pro (Coming Soon)** : The Pro plan will give access to our entire library, including premium models and new models as soon as they are released. 4. **Premium (Coming Soon)** : The Premium plan gives you access to all the features of the Pro plan, plus exclusive application features to be added at a future date. #### Future prospects As we're still in our infancy, many new models will be arriving in the coming months. We are committed to constantly enriching our library to offer a diversity of choices and meet the evolving needs of Shopify merchants. #### Availability Please note that the Templates Library is not yet available, but will soon be accessible to all users of the Shopify AppSections application. We are actively working on its development and will announce its availability as soon as it is ready. ### Conclusion The Shopify AppSections Templates Library is designed to give merchants maximum flexibility in customizing their online stores. With weekly updates and a variety of subscription plans, we ensure that every merchant, whatever their budget or needs, will find the right templates to enhance their customers' experience. If you have any questions or need assistance, please don't hesitate to contact us via our customer support. We're here to help you get the most out of our application. # Brand Styles Library ### Introduction The Brand Styles Library is an innovative feature of our Shopify AppSections application. It allows merchants to easily browse and find branding styles inspired by the most beautiful e-commerce brands and popular themes. Thanks to an intuitive user interface, merchants can apply various filters to refine their search and discover the branding styles that best match their brand image. ### Main Features #### Search and Filter The Brand Styles Library will offer advanced filtering options to help merchants quickly find the branding styles they need. Available filters will include, but will not be limited to: * Categories: Allows you to filter branding styles by type, such as minimalist, luxury, modern, vintage, etc. * Popularity: Rank branding styles by their use and appreciation by other merchants. * What's New: Displays branding styles recently added to the library. #### Weekly Updates We'll be updating our Brand Styles Library every week to offer new options and improve existing ones. This frequency of updates will ensure that merchants always have the latest styles and trends to optimize the appearance of their shops. #### Unlimited access All branding styles in our library will be available to all subscription plans, without any limitations. Whether you're on the Free, Starter, Pro, Premium plan, you'll have unlimited access to all the branding styles available in the library. #### Future prospects Since we're still in our infancy, many new branding styles will arrive in the months to come. We are committed to constantly enriching our library to offer a diversity of choices and meet the evolving needs of Shopify merchants. ### Conclusion The Brand Styles Library in the Shopify AppSections app is designed to give merchants maximum flexibility in customizing the look and feel of their online stores. With weekly updates and a variety of subscription plans, we ensure that every merchant, whatever their budget or needs, will find branding styles tailored to enhance their customers' experience. If you have any questions or need assistance, please don't hesitate to contact us via our customer support. We're here to help you get the most out of our application. # Wishlist ### **Introduction** The Wishlist feature is an integral part of our extensive Library in the Shopify AppSections application. It allows merchants to save their favorite sections, templates, and brand styles for easy access later. This ensures a streamlined and efficient customization process, helping merchants keep track of the elements they love the most. ### **Main Features** #### **Add to Wishlist**

View of the component's card within the AppSections Library

* **Sections:** Merchants can add any section to their wishlist by clicking the star icon on the section's card within the library. This makes it easy to revisit and implement their favorite sections when needed. * **Templates:** Similar to sections, templates can also be added to the wishlist by clicking the star icon on the template's card. This helps merchants quickly find and reuse their preferred templates for different parts of their store. * **Brand Styles:** Merchants can also save brand styles by clicking the star icon on the brand style's card. This feature allows merchants to keep track of and implement consistent branding across their store. #### **Manage Wishlist**

View of My Library

* **View Saved Items:** Merchants can view all their favorited sections, templates, and brand styles in one place by accessing My Library. This centralized view makes it easy to manage and organize their saved and installed components. * **Remove from Wishlist:** If a merchant decides they no longer need a particular section, template, or brand style, they can remove it from their wishlist by clicking the star icon again. #### **Benefits** * **Efficiency:** The Wishlist feature enhances the efficiency of the customization process by allowing merchants to quickly access and implement their favorite elements. * **Organization:** By keeping all preferred sections, templates, and brand styles in one place, merchants can stay organized and maintain a consistent look and feel across their store. * **Convenience:** The easy-to-use star icon on each card ensures that merchants can quickly save and access their favorite items without any hassle. ### How to Use the Wishlist Feature 1. **Navigate to the Library:** Start by browsing through the Library to find sections, templates, or brand styles you like. 2. **Click the Star Icon:** On each card, you will see a star icon. Click this icon to add the item to your wishlist. 3. **Access My Library:** To view your saved items, go to the library and click on the Favorites tab, which is divided into Favorite Sections, Favorite Templates, and Favorite Styles. Here, you can see all the items you have favorited. 4. **Manage Your Wishlist:** From the Favorites tab, you can easily remove items by clicking the star icon again, ensuring your wishlist remains current and relevant to your needs. The Wishlist feature is designed to make customizing your Shopify store more convenient and efficient, giving you the ability to save and manage your favorite elements with ease. If you have any questions or need assistance, please don't hesitate to contact us via our customer support. We're here to help you get the most out of our application. # My Library ### My Library Welcome to the "My Library" page of AppSections. This is your personalized hub for managing all the design elements you have favorited or installed. "My Library" is organized into several subpages, each dedicated to a specific type of content to help you efficiently manage and customize your Shopify store. ### **My Sections** {% content-ref url="/pages/av6RlOdMkJTEXTW0B0fs" %} [My Sections](/in-app/library/my-library/my-sections) {% endcontent-ref %} * **Manage Your Sections:** * **Favorites:** Quickly access and manage the sections you have marked as favorites. This allows you to easily find and install the sections you love. * **Installed:** View and manage all the sections you have installed on your store. Update or customize them directly from this page to keep your store's layout fresh and dynamic. ### **My Templates** {% content-ref url="/pages/YYbB7TI3fhiU7i7Qydpz" %} [My Templates (Coming Soon)](/in-app/library/my-library/my-templates-coming-soon) {% endcontent-ref %} * **Manage Your Templates:** * **Favorites:** Easily access templates you have marked as favorites. This feature helps you keep track of the templates you like for future use. * **Installed:** View and manage all the templates you have installed on your store. Ensure your store maintains a consistent and professional look by updating and customizing your templates as needed. ### **My Brand Styles** {% content-ref url="/pages/uU8XhS6UXJQA13lJZ2uI" %} [My Brand Styles](/in-app/library/my-library/my-brand-styles) {% endcontent-ref %} * **Manage Your Brand Styles:** * **Favorites:** Quickly access the brand styles you have favorited. This makes it easy to apply cohesive and visually appealing design elements to your store. * **Installed:** View and manage all the brand styles you have installed. Update or customize these styles to maintain a consistent and appealing brand presence across your store. ### Summary The "My Library" page is your centralized location for managing all the design elements that enhance your Shopify store. Whether you are looking to quickly access your favorite sections, templates, or brand styles, or manage the ones you have already installed, "My Library" provides an organized and efficient way to do so. Explore the subpages to keep your store updated and ensure a consistent, professional appearance: * **My Sections:** Manage your favorite and installed sections. * **My Templates:** Manage your favorite and installed templates. * **My Brand Styles:** Manage your favorite and installed brand styles. Stay organized and keep your store looking its best with AppSections. If you have any questions or need further assistance, please contact our customer support team. Happy managing with AppSections! # My Sections ### My Sections The "My Sections" page within the AppSections application is your personal hub for managing and accessing all the sections you have favorited and installed. This page is designed to provide you with a streamlined and organized way to enhance and customize your Shopify store with ease. Here’s an overview of what you can do on the "My Sections" page: ### **Key Features of My Sections** 1. **Favorites:** * **Quick Access:** Easily access the sections you have marked as favorites. This allows you to quickly find and install the sections you love without having to search through the entire library. * **Organized View:** Your favorited sections are neatly organized, making it simple to browse through them and select the ones you want to implement in your store. 2. **Installed Sections:** * **Manage Your Sections:** View and manage all the sections you have installed on your Shopify store. This feature helps you keep track of the sections currently enhancing your store’s layout and functionality. * **Update and Customize:** Quickly update or customize installed sections directly from this page. Ensure your store stays current with the latest design trends and functionalities. 3. **Seamless Integration:** * **Effortless Installation:** Installing sections from your favorites or the main library is a breeze. With just a few clicks, you can add new sections to your store, enriching its design and capabilities. * **No Coding Required:** All changes and customizations can be made without any coding knowledge. Our intuitive interface ensures that even beginners can create professional-looking stores. 4. **Flexible Customization:** * **Adapt to Your Needs:** Whether you need advanced parallax effects, sticky behaviors, dynamic animations, or other custom features, the sections available in your library are designed to be highly flexible and adaptable. * **Responsive Design:** All sections are built to be fully responsive, ensuring they look great on both desktop and mobile devices. 5. **Consistent Branding:** * **Brand Styles Integration:** Easily integrate sections with the brand styles you have selected or installed. This ensures a cohesive and consistent visual identity across your store. ### **How to Use My Sections** 1. **Access Your Favorites:** * Navigate to the "Favorites" section to view all the sections you have marked as favorites. * Click on any section to view details, install, or customize it. 2. **Manage Installed Sections:** * Navigate to the "Installed" section to see all the sections you have currently installed on your store. * Click on any section to update, remove, or further customize it to better fit your needs. 3. **Install New Sections:** * Browse the main Section Library to find new sections to add to your store. * Mark sections as favorites for easy access later, or install them directly from the library. ### Summary The "My Sections" page is your centralized location for managing and customizing the sections that enhance your Shopify store. With features designed for easy access, seamless integration, and flexible customization, you can create a unique and professional online store without any coding knowledge. Keep your store fresh and engaging by regularly updating and managing your sections from this convenient hub. If you have any questions or need further assistance, please contact our customer support team. # My Templates (Coming Soon) #### Coming Soon We're excited to bring you new features and enhancements to our Shopify AppSections application. However, some features are still in development and will be available soon. Please stay tuned for updates and additional content on these pages. We appreciate your patience and are working hard to deliver the best experience possible. Thank you for your understanding and continued support. If you have any questions or need assistance, please don't hesitate to contact our customer support team. # My Brand Styles ### My Brand Styles The "My Brand Styles" page within the AppSections application is your personal hub for managing and accessing all the brand styles you have favorited and installed. This page is designed to provide you with a streamlined and organized way to enhance and maintain your store's branding with ease. Here’s an overview of what you can do on the "My Brand Styles" page: ### **Key Features of My Brand Styles** 1. **Favorites:** * **Quick Access:** Easily access the brand styles you have marked as favorites. This allows you to quickly find and apply the styles you prefer without having to search through the entire library. * **Organized View:** Your favorited brand styles are neatly organized, making it simple to browse through them and select the ones you want to implement in your store. 2. **Installed Brand Styles:** * **Manage Your Styles:** View and manage all the brand styles you have installed on your Shopify store. This feature helps you keep track of the styles currently enhancing your store’s visual identity. * **Update and Customize:** Quickly update or customize installed brand styles directly from this page. Ensure your store's branding remains consistent and up-to-date. 3. **Seamless Integration:** * **Effortless Application:** Applying brand styles from your favorites or the main library is a breeze. With just a few clicks, you can update your store’s look and feel to align with your brand identity. * **No Coding Required:** All changes and customizations can be made without any coding knowledge. Our intuitive interface ensures that even beginners can create a professional and cohesive brand presentation. 4. **Flexible Customization:** * **Adapt to Your Needs:** Whether you need to change color schemes, typography, or other design elements, the brand styles available in your library are designed to be highly flexible and adaptable. * **Responsive Design:** All brand styles are built to be fully responsive, ensuring they look great on both desktop and mobile devices. 5. **Consistent Branding:** * **Harmonized Elements:** Easily integrate brand styles with the sections you have selected or installed. This ensures a cohesive and consistent visual identity across your store. ### **How to Use My Brand Styles** 1. **Access Your Favorites:** * Navigate to the "Favorites" section to view all the brand styles you have marked as favorites. * Click on any brand style to view details, apply, or customize it. 2. **Manage Installed Brand Styles:** * Navigate to the "Installed" section to see all the brand styles you have currently installed on your store. * Click on any brand style to update, remove, or further customize it to better fit your needs. 3. **Apply New Brand Styles:** * Browse the main Brand Styles Library to find new styles to add to your store. * Mark styles as favorites for easy access later, or apply them directly from the library. ### Summary The "My Brand Styles" page is your centralized location for managing and customizing the brand styles that define your Shopify store’s visual identity. With features designed for easy access, seamless integration, and flexible customization, you can create a unique and professional look for your store without any coding knowledge. Keep your store's branding fresh and consistent by regularly updating and managing your brand styles from this convenient hub. If you have any questions or need further assistance, please contact our customer support team. # Switching Shopify Themes ### **Introduction** Switching themes in our Shopify AppSections application is a straightforward process that allows merchants to easily change the look and feel of their online stores. This guide will walk you through the steps to switch themes using the Theme Selector in the settings. ### **How to Switch Shopify Themes**
1. **Navigate to Settings** * Begin by logging into your Shopify AppSections application. * Go to the main menu and click on **Settings**. 2. **Access the Theme Selector** * In the Settings menu, locate and click on the **Theme Selector** section. This is where you can manage and switch between available themes. 3. **Select the Active Theme** * In the Theme Selector, you will see a list of available themes. * Find the theme you want to activate and select its name. This will make it the active theme for your store. ### **Important Notes** * **Single Active Theme:** The application only supports one active theme at a time. When you select a new theme, it will replace the current active theme. * **Theme Customization:** After selecting a new theme, you may need to customize it with AppSections components. ### **Benefits** * **Easy Customization:** Switching themes allows you to refresh the look of your store quickly and easily. * **Versatility:** With the ability to switch themes, you can experiment with different styles and layouts to see what works best for your store. ### **Troubleshooting** * **Theme Not Switching:** If you encounter any issues with switching themes, ensure you have followed the steps correctly. If the problem persists, please contact our customer support for assistance. Switching themes in Shopify AppSections is designed to be simple and user-friendly, ensuring that you can keep your store's appearance up-to-date with minimal effort. If you have any questions or need further help, don't hesitate to reach out to our support team. # Switching Pricing Plans ### Overview Our Shopify AppSections application offers a variety of pricing plans to suit different needs and budgets. Here is an overview of the available plans and their features:
### **Free Plan** **Price:** Free forever **Features:** * **150 Free Sections:** Access to a selection of 150 free sections to customize your store. * **Unlimited Brand Styles:** Apply unlimited brand styles to maintain a consistent look. * **Live Chat / Email Support:** Get support through live chat and email. * **Discord Community Access:** Join our Discord community for additional support and interaction with other merchants. ### **Starter Plan** **Price:** $7.99 per month or $71.99 per year (25% or 3 months discount) **Features:** * **400+ Sections:** Access to over 400 sections for more advanced customization. * **Unlimited Brand Styles:** Continue to apply unlimited brand styles to your store. * **Live Chat / Email Support:** Enjoy support through live chat and email. * **Discord Community Access:** Participate in our Discord community. * **Priority Support:** Receive priority support to resolve your issues faster. ### **Pro Plan** **Price:** Coming Soon **Features:** * Details to be announced. ### **Premium Plan** **Price:** Coming Soon **Features:** * Details to be announced. These plans are designed to provide flexibility and support for merchants at different stages of their business. Whether you are just starting out or looking to expand your store's capabilities, we have a plan that fits your needs. If you have any questions or need assistance choosing the right plan, please contact our customer support team. ### How to Change Your Plan Switching between pricing plans in our Shopify AppSections application is a simple process. Follow the steps below to upgrade or downgrade your subscription plan: ### **Steps to Change Your Plan** 1. **Access Settings:** * Log into your Shopify AppSections application. * Navigate to the main menu and click on **Settings**. 2. **Go to Plan Section:** * In the Settings page, locate the **Plan** section. This section displays your current subscription plan and provides options to manage it. 3. **Click Manage Plan:** * Click on the **Manage Plan** button. This will take you to the plan management page where you can view the available plans. 4. **Select a New Plan:** * Review the available plans (Free, Starter, Pro, Premium) and choose the one that best suits your needs. The details and prices of each plan will be displayed for your convenience. * If you are upgrading to a paid plan, select the desired billing option (monthly or yearly) for the Starter plan. 5. **Confirm Your Choice:** * After selecting your new plan, you will be prompted to confirm your choice. Ensure that you review the features and pricing before confirming. * Follow any additional instructions to complete the upgrade or downgrade process, such as entering payment information for paid plans. 6. **Receive Confirmation:** * Once you have successfully changed your plan, you will receive a confirmation message. Your new plan features will be activated immediately, allowing you to take advantage of the additional sections, support, and other benefits. ### **Important Notes** * **Upgrade to Paid Plans:** If upgrading from the Free plan to the Starter plan, you will be required to provide payment information and select a billing cycle (monthly or yearly). * **Pro and Premium Plans:** Currently, the Pro and Premium plans are coming soon, and details will be provided at a later date. You can switch to these plans once they are available. * **Priority Support:** Upgrading to the Starter plan will grant you priority support, ensuring faster resolution of any issues you may encounter. Changing your plan is designed to be quick and easy, allowing you to adjust your subscription as your business needs evolve. If you encounter any issues or have any questions during the process, please contact our customer support team for assistance. # Uninstallation ### **Introduction** The uninstallation process of the Shopify AppSections application requires careful attention to ensure a clean and complete removal of the app and its components. We highly recommend performing a Clean Uninstall to restore your theme to its original state and avoid any potential issues.
### **Importance of Clean Uninstall** Performing a Clean Uninstall is crucial for several reasons: 1. **Removal of AppSections Files:** * Your theme contains files associated with the AppSections application. These need to be removed to revert your theme back to its original version. 2. **Avoiding Theme Bugs:** * Keeping leftover files from the application can cause bugs and issues with your theme. A Clean Uninstall ensures that all related files are completely removed, preventing any potential problems. 3. **Deletion of Sections, Brand Styles, and Templates:** * All sections, brand styles, and templates installed through the AppSections application will be removed. This step is necessary to ensure your theme functions correctly without the application. 4. **Inoperability Without the App:** * After uninstalling the application, any sections, templates, or brand styles added through AppSections will no longer work. A Clean Uninstall ensures that these elements are properly removed, making your theme functional without the app. 5. **Loss of Modifications:** * All modifications made to sections, templates, and brand styles will be lost. This includes any customizations or changes you have implemented while using the AppSections application. ### **How to Perform a Clean Uninstall** 1. **Access Settings:** * Log into your Shopify AppSections application. * Navigate to the main menu and click on **Settings**. 2. **Locate Clean Uninstall Section:** * In the Settings page, find the **Clean Uninstall** section. This section provides the option to completely remove the app and its components from your store. 3. **Initiate Clean Uninstall:** * Click on the **Uninstall** button within the Clean Uninstall section. This will start the process of removing all traces of the AppSections application from your theme. 4. **Confirm Uninstallation:** * You will be prompted to confirm your decision. Carefully read the information provided to understand the implications of the Clean Uninstall. * Confirm your choice to proceed with the uninstallation. 5. **Completion:** * The application will automatically remove all AppSections files, sections, brand styles, and templates from your theme. * Once the process is complete, your theme will be restored to its original state, free of any AppSections-related components. ### **Important Notes** * **Irreversible Action:** The Clean Uninstall action is irreversible. Ensure that you understand the consequences before proceeding. * **Loss of Functionality:** Any sections, templates, or brand styles added through the AppSections application will no longer be usable after uninstallation. * **Loss of Modifications:** All changes and customizations made to sections, templates, and brand styles will be lost upon uninstallation. * **Support:** If you encounter any issues during the uninstallation process, please contact our customer support team for assistance. By following these steps and performing a Clean Uninstall, you can ensure that your Shopify theme remains functional and free from any residual files or potential bugs related to the AppSections application. If you need any help, don't hesitate to reach out to our support team. # Layers ### Layers of the AppSections Solution AppSections provides a comprehensive and hierarchical approach to designing and customizing Shopify stores. The solution is structured into several layers, each with a specific role in building a cohesive and functional online store. These layers are: Brand Styles, Templates, Sections, Groups, and Blocks. ### **1. Brand Styles** **Description**: Brand Styles define the overall look and feel of your store, including colors, fonts, and general design principles. They are applied globally across all pages and all elements provided by AppSections to ensure a consistent visual identity. **Function**: Brand Styles set the foundational aesthetic of your website, affecting all other layers. They ensure that all elements, from templates to individual blocks, maintain a uniform appearance. ### **2. Templates** **Description**: Templates are prebuilt pages that provide structured layouts for different types of content, such as product pages, collection pages, and contact pages. **Function**: Templates determine the overall layout and functionality of each page type. They are built using multiple sections and can be customized to fit the specific needs of your store. ### **3. Sections** **Description**: Sections are the building parts of Shopify pages. They are modular components that can be added, removed, and rearranged within a template to create a custom page layout. **Function**: Sections allow for flexible design and customization within templates. Each section can include various blocks like text, images, and buttons, and can be styled and arranged to fit the desired layout. ### **4. Group Blocks** **Description**: Group Blocks are special types of section blocks that act as parent elements to other blocks. They help in organizing multiple content blocks into a structured layout within a section. **Function**: Group Blocks enable nested layouts within sections, providing a higher level of organization and flexibility. They help group related content blocks together, making it easier to manage complex designs. ### **5. Content Blocks** **Description**: Content Blocks are the smallest individual components within a section or group block. They include specific elements such as text, images, videos, and buttons. **Function**: Content Blocks provide the actual content and functionality within a section. They can be customized to display specific information and interact with your Shopify products or collections. ### **Hierarchy and Integration**: 1. **Brand Styles**: The top-most layer that ensures a consistent visual theme across all elements of your store. 2. **Templates**: Use styles to maintain consistency and define the layout of different page types. Templates are made up of multiple sections. 3. **Sections**: Modular components within templates, allowing for flexible and customizable page layouts. Sections use container blocks and content blocks to organize and display content. 4. **Group Blocks**: Serve as parent elements within sections, holding multiple content blocks and allowing for nested, organized layouts. 5. **Content Blocks**: The basic building blocks that reside within group blocks or directly within sections, providing specific content and functionality. By integrating these layers, AppSections allows for a highly customizable and organized approach to building and managing your Shopify store. This structured hierarchy ensures that each element fits seamlessly within the overall design, providing both aesthetic consistency and functional flexibility. # Styles ### What is a Brand Style? In the context of Shopify and the AppSections application, a brand style is a predefined set of visual and design guidelines that help maintain consistency across your online store. Brand styles encompass various elements such as colors, fonts, spacing, and other design attributes to ensure that all sections and pages of your store have a cohesive look and feel that aligns with your brand identity. ### Importance of Brand Styles 1. **Consistency:** Ensures a uniform appearance across all pages, enhancing the professional look of your store. 2. **Efficiency:** Saves time by applying a consistent design to all sections, reducing the need for individual customizations. 3. **Brand Identity:** Strengthens your brand identity by maintaining consistent visual elements that reflect your brand's aesthetics and values. ### Using Brand Styles in AppSections AppSections provides a variety of prebuilt brand styles that you can use to ensure your store maintains a consistent and professional look. Here’s how to integrate and use them: **Steps to Apply a Brand Style** 1. **Access Style Library:** * Open the AppSections application. * Navigate to the **Style Library** within the application. 2. **Install the Chosen Brand Style:** * Browse through the available brand styles. * Click the **Install Style** button on the desired style. 3. **Activate the Brand Style in Shopify Theme Editor:** * After installation, go to your Shopify theme editor. * The new brand style will appear at the top of the left-hand pane, above the header, in the **AppSections Styles** category. * Ensure the style is active by checking that it is not hidden. ### **Customizing Brand Styles** 1. **Open the Active Brand Style:** * In the Shopify theme editor, navigate to the **AppSections Styles** category. * Select the active brand style to open its customization options. 2. **Modify Design Elements:** * Adjust colors, fonts, spacing, and other design attributes to match your brand’s aesthetics. * Preview changes in real-time to ensure they align with your brand identity. 3. **Apply Changes:** * Save the changes to apply the updated brand style across all relevant sections and pages of your store. ### **Important Notes** * **Single Instance of Styles:** Each brand style can only be added once through the AppSections application. Adding the same style more than once will overwrite any modifications made to the original style. * **Installation Restrictions:** Brand styles must be installed using the AppSections application. Manual addition of styles through the theme editor is not supported and will result in non-functional styles. ### Tutorials To help you manage your brand styles more efficiently, we have prepared a series of tutorials that cover all the common actions and features. These guides will walk you through the process of customizing and applying brand styles to ensure your store looks its best. {% content-ref url="/pages/i3bVYDwxW2ZlGklgOI03" %} [Add Brand Style](/basics/styles/add-brand-style) {% endcontent-ref %} {% content-ref url="/pages/Fo2lAxddROXbUprmdvtx" %} [Move Brand Style](/basics/styles/move-brand-style) {% endcontent-ref %} {% content-ref url="/pages/acbgwyAZi7TaCkqFU7R9" %} [Duplicate Brand Style](/basics/styles/duplicate-brand-style) {% endcontent-ref %} {% content-ref url="/pages/NJZ4pvk7qTEqFSs6BF3x" %} [Hide Brand Style](/basics/styles/hide-brand-style) {% endcontent-ref %} {% content-ref url="/pages/qhCMZ95eexJ2KomPxdBc" %} [Remove Brand Style](/basics/styles/remove-brand-style) {% endcontent-ref %} ### Maintaining and Updating Brand Styles * **Regular Updates:** Regularly update your brand style to keep your store looking fresh and up-to-date with your brand’s evolving identity. * **Consistency Checks:** Periodically check your store to ensure all sections and pages reflect the active brand style consistently. By following these steps, you can effectively manage and customize brand styles within your Shopify store using the AppSections application. This approach ensures a cohesive and professional look, enhancing the overall shopping experience for your customers. If you have any questions or need further assistance, please contact our customer support team. # Add Brand Style ### How to Add a Style Adding a new style to your Shopify store using the AppSections application is a straightforward process. Follow the steps below to seamlessly integrate and activate a new style: ### **Steps to Add a Style** 1. **Access Style Library:** * Open the Shopify AppSections application. * Navigate to the **Style Library** within the application. 2. **Install the Chosen Style:** * Browse through the available styles in the Style Library. * Once you find a style you like, click the **Install Style** button on the chosen style's card.
3. **Activate the Style in Shopify Theme Editor:** * After installing the style, go to your Shopify theme editor. * The newly installed style will appear as active at the top of the left-hand pane, above the header, in the **AppSections Styles** category. 4. **AppSections Component Appearance:** * All components from AppSections in your store will automatically update to reflect the new style. This ensures a consistent look and feel across your entire site. ### **Unique Application of Brand Styles** 1. **Single Instance of Styles:** * Each brand style can only be added once through the AppSections application. Attempting to add the same style more than once will overwrite any modifications made to the original style. 2. **Installation Restrictions:** * Brand styles can only be installed using the AppSections application. Manual addition of styles through the theme editor is not supported and will result in non-functional styles. ### **Important Notes** * **Overwriting Warning:** Adding the same style again will overwrite any changes made to the original. To avoid losing customizations, ensure you do not reinstall a style without backing up your modifications. * **Manual Installation Not Supported:** Styles must be installed through the AppSections application to ensure proper functionality. Manually added styles will not work correctly within your theme. By following these guidelines, you can effectively manage and customize your brand styles within your Shopify store. If you have any questions or need further assistance, please contact our customer support team. By following these steps, you can easily enhance the appearance of your Shopify store with new styles, ensuring that your site stays fresh and visually appealing. If you have any questions or need assistance, please contact our customer support team. # Duplicate Brand Style ### Managing Brand Styles **Important Information** Currently, duplicating brand styles is not supported by our system. This means you cannot create a direct copy of an existing brand style using the AppSections application. Additionally, each brand style can only be added once through the AppSections application. Attempting to add the same style more than once will overwrite any modifications made to the original style. ### **Installation Restrictions** * **AppSections Installation Only:** Brand styles can only be installed using the AppSections application. Manual addition of brand styles through the theme editor is not supported and will result in non-functional styles. ### **Steps to Add a Brand Style** 1. **Access Style Library:** * Open the Shopify AppSections application. * Navigate to the **Style Library** within the application. 2. **Install the Chosen Style:** * Browse through the available styles. * Click the **Install Style** button on the desired style. 3. **Activate in Theme Editor:** * After installation, go to your Shopify theme editor. * The new style will appear at the top of the left-hand pane, above the header, in the **AppSections Styles** category. 4. **Ensure Proper Functionality:** * Verify that the style is functioning correctly by previewing your store. ### **Manual Recreation of Brand Styles** While direct duplication is not possible, here are some alternative methods and recommendations to achieve similar results: 1. **Document the Original Style:** * Carefully document the settings and customizations of the brand style you wish to duplicate. Take detailed notes and screenshots of all settings. 2. **Create a New Style:** * Manually create a new brand style in the AppSections Styles. * Apply the documented settings to match the original style as closely as possible. 3. **Verify and Adjust:** * Compare the new brand style with the original. * Make any necessary adjustments to ensure they match as closely as possible. ### **Important Notes** * **Overwriting Warning:** Adding the same style again will overwrite any changes made to the original. To avoid losing customizations, ensure you do not reinstall a style without backing up your modifications. * **Manual Installation Not Supported:** Styles must be installed through the AppSections application to ensure proper functionality. Manually added styles will not work correctly within your theme. By following these guidelines, you can effectively manage and customize your brand styles within your Shopify store. If you have any questions or need further assistance, please contact our customer support team. # Hide Brand Style ### How to Hide a Brand Style Hiding a brand style in your Shopify store using the AppSections application is a straightforward process. Follow these steps to hide a style that you no longer wish to be active: ### **Steps to Hide a Brand Style** 1. **Select the Style:** * Open your Shopify theme editor. * Navigate to the **AppSections Styles** zone located at the top of the left-hand pane, above the header. * Select the brand style you want to hide.
2. **Open the Options Menu:** * In the right-hand pane, next to the name of the selected style, you will see three small dots (options menu).
* Click on these dots to open additional options. 3. **Hide the Style:** * Click on **Hide** from the options menu.
* The selected style will be hidden, making it inactive and removing its visual elements from your store. ### **Important Notes** * **Reactivating a Style:** If you wish to reactivate a hidden style, simply follow the same steps and click on **Unhide** instead. * **Consistent Appearance:** Ensure that hiding a style does not disrupt the overall appearance and consistency of your store. Always preview changes to confirm that your store maintains a cohesive look. By following these steps, you can easily manage which brand styles are active in your Shopify store, ensuring that only the styles you want are applied. If you have any questions or need further assistance, please contact our customer support team. # Move Brand Style Switching styles in your Shopify store using the AppSections application is simple and efficient. Follow the steps below to move and change styles within your store: ### **Steps to Move and Change Styles** 1. **Access AppSections Styles:** * Open your Shopify theme editor. * Navigate to the **AppSections Styles** category located at the top of the left-hand pane, above the header.
2. **Install Multiple Styles:** * Ensure you have more than one style installed. To install additional styles, go to the **Style Library** in the AppSections application and click the **Install Style** button on the styles you want to add. 3. **Understand Style Visibility:** * The first installed style is the active one. Subsequent styles are typically hidden by default. We recommend keeping additional styles hidden to avoid conflicts.

Other styles are hidden by default

4. **Change the Active Style:**

The second styles is hidden

* To switch to a different style, first, unhide the second style. Click on the eye icon next to the style to make it visible.

The second style now visible

The active style is the first one

* Drag and drop the newly visible style to the top of the list, making it the first style.
* Hide the old style you want to deactivate by pressing the eye.
5. **Activate the New Style:** * Once the new style is in the first position, your site will automatically update to reflect the new style. There may be a visual issue before saving. If the style does not display correctly, saving will resolve the problem.
* Now save your changes by pressing save in the top right-hand corner of the theme editor.
### **Tips for Managing Styles** * **Keep Styles Hidden:** For best performance and to avoid conflicts, keep non-active styles hidden. * **Preview Before Applying:** Consider previewing styles to ensure they fit your store’s aesthetic before making them active. By following these steps, you can easily switch between different styles, ensuring your Shopify store always looks fresh and appealing. If you have any questions or need assistance, please contact our customer support team. # Remove Brand Style ### How to Remove a Brand Style Removing a brand style within your Shopify store using the AppSections application involves a straightforward approach. Follow these steps to correctly manage and remove a brand style using our custom settings: ### **Important Notes** **Correct Removal Method:** Ensure you follow these steps precisely to avoid issues with the structure of the section. ### Steps to Remove a Brand Style 1. **Select the Brand Style:** * Open your Shopify theme editor. * Navigate to the AppSections Styles Zone above the header containing the brand style you want to remove. * Select the brand style by clicking on it. 2. **Hover Over the Style:** * Move your cursor over the selected brand style. * A trash icon (🗑️) will appear when you hover over the style. 3. **Click the Trash Icon:** * Click on the trash icon to remove the brand style. * Confirm the removal if prompted. ### Verifying the Change * **Preview Changes:** After removing the brand style, preview your store to ensure the style has been removed as intended. By using these steps, you can effectively manage and remove brand styles within your Shopify store without disrupting the structure of your sections. If you have any questions or need further assistance, please contact our customer support team. # Templates (Coming Soon) #### Coming Soon We're excited to bring you new features and enhancements to our Shopify AppSections application. However, some features are still in development and will be available soon. Please stay tuned for updates and additional content on these pages. We appreciate your patience and are working hard to deliver the best experience possible. Thank you for your understanding and continued support. If you have any questions or need assistance, please don't hesitate to contact our customer support team. {% embed url="" %} # Add Template (Coming Soon) #### Coming Soon We're excited to bring you new features and enhancements to our Shopify AppSections application. However, some features are still in development and will be available soon. Please stay tuned for updates and additional content on these pages. We appreciate your patience and are working hard to deliver the best experience possible. Thank you for your understanding and continued support. If you have any questions or need assistance, please don't hesitate to contact our customer support team. # Duplicate Template (Coming Soon) #### Coming Soon We're excited to bring you new features and enhancements to our Shopify AppSections application. However, some features are still in development and will be available soon. Please stay tuned for updates and additional content on these pages. We appreciate your patience and are working hard to deliver the best experience possible. Thank you for your understanding and continued support. If you have any questions or need assistance, please don't hesitate to contact our customer support team. # Hide Template (Coming Soon) #### Coming Soon We're excited to bring you new features and enhancements to our Shopify AppSections application. However, some features are still in development and will be available soon. Please stay tuned for updates and additional content on these pages. We appreciate your patience and are working hard to deliver the best experience possible. Thank you for your understanding and continued support. If you have any questions or need assistance, please don't hesitate to contact our customer support team. # Move Template (Coming Soon) #### Coming Soon We're excited to bring you new features and enhancements to our Shopify AppSections application. However, some features are still in development and will be available soon. Please stay tuned for updates and additional content on these pages. We appreciate your patience and are working hard to deliver the best experience possible. Thank you for your understanding and continued support. If you have any questions or need assistance, please don't hesitate to contact our customer support team. # Remove Template (Coming Soon) #### Coming Soon We're excited to bring you new features and enhancements to our Shopify AppSections application. However, some features are still in development and will be available soon. Please stay tuned for updates and additional content on these pages. We appreciate your patience and are working hard to deliver the best experience possible. Thank you for your understanding and continued support. If you have any questions or need assistance, please don't hesitate to contact our customer support team. # Sections A section in Shopify is a prebuilt part of a page designed to provide specific functionality and layout. Sections can range from a Hero section that highlights a particular product or collection to a Feature section that showcases your brand’s unique selling points (USPs). {% embed url="" %} ### What is a Section? Sections are the building blocks of Shopify pages, allowing for flexible design and easy customization. They consist of various components that you can style, rearrange, and link to your Shopify products or collections. This modular approach enables you to create dynamic and engaging pages without needing extensive coding knowledge. ### Using Sections in AppSections AppSections provides a variety of prebuilt sections that you can use to build and customize your Shopify store pages. Here’s how to integrate and use them: 1. **Install a Section from AppSections**: * Open the AppSections app and navigate to the "Library Prebuilt Sections". * Browse the sections, and when you find one you like, click "Add to Favorites" or "Install". * Clicking "Install" will automatically add the section to your active theme in Shopify. 2. **Add the Section in Shopify Editor**: * Open your Shopify admin panel. * Go to "Online Store" > "Themes", and click "Customize" on your active theme. * In the theme editor, select the page template you want to edit. * Click "Add section" and use the search bar to find the section you installed from AppSections by name. * Select the section to add it to your page. 3. **Customize the Sections**: * **Style Them**: Modify the design elements to match your brand’s aesthetics. * **Change Text and Images**: Replace placeholder content with your own text and images. * **Link eCommerce Elements**: Connect sections to your Shopify products or collections, making them interactive and functional eCommerce elements. ### Tutorials To help you manage your sections more efficiently, we have prepared a series of tutorials that cover all the common actions and features. These guides will walk you through the process of customizing and applying sections to enhance the layout and functionality of your store. {% content-ref url="/pages/f1VSpGm1NQ7rGceLSvnF" %} [Add Section](/basics/sections/add-section) {% endcontent-ref %} {% content-ref url="/pages/jmPpoBMAsJVPnrz1nGlv" %} [Move Section](/basics/sections/move-section) {% endcontent-ref %} {% content-ref url="/pages/hcoTCDxsQag7UgRpCJS4" %} [Duplicate Section](/basics/sections/duplicate-section) {% endcontent-ref %} {% content-ref url="/pages/FDyTAV5QwbLFK4duyPgm" %} [Hide Section](/basics/sections/hide-section) {% endcontent-ref %} {% content-ref url="/pages/Oxz4byU0q0DnR8oOcdLt" %} [Remove Section](/basics/sections/remove-section) {% endcontent-ref %} ### Final Integration Once you have installed and customized your sections, they will be seamlessly integrated into your Shopify store. AppSections ensures that this process is smooth and does not require any coding knowledge. Simply customize the sections in the Shopify editor and arrange them as needed to enhance your store’s functionality and appearance. By following these steps, you can leverage the power of sections in AppSections to create a dynamic and visually appealing Shopify store that meets all your eCommerce needs. This approach not only enhances the look of your store but also improves its functionality without requiring any technical expertise. For more detailed instructions, you can visit the [Shopify Help Center](https://help.shopify.com/en/manual/online-store/themes/theme-structure/sections-and-blocks) and the [Shopify Developer](https://shopify.dev/docs/storefronts/themes/architecture/sections) documentation. # Add Section ### How to Add a Section Adding a new section to your Shopify store using the AppSections application involves a few simple steps. Follow the instructions below to seamlessly integrate and activate a new section: ### **Steps to Add a Section** 1. **Access Section Library:** * Open the Shopify AppSections application. * Navigate to the **Section Library** within the application. 2. **Install the Chosen Section:** * Browse through the available sections in the Section Library. * Once you find a section you like, click the **Install** button on the chosen section's card.
3. **Manually Add the Section in Shopify Theme Editor:** * Go to your Shopify theme editor. * Click on **Add Sections** to open the section selection menu. * In the search bar, type the name of the section you installed. * Click on the section from the search results to add it to your page. 4. **Section Appearance:** * The new section will now appear on your page, ready for customization. By following these steps, you can easily add and customize new sections to enhance your Shopify store's functionality and appearance. If you have any questions or need assistance, please contact our customer support team. # Duplicate Section ### How to Duplicate a Section in the Theme Editor Duplicating a section within your Shopify theme editor allows you to easily create a copy of an existing section, helping you to maintain consistency and save time. Here’s a step-by-step guide to duplicating a section: ### **Steps to Duplicate a Section** 1. **Open Shopify Theme Editor:** * Navigate to **Online Store** and then click on **Themes**. * Click the **Customize** button for the theme you want to edit. This opens the theme editor. 2. **Select the Section to Duplicate:**
* In the theme editor, locate the section you want to duplicate in the left-hand sidebar. * Click on the section to highlight it. 3. **Access the Options Menu:**
* In the right-hand pane, above the name of the selected section, you will see three small dots (options menu). Click on these dots to open additional options. 4. **Duplicate the Section:**
* Click on **Duplicate** from the options menu. * The section will be duplicated and will appear immediately below the original section in the theme editor. 5. **Customize the Duplicated Section:**
* You can now customize the duplicated section independently of the original. Use the theme editor to make any desired changes to the new section. ### **Important Notes** * **Consistency and Efficiency:** Duplicating sections helps maintain consistency across your site and can save time when you need similar layouts or features in multiple places. * **Independent Customization:** Each duplicated section can be customized independently, allowing you to make unique adjustments without affecting the original section. By following these steps, you can easily duplicate and customize sections within your Shopify store, ensuring a flexible and efficient design process. If you have any questions or need further assistance, please contact our customer support team. # Hide Section ### How to Hide a Section Hiding a section in your Shopify store using the AppSections application is a straightforward process. Follow these steps to hide a section that you no longer wish to display: ### **Steps to Hide a Section** 1. **Select the Section:** * Open your Shopify theme editor. * Navigate to the left-hand pane where your sections are listed. * Select the section you want to hide by clicking on it.
2. **Open the Options Menu:** * In the right-hand pane, next to the name of the selected section, you will see three small dots (options menu).
* Click on these dots to open additional options. 3. **Hide the Section:** * Click on **Hide** from the options menu.
* The selected section will be hidden, making it inactive and removing it from the visible layout of your store. ### **Important Notes** * **Reactivating a Section:** If you wish to reactivate a hidden section, simply follow the same steps and click on **Unhide** instead. * **Consistent Appearance:** Ensure that hiding a section does not disrupt the overall layout and flow of your store. Always preview changes to confirm that your store maintains a cohesive design. By following these steps, you can easily manage which sections are active in your Shopify store, ensuring that only the sections you want are displayed. If you have any questions or need further assistance, please contact our customer support team. # Move Section Moving sections within your Shopify theme editor allows you to customize the layout and flow of your online store. Here’s a step-by-step guide to help you move sections to your desired position: ### **Steps to Move a Section** 1. **Open Shopify Theme Editor:** * Log into your Shopify admin panel. * Navigate to **Online Store** and then click on **Themes**. * Click the **Customize** button for the theme you want to edit. This opens the theme editor. 2. **Select the Section:** * In the theme editor, locate the section you want to move in the left-hand sidebar. * Click on the section to highlight it. 3. **Drag and Drop the Section:** * Click and hold the section you want to move.
* While holding the mouse button, drag the section up or down to your desired position within the sidebar.
* Release the mouse button to drop the section in the new location.
4. **Preview Changes:** * As you move the section, you can see a live preview of your store updating to reflect the new layout. * Ensure the section is in the desired position and looks good in the context of your overall store design. By following these steps, you can easily rearrange the sections of your Shopify store to create a layout that best suits your needs and enhances the shopping experience for your customers. If you have any questions or need further assistance, please contact our customer support team. # Remove Section ### How to Remove a Section Removing a section within your Shopify store using the AppSections application involves a straightforward approach. Follow these steps to correctly manage and remove a section using our custom settings: ### **Important Notes** **Correct Removal Method:** Ensure you follow these steps precisely to avoid issues with the structure of your store. ### Steps to Remove a Section 1. **Select the Section:** * Open your Shopify theme editor. * Navigate to the section you want to remove. * Select the section by clicking on it. 2. **Hover Over the Section:** * Move your cursor over the selected section. * A trash icon (🗑️) will appear when you hover over the section. 3. **Click the Trash Icon:** * Click on the trash icon to remove the section. * Confirm the removal if prompted. ### Verifying the Change * **Preview Changes:** After removing the section, preview your store to ensure the section has been removed as intended. By using these steps, you can effectively manage and remove sections within your Shopify store without disrupting the structure of your store. If you have any questions or need further assistance, please contact our customer support team. # Groups A group block in AppSections is a type of Shopify section block designed to contain other blocks within it. It functions as a parent element to its child content blocks, allowing for structured and nested layout designs. This hierarchical structure makes it easier to manage complex page designs by grouping related elements together. ### What is a Group Block? Group blocks serve as parent elements that can hold multiple content blocks, such as text, images, buttons, and more. This setup allows for greater flexibility and organization in designing pages, enabling you to create complex layouts with ease. Group blocks help maintain a clean structure, making it easier to style and rearrange content without affecting the overall page design. ### Using Group Blocks in AppSections AppSections provides a variety of Group blocks that you can use to build and customize your Shopify store pages. Here’s how to integrate and use them: 1. **Install a Section with Group Block from AppSections**: * Open the AppSections app and navigate to the "Library Prebuilt Sections". * Browse the sections, and when you find one you like, click "Add to Favorites" or "Install". * Clicking "Install" will automatically add the section to your active theme in Shopify. 2. **Add the Group Block in Shopify Editor**: * Open your Shopify admin panel. * Go to "Online Store" > "Themes", and click "Customize" on your active theme. * In the theme editor, select the page template you want to edit. * Click "Add section" and use the search bar to find the section you installed from AppSections by name. * Select the section to add it to your page. 3. **Add the Group Block within the Section**: * In the Shopify theme editor, click on the section where you want to add the group block. * Click "Add block" within the section. * Use the search bar to find the group block by name. * Select the group block to add it to the section. 4. **Customize the Group Blocks**: * **Style Them**: Modify the design elements to match your brand’s aesthetics. * **Change Text and Images**: Replace placeholder content with your own text and images. * **Add and Organize Content Blocks**: Within the group block, add other blocks (e.g., text, image, button) as needed. You can drag and drop these content blocks to organize them within the group block. * **Link eCommerce Elements**: Connect the blocks to your Shopify products or collections, making them interactive and functional eCommerce elements. ### Tutorials To help you manage your groups more efficiently, we have prepared a series of tutorials that cover all the common actions and features. These guides will walk you through the process of customizing and organizing groups to optimize the structure and design of your store. {% content-ref url="/pages/Qba2HjwS8idpMHJDagAR" %} [Add Group Block](/basics/groups/add-group-block) {% endcontent-ref %} {% content-ref url="/pages/Ksc71QnrLQ0nT9rzWLRo" %} [Move Group Block](/basics/groups/move-group-block) {% endcontent-ref %} {% content-ref url="/pages/hWdFFfwuaKzGwwlOOMHm" %} [Duplicate Group Block](/basics/groups/duplicate-group-block) {% endcontent-ref %} {% content-ref url="/pages/QpmB6bbB7mDAGSsRFjna" %} [Hide Group Block](/basics/groups/hide-group-block) {% endcontent-ref %} {% content-ref url="/pages/3psKuCttPJrO910OLmOL" %} [Remove Group Block](/basics/groups/remove-group-block) {% endcontent-ref %} ### Final Integration Once you have installed and customized your sections and group blocks, they will be seamlessly integrated into your Shopify store. AppSections ensures that this process is smooth and does not require any coding knowledge. Simply customize the group blocks in the Shopify editor and arrange them as needed to enhance your store’s functionality and appearance. By following these steps, you can leverage the power of group blocks in AppSections to create a dynamic and visually appealing Shopify store that meets all your eCommerce needs. This approach not only enhances the look of your store but also improves its functionality without requiring any technical expertise. For more detailed instructions, you can visit the [Shopify Help Center](https://help.shopify.com/en/manual/online-store/themes/theme-structure/sections-and-blocks) and the [Shopify Developer documentation](https://shopify.dev/docs/storefronts/themes/architecture/blocks). # Add Group Block ### How to Add a Group Block In the Shopify AppSections application, our sections are designed to automatically include group blocks for your convenience. However, if you ever find the need to manually add a group block, you can follow these steps: ### **Why Add a Group Block?** While our sections usually come with group blocks pre-integrated, there might be specific scenarios where you need to add one manually to further customize your section layout. ### **Steps to Add a Group Block** 1. **Navigate to the Section:** * Open your Shopify theme editor. * Select the section where you want to add a group block. 2. **Add a Block:** * Within the selected section, click on **Add Block**. This option allows you to add various types of blocks to your section. 3. **Select Group or Layout Block:** * From the list of available blocks, click on **Group** or **Layout** to add the desired block to your section. 4. **Customize the Group Block:** * Once added, you can customize the group block as needed to fit your design and layout preferences. By following these steps, you can manually add and customize group blocks within your sections, enhancing the flexibility and design of your Shopify store. If you have any questions or need further assistance, please contact our customer support team. # Duplicate Group Block ### How to Duplicate a Group Block In the Shopify AppSections application, our sections are designed to automatically include group blocks for your convenience. However, if you ever find the need to duplicate a group block, you can follow these steps: ### **Why Duplicate a Group Block?** While our sections usually come with group blocks pre-integrated, there might be specific scenarios where you need to duplicate one to further customize your section layout. ### **Steps to Duplicate a Group Block** 1. **Navigate to the Section:** * Open your Shopify theme editor. * Select the section containing the group block you want to duplicate. 2. **Select the Group Block:** * Within the section, locate the group block you wish to duplicate. * Click on the group block to highlight it. 3. **Access the Options Menu:** * In the right-hand pane, above the name of the selected group block, you will see three small dots (options menu). Click on these dots to open additional options. 4. **Duplicate the Group Block:** * Click on **Duplicate** from the options menu. * The group block will be duplicated and will appear immediately below the original block in the theme editor. 5. **Customize the Duplicated Group Block:** * You can now customize the duplicated group block independently of the original. Use the theme editor to make any desired changes to the new block. ### **Important Notes** * **Independent Customization:** Each duplicated group block can be customized independently, allowing you to make unique adjustments without affecting the original block. * **Maintaining Layout:** Ensure that duplicating group blocks does not disrupt the overall layout and design of your section. By following these steps, you can easily duplicate and customize group blocks within your sections, enhancing the flexibility and design of your Shopify store. If you have any questions or need further assistance, please contact our customer support team. # Hide Group Block ### How to Hide a Group Block Hiding a group block within your Shopify store using the AppSections application involves a different approach from the native Shopify hide function. Follow these steps to correctly manage the visibility of a group block using our custom settings: ### **Important Notes** * **Avoid Native Shopify Hide:** Do not use Shopify's native hide function for group blocks, as it can cause issues with the structure of the section. Instead, use our custom visibility settings. ### **Steps to Hide a Group Block** 1. **Select the Group Block:** * Open your Shopify theme editor. * Navigate to the section containing the group block you want to hide. * Select the group block by clicking on it. 2. **Open Block Settings:** * In the right-hand pane, navigate to the settings of the selected group block. 3. **Adjust Display Device Setting:** * At the top of the block settings, locate the **Display Device** parameter. * This setting controls the visibility of the block with four options: * **All:** The block is visible on all devices. * **Mobile Only:** The block is visible only on mobile devices. * **Desktop Only:** The block is visible only on desktop devices. * **None:** The block is hidden on all devices. 4. **Set to None:**
* To hide the block, select **None** from the Display Device options. This will make the block invisible on all devices, effectively hiding it. * This setting is equivalent to Shopify's hide function but works correctly with our system without causing structural issues. ### **Verifying the Change** * **Preview Changes:** After adjusting the Display Device setting, preview your store to ensure the block is hidden as intended. By using these steps, you can effectively manage the visibility of group blocks within your Shopify store without disrupting the structure of your sections. If you have any questions or need further assistance, please contact our customer support team. # Move Group Block ### How to Move a Group Block Moving group blocks within your Shopify theme editor can help you customize the layout of your sections. However, it's important to understand how these blocks interact with content blocks. Here’s a detailed explanation: ### **Key Points** 1. **Fixed Positioning of Group Blocks:** * While you can manually move Group Blocks or Layout Blocks within the theme editor, this action will not visually affect the placement of content blocks. * The positions of Group Blocks or Layout Blocks are fixed within the section and are designed to maintain the structure of your layout. 2. **Interchanging Group Blocks:** * Blocks named "Group" (excluding Layout Blocks) can be interchanged between each other. This means you can rearrange these blocks, but only amongst themselves. * This flexibility allows you to adjust certain elements of your layout without disrupting the overall design. ### **Steps to Move a Group Block** 1. **Open Shopify Theme Editor:** * Log into your Shopify admin panel. * Navigate to **Online Store** and then click on **Themes**. * Click the **Customize** button for the theme you want to edit. This opens the theme editor. 2. **Select the Group Block:** * In the theme editor, locate the Group Block you want to move in the left-hand sidebar. * Click on the Group Block to highlight it. 3. **Drag and Drop the Group Block:** * Click and hold the Group Block you want to move. * Drag the Group Block up or down to your desired position within the sidebar. * Release the mouse button to drop the Group Block in the new location. 4. **Interchanging Group Blocks:** * If you want to interchange Group Blocks, follow the same drag-and-drop process. Only Group Blocks can be moved amongst themselves, and their positions can be swapped without affecting content blocks. ### **Important Notes** * **Fixed Content Block Positions:** Moving Group Blocks or Layout Blocks will not change the visual placement of content blocks within the section. The content blocks remain fixed in their designated positions. * **Visual Stability:** This fixed positioning ensures that your section layout remains visually stable and predictable. By understanding these principles, you can effectively manage the layout of your Shopify store, ensuring a consistent and visually appealing design. If you have any questions or need further assistance, please contact our customer support team. # Remove Group Block ### How to Remove a Group Block Removing a group block within your Shopify store using the AppSections application involves a different approach from the native Shopify removal function. Follow these steps to correctly manage and remove a group block using our custom settings: ### **Important Notes** **Avoid Native Shopify Removal:** Do not use Shopify's native removal function for group blocks, as it can cause issues with the structure of the section. Instead, use our custom visibility settings. ### Steps to Remove a Group Block 1. **Select the Group Block:** * Open your Shopify theme editor. * Navigate to the section containing the group block you want to remove. * Select the group block by clicking on it. 2. **Open Block Settings:** * In the right-hand pane, navigate to the settings of the selected group block. 3. **Adjust Display Device Setting:** * At the top of the block settings, locate the Display Device parameter. * This setting controls the visibility of the block with four options: * **All:** The block is visible on all devices. * **Mobile Only:** The block is visible only on mobile devices. * **Desktop Only:** The block is visible only on desktop devices. * **None:** The block is hidden on all devices. 4. **Set to None:** * To remove the block, select **None** from the Display Device options. This will make the block invisible on all devices, effectively removing it from view. * This setting is equivalent to Shopify's removal function but works correctly with our system without causing structural issues. ### Verifying the Change * **Preview Changes:** After adjusting the Display Device setting, preview your store to ensure the block is removed as intended. By using these steps, you can effectively manage and remove group blocks within your Shopify store without disrupting the structure of your sections. If you have any questions or need further assistance, please contact our customer support team. # Blocks A content block in AppSections is a smaller, individual Shopify block component that resides within a section or container block. Content blocks can include elements such as text, images, buttons, and more, which you can customize to build comprehensive and interactive page designs. ### What is a Content Block? Content blocks are the basic elements used to add specific content and functionality to your Shopify pages. They allow for flexible and detailed customization within sections or container blocks, enabling you to create rich and dynamic layouts without extensive coding knowledge. ### Using Content Blocks in AppSections AppSections provides a variety of content blocks that you can use to enhance your Shopify store pages. Here’s how to integrate and use them: 1. **Install a Section from AppSections**: * Open the AppSections app and navigate to the "Library Prebuilt Sections". * Browse the sections, and when you find one you like, click "Add to Favorites" or "Install". * Clicking "Install" will automatically add the section to your active theme in Shopify. 2. **Add the Section in Shopify Editor**: * Open your Shopify admin panel. * Go to "Online Store" > "Themes", and click "Customize" on your active theme. * In the theme editor, select the page template you want to edit. * Click "Add section" and use the search bar to find the section you installed from AppSections by name. * Select the section to add it to your page. 3. **Add Content Blocks within the Section**: * In the Shopify theme editor, click on the section where you want to add content blocks. * Click "Add block" within the section. * Use the search bar to find the content block by name. * Select the content block to add it to the section. 4. **Customize the Content Blocks**: * **Style Them**: Modify the design elements to match your brand’s aesthetics. * **Change Text and Images**: Replace placeholder content with your own text and images. * **Link eCommerce Elements**: Connect the content blocks to your Shopify products or collections, making them interactive and functional eCommerce elements. ### Tutorials To help you manage your blocks more efficiently, we have prepared a series of tutorials that cover all the common actions and features. These guides will walk you through the process of customizing and applying blocks to enhance the individual elements and overall design of your store. {% content-ref url="/pages/xV9CR4v4268aw5TvQ0KV" %} [Add Content Block](/basics/blocks/add-content-block) {% endcontent-ref %} {% content-ref url="/pages/KnyAg735da9fR4usOGHX" %} [Move Content Block](/basics/blocks/move-content-block) {% endcontent-ref %} {% content-ref url="/pages/KuVlGo0WlsxdjkX3IKP8" %} [Duplicate Content Block](/basics/blocks/duplicate-content-block) {% endcontent-ref %} {% content-ref url="/pages/pLywCS3RrwqynXGqNiSY" %} [Hide Content Block](/basics/blocks/hide-content-block) {% endcontent-ref %} {% content-ref url="/pages/f8ggdVeDQbQuMYCFaTHv" %} [Remove Content Block](/basics/blocks/remove-content-block) {% endcontent-ref %} ### Final Integration Once you have installed and customized your sections and content blocks, they will be seamlessly integrated into your Shopify store. AppSections ensures that this process is smooth and does not require any coding knowledge. Simply customize the content blocks in the Shopify editor and arrange them as needed to enhance your store’s functionality and appearance. By following these steps, you can leverage the power of content blocks in AppSections to create a dynamic and visually appealing Shopify store that meets all your eCommerce needs. This approach not only enhances the look of your store but also improves its functionality without requiring any technical expertise. For more detailed instructions, you can visit the [Shopify Help Center](https://help.shopify.com/en/manual/online-store/themes/theme-structure/sections-and-blocks) and the [Shopify Developer documentation](https://shopify.dev/docs/storefronts/themes/architecture/blocks). # Add Content Block ### How to Add a Content Block In the Shopify AppSections application, our sections are designed to automatically include content blocks for your convenience. However, if you ever find the need to manually add a content block, you can follow these steps: ### **Why Add a Content Block?** While our sections usually come with content blocks pre-integrated, there might be specific scenarios where you need to add one manually to further customize your section layout. ### **Steps to Add a Content Block** 1. **Navigate to the Section:** * Open your Shopify theme editor. * Select the section where you want to add a content block. 2. **Add a Block:** * Within the selected section, click on **Add Block**. This option allows you to add various types of blocks to your section. 3. **Select Content Block:** * From the list of available blocks, click on **Content** to add the desired block to your section. 4. **Customize the Content Block:** * Once added, you can customize the content block as needed to fit your design and layout preferences. By following these steps, you can manually add and customize content blocks within your sections, enhancing the flexibility and design of your Shopify store. If you have any questions or need further assistance, please contact our customer support team. # Duplicate Content Block ### How to Duplicate a Content Block In the Shopify AppSections application, our sections are designed to automatically include content blocks for your convenience. However, if you ever find the need to duplicate a content block, you can follow these steps: ### **Why Duplicate a Content Block?** While our sections usually come with content blocks pre-integrated, there might be specific scenarios where you need to duplicate one to further customize your section layout. ### **Steps to Duplicate a Content Block** 1. **Navigate to the Section:** * Open your Shopify theme editor. * Select the section containing the content block you want to duplicate. 2. **Select the Content Block:** * Within the section, locate the content block you wish to duplicate. * Click on the content block to highlight it. 3. **Access the Options Menu:** * In the right-hand pane, above the name of the selected content block, you will see three small dots (options menu). Click on these dots to open additional options. 4. **Duplicate the Content Block:** * Click on **Duplicate** from the options menu. * The content block will be duplicated and will appear immediately below the original block in the theme editor. 5. **Customize the Duplicated Content Block:** * You can now customize the duplicated content block independently of the original. Use the theme editor to make any desired changes to the new block. ### **Important Notes** * **Independent Customization:** Each duplicated content block can be customized independently, allowing you to make unique adjustments without affecting the original block. * **Maintaining Layout:** Ensure that duplicating content blocks does not disrupt the overall layout and design of your section. By following these steps, you can easily duplicate and customize content blocks within your sections, enhancing the flexibility and design of your Shopify store. If you have any questions or need further assistance, please contact our customer support team. # Hide Content Block ### How to Hide a Content Block Hiding a content block within your Shopify store using the AppSections application involves a specific approach different from the native Shopify hide function. Follow these steps to correctly manage the visibility of a content block using our custom settings: ### **Important Notes** **Avoid Native Shopify Hide:** Do not use Shopify's native hide function for content blocks, as it can cause issues with the structure of the section. Instead, use our custom visibility settings. ### Steps to Hide a Content Block 1. **Select the Content Block:** * Open your Shopify theme editor. * Navigate to the section containing the content block you want to hide. * Select the content block by clicking on it. 2. **Open Block Settings:** * In the right-hand pane, navigate to the settings of the selected content block. 3. **Adjust Display Device Setting:** * At the top of the block settings, locate the Display Device parameter. * This setting controls the visibility of the block with four options: * **All:** The block is visible on all devices. * **Mobile Only:** The block is visible only on mobile devices. * **Desktop Only:** The block is visible only on desktop devices. * **None:** The block is hidden on all devices. 4. **Set to None:**
* To hide the block, select **None** from the Display Device options. This will make the block invisible on all devices, effectively hiding it. * This setting is equivalent to Shopify's hide function but works correctly with our system without causing structural issues. ### Verifying the Change * **Preview Changes:** After adjusting the Display Device setting, preview your store to ensure the block is hidden as intended. By using these steps, you can effectively manage the visibility of content blocks within your Shopify store without disrupting the structure of your sections. If you have any questions or need further assistance, please contact our customer support team. # Move Content Block ### How to Move a Content Block Moving content blocks within your Shopify theme editor allows you to customize and rearrange the content of your sections easily. Here’s a detailed guide on how to do this: ### **Key Points** 1. **Flexible Positioning of Content Blocks:** * Unlike Group Blocks or Layout Blocks, content blocks can be moved and interchanged freely within a section. This flexibility allows you to rearrange the content to fit your desired layout. 2. **Visual Changes:** * Moving content blocks will visually update the section in the theme editor, allowing you to see the changes in real-time. ### **Steps to Move a Content Block** 1. **Open Shopify Theme Editor:** * Log into your Shopify admin panel. * Navigate to **Online Store** and then click on **Themes**. * Click the **Customize** button for the theme you want to edit. This opens the theme editor. 2. **Select the Content Block:**
* In the theme editor, locate the content block you want to move in the left-hand sidebar. * Click on the content block to highlight it. 3. **Drag and Drop the Content Block:**
* Click and hold the content block you want to move. * Drag the content block up or down to your desired position within the sidebar. * Release the mouse button to drop the content block in the new location. 4. **Preview Changes:**
* As you move the content block, the live preview will update to reflect the new arrangement. Ensure the new position fits your design preferences. ### **Important Notes** * **Interchanging Content Blocks:** Content blocks can be freely interchanged between each other without any issues, allowing you to customize the order and layout of your section content. * **Real-Time Updates:** Changes made to the position of content blocks are reflected in real-time, giving you immediate feedback on how your section looks. By following these steps, you can easily rearrange the content blocks within your Shopify store’s sections, ensuring a layout that best suits your design and functional needs. If you have any questions or need further assistance, please contact our customer support team. # Remove Content Block ### How to Remove a Content Block Removing a content block within your Shopify store using the AppSections application involves a different approach from the native Shopify removal function. Follow these steps to correctly manage and remove a content block using our custom settings: ### **Important Notes** **Avoid Native Shopify Removal:** Do not use Shopify's native removal function for content blocks, as it can cause issues with the structure of the section. Instead, use our custom visibility settings. ### Steps to Remove a Content Block 1. **Select the Content Block:** * Open your Shopify theme editor. * Navigate to the section containing the content block you want to remove. * Select the content block by clicking on it. 2. **Open Block Settings:** * In the right-hand pane, navigate to the settings of the selected content block. 3. **Adjust Display Device Setting:** * At the top of the block settings, locate the Display Device parameter. * This setting controls the visibility of the block with four options: * **All:** The block is visible on all devices. * **Mobile Only:** The block is visible only on mobile devices. * **Desktop Only:** The block is visible only on desktop devices. * **None:** The block is hidden on all devices. 4. **Set to None:** * To remove the block, select **None** from the Display Device options. This will make the block invisible on all devices, effectively removing it from view. * This setting is equivalent to Shopify's removal function but works correctly with our system without causing structural issues. ### Verifying the Change * **Preview Changes:** After adjusting the Display Device setting, preview your store to ensure the block is removed as intended. By using these steps, you can effectively manage and remove content blocks within your Shopify store without disrupting the structure of your sections. If you have any questions or need further assistance, please contact our customer support team. # Layout # Sections / Blocks # Column Widths Repartition {% embed url="" %} ### How to Adjust Column Widths Repartition in AppSections Section Settings The "Column Widths Repartition" setting in the AppSections section settings allows you to control the distribution of column widths within a section. This setting provides flexibility in defining the layout and proportion of columns, enhancing the visual structure and organization of your content. Here is how you can adjust the column widths repartition: ### **Column Widths Repartition** * **Purpose:** This setting allows you to manage the distribution of column widths within a section. * **Usage:** Choose from different options to set the desired column width distribution. ### Steps to Adjust Column Widths Repartition 1. **Select the Section:** * Open your Shopify theme editor. * Navigate to the specific section where you want to adjust the column widths. 2. **Locate the Column Widths Repartition Setting:** * In the section settings, find the **Column Widths Repartition** option. 3. **Select Column Width Distribution:** * Choose from the available options to set the desired distribution of column widths within the section. * The options may include equal distribution, custom ratios, or predefined layouts that fit your design needs. ### Ensuring the Right Column Widths Repartition 1. **Preview Changes:** * After adjusting the column widths repartition, preview your store to see how the changes look. * Check the section to ensure the column widths are applied consistently and enhance the visual structure and organization. 2. **Check Consistency:** * Ensure that the column width distribution aligns with your brand’s aesthetic and provides a cohesive look across both desktop and mobile devices. 3. **Test Across Devices:** * Verify the column widths on different devices to ensure they look good and maintain the visual structure on all screen sizes. ### Summary By using the "Column Widths Repartition" setting in the section settings, you can control the distribution of column widths within a section in your Shopify store. This flexibility allows you to enhance the visual structure and organization of your content, ensuring a dynamic and engaging user experience across all devices. If you have any questions or need further assistance, please contact our customer support team. # Display Device ### Understanding Display Device Settings in Sections and Blocks The Display Device setting in AppSections allows you to control the visibility of sections and blocks on different devices. This setting ensures that your Shopify store provides an optimized user experience across various devices. Here is an explanation of the different options available in the Display Device setting: ### **Display Device Options** 1. **All:** * **Purpose:** The section or block is visible on all devices. * **Usage:** Use this setting when you want the section or block to be accessible and visible regardless of the device type, ensuring consistent user experience across all platforms. 2. **Mobile Only:** * **Purpose:** The section or block is visible only on mobile devices. * **Usage:** Select this option when the section or block is specifically designed for or only needed on mobile devices. This is useful for mobile-specific features or content. 3. **Desktop Only:** * **Purpose:** The section or block is visible only on desktop devices. * **Usage:** Choose this setting when the section or block is relevant only for desktop users. This can be used for elements that require a larger screen or are part of a desktop-specific design. 4. **None:** * **Purpose:** The section or block is hidden on all devices. * **Usage:** Use this option to completely hide the section or block from all devices. This is useful for temporarily disabling elements without deleting them or for elements that are no longer needed. ### Applying Display Device Settings to Sections and Blocks 1. **Select the Section or Block:** * Open your Shopify theme editor. * Navigate to the section or block you want to adjust. * Select the section or block by clicking on it. 2. **Open Settings:** * In the right-hand pane, navigate to the settings of the selected section or block. * Locate the **Display Device** parameter. 3. **Choose Display Device Option:** * Select one of the four options (All, Mobile Only, Desktop Only, None) based on where you want the section or block to be visible. ### Ensuring Optimal User Experience 1. **Preview Changes:** * After adjusting the Display Device setting, preview your store on different devices (mobile and desktop) to ensure the sections and blocks are displayed as intended. * Verify that the visibility settings enhance the user experience without causing layout issues. 2. **Consistent Design:** * Use the Display Device settings strategically to maintain a consistent and optimized design across different devices, ensuring that your store looks professional and functions well on all platforms. By understanding and correctly applying these Display Device options to sections and blocks, you can tailor your Shopify store's content to different devices, providing an optimized user experience for all visitors. If you have any questions or need further assistance, please contact our customer support team. # Content # Sections / Blocks # Button Content # Button Layout ### How to Adjust Button Layout in AppSections Block Button Settings The "Button Layout" setting in the AppSections Block Button settings allows you to select the layout of your buttons. This setting provides flexibility in defining how text and icons are arranged within the button, enhancing the overall design and functionality of your components. Here is how you can adjust the button layout: ### **Button Layout** * **Purpose:** This setting allows you to choose the layout of your buttons, including the arrangement of text and icons. * **Usage:** Select from four options to set the desired button layout. ### Button Layout Options 1. **Icon + Text:** The icon is displayed before the text. 2. **Text + Icon:** The text is displayed before the icon. 3. **Text Only:** Only the text is displayed on the button. 4. **Icon Only:** Only the icon is displayed on the button. ### Steps to Adjust Button Layout 1. **Select the Block Button:** * Open your Shopify theme editor. * Navigate to the specific block button where you want to change the layout. 2. **Locate the Button Layout Setting:** * In the block button settings, find the **Button Layout** option. 3. **Select Button Layout:** * Choose one of the four options based on your design preferences: * **Icon + Text:** To display the icon before the text. * **Text + Icon:** To display the text before the icon. * **Text Only:** To display only the text. * **Icon Only:** To display only the icon. ### Ensuring the Right Button Layout 1. **Preview Changes:** * After selecting a button layout, preview your store to see how the changes look. * Check the button to ensure the layout is applied correctly and enhances the visual appeal and functionality. 2. **Check Consistency:** * Ensure that the button layout aligns with your brand’s aesthetic and provides a cohesive look across both desktop and mobile devices. 3. **Test Across Devices:** * Verify the button layout on different devices to ensure it looks good and maintains functionality on all screen sizes. ### Summary By using the "Button Layout" setting in the block button settings, you can customize the arrangement of text and icons in your buttons in your Shopify store. This flexibility allows you to enhance the visual appeal and interactivity of your buttons, ensuring a dynamic and engaging user experience across all devices. If you have any questions or need further assistance, please contact our customer support team. # Button Style ### How to Adjust Button Style in AppSections Block Button Settings The "Button Style" setting in the AppSections Block Button settings allows you to select the style of your buttons. This setting provides flexibility in defining the visual appearance of your buttons, enhancing the overall design and functionality of your components. Here is how you can adjust the button style: ### **Button Style** * **Purpose:** This setting allows you to choose the style of your buttons. * **Usage:** Select from three options to set the desired button style. ### Button Style Options 1. **Solid:** A button with a solid background color. 2. **Outline:** A button with an outlined border and no background color. 3. **Text:** A button with no background or border, displaying only the text. ### Steps to Adjust Button Style 1. **Select the Block Button:** * Open your Shopify theme editor. * Navigate to the specific block button where you want to change the style. 2. **Locate the Button Style Setting:** * In the block button settings, find the **Button Style** option. 3. **Select Button Style:** * Choose one of the three options based on your design preferences: * **Solid:** For a button with a solid background color. * **Outline:** For a button with an outlined border and no background color. * **Text:** For a button that displays only the text with no background or border. ### Ensuring the Right Button Style 1. **Preview Changes:** * After selecting a button style, preview your store to see how the changes look. * Check the button to ensure the style is applied correctly and enhances the visual appeal and functionality. 2. **Check Consistency:** * Ensure that the button style aligns with your brand’s aesthetic and provides a cohesive look across both desktop and mobile devices. 3. **Test Across Devices:** * Verify the button style on different devices to ensure it looks good and maintains functionality on all screen sizes. ### Summary By using the "Button Style" setting in the block button settings, you can customize the appearance of your buttons in your Shopify store. This flexibility allows you to enhance the visual appeal and interactivity of your buttons, ensuring a dynamic and engaging user experience across all devices. If you have any questions or need further assistance, please contact our customer support team. # Content ### How to Add and Customize Content in AppSections Block Button Settings The "Content" setting in the AppSections Block Button settings allows you to add and format textual content within your buttons. This setting provides flexibility in customizing the text with various formatting options such as underline, bold, italic, and links. Here is how you can add and customize content in your block buttons: ### **Content** * **Purpose:** This setting allows you to add textual content to your buttons with formatting options. * **Usage:** Input the desired text and apply formatting as needed. ### Steps to Add and Customize Content 1. **Select the Block Button:** * Open your Shopify theme editor. * Navigate to the specific block button where you want to add content. 2. **Locate the Content Setting:** * In the block button settings, find the **Content** option. 3. **Add and Format Text:** * Enter the text you want to display on the button. * Use the available formatting options to customize the text: * **Underline:** Highlight the text and click the underline button to underline it. * **Bold:** Highlight the text and click the bold button to make it bold. * **Italic:** Highlight the text and click the italic button to italicize it. * **Link:** Highlight the text and click the link button to add a hyperlink. ### Ensuring the Right Content Formatting 1. **Preview Changes:** * After adding and formatting the content, preview your store to see how the button looks. * Check the button to ensure the text is displayed correctly and the formatting is applied as intended. 2. **Check Consistency:** * Ensure that the content aligns with your brand’s aesthetic and provides a cohesive look across both desktop and mobile devices. 3. **Test Across Devices:** * Verify the content on different devices to ensure it looks good and maintains readability and functionality on all screen sizes. ### Summary By using the "Content" setting in the block button settings, you can customize the textual content of your buttons with various formatting options. This flexibility allows you to enhance the visual appeal and interactivity of your buttons, ensuring a dynamic and engaging user experience across all devices. If you have any questions or need further assistance, please contact our customer support team. # Custom Icon ### How to Add a Custom Icon in AppSections Block Button Settings The "Custom Icon" setting in the AppSections Block Button settings allows you to add a custom icon by providing an SVG path. This setting provides flexibility in customizing the visual appeal of your buttons with unique icons. Here is how you can add a custom icon using an SVG path: ### **Custom Icon** * **Purpose:** This setting allows you to add a custom icon to your button using an SVG path. * **Usage:** Copy the SVG path from a preferred icon library and paste it into the custom icon setting. ### Recommended Icon Libraries We recommend using the following icon libraries for high-quality SVG icons: * **Font Awesome :** [**https://fontawesome.com/search?o=r\&m=free**](https://fontawesome.com/search?o=r\&m=free) * **Bootstrap Icons :** [**https://icons.getbootstrap.com/**](https://icons.getbootstrap.com/) * **Remix :** [**https://remixicon.com/**](https://remixicon.com/) * **Phosphor :** [**https://phosphoricons.com/**](https://phosphoricons.com/) * **Boxicons :** [**https://boxicons.com/**](https://boxicons.com/) * **Iconoir :** [**https://iconoir.com/**](https://iconoir.com/) ### Steps to Add a Custom Icon 1. **Select the Block Button:** * Open your Shopify theme editor. * Navigate to the specific block button where you want to add a custom icon. 2. **Locate the Custom Icon Setting:** * In the block button settings, find the **Custom Icon** option. 3. **Choose an Icon from a Library:** * Visit one of the recommended icon libraries. * Select an icon that fits your design and functionality needs. * Copy the SVG of the selected icon.
4. **Add the Custom Icon:** * Paste the copied SVG path into the **Custom Icon** setting in the block button settings.
### Ensuring the Right Custom Icon 1. **Preview Changes:** * After adding the custom icon, preview your store to see how the changes look. * Check the button to ensure the icon is applied correctly and enhances the visual appeal and functionality. 2. **Check Consistency:** * Ensure that the custom icon aligns with your brand’s aesthetic and provides a cohesive look across both desktop and mobile devices. 3. **Test Across Devices:** * Verify the custom icon on different devices to ensure it looks good and maintains functionality on all screen sizes. ### Summary By using the "Custom Icon" setting in the block button settings, you can customize the appearance of your buttons with unique icons using SVG paths. This flexibility allows you to enhance the visual appeal and interactivity of your buttons, ensuring a dynamic and engaging user experience across all devices. If you have any questions or need further assistance, please contact our customer support team. # Icon Button Presets ### How to Adjust Icon Button Presets in AppSections Block Button Settings The "Icon Button Presets" setting in the AppSections Block Button settings allows you to select an icon from a variety of preconstructed icons to enhance the appearance and functionality of your buttons. This setting provides flexibility in customizing the visual appeal of your buttons, making them more engaging and user-friendly. Here is how you can adjust the icon button presets: ### **Icon Button Presets** * **Purpose:** This setting allows you to select a preconstructed icon for your buttons. * **Usage:** Choose from a variety of preconstructed icons to apply to your button blocks. ### Steps to Adjust Icon Button Presets 1. **Select the Block Button:** * Open your Shopify theme editor. * Navigate to the specific block button where you want to add an icon. 2. **Locate the Icon Button Presets Setting:** * In the block button settings, find the **Icon Button Presets** option. 3. **Select Icon Preset:** * Choose from the available preconstructed icons to set the desired icon for your button. * Browse through the list of icons and select the one that fits your design and functionality needs. ### Ensuring the Right Icon Button 1. **Preview Changes:** * After selecting an icon button preset, preview your store to see how the changes look. * Check the button to ensure the icon is applied consistently and enhances the visual appeal and functionality. 2. **Check Consistency:** * Ensure that the icon aligns with your brand’s aesthetic and provides a cohesive look across both desktop and mobile devices. 3. **Test Across Devices:** * Verify the icon on different devices to ensure it looks good and maintains functionality on all screen sizes. ### Summary By using the "Icon Button Presets" setting in the block button settings, you can customize the appearance and functionality of your buttons in your Shopify store. This flexibility allows you to enhance the visual appeal and interactivity of your buttons, ensuring a dynamic and engaging user experience across all devices. If you have any questions or need further assistance, please contact our customer support team. # New Tab ### How to Adjust New Tab Setting in AppSections Block Button Settings The "New Tab" setting in the AppSections Block Button settings allows you to specify whether the link that the button directs to should open in a new browser tab. This setting provides flexibility in defining the behavior of button links, enhancing the user experience by giving control over how navigation occurs. Here is how you can adjust the new tab setting for your block buttons: ### **New Tab** * **Purpose:** This setting allows you to choose if the button link should open in a new tab. * **Usage:** Select whether to open the link in a new tab or in the current tab. ### Steps to Adjust New Tab Setting 1. **Select the Block Button:** * Open your Shopify theme editor. * Navigate to the specific block button where you want to adjust the new tab setting. 2. **Locate the New Tab Setting:** * In the block button settings, find the **New Tab** option. 3. **Enable or Disable New Tab:** * Enable the option if you want the button link to open in a new tab. * Disable the option if you want the button link to open in the current tab. ### Ensuring the Right New Tab Behavior 1. **Preview Changes:** * After adjusting the new tab setting, preview your store to see how the button behaves. * Click the button to ensure it opens the link in the desired manner (new tab or current tab). 2. **Check Consistency:** * Ensure that the new tab setting aligns with your brand’s navigation structure and provides a smooth user experience across both desktop and mobile devices. 3. **Test Across Devices:** * Verify the new tab behavior on different devices to ensure it works properly and maintains functionality on all screen sizes. ### Summary By using the "New Tab" setting in the block button settings, you can control whether the button link opens in a new tab or the current tab in your Shopify store. This flexibility allows you to enhance the user experience by providing control over navigation, ensuring a dynamic and engaging experience across all devices. If you have any questions or need further assistance, please contact our customer support team. # URL ### How to Adjust URL in AppSections Block Button Settings The "URL" setting in the AppSections Block Button settings allows you to specify the link destination for your buttons. This setting is essential for defining the action that occurs when a user clicks on the button, enhancing the functionality and navigation of your components. Here is how you can adjust the URL for your block buttons: ### **URL** * **Purpose:** This setting allows you to select the link that the button directs to. * **Usage:** Enter the desired URL to define where the button should navigate when clicked. ### Steps to Adjust URL 1. **Select the Block Button:** * Open your Shopify theme editor. * Navigate to the specific block button where you want to add a URL. 2. **Locate the URL Setting:** * In the block button settings, find the **URL** option. 3. **Enter the URL:** * Type or paste the desired URL into the provided field. * Ensure the URL is correct and formatted properly to avoid any navigation issues. ### Ensuring the Right URL 1. **Preview Changes:** * After entering the URL, preview your store to see how the button behaves. * Click the button to ensure it navigates to the correct destination. 2. **Check Consistency:** * Ensure that the URL aligns with your brand’s navigation structure and provides a smooth user experience across both desktop and mobile devices. 3. **Test Across Devices:** * Verify the URL on different devices to ensure it works properly and maintains functionality on all screen sizes. ### Summary By using the "URL" setting in the block button settings, you can define the link destination for your buttons in your Shopify store. This flexibility allows you to enhance the functionality and navigation of your components, ensuring a dynamic and engaging user experience across all devices. If you have any questions or need further assistance, please contact our customer support team. # Color Content # Background Fill ### How to Adjust Background Fill in AppSections Group Blocks and Sections The "Background Fill" setting in AppSections allows you to control the background color of certain group blocks and sections. This setting provides flexibility in defining the background appearance, enhancing the overall visual appeal and consistency with your brand style. Here is how you can adjust the background fill: ### **Background Fill** **Purpose:** This setting allows you to choose the background fill for group blocks and sections. **Usage:** Select from three options to set the desired background fill. ### Background Fill Options 1. **None:** No background color, transparent. 2. **Solid:** A solid color is applied, using the "Background" color defined in the color schema of the brand style. 3. **Gradient:** A gradient color is applied, using the "Background Gradient" defined in the color schema of the brand style. ### Steps to Adjust Background Fill 1. **Select the Group Block or Section:** * Open your Shopify theme editor. * Navigate to the specific group block or section where you want to change the background fill. 2. **Locate the Background Fill Setting:** * In the settings for the group block or section, find the **Background Fill** option. 3. **Select Background Fill Option:** * Choose one of the three options based on your design preferences: * **None:** For no background color (transparent). * **Solid:** To apply a solid color, using the "Background" color from the brand style. * **Gradient:** To apply a gradient color, using the "Background Gradient" from the brand style. ### Ensuring the Right Background Fill 1. **Preview Changes:** * After selecting a background fill, preview your store to see how the changes look. * Check the group block or section to ensure the background fill is applied correctly and enhances the visual appeal. 2. **Check Consistency:** * Ensure that the background fill aligns with your brand’s aesthetic and provides a cohesive look across both desktop and mobile devices. 3. **Test Across Devices:** * Verify the background fill on different devices to ensure it looks good and maintains visual appeal on all screen sizes. ### Summary By using the "Background Fill" setting in group blocks and sections, you can customize the background appearance in your Shopify store. This flexibility allows you to enhance the visual appeal and consistency of your components, ensuring a dynamic and engaging user experience across all devices. If you have any questions or need further assistance, please contact our customer support team. # Pattern Presets ### How to Adjust Pattern Presets in AppSections Group Blocks and Sections The "Pattern Presets" setting in AppSections allows you to add various background patterns to certain group blocks and sections. This setting provides flexibility in defining the background appearance with a wide range of pattern options, enhancing the overall visual appeal and consistency with your brand style. Here is how you can adjust the pattern presets: ### **Pattern Presets** **Purpose:** This setting allows you to choose from over 95 background patterns or leave the background as a solid color or gradient. **Usage:** Select from a variety of pattern options to set the desired background pattern. ### Pattern Preset Options 1. **None:** No pattern, leaving the background as a solid color or gradient. 2. **Lines:** Various line patterns. 3. **Stripes:** Different stripe patterns. 4. **Gridlines:** Gridline patterns. 5. **Mosaic:** Mosaic patterns. 6. **Dots:** Various dot patterns. 7. **Wavy:** Wavy patterns. 8. **Glassmorphism:** Modern glassmorphism effects. ### Steps to Adjust Pattern Presets 1. **Select the Group Block or Section:** * Open your Shopify theme editor. * Navigate to the specific group block or section where you want to change the pattern preset. 2. **Locate the Pattern Presets Setting:** * In the settings for the group block or section, find the **Pattern Presets** option. 3. **Select Pattern Preset:** * Choose one of the 95+ available pattern options based on your design preferences: * **None:** To leave the background as a solid color or gradient. * **Lines, Stripes, Gridlines, Mosaic, Dots, Wavy, Glassmorphism:** Select the desired pattern from the available options. ### Ensuring the Right Pattern Preset 1. **Preview Changes:** * After selecting a pattern preset, preview your store to see how the changes look. * Check the group block or section to ensure the pattern is applied correctly and enhances the visual appeal. 2. **Check Consistency:** * Ensure that the pattern preset aligns with your brand’s aesthetic and provides a cohesive look across both desktop and mobile devices. 3. **Test Across Devices:** * Verify the pattern preset on different devices to ensure it looks good and maintains visual appeal on all screen sizes. ### Summary By using the "Pattern Presets" setting in group blocks and sections, you can customize the background appearance with a wide range of patterns in your Shopify store. This flexibility allows you to enhance the visual appeal and uniqueness of your components, ensuring a dynamic and engaging user experience across all devices. If you have any questions or need further assistance, please contact our customer support team. # Pattern Scale ### How to Adjust Pattern Scale in AppSections Group Blocks and Sections The "Pattern Scale" setting in AppSections allows you to resize the background patterns applied to certain group blocks and sections. This setting provides flexibility in defining the size of the patterns, enhancing the overall visual appeal and consistency with your brand style. Here is how you can adjust the pattern scale: ### **Pattern Scale** **Purpose:** This setting allows you to resize the background patterns when a pattern is selected in the Pattern Presets setting. **Usage:** Use the range selector to set the desired scale of the pattern from 2 to 200. ### Steps to Adjust Pattern Scale 1. **Select the Group Block or Section:** * Open your Shopify theme editor. * Navigate to the specific group block or section where you want to change the pattern scale. 2. **Locate the Pattern Scale Setting:** * In the settings for the group block or section, find the **Pattern Scale** option. 3. **Adjust Pattern Scale:** * Use the range selector to set the pattern scale between 2 and 200: * **2:** Minimum scale, making the pattern very small. * **200:** Maximum scale, making the pattern very large. ### Ensuring the Right Pattern Scale 1. **Preview Changes:** * After adjusting the pattern scale, preview your store to see how the changes look. * Check the group block or section to ensure the pattern scale is applied correctly and enhances the visual appeal. 2. **Check Consistency:** * Ensure that the pattern scale aligns with your brand’s aesthetic and provides a cohesive look across both desktop and mobile devices. 3. **Test Across Devices:** * Verify the pattern scale on different devices to ensure it looks good and maintains visual appeal on all screen sizes. ### Summary By using the "Pattern Scale" setting in group blocks and sections, you can customize the size of background patterns in your Shopify store. This flexibility allows you to enhance the visual appeal and uniqueness of your components, ensuring a dynamic and engaging user experience across all devices. If you have any questions or need further assistance, please contact our customer support team. # Swap Color Order ### How to Swap Color Order in AppSections Group Blocks and Sections The "Swap Color Order" setting in AppSections allows you to invert the colors used in background patterns applied to certain group blocks and sections. This setting provides flexibility in customizing the appearance of your patterns, enhancing the overall visual appeal and consistency with your brand style. Here is how you can adjust the swap color order: ### **Swap Color Order** **Purpose:** This setting allows you to invert the colors used in background patterns. **Usage:** Enable this option to swap the colors in the selected pattern. ### Steps to Adjust Swap Color Order 1. **Select the Group Block or Section:** * Open your Shopify theme editor. * Navigate to the specific group block or section where you want to change the color order of the pattern. 2. **Locate the Swap Color Order Setting:** * In the settings for the group block or section, find the **Swap Color Order** option. 3. **Enable Swap Color Order:** * Check the box or toggle the switch to enable the swap color order option. * This will invert the colors used in the selected pattern. ### Ensuring the Right Color Order 1. **Preview Changes:** * After enabling the swap color order, preview your store to see how the changes look. * Check the group block or section to ensure the color inversion is applied correctly and enhances the visual appeal. 2. **Check Consistency:** * Ensure that the swapped color order aligns with your brand’s aesthetic and provides a cohesive look across both desktop and mobile devices. 3. **Test Across Devices:** * Verify the swapped color order on different devices to ensure it looks good and maintains visual appeal on all screen sizes. ### Summary By using the "Swap Color Order" setting in group blocks and sections, you can invert the colors used in background patterns in your Shopify store. This flexibility allows you to enhance the visual appeal and uniqueness of your components, ensuring a dynamic and engaging user experience across all devices. If you have any questions or need further assistance, please contact our customer support team. # Headline Content # Content ### How to Add and Customize Content in AppSections Block Headline Settings The "Content" setting in the AppSections Block Headline settings allows you to add and format textual content within your headlines. This setting provides flexibility in customizing the text with various formatting options such as underline, bold, italic, and links. Here is how you can add and customize content in your block healines: ### **Content** **Purpose:** This setting allows you to add textual content to your healines with formatting options. **Usage:** Input the desired text and apply formatting as needed. ### Steps to Add and Customize Content 1. **Select the Block Headline:** * Open your Shopify theme editor. * Navigate to the specific block headline where you want to add content. 2. **Locate the Content Setting:** * In the block headline settings, find the **Content** option. 3. **Add and Format Text:** * Enter the text you want to display in the headline. * Use the available formatting options to customize the text: * **Underline:** Highlight the text and click the underline button to underline it. * **Bold:** Highlight the text and click the bold button to make it bold. * **Italic:** Highlight the text and click the italic button to italicize it. * **Link:** Highlight the text and click the link button to add a hyperlink. ### Ensuring the Right Content Formatting 1. **Preview Changes:** * After adding and formatting the content, preview your store to see how the headline looks. * Check the headline to ensure the text is displayed correctly and the formatting is applied as intended. 2. **Check Consistency:** * Ensure that the content aligns with your brand’s aesthetic and provides a cohesive look across both desktop and mobile devices. 3. **Test Across Devices:** * Verify the content on different devices to ensure it looks good and maintains readability and functionality on all screen sizes. ### Summary By using the "Content" setting in the block headline settings, you can customize the textual content of your headlines with various formatting options. This flexibility allows you to enhance the visual appeal and interactivity of your healines, ensuring a dynamic and engaging user experience across all devices. If you have any questions or need further assistance, please contact our customer support team. # Select the Headline Font ### How to Adjust Font Style in AppSections Block Headline Settings The "Font" setting in the AppSections Block Headline settings allows you to select the font style for your healines from four options. This setting provides flexibility in defining the appearance of your headline elements, ensuring consistency with your overall brand style. Here is how you can adjust the font style for your block headlines: ### **Font** **Purpose:** This setting allows you to choose the font style for your headline elements. **Usage:** Select from four options to set the desired font style. ### Font Style Options 1. **None:** The default theme style is applied to the heading. 2. **Style 1:** The Style 1 for headings, as defined in the brand styles, is applied to the headline. 3. **Style 2:** The Style 2 for headings, as defined in the brand styles, is applied to the headline. 4. **Style 3:** The Style 3 for headings, as defined in the brand styles, is applied to the headline. ### Steps to Adjust Font Style 1. **Select the Block Headline:** * Open your Shopify theme editor. * Navigate to the specific block headline where you want to change the font style. 2. **Locate the Font Setting:** * In the block headline settings, find the **Font** option. 3. **Select Font Style:** * Choose one of the four options based on your design preferences: * **None:** To use the default theme style. * **Style 1:** To apply the Style 1 for headlines defined in the brand styles. * **Style 2:** To apply the Style 2 for headlines defined in the brand styles. * **Style 3:** To apply the Style 3 for headlines defined in the brand styles. ### Ensuring the Right Font Style 1. **Preview Changes:** * After selecting a font style, preview your store to see how the headline looks. * Check the block headline to ensure the font style is applied correctly and enhances the visual appeal and readability. 2. **Check Consistency:** * Ensure that the font style aligns with your brand’s aesthetic and provides a cohesive look across both desktop and mobile devices. 3. **Test Across Devices:** * Verify the font style on different devices to ensure it looks good and maintains readability on all screen sizes. ### Summary By using the "Font" setting in the block headline settings, you can customize the font style of your headline elements in your Shopify store. This flexibility allows you to enhance the visual appeal and readability of your headlines, ensuring a consistent and professional presentation across all devices. If you have any questions or need further assistance, please contact our customer support team. # Image Cover Content # Brightness ### How to Adjust Brightness for Media in AppSections The "Brightness" setting in AppSections allows you to adjust the brightness filter applied to media within blocks, groups, and sections. This setting provides flexibility in defining the appearance of your media by making it more or less visible, enhancing the overall visual appeal and consistency with your brand style. Here is how you can adjust the brightness: ### **Brightness** **Purpose:** This setting allows you to manage the brightness filter of the media. **Usage:** Use the range selector to set the desired brightness from 0% to 100%. ### Steps to Adjust Brightness 1. **Select the Block/Group/Section:** * Open your Shopify theme editor. * Navigate to the specific block, group, or section containing the media you want to adjust. 2. **Locate the Brightness Setting:** * In the settings for the block, group, or section, find the **Brightness** option. 3. **Adjust Brightness:** * Use the range selector to set the brightness between 0% and 100%: * **0%:** The media is completely dark and opaque. * **100%:** The media is fully bright and visible. ### Ensuring the Right Brightness 1. **Preview Changes:** * After adjusting the brightness, preview your store to see how the changes look. * Check the block, group, or section to ensure the brightness adjustment is applied correctly and enhances the visual appeal. 2. **Check Consistency:** * Ensure that the brightness adjustment aligns with your brand’s aesthetic and provides a cohesive look across both desktop and mobile devices. 3. **Test Across Devices:** * Verify the brightness adjustment on different devices to ensure it looks good and maintains visual appeal on all screen sizes. ### Summary By using the "Brightness" setting in AppSections, you can manage the brightness filter of the media for your blocks, groups, and sections in your Shopify store. This flexibility allows you to enhance the visual appeal and consistency of your components, ensuring a dynamic and engaging user experience across all devices. If you have any questions or need further assistance, please contact our customer support team. # Select Image ### How to Select and Customize Images in AppSections The "Select Image" setting in AppSections allows you to add and customize images for your sections, with different options for desktop and mobile. This setting provides flexibility in defining how images appear across devices, enhancing the overall visual appeal and user experience. Here is how you can select and customize images: ### **Select Image** **Purpose:** This setting allows you to add images to your sections, with the option to specify different images for desktop and mobile. You can also adjust focal points, change URL handles, and edit alt text. **Usage:** Follow the steps below to select and customize your images. ### Steps to Select and Customize Images 1. **Select the Section:** * Open your Shopify theme editor. * Navigate to the specific section where you want to add or change an image. 2. **Locate the Select Image Setting:** * In the section settings, find the **Select Image** or **Change Image** option. 3. **Add or Select an Image:** * Click on **Select Image** or **Change Image**. * In the modal that appears, either **Add Image** or select an existing image from your library. * Click **Done** to confirm your selection. ### Customizing Images for Desktop and Mobile 1. **Single Image for Both Desktop and Mobile:** * If you add an image for desktop only, it will apply to both desktop and mobile if no mobile image is set. * Similarly, if you add an image for mobile only, it will apply to both desktop and mobile if no desktop image is set. 2. **Different Images for Desktop and Mobile:** * If you add separate images for desktop and mobile, each will be displayed on their respective devices. ### Adding Focal Points 1. **Edit Image:** * After selecting an image, click on **Edit**. * In the modal that appears, click on **Add Focal Point**. * Adjust the focal point to center on a particular area of the image. * Save your changes. ### Changing URL Handle and Alt Text 1. **Edit Image Details:** * Click on **Edit** next to the selected image. * In the modal, you can change the **URL Handle** and **Alt Text** for the image. * Save your changes. ### Ensuring the Right Image Customization 1. **Preview Changes:** * After selecting and customizing the image, preview your store to see how it looks. * Check the section to ensure the image is applied correctly and enhances the visual appeal. 2. **Check Consistency:** * Ensure that the image settings align with your brand’s aesthetic and provide a cohesive look across both desktop and mobile devices. 3. **Test Across Devices:** * Verify the image on different devices to ensure it looks good and maintains visual appeal on all screen sizes. ### Summary By using the "Select Image" setting in AppSections, you can add and customize images for your sections in your Shopify store. This flexibility allows you to enhance the visual appeal and functionality of your components, ensuring a dynamic and engaging user experience across all devices. You can adjust focal points, change URL handles, and edit alt text for better customization. If you have any questions or need further assistance, please contact our customer support team. # Image Parallax # Brightness ### How to Adjust Brightness for Media in AppSections The "Brightness" setting in AppSections allows you to adjust the brightness filter applied to media within blocks, groups, and sections. This setting provides flexibility in defining the appearance of your media by making it more or less visible, enhancing the overall visual appeal and consistency with your brand style. Here is how you can adjust the brightness: ### **Brightness** **Purpose:** This setting allows you to manage the brightness filter of the media. **Usage:** Use the range selector to set the desired brightness from 0% to 100%. ### Steps to Adjust Brightness 1. **Select the Block/Group/Section:** * Open your Shopify theme editor. * Navigate to the specific block, group, or section containing the media you want to adjust. 2. **Locate the Brightness Setting:** * In the settings for the block, group, or section, find the **Brightness** option. 3. **Adjust Brightness:** * Use the range selector to set the brightness between 0% and 100%: * **0%:** The media is completely dark and opaque. * **100%:** The media is fully bright and visible. ### Ensuring the Right Brightness 1. **Preview Changes:** * After adjusting the brightness, preview your store to see how the changes look. * Check the block, group, or section to ensure the brightness adjustment is applied correctly and enhances the visual appeal. 2. **Check Consistency:** * Ensure that the brightness adjustment aligns with your brand’s aesthetic and provides a cohesive look across both desktop and mobile devices. 3. **Test Across Devices:** * Verify the brightness adjustment on different devices to ensure it looks good and maintains visual appeal on all screen sizes. ### Summary By using the "Brightness" setting in AppSections, you can manage the brightness filter of the media for your blocks, groups, and sections in your Shopify store. This flexibility allows you to enhance the visual appeal and consistency of your components, ensuring a dynamic and engaging user experience across all devices. If you have any questions or need further assistance, please contact our customer support team. # Direction X ### How to Adjust Direction Y for Parallax in AppSections The "Direction Y" setting in AppSections allows you to control the vertical direction of the parallax effect for blocks, groups, and sections. This setting provides flexibility in defining the movement of the background or foreground elements, enhancing the overall visual appeal and interactivity of your components. Here is how you can adjust the Direction Y for parallax: ### **Direction Y** **Purpose:** This setting allows you to choose the vertical direction of the parallax effect. **Usage:** Select from three options to set the desired vertical direction for the parallax effect. ### Direction Y Options 1. **None:** No vertical parallax effect. 2. **Up:** The parallax effect moves the background or foreground elements upwards. 3. **Down:** The parallax effect moves the background or foreground elements downwards. ### Steps to Adjust Direction Y for Parallax 1. **Select the Block/Group/Section:** * Open your Shopify theme editor. * Navigate to the specific block, group, or section where you want to adjust the parallax direction. 2. **Locate the Direction Y Setting:** * In the settings for the block, group, or section, find the **Direction Y** option under the parallax settings. 3. **Select Direction Y Option:** * Choose one of the three options based on your design preferences: * **None:** To disable the vertical parallax effect. * **Up:** To move the background or foreground elements upwards. * **Down:** To move the background or foreground elements downwards. ### Ensuring the Right Parallax Direction 1. **Preview Changes:** * After selecting the Direction Y option, preview your store to see how the parallax effect looks. * Check the block, group, or section to ensure the parallax direction is applied correctly and enhances the visual appeal and interactivity. 2. **Check Consistency:** * Ensure that the parallax direction aligns with your brand’s aesthetic and provides a cohesive look across both desktop and mobile devices. 3. **Test Across Devices:** * Verify the parallax effect on different devices to ensure it looks good and maintains visual appeal on all screen sizes. ### Summary By using the "Direction Y" setting in AppSections, you can control the vertical direction of the parallax effect for your blocks, groups, and sections in your Shopify store. This flexibility allows you to enhance the visual appeal and interactivity of your components, ensuring a dynamic and engaging user experience across all devices. If you have any questions or need further assistance, please contact our customer support team. # Direction Y ### How to Adjust Direction X for Parallax in AppSections The "Direction X" setting in AppSections allows you to control the horizontal direction of the parallax effect for blocks, groups, and sections. This setting provides flexibility in defining the movement of the background or foreground elements, enhancing the overall visual appeal and interactivity of your components. Here is how you can adjust the Direction X for parallax: ### **Direction X** **Purpose:** This setting allows you to choose the horizontal direction of the parallax effect. **Usage:** Select from three options to set the desired horizontal direction for the parallax effect. ### Direction X Options 1. **None:** No horizontal parallax effect. 2. **Left:** The parallax effect moves the background or foreground elements to the left. 3. **Right:** The parallax effect moves the background or foreground elements to the right. ### Steps to Adjust Direction X for Parallax 1. **Select the Block/Group/Section:** * Open your Shopify theme editor. * Navigate to the specific block, group, or section where you want to adjust the parallax direction. 2. **Locate the Direction X Setting:** * In the settings for the block, group, or section, find the **Direction X** option under the parallax settings. 3. **Select Direction X Option:** * Choose one of the three options based on your design preferences: * **None:** To disable the horizontal parallax effect. * **Left:** To move the background or foreground elements to the left. * **Right:** To move the background or foreground elements to the right. ### Ensuring the Right Parallax Direction 1. **Preview Changes:** * After selecting the Direction X option, preview your store to see how the parallax effect looks. * Check the block, group, or section to ensure the parallax direction is applied correctly and enhances the visual appeal and interactivity. 2. **Check Consistency:** * Ensure that the parallax direction aligns with your brand’s aesthetic and provides a cohesive look across both desktop and mobile devices. 3. **Test Across Devices:** * Verify the parallax effect on different devices to ensure it looks good and maintains visual appeal on all screen sizes. ### Summary By using the "Direction X" setting in AppSections, you can control the horizontal direction of the parallax effect for your blocks, groups, and sections in your Shopify store. This flexibility allows you to enhance the visual appeal and interactivity of your components, ensuring a dynamic and engaging user experience across all devices. If you have any questions or need further assistance, please contact our customer support team. # Distance ### How to Adjust Parallax Activation Distance in AppSections The "Distance" setting in AppSections allows you to control the activation zone of the parallax effect within the viewport for blocks, groups, and sections. This setting provides flexibility in defining the area where the parallax movement begins and ends, enhancing the overall visual appeal and interactivity of your components. Here is how you can adjust the parallax activation distance: ### **Parallax Activation Distance** **Purpose:** This setting allows you to adjust the activation zone of the parallax effect within the viewport. **Usage:** Use the range selector to set the desired activation distance from 20% to 100%. ### Steps to Adjust Parallax Activation Distance 1. **Select the Block/Group/Section:** * Open your Shopify theme editor. * Navigate to the specific block, group, or section where you want to adjust the parallax activation distance. 2. **Locate the Distance Setting:** * In the settings for the block, group, or section, find the **Distance** option under the parallax settings. 3. **Adjust Activation Distance:** * Use the range selector to set the activation distance between 20% and 100%: * **20%:** Minimal activation distance, meaning the parallax effect activates in a smaller portion of the viewport. * **100%:** Maximum activation distance, meaning the parallax effect activates across the entire viewport. ### Ensuring the Right Activation Distance 1. **Preview Changes:** * After adjusting the activation distance, preview your store to see how the parallax effect looks. * Check the block, group, or section to ensure the activation distance is applied correctly and enhances the visual appeal and interactivity. 2. **Check Consistency:** * Ensure that the activation distance aligns with your brand’s aesthetic and provides a cohesive look across both desktop and mobile devices. 3. **Test Across Devices:** * Verify the parallax effect on different devices to ensure it looks good and maintains visual appeal on all screen sizes. ### Summary By using the "Distance" setting in AppSections, you can control the activation zone of the parallax effect within the viewport for your blocks, groups, and sections in your Shopify store. This flexibility allows you to enhance the visual appeal and interactivity of your components, ensuring a dynamic and engaging user experience across all devices. If you have any questions or need further assistance, please contact our customer support team. # Movement ### How to Adjust Movement Amplitude for Parallax in AppSections The "Movement" setting in AppSections allows you to control the amplitude of the parallax effect for blocks, groups, and sections. This setting provides flexibility in defining the intensity of the movement of background or foreground elements, enhancing the overall visual appeal and interactivity of your components. Here is how you can adjust the movement amplitude for parallax: ### **Movement Amplitude** **Purpose:** This setting allows you to adjust the amplitude of the parallax effect. **Usage:** Use the range selector to set the desired amplitude from 105% to 200%. ### Steps to Adjust Movement Amplitude for Parallax 1. **Select the Block/Group/Section:** * Open your Shopify theme editor. * Navigate to the specific block, group, or section where you want to adjust the parallax movement. 2. **Locate the Movement Setting:** * In the settings for the block, group, or section, find the **Movement** option under the parallax settings. 3. **Adjust Movement Amplitude:** * Use the range selector to set the movement amplitude between 105% and 200%: * **105%:** Minimal amplitude, resulting in subtle parallax movement. * **200%:** Maximum amplitude, resulting in pronounced parallax movement. ### Ensuring the Right Movement Amplitude 1. **Preview Changes:** * After adjusting the movement amplitude, preview your store to see how the parallax effect looks. * Check the block, group, or section to ensure the movement amplitude is applied correctly and enhances the visual appeal and interactivity. 2. **Check Consistency:** * Ensure that the movement amplitude aligns with your brand’s aesthetic and provides a cohesive look across both desktop and mobile devices. 3. **Test Across Devices:** * Verify the parallax effect on different devices to ensure it looks good and maintains visual appeal on all screen sizes. ### Summary By using the "Movement" setting in AppSections, you can control the amplitude of the parallax effect for your blocks, groups, and sections in your Shopify store. This flexibility allows you to enhance the visual appeal and interactivity of your components, ensuring a dynamic and engaging user experience across all devices. If you have any questions or need further assistance, please contact our customer support team. # Select Image ### How to Select and Customize Images in AppSections The "Select Image" setting in AppSections allows you to add and customize images for your sections, with different options for desktop and mobile. This setting provides flexibility in defining how images appear across devices, enhancing the overall visual appeal and user experience. Here is how you can select and customize images: ### **Select Image** **Purpose:** This setting allows you to add images to your sections, with the option to specify different images for desktop and mobile. You can also adjust focal points, change URL handles, and edit alt text. **Usage:** Follow the steps below to select and customize your images. ### Steps to Select and Customize Images 1. **Select the Section:** * Open your Shopify theme editor. * Navigate to the specific section where you want to add or change an image. 2. **Locate the Select Image Setting:** * In the section settings, find the **Select Image** or **Change Image** option. 3. **Add or Select an Image:** * Click on **Select Image** or **Change Image**. * In the modal that appears, either **Add Image** or select an existing image from your library. * Click **Done** to confirm your selection. ### Customizing Images for Desktop and Mobile 1. **Single Image for Both Desktop and Mobile:** * If you add an image for desktop only, it will apply to both desktop and mobile if no mobile image is set. * Similarly, if you add an image for mobile only, it will apply to both desktop and mobile if no desktop image is set. 2. **Different Images for Desktop and Mobile:** * If you add separate images for desktop and mobile, each will be displayed on their respective devices. ### Adding Focal Points 1. **Edit Image:** * After selecting an image, click on **Edit**. * In the modal that appears, click on **Add Focal Point**. * Adjust the focal point to center on a particular area of the image. * Save your changes. ### Changing URL Handle and Alt Text 1. **Edit Image Details:** * Click on **Edit** next to the selected image. * In the modal, you can change the **URL Handle** and **Alt Text** for the image. * Save your changes. ### Ensuring the Right Image Customization 1. **Preview Changes:** * After selecting and customizing the image, preview your store to see how it looks. * Check the section to ensure the image is applied correctly and enhances the visual appeal. 2. **Check Consistency:** * Ensure that the image settings align with your brand’s aesthetic and provide a cohesive look across both desktop and mobile devices. 3. **Test Across Devices:** * Verify the image on different devices to ensure it looks good and maintains visual appeal on all screen sizes. ### Summary By using the "Select Image" setting in AppSections, you can add and customize images for your sections in your Shopify store. This flexibility allows you to enhance the visual appeal and functionality of your components, ensuring a dynamic and engaging user experience across all devices. You can adjust focal points, change URL handles, and edit alt text for better customization. If you have any questions or need further assistance, please contact our customer support team. # Text Content # Content ### How to Add and Customize Content in AppSections Block Text Settings The "Content" setting in the AppSections Block Text settings allows you to add and format textual content with various options. This setting provides flexibility in customizing the text with formatting options such as underline, bold, italic, links, as well as creating paragraphs, adding headings, bullet lists, and numbered lists. Here is how you can add and customize content in your block text: ### **Content** * **Purpose:** This setting allows you to add textual content with multiple formatting options. * **Usage:** Input the desired text and apply formatting as needed. ### Steps to Add and Customize Content 1. **Select the Block Text:** * Open your Shopify theme editor. * Navigate to the specific block text where you want to add content. 2. **Locate the Content Setting:** * In the block text settings, find the **Content** option. 3. **Add and Format Text:** * Enter the text you want to display. * Use the available formatting options to customize the text: * **Underline:** Highlight the text and click the underline button to underline it. * **Bold:** Highlight the text and click the bold button to make it bold. * **Italic:** Highlight the text and click the italic button to italicize it. * **Link:** Highlight the text and click the link button to add a hyperlink. * **Paragraphs:** Press Enter to create new paragraphs. * **Headings:** Select the text and choose the heading level (H1, H2, H3, etc.) to format it as a heading. * **Bullet Lists:** Click the bullet list button to create a bulleted list. * **Numbered Lists:** Click the numbered list button to create a numbered list. ### Ensuring the Right Content Formatting 1. **Preview Changes:** * After adding and formatting the content, preview your store to see how the text looks. * Check the block text to ensure the formatting is applied correctly and enhances readability and structure. 2. **Check Consistency:** * Ensure that the content aligns with your brand’s aesthetic and provides a cohesive look across both desktop and mobile devices. 3. **Test Across Devices:** * Verify the content on different devices to ensure it looks good and maintains readability and functionality on all screen sizes. ### Summary By using the "Content" setting in the block text settings, you can customize the textual content of your blocks with various formatting options. This flexibility allows you to enhance the visual appeal, readability, and interactivity of your text, ensuring a dynamic and engaging user experience across all devices. If you have any questions or need further assistance, please contact our customer support team. # Select the Text Font ### How to Adjust Font Style in AppSections Block Text Settings The "Font" setting in the AppSections Block Text settings allows you to select the font style for your text from three options. This setting provides flexibility in defining the appearance of your text elements, ensuring consistency with your overall brand style. Here is how you can adjust the font style for your block text: ### **Font** * **Purpose:** This setting allows you to choose the font style for your text elements. * **Usage:** Select from three options to set the desired font style. ### Font Style Options 1. **None:** The default theme style is applied to the text. 2. **Style 1:** The Style 1 for body text, as defined in the brand style, is applied to the text. 3. **Style 2:** The Style 2 for body text, as defined in the brand style, is applied to the text. ### Steps to Adjust Font Style 1. **Select the Block Text:** * Open your Shopify theme editor. * Navigate to the specific block text where you want to change the font style. 2. **Locate the Font Setting:** * In the block text settings, find the **Font** option. 3. **Select Font Style:** * Choose one of the three options based on your design preferences: * **None:** To use the default theme style. * **Style 1:** To apply the Style 1 for body text defined in the brand styles. * **Style 2:** To apply the Style 2 for body text defined in the brand styles. ### Ensuring the Right Font Style 1. **Preview Changes:** * After selecting a font style, preview your store to see how the text looks. * Check the block text to ensure the font style is applied correctly and enhances the visual appeal and readability. 2. **Check Consistency:** * Ensure that the font style aligns with your brand’s aesthetic and provides a cohesive look across both desktop and mobile devices. 3. **Test Across Devices:** * Verify the font style on different devices to ensure it looks good and maintains readability on all screen sizes. ### Summary By using the "Font" setting in the block text settings, you can customize the font style of your text elements in your Shopify store. This flexibility allows you to enhance the visual appeal and readability of your text, ensuring a consistent and professional presentation across all devices. If you have any questions or need further assistance, please contact our customer support team. # Video Content # Brightness ### How to Adjust Brightness for Media in AppSections The "Brightness" setting in AppSections allows you to adjust the brightness filter applied to media within blocks, groups, and sections. This setting provides flexibility in defining the appearance of your media by making it more or less visible, enhancing the overall visual appeal and consistency with your brand style. Here is how you can adjust the brightness: ### **Brightness** **Purpose:** This setting allows you to manage the brightness filter of the media. **Usage:** Use the range selector to set the desired brightness from 0% to 100%. ### Steps to Adjust Brightness 1. **Select the Block/Group/Section:** * Open your Shopify theme editor. * Navigate to the specific block, group, or section containing the media you want to adjust. 2. **Locate the Brightness Setting:** * In the settings for the block, group, or section, find the **Brightness** option. 3. **Adjust Brightness:** * Use the range selector to set the brightness between 0% and 100%: * **0%:** The media is completely dark and opaque. * **100%:** The media is fully bright and visible. ### Ensuring the Right Brightness 1. **Preview Changes:** * After adjusting the brightness, preview your store to see how the changes look. * Check the block, group, or section to ensure the brightness adjustment is applied correctly and enhances the visual appeal. 2. **Check Consistency:** * Ensure that the brightness adjustment aligns with your brand’s aesthetic and provides a cohesive look across both desktop and mobile devices. 3. **Test Across Devices:** * Verify the brightness adjustment on different devices to ensure it looks good and maintains visual appeal on all screen sizes. ### Summary By using the "Brightness" setting in AppSections, you can manage the brightness filter of the media for your blocks, groups, and sections in your Shopify store. This flexibility allows you to enhance the visual appeal and consistency of your components, ensuring a dynamic and engaging user experience across all devices. If you have any questions or need further assistance, please contact our customer support team. # Controls ### How to Adjust Video Controls in AppSections Block Video Settings The "Controls" setting in AppSections Block Video settings allows you to define the appearance and functionality of the video controls. This setting provides flexibility in how users interact with videos, enhancing the user experience and visual appeal. Here is how you can adjust the video controls: ### **Video Controls** **Purpose:** This setting allows you to choose the appearance and functionality of video controls. **Usage:** Select from five options to set the desired video control style. ### Video Controls Options 1. **None:** No controls are displayed. Users must click on the video to play or stop it. 2. **Style 1:** All controls are displayed with the timeline bar above the icons, including time, speed, volume, picture-in-picture (PIP), and full screen. 3. **Style 2:** All controls are displayed with the timeline bar below the icons, including time, speed, volume, picture-in-picture (PIP), and full screen. 4. **Style 3:** All controls are displayed except the timeline bar, including time, speed, volume, picture-in-picture (PIP), and full screen. 5. **Style 4:** Only the timeline bar is displayed, with no other icons. ### Steps to Adjust Video Controls 1. **Select the Block Video:** * Open your Shopify theme editor. * Navigate to the specific block video where you want to change the controls. 2. **Locate the Controls Setting:** * In the block video settings, find the **Controls** option. 3. **Select Video Control Style:** * Choose one of the five options based on your preferences: * **None:** No controls are displayed. * **Style 1:** All controls with the timeline bar above the icons. * **Style 2:** All controls with the timeline bar below the icons. * **Style 3:** All controls except the timeline bar. * **Style 4:** Only the timeline bar is displayed. ### Ensuring the Right Video Controls 1. **Preview Changes:** * After selecting the video control style, preview your store to see how the video looks. * Check the video block to ensure the controls are applied correctly and enhance the user experience. 2. **Check Consistency:** * Ensure that the video controls align with your brand’s aesthetic and provide a cohesive look across both desktop and mobile devices. 3. **Test Across Devices:** * Verify the video controls on different devices to ensure they look good and maintain functionality on all screen sizes. ### Summary By using the "Controls" setting in the block video settings, you can customize the appearance and functionality of video controls in your Shopify store. This flexibility allows you to enhance the user experience and visual appeal of your videos, ensuring a dynamic and engaging presentation across all devices. If you have any questions or need further assistance, please contact our customer support team. # Select Poster ### How to Select a Poster Image for Videos in AppSections Block Video Settings The "Select Poster" setting in AppSections Block Video settings allows you to define a custom image that appears when the video is not playing. This setting enhances the visual appeal and provides a clear indication to users that the video can be played. Here is how you can select and customize a poster image for your videos: ### **Select Poster** **Purpose:** This setting allows you to add a custom poster image that displays when the video is not playing. **Usage:** Follow the steps below to select and customize your poster image. ### Steps to Select a Poster Image 1. **Select the Block Video:** * Open your Shopify theme editor. * Navigate to the specific block video where you want to add or change the poster image. 2. **Locate the Select Poster Setting:** * In the block video settings, find the **Select Poster** option. 3. **Add or Select a Poster Image:** * Click on **Select Image**. * In the modal that appears, select the image you want to use as the poster from your library or upload a new image. * Click **Done** to confirm your selection. ### Ensuring the Right Poster Image 1. **Preview Changes:** * After selecting the poster image, preview your store to see how it looks. * Check the video block to ensure the poster image is applied correctly and enhances the visual appeal. 2. **Check Consistency:** * Ensure that the poster image aligns with your brand’s aesthetic and provides a cohesive look across both desktop and mobile devices. 3. **Test Across Devices:** * Verify the poster image on different devices to ensure it looks good and provides the desired visual indication on all screen sizes. ### Summary By using the "Select Poster" setting in the block video settings, you can add a custom image that displays when the video is not playing in your Shopify store. This flexibility allows you to enhance the visual appeal and user experience of your videos, ensuring a dynamic and engaging presentation across all devices. If you have any questions or need further assistance, please contact our customer support team. # Select Video ### How to Select and Customize Videos in AppSections The "Select Video" setting in AppSections allows you to add and customize videos for your blocks, groups, and sections. This setting provides flexibility in defining how videos appear and function, enhancing the overall visual appeal and user experience. Here is how you can select and customize videos: ### **Select Video** **Purpose:** This setting allows you to add videos to your sections, groups, or blocks, and customize details such as alt text. **Usage:** Follow the steps below to select and customize your videos. ### Steps to Select and Customize Videos 1. **Select the Block/Group/Section:** * Open your Shopify theme editor. * Navigate to the specific block, group, or section where you want to add or change a video. 2. **Locate the Select Video Setting:** * In the settings for the block, group, or section, find the **Select Video** option. 3. **Add or Select a Video:** * Click on **Select Video**. * In the modal that appears, select the video you want to add from your library or upload a new video. * Click **Done** to confirm your selection. ### Customizing Video Alt Text 1. **Edit Video Details:** * After selecting a video, click on **Edit** next to the selected video. * In the modal, find the field for **Alt Text**. 2. **Add or Change Alt Text:** * Enter the desired alt text in the **Alt Text** field. * Click **Save** to confirm your changes. ### Ensuring the Right Video Customization 1. **Preview Changes:** * After selecting and customizing the video, preview your store to see how it looks. * Check the block, group, or section to ensure the video is applied correctly and enhances the visual appeal and functionality. 2. **Check Consistency:** * Ensure that the video settings align with your brand’s aesthetic and provide a cohesive look across both desktop and mobile devices. 3. **Test Across Devices:** * Verify the video on different devices to ensure it looks good and maintains functionality on all screen sizes. ### Summary By using the "Select Video" setting in AppSections, you can add and customize videos for your blocks, groups, and sections in your Shopify store. This flexibility allows you to enhance the visual appeal and functionality of your components, ensuring a dynamic and engaging user experience across all devices. You can also customize the alt text to improve accessibility and SEO. If you have any questions or need further assistance, please contact our customer support team. # Style ### How to Adjust Video Style in AppSections Block Video Settings The "Style" setting in AppSections Block Video settings allows you to define whether a video appears with a poster (an image with a play button) or plays automatically. This setting provides flexibility in how videos are presented to users, enhancing the user experience and visual appeal. Here is how you can adjust the video style: ### **Video Style** **Purpose:** This setting allows you to choose how a video is presented—either with a poster image or autoplay. **Usage:** Select from two options to set the desired video style. ### Video Style Options 1. **Poster:** The video appears with a poster image and a play button. Users must click the play button to start the video. 2. **Autoplay:** The video plays automatically when it loads. ### Steps to Adjust Video Style 1. **Select the Block Video:** * Open your Shopify theme editor. * Navigate to the specific block video where you want to change the style. 2. **Locate the Style Setting:** * In the block video settings, find the **Style** option. 3. **Select Video Style:** * Choose one of the two options based on your preferences: * **Poster:** To display the video with a poster image and a play button. * **Autoplay:** To have the video play automatically. ### Setting a Poster Image If you choose the **Poster** option, you will need to select a poster image. 1. **Locate the Select Poster Setting:** * After selecting the **Poster** style, find the **Select Poster** option in the block video settings. 2. **Add or Select a Poster Image:** * Click on **Select Poster**. * In the modal that appears, either **Add Image** or select an existing image from your library. * Click **Done** to confirm your selection. ### Ensuring the Right Video Style 1. **Preview Changes:** * After selecting the video style and setting a poster image (if applicable), preview your store to see how the video looks. * Check the video block to ensure the style is applied correctly and enhances the visual appeal and functionality. 2. **Check Consistency:** * Ensure that the video style aligns with your brand’s aesthetic and provides a cohesive look across both desktop and mobile devices. 3. **Test Across Devices:** * Verify the video style on different devices to ensure it looks good and maintains functionality on all screen sizes. ### Summary By using the "Style" setting in the block video settings, you can control how videos are presented in your Shopify store. This flexibility allows you to enhance the user experience and visual appeal of your videos, ensuring a dynamic and engaging presentation across all devices. If you have any questions or need further assistance, please contact our customer support team. # YouTube Content # Autoplay ? ### Autoplay Setting in YouTube Block The "Autoplay" setting within the YouTube Block allows you to control whether the embedded YouTube video automatically plays when the page loads. This setting can enhance user engagement by starting the video without requiring manual interaction, making it easier for visitors to view your content. ### Autoplay Option * **Purpose:** This setting enables the video to automatically start playing as soon as the page containing the YouTube block is loaded. Autoplay is useful for grabbing the viewer's attention immediately, particularly for promotional content or important messages. * **Usage:** When checked, the video will begin playing automatically. If left unchecked, the video will require the user to click the play button to start. ### **Option:** 1. **Checked (Enabled):** * **Description:** When the Autoplay setting is checked, the YouTube video embedded in the block will automatically start playing as soon as the page loads. This is particularly effective for ensuring that visitors are immediately engaged with the video content, making it prominent and easy to access. 2. **Unchecked (Disabled):** * **Description:** When the Autoplay setting is unchecked, the video will not start playing automatically. Instead, users will need to manually click the play button to watch the video. This is useful when you want to give users control over when they start viewing the video, preventing potential interruptions or unwanted audio on page load. ### Steps to Adjust the Autoplay Setting 1. **Select the YouTube Block:** * Open your Shopify theme editor. * Navigate to the specific section containing the YouTube block. 2. **Locate the Autoplay Setting:** * Within the YouTube block settings, find the "Autoplay" option. 3. **Enable or Disable Autoplay:** * Check the box to enable Autoplay, allowing the video to start automatically when the page loads. * Uncheck the box if you prefer the video to start only when the user clicks play. 4. **Preview Changes:** * After adjusting the Autoplay setting, preview your store to ensure the video behaves as expected. * Confirm that the Autoplay feature enhances the user experience without causing any disruptions or unwanted behavior. ### Ensuring the Right Autoplay Experience 1. **Preview Changes:** * After enabling or disabling Autoplay, preview your store to observe how the video behaves on page load. Ensure that the setting aligns with your content strategy and user expectations. 2. **Consider User Experience:** * If Autoplay is enabled, ensure the content of the video is immediately relevant and engaging, as users may not expect or desire sudden audio or video playback. * If Autoplay is disabled, make sure the video’s play button is clearly visible and easy to interact with. 3. **Test Across Devices:** * Verify that the Autoplay setting functions correctly across different devices, ensuring a consistent experience on both desktop and mobile platforms. ### Summary By using the "Autoplay" setting in the YouTube Block, you can control whether the video starts playing automatically when the page loads. This feature can enhance engagement by immediately presenting video content to users, but it should be used thoughtfully to ensure a positive user experience. If you have any questions or need further assistance, please contact our customer support team. # Brightness ### How to Adjust Brightness for Media in AppSections The "Brightness" setting in AppSections allows you to adjust the brightness filter applied to media within blocks, groups, and sections. This setting provides flexibility in defining the appearance of your media by making it more or less visible, enhancing the overall visual appeal and consistency with your brand style. Here is how you can adjust the brightness: ### **Brightness** **Purpose:** This setting allows you to manage the brightness filter of the media. **Usage:** Use the range selector to set the desired brightness from 0% to 100%. ### Steps to Adjust Brightness 1. **Select the Block/Group/Section:** * Open your Shopify theme editor. * Navigate to the specific block, group, or section containing the media you want to adjust. 2. **Locate the Brightness Setting:** * In the settings for the block, group, or section, find the **Brightness** option. 3. **Adjust Brightness:** * Use the range selector to set the brightness between 0% and 100%: * **0%:** The media is completely dark and opaque. * **100%:** The media is fully bright and visible. ### Ensuring the Right Brightness 1. **Preview Changes:** * After adjusting the brightness, preview your store to see how the changes look. * Check the block, group, or section to ensure the brightness adjustment is applied correctly and enhances the visual appeal. 2. **Check Consistency:** * Ensure that the brightness adjustment aligns with your brand’s aesthetic and provides a cohesive look across both desktop and mobile devices. 3. **Test Across Devices:** * Verify the brightness adjustment on different devices to ensure it looks good and maintains visual appeal on all screen sizes. ### Summary By using the "Brightness" setting in AppSections, you can manage the brightness filter of the media for your blocks, groups, and sections in your Shopify store. This flexibility allows you to enhance the visual appeal and consistency of your components, ensuring a dynamic and engaging user experience across all devices. If you have any questions or need further assistance, please contact our customer support team. # Select Video ### Select Video Setting in YouTube Block The "Select Video" setting within the YouTube Block allows you to embed a video by pasting a link to the video. This setting supports both YouTube and Vimeo links, providing flexibility in choosing the platform that best fits your content needs. ### Select Video Option * **Purpose:** This setting enables you to embed a video directly into the YouTube Block by pasting the URL of the video. It supports links from YouTube and Vimeo, making it easy to incorporate video content into your store’s pages. * **Usage:** Paste the link to the desired YouTube or Vimeo video into the provided field to embed the video within the block. ### **Supported Video Links:** 1. **YouTube Link:** * **Description:** Paste the URL of a YouTube video into the setting field. The video will be embedded and displayed within the block, allowing visitors to view the content directly on your store page. 2. **Vimeo Link:** * **Description:** Paste the URL of a Vimeo video into the setting field. The Vimeo video will be embedded similarly to a YouTube video, giving you the flexibility to use content hosted on Vimeo. ### Steps to Use the Select Video Setting 1. **Select the YouTube Block:** * Open your Shopify theme editor. * Navigate to the specific section containing the YouTube block. 2. **Locate the Select Video Setting:** * Within the YouTube block settings, find the "Select Video" option. 3. **Paste the Video Link:** * Copy the URL of the YouTube or Vimeo video you want to embed. * Paste the link into the provided field in the "Select Video" setting. 4. **Preview the Embedded Video:** * After pasting the link, preview your store to ensure the video is embedded correctly and displays as expected within the block. * Check that the video plays properly and aligns with the layout and design of your page. ### Ensuring Proper Video Embedding 1. **Preview Changes:** * After embedding the video, preview your store to ensure the video is displayed correctly and functions as expected. * Confirm that the video is responsive and fits well within the block, maintaining a consistent appearance across different devices. 2. **Check Video Compatibility:** * Ensure that the video link is valid and that the video is accessible to all users visiting your store. Double-check the URL to avoid any embedding errors. 3. **Test Across Devices:** * Verify that the embedded video works correctly on both desktop and mobile devices, ensuring that users have a seamless experience regardless of how they access your store. ### Summary By using the "Select Video" setting in the YouTube Block, you can easily embed videos from YouTube or Vimeo by pasting the video link. This feature allows you to integrate video content into your store’s pages, enhancing the visual appeal and providing engaging content for your visitors. If you have any questions or need further assistance, please contact our customer support team. # Slider # Styles # Effect ### Effect Setting in AppSections Brand Style The "Effect" setting in the AppSections Brand Style allows you to standardize the style of sliders used throughout your store. This setting offers two distinct options that can enhance the visual appeal of your site and align with your brand's aesthetic. ### Effect Options * **Purpose:** This setting allows you to define the style of sliders used across your Shopify store, providing options that range from a traditional sliding motion to a more dynamic and engaging visual experience. * **Usage:** Choose between two available effect options to control how your sliders behave and appear. ### **Options:** 1. **Slide:** * **Description:** The Slide option offers a classic and smooth sliding motion between slides. This is the standard option, providing a simple and clean transition that ensures content is displayed clearly and effectively without any distractions. 2. **Coverflow:** * **Description:** The Coverflow option adds a more dynamic visual effect to your sliders. This effect mimics the appearance of a 3D carousel, where slides are arranged in a slightly rotated, layered format. As users navigate through the slider, the central slide appears more prominent while the surrounding slides are angled, creating a visually appealing and engaging experience. This option is perfect for showcasing products or content in a more interactive and immersive way. ### Steps to Adjust the Effect Setting 1. **Select the Brand Style:** * Open your Shopify theme editor. * Navigate to the Brand Style settings. 2. **Locate the Effect Setting:** * Within the Brand Style settings, find the "Effect" option. 3. **Choose the Desired Effect:** * Select either "Slide" for a classic transition or "Coverflow" for a dynamic and layered visual experience. 4. **Preview Changes:** * After selecting your preferred effect, preview your store to observe how the sliders behave. * Ensure the chosen effect enhances the presentation of your content and aligns with your brand’s overall aesthetic. ### Ensuring the Right Slider Effect 1. **Preview Changes:** * After adjusting the effect setting, preview your store to see how the changes look. * Check different sliders across your site to ensure the effect is consistent and visually appealing. 2. **Check Consistency:** * Verify that the selected effect aligns with your brand’s aesthetic and works well across various devices, including both desktop and mobile. 3. **Test Across Devices:** * Ensure the slider effect looks good and functions correctly on all screen sizes, maintaining both usability and visual appeal. ### Summary By using the "Effect" setting in the AppSections Brand Style, you can standardize the slider transitions across your Shopify store, choosing between a classic Slide effect or a more dynamic Coverflow effect. This flexibility allows you to enhance the visual experience for your customers, ensuring a professional and engaging presentation across all devices. If you have any questions or need further assistance, please contact our customer support team. # Position ### Position Setting in AppSections Brand Style The "Position" setting in the AppSections Brand Style allows you to control the alignment of sliders within your store. This setting provides two alignment options, ensuring that your slider’s placement complements the overall design and layout of your website. ### Position Options * **Purpose:** This setting allows you to define how sliders are aligned on your page, offering flexibility to enhance the visual structure of your content. * **Usage:** Choose between two alignment options to determine the horizontal position of your sliders within the page layout. ### **Options:** 1. **Left:** * **Description:** The Left option aligns the slider to the left side of the page or container. This option is ideal if you want to maintain a traditional layout or if your design requires content to be anchored to the left side, providing a more structured and formal presentation. 2. **Center:** * **Description:** The Center option aligns the slider to the center of the page or container. This alignment is perfect for creating a balanced and symmetrical look, drawing attention to the slider as a focal point. Centering your slider can enhance the user experience by making the content appear more organized and visually appealing. ### Steps to Adjust the Position Setting 1. **Select the Brand Style:** * Open your Shopify theme editor. * Navigate to the Brand Style settings. 2. **Locate the Position Setting:** * Within the Brand Style settings, find the "Position" option. 3. **Choose the Desired Position:** * Select "Left" to align the slider to the left side. * Select "Center" to position the slider in the center of the page. 4. **Preview Changes:** * After selecting your preferred position, preview your store to observe how the slider alignment affects the overall layout. * Ensure the chosen position aligns with your design goals and enhances the visual appeal of your content. ### Ensuring the Right Slider Position 1. **Preview Changes:** * After adjusting the position setting, preview your store to see how the slider alignment looks in different contexts. * Check various pages where sliders are used to ensure the alignment is consistent and visually cohesive. 2. **Check Consistency:** * Ensure that the selected position complements your brand’s overall aesthetic and layout, creating a harmonious design across all pages. 3. **Test Across Devices:** * Verify that the slider position appears correctly on different screen sizes, maintaining usability and visual balance on both desktop and mobile devices. ### Summary By using the "Position" setting in the AppSections Brand Style, you can control the horizontal alignment of sliders on your Shopify store, choosing between Left and Center positioning. This flexibility allows you to create a layout that aligns with your brand’s design principles, ensuring a consistent and professional presentation across all devices. If you have any questions or need further assistance, please contact our customer support team. # Infinite Loop ? ### Infinite Loop Setting in AppSections Brand Style The "Infinite Loop" setting in the AppSections Brand Style controls whether your sliders will continuously cycle through their content without stopping. When enabled, this setting allows for a seamless and repetitive display of your slider's items, which can enhance the user experience by ensuring that visitors never reach the end of the slider. ### Infinite Loop Option * **Purpose:** This setting allows you to enable or disable the continuous looping of sliders, ensuring that the content scrolls indefinitely without interruption. * **Usage:** Toggle the Infinite Loop option to determine whether your sliders should loop continuously or stop once the last slide is reached. ### **Option:** * **Checked (Enabled):** * **Description:** When the Infinite Loop setting is checked, the slider will continuously cycle through its slides. Once the last slide is reached, the slider automatically returns to the first slide, creating an endless loop. This is particularly useful for showcasing a series of products, promotions, or images that you want to keep in constant view, ensuring that visitors never encounter a static end to the slider. * **Unchecked (Disabled):** * **Description:** When the Infinite Loop setting is unchecked, the slider will stop once it reaches the last slide. Users can manually navigate back to previous slides, but the slider will not automatically loop back to the beginning. This option is ideal if you want to create a linear and finite presentation of content, where users can clearly see where the slider starts and ends. ### Steps to Adjust the Infinite Loop Setting 1. **Select the Brand Style:** * Open your Shopify theme editor. * Navigate to the Brand Style settings. 2. **Locate the Infinite Loop Setting:** * Within the Brand Style settings, find the "Infinite Loop" option. 3. **Toggle the Infinite Loop:** * Check the box to enable Infinite Loop and allow the slider to loop continuously. * Uncheck the box to disable Infinite Loop, making the slider stop after the last slide. 4. **Preview Changes:** * After adjusting the Infinite Loop setting, preview your store to observe how the slider behaves. * Ensure that the looping behavior meets your design expectations and enhances the user experience. ### Ensuring the Right Infinite Loop Behavior 1. **Preview Changes:** * After enabling or disabling the Infinite Loop, preview your store to see how the slider behaves in real-time. * Check different sliders across your site to ensure the Infinite Loop setting is applied consistently and appropriately. 2. **Check Consistency:** * Ensure that the Infinite Loop setting aligns with your brand’s overall design strategy. Consider whether continuous looping or a finite slider best suits the content being displayed. 3. **Test Across Devices:** * Verify that the Infinite Loop functions correctly on various devices, ensuring a smooth and consistent user experience on both desktop and mobile screens. ### Summary By using the "Infinite Loop" setting in the AppSections Brand Style, you can control whether your sliders loop continuously or stop after the last slide. This setting provides flexibility to enhance the user experience, whether you prefer a dynamic, never-ending display or a more structured, finite presentation. If you have any questions or need further assistance, please contact our customer support team. # Autoplay ? ### Autoplay Setting in AppSections Brand Style The "Autoplay" setting in the AppSections Brand Style allows you to control whether your sliders automatically transition through slides without user interaction. This setting can enhance the dynamic nature of your site, keeping visitors engaged by continuously displaying content. ### Autoplay Options * **Purpose:** This setting enables or disables the automatic transition of slides within a slider. Autoplay can be particularly useful for drawing attention to featured products or content by continuously cycling through the available slides. * **Usage:** When enabled, the slider will automatically advance through the slides at a set interval. ### **Options:** 1. **Unchecked (Disabled):** * **Description:** When the Autoplay option is unchecked, the slider will not automatically transition between slides. Users will need to manually navigate through the slider using arrows or pagination dots. This option is ideal if you want users to have complete control over viewing content at their own pace. 2. **Checked (Enabled):** * **Description:** When the Autoplay option is checked, the slider will automatically transition through the slides without user interaction. This creates a more dynamic and engaging experience, as content is continuously showcased. Autoplay is especially effective for highlighting promotions, featured products, or any content you want to draw immediate attention to. ### Steps to Adjust the Autoplay Setting 1. **Select the Brand Style:** * Open your Shopify theme editor. * Navigate to the Brand Style settings. 2. **Locate the Autoplay Setting:** * Within the Brand Style settings, find the "Autoplay" option. 3. **Enable or Disable Autoplay:** * Check the box to enable Autoplay, allowing the slider to automatically transition through slides. * Uncheck the box to disable Autoplay, requiring users to manually navigate through the slider. 4. **Preview Changes:** * After selecting your preferred Autoplay setting, preview your store to observe how the slider behavior affects the user experience. * Ensure the chosen setting complements the type of content being displayed and aligns with your overall design strategy. ### Ensuring the Right Autoplay Behavior 1. **Preview Changes:** * After adjusting the Autoplay setting, preview your store to see how the automatic transitions look and feel. * Check various sliders across your site to ensure the Autoplay setting is applied consistently. 2. **Check Consistency:** * Ensure that the Autoplay feature enhances your brand’s aesthetic and doesn’t overwhelm the user with too fast or too slow transitions. Adjust the interval speed if necessary to maintain a balanced presentation. 3. **Test Across Devices:** * Verify that the Autoplay behavior is smooth and visually appealing on different screen sizes, maintaining readability and usability on both desktop and mobile devices. ### Summary By using the "Autoplay" setting in the AppSections Brand Style, you can control whether your sliders automatically transition through content, adding a dynamic element to your Shopify store. This feature can help draw attention to key areas of your site, ensuring a consistent and engaging user experience across all devices. If you have any questions or need further assistance, please contact our customer support team. # Autoplay Delay ### Autoplay Delay Setting in AppSections Brand Style The "Autoplay Delay" setting in the AppSections Brand Style allows you to control the time interval between automatic transitions of slides when the Autoplay feature is enabled. This setting provides flexibility in pacing the content flow, ensuring it matches your desired user experience. ### Autoplay Delay Options * **Purpose:** This setting allows you to define the delay time between each automatic slide transition when Autoplay is enabled. Adjusting the delay helps you control how quickly or slowly content is cycled through, which can enhance the overall user engagement and presentation. * **Usage:** Set the desired delay time using the provided range selector to control the interval between slides. ### **Options:** * **Range:** The delay can be adjusted between **0.4 seconds** and **20 seconds**. ### Steps to Adjust the Autoplay Delay Setting 1. **Select the Brand Style:** * Open your Shopify theme editor. * Navigate to the Brand Style settings. 2. **Ensure Autoplay is Enabled:** * First, ensure the Autoplay setting is checked, as the Autoplay Delay setting only applies when Autoplay is active. 3. **Locate the Autoplay Delay Setting:** * Within the Brand Style settings, find the "Autoplay Delay" option, which should be accessible once Autoplay is enabled. 4. **Set the Desired Delay:** * Use the range selector to set the delay time between slide transitions. * You can choose any delay between 0.4 seconds (for a fast-paced transition) to 20 seconds (for a slower, more relaxed transition). 5. **Preview Changes:** * After setting the Autoplay Delay, preview your store to see how the slider transitions behave with the chosen timing. * Adjust the delay if necessary to ensure the pacing matches the content and user experience you want to create. ### Ensuring the Right Autoplay Delay 1. **Preview Changes:** * After setting the Autoplay Delay, preview the slider to see how the delay affects the overall flow of content. * Check different sliders to ensure the delay is consistent and aligns with the type of content being displayed. 2. **Check Consistency:** * Ensure that the delay is neither too fast nor too slow, maintaining a smooth and engaging user experience. The pacing should be comfortable for viewers to absorb the content without feeling rushed or waiting too long. 3. **Test Across Devices:** * Verify that the Autoplay Delay behaves consistently across different screen sizes, ensuring a seamless experience on both desktop and mobile devices. ### Summary By using the "Autoplay Delay" setting in the AppSections Brand Style, you can precisely control the timing of automatic slide transitions when Autoplay is enabled. This allows you to fine-tune the user experience, ensuring that your sliders display content at the optimal pace for engagement and readability across all devices. If you have any questions or need further assistance, please contact our customer support team. --- [Next Page](/llms-full.txt/1)