AppSections
Download AppSectionsWebsite
  • HOME
  • GETTING STARTED
    • Get Started Here
    • Installation
    • Themes Compatibility
  • IN-APP
    • Application Overview
    • Library
      • Sections Library
      • Templates Library (Coming Soon)
      • Brand Styles Library
      • Wishlist
      • My Library
        • My Sections
        • My Templates (Coming Soon)
        • My Brand Styles
    • Switching Shopify Themes
    • Switching Pricing Plans
    • Uninstallation
  • Basics
    • Layers
    • Styles
      • Add Brand Style
      • Duplicate Brand Style
      • Hide Brand Style
      • Move Brand Style
      • Remove Brand Style
    • Templates (Coming Soon)
      • Add Template (Coming Soon)
      • Duplicate Template (Coming Soon)
      • Hide Template (Coming Soon)
      • Move Template (Coming Soon)
      • Remove Template (Coming Soon)
    • Sections
      • Add Section
      • Duplicate Section
      • Hide Section
      • Move Section
      • Remove Section
    • Groups
      • Add Group Block
      • Duplicate Group Block
      • Hide Group Block
      • Move Group Block
      • Remove Group Block
    • Blocks
      • Add Content Block
      • Duplicate Content Block
      • Hide Content Block
      • Move Content Block
      • Remove Content Block
  • Settings
    • Layout
      • Sections / Blocks
        • Column Widths Repartition
        • Display Device
    • Content
      • Sections / Blocks
        • Button Content
          • Button Layout
          • Button Style
          • Content
          • Custom Icon
          • Icon Button Presets
          • New Tab
          • URL
        • Color Content
          • Background Fill
          • Pattern Presets
          • Pattern Scale
          • Swap Color Order
        • Headline Content
          • Content
          • Select the Headline Font
        • Image Cover Content
          • Brightness
          • Select Image
        • Image Parallax
          • Brightness
          • Direction X
          • Direction Y
          • Distance
          • Movement
          • Select Image
        • Text Content
          • Content
          • Select the Text Font
        • Video Content
          • Brightness
          • Controls
          • Select Poster
          • Select Video
          • Style
        • YouTube Content
          • Autoplay ?
          • Brightness
          • Select Video
    • Slider
      • Styles
        • Effect
        • Position
        • Infinite Loop ?
        • Autoplay ?
        • Autoplay Delay
        • Pagination
        • Navigation ?
        • Pagination ?
      • Sections / Blocks
        • Type
        • Custom (Coming Soon)
        • Direction
        • Slide Number
    • Colors
      • Styles
        • Primary Color Schema
        • Secondary Color Schema
        • Tertiary Color Schema
        • Neutral Color Schema
      • Sections / Blocks
        • Alpha
        • Color Schema
        • Color Schema Hover
        • Lightness
    • Typographies
      • Styles
        • Body
          • Custom Font
          • Custom Font Choice
          • External Font Weight
        • Button
          • Custom Font
          • Custom Font Choice
          • External Font Weight
        • External Custom Fonts
        • Heading
          • Custom Font
          • Custom Font Choice
          • External Font Weight
        • Overwrite current font
    • Font Scales
      • Styles
        • Body
          • Font Size
          • Letter Spacing
          • Line Height
        • Button
          • Font Size
          • Letter Spacing
          • Line Height
        • Heading
          • Font Size
          • Letter Spacing
          • Line Height
    • Texts
      • Styles
        • Link
          • Custom Underline Thickness
          • Underline Skip Ink
          • Underline Style
          • Underline Thickness
        • Text Case
        • Underline
          • Underline Skip Ink
          • Underline Style
          • Underline Thickness
          • Custom Underline Thickness
    • Icons
      • Styles
        • Icon
        • Icon Custom
    • Design / Shapes
      • Styles
        • Border Width
        • Custom Shape
        • Shape Accentuation
        • Shape Preset
        • Shape Standard Direction
      • Sections / Blocks
        • Design Direction
        • Select Shape
    • Size
      • Styles
        • Button Size
          • Min-Width
        • Sections Width
      • Sections / Blocks
        • Button Size
        • Button Width
        • Full Height
        • Min Height
        • Width
    • Margin
      • Styles
        • Margin Top/Bottom
      • Sections / Blocks
        • Extra Margin Bottom
        • Extra Margin Top
    • Padding
      • Styles
        • Padding Right/Left
      • Sections / Blocks
        • Horizontal Padding
        • Vertical Padding
    • Positionning
      • Styles
        • Buttons Positionning
          • Horizontal Alignment
          • Horizontal Padding
          • Text Align
          • Vertical Alignment
          • Vertical Padding
      • Sections / Blocks
        • Horizontal Alignment
        • Position
        • Text Align
        • Vertical Alignment
        • Z Index
    • Gap
      • Styles
        • Horizontal Gap
        • Vertical Gap
      • Sections / Blocks
        • Gap
    • Slider Gap
      • Styles
        • Gap
      • Sections / Blocks
        • Gap
    • Transform
      • Sections / Blocks
        • Perspective
        • Rotate X
        • Rotate Y
        • Rotate Z
    • Media Adjustment
      • Sections / Blocks
        • Horizontal Adjustment
        • Media Zoom
        • Vertical Adjustment
    • Shadows
      • Styles
        • Alpha
        • Blur
        • X
        • Y
      • Sections / Blocks
        • Shadow
    • Children Alignment
      • Sections / Blocks
        • Align
        • Direction
        • Distribute
        • Relative Behavior
    • Sticky
      • Sections / Blocks
        • Sticky Behavior
        • Sticky Position
    • Animations
      • Styles
        • Appear Animation
          • Amplitude
          • Delay
          • Duration
          • Once?
          • Opacity Start
          • Timing Function
        • Hover Color Animation
          • Animation Duration
          • Hover Primary Color Schema
            • Invert Schema Hover
            • Opacity Lightness Hover
          • Hover Secondary Color Schema
            • Invert Schema Hover
            • Opacity Lightness Hover
          • Hover Tertiary Color Schema
            • Invert Schema Hover
            • Opacity Lightness Hover
          • Hover Neutral Color Schema
            • Invert Schema Hover
            • Opacity Lightness Hover
        • Triggered Animations
          • Amplitude
          • Duration
          • Infinite?
          • Preset & Variant
          • Timing Function
          • Trigger
      • Sections / Blocks
        • Appear Animation
        • Appear Animation Direction
        • Triggered Animation
    • Code Overrides
      • Sections / Blocks
        • Code Overrides / Custom CSS
    • Extra Style
      • Styles
        • Custom Cursor
          • Activate Custom Cursor
          • Icon Custom Cursor
          • Icon Custom Cursor on Click
          • Cursor Background
          • Cursor Size
        • Custom Scrollbar
          • Activate Custom Scrollbar
          • Scrollbar Color
          • Scrollbar Background
          • Scrollbar Width
  • Resources
    • Helpful resources
    • Privacy Policy
    • Changelog
    • Affiliate Program
    • AppSections Shopify Apps
    • AppSections Website
    • BlockLoads Website
    • AppSections Instagram
    • BlockLoads YouTube
    • BlockLoads Threads
    • BlockLoads X (Twitter)
    • AppSections Pinterest
    • AppSections Facebook
    • AppSections Linkedin
    • BlockLoads Linkedin
    • AppSections Tiktok
Powered by GitBook
On this page
  • What is a Brand Style?
  • Importance of Brand Styles
  • Using Brand Styles in AppSections
  • Customizing Brand Styles
  • Important Notes
  • Tutorials
  • Maintaining and Updating Brand Styles

Was this helpful?

  1. Basics

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.

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.

Last updated 9 months ago

Was this helpful?

Add Brand Style
Move Brand Style
Duplicate Brand Style
Hide Brand Style
Remove Brand Style