Settings

Accordion dynamic content settings

The Dynamic content settings - Accordion is a core theme setting group that manages how dynamic content is displayed across your site in an accordion format. These settings influence the app-wide look and feel, enhancing user experience by organizing information in expandable tabs. While generally applied globally, they can be overridden at the section or block level for more specific customization. Key components include settings for selecting a specific Blog and filtering content by Tag, which are essential for displaying blog-related content within the accordion. The Number of items setting allows you to control the amount of content shown, with a range from 0 to 50 and a default of 0. The Show excerpt and Show link to content settings provide users with content previews and direct links to full content, enhancing engagement. Usage examples include dynamically pulling and displaying content from a specific blog using the Blog and Tag settings, managing content volume with the Number of items setting, and increasing user interaction by enabling the Show excerpt and Show link to content settings. These settings ensure your site is both engaging and easy to navigate for users.

Alignment settings

The alignment settings are essential for controlling the overall look and feel of your shop, ensuring consistent content display across different devices. These settings can be applied globally or customized at the section or block level, providing flexibility in design. The alignment settings allow you to manage how text and other content are aligned within your theme. This includes adjusting horizontal alignment for both desktop and mobile devices, ensuring a visually appealing and consistent presentation. For desktop, you might consider aligning content to the left, center, or right based on your design preferences. For mobile, different alignment settings can optimize the viewing experience, considering the unique screen sizes and user interactions. These settings offer a flexible way to enhance both the aesthetic appeal and usability of your online store, making it easy to tailor the alignment of content to suit your specific needs.

Article metadata settings

The Article Meta setting group provides essential controls for displaying article metadata across your site, ensuring a consistent and engaging presentation. These settings allow you to manage the visibility of the author's name, publication date, and associated tags on articles. While these settings are applied universally, they can be customized at the section or block level for more specific needs. Enabling the Display author setting can enhance credibility by providing readers with context about the content's creator. The Display date setting helps readers assess the timeliness and relevance of the content, which is particularly useful for news articles or time-sensitive information. Activating the Display tags setting improves site navigation by allowing users to explore related topics easily, enhancing the overall user experience.

Aspect ratio settings

The Aspect ratio settings are essential for controlling the visual presentation of images across the shop, ensuring a consistent and harmonious look. These settings can be applied globally but also allow for customization at the section or block level, providing flexibility in design. The Aspect ratio setting defines the shape and proportion of images, offering options such as Default, Landscape, Portrait, Square, Ultrawide, and Widescreen. Each option caters to different visual needs, from uniform image presentation to cinematic displays. For mobile devices, the Aspect ratio - Mobile setting optimizes images for smaller screens, allowing for different aspect ratios to accommodate varying design requirements. This ensures that images maintain their intended impact across all devices. Usage examples include setting the aspect ratio to Square for consistent image display, adjusting to Portrait for optimal mobile presentation, and using Ultrawide for dramatic homepage banners. These settings provide a solid foundation for enhancing the aesthetic appeal and user experience of the shop.

Background settings

The background settings for sections are crucial for defining the overall look and feel of your online store. These settings allow for customization of colors, gradients, images, and videos, providing flexibility in design and ensuring a cohesive aesthetic throughout the store. They are applied across the entire site but can be overridden at the section or block level. Key components include background color, background gradient, overlay color, overlay gradient, and overlay opacity. These settings enable you to create a consistent color theme, enhance text readability, and add depth to your store's design. Additionally, background image and background video settings allow for dynamic visual elements, with mobile-specific options ensuring optimal display on all devices. Usage examples include creating a cohesive brand aesthetic by using the background color and gradient settings, enhancing text readability with overlay color or gradient, and optimizing for mobile devices with mobile-specific background image and video settings. These settings provide a robust framework for customizing the visual elements of your online store, allowing you to create a unique and engaging shopping experience for your customers.

Banner alignment settings

The settings outlined here are essential for defining the overall look and feel of an online shop. These core theme settings are applied globally but can be customized at the section or block level to maintain a consistent design and user experience throughout the site. The Banner alignment setting group allows you to control the positioning of content within banners. This includes both horizontal and vertical alignment options, ensuring that text and images are displayed in a visually appealing manner. Horizontal alignment options include left, center, and right, while vertical alignment options include top, middle, and bottom, with the default being bottom. For practical usage, you might consider centering both the horizontal and vertical alignment to highlight a call-to-action button in a banner, ensuring it is prominently displayed. Alternatively, aligning text to the left can create a clean and organized look for banners with a lot of text, especially when paired with an image on the right. These settings offer flexibility in designing banners that meet the aesthetic and functional needs of your shop.

Banner background media settings

The Banner Background settings are essential for defining the visual presentation of banners across your shop. These settings are applied globally but can be customized at the section or block level for more specific design needs. They allow you to select images or videos for both desktop and mobile views, ensuring a cohesive and visually appealing shop design. Key components include options for Background Image Fit, which determines how images are displayed within the banner area, and settings for selecting specific images or videos for desktop and mobile devices. This flexibility ensures that your banners are optimized for different devices and screen sizes. Usage examples include using high-quality images or videos for promotional banners, changing backgrounds to reflect seasonal themes, and selecting specific assets for mobile optimization. These settings provide the flexibility needed to tailor your shop's appearance to different marketing needs and device considerations.

Banner color settings

The Color settings - Banners allow you to customize the color scheme of banners across your site, ensuring they align with your brand's visual identity. These settings are crucial for maintaining consistent branding and aesthetic appeal, while also providing flexibility for adjustments at the section or block level. Key settings include options for background color, background gradient, border color, heading color, icon color, subheading color, text color, overlay color, overlay gradient, and overlay opacity. These settings enable you to fine-tune the visual presentation of banners, enhancing readability and visual impact. For practical usage, you might consider creating promotional banners using background gradients and overlays to highlight special offers. Customizing banner colors to match your brand's palette ensures consistency across your site. Additionally, updating banner colors for seasonal themes can enhance the thematic experience for your customers.

Banner foreground content settings

The Banner foreground content setting group is essential for managing the visual and functional elements of banners across the theme. These settings allow you to control alignment, text, and button styles, ensuring a cohesive look and feel throughout the shop. While generally applied globally, these settings can be customized at the section or block level for more specific design needs. Key components include alignment settings for positioning content horizontally and vertically, text and icon settings for adding and styling text and icons, and button settings for configuring button appearance and functionality. Link settings ensure that links within the banner are visually consistent with the theme's design. Usage examples highlight the flexibility of these settings. For a promotional banner, you might consider centering the content, adding a heading and subheading, and using a primary button style to encourage user interaction. For informational banners, adding an icon and caption can provide context, while setting the button to open in a new tab can direct users to external resources. Event announcements can benefit from using button layout settings to place an icon on the button, with a secondary style for a subtle call-to-action. These examples demonstrate how the settings can be tailored to enhance the overall theme of the shop.

Banner foreground media settings

The Banner Foreground Media setting group is essential for controlling the visual presentation of media elements across your theme. These settings define how images and links are displayed in the banner foreground, contributing to the overall look and feel of your shop. They are applied globally but can be customized at the section or block level for more specific design needs. Key components include the Image setting, which allows you to select an image for the banner foreground, and the Image style setting, offering options like Default, Rounded corners, and Circle. The Max image width setting lets you adjust the image width from 0 to 1600 pixels, with a default of 160 pixels. The Link setting enables you to add a URL to the image, directing users to specific pages or external sites. Usage examples include creating a promotional banner with a modern look by using rounded corners and linking to a special offer page. For a profile display, you might choose a circle style for a professional appearance and link to a personal profile. Highlighting a product can be achieved by maintaining the default style and linking directly to the product page. These settings provide a versatile framework for enhancing both aesthetics and functionality in your theme.

Banner settings

The Banner settings group offers essential controls for managing the appearance and functionality of banners across your shop. These settings are applied globally but can be tailored at the section or block level to meet specific needs. They enable you to customize visual and interactive elements, ensuring a cohesive and appealing look throughout your store. Key components include options for background images and videos, foreground content alignment, and text elements. You can adjust the color scheme to match your brand's identity, using gradients and overlays for added visual interest. The settings also allow for mobile-specific adjustments, ensuring optimal display on all devices. Usage examples highlight the flexibility of these settings. You might consider creating a promotional banner with a background image or video, centrally aligned content, and a call-to-action button. For mobile devices, selecting different images or videos ensures the banner looks great on smaller screens. Customizing the color scheme with gradients can enhance the dynamic look of your banners, aligning them with your brand's aesthetic.

Block layout settings

The Block layout settings are essential for defining the overall look and feel of your shop by controlling the layout and appearance of blocks across the entire site. These settings are applied globally but can be customized at the section or block level for more detailed adjustments. They ensure a responsive and visually appealing layout by allowing you to specify the number of columns for different screen sizes. For desktop devices, you can choose a column count between 1 and 12, with a default of 1. This flexibility helps optimize content density on larger screens. Tablet settings range from 0 to 8 columns, with a default of 0, allowing for a balanced display on medium-sized screens. Mobile settings offer 1 to 4 columns, with a default of 1, ensuring content remains accessible on smaller screens. Usage examples include setting a higher column count for desktop viewing to display more content side-by-side, choosing a moderate column count for tablets to balance between desktop and mobile layouts, and maintaining a single column on mobile devices for easy navigation and readability. These settings are crucial for creating a responsive design that adapts to various screen sizes, enhancing both the aesthetic appeal and usability of your online store.

Caption settings

The Caption settings group is essential for managing how captions appear and function across your shop. These settings ensure a cohesive look and feel, allowing captions to enhance media content without overshadowing it. They can be applied universally or customized at the section or block level, providing flexibility to match your shop's design aesthetic. Key components include Caption media, which specifies whether the caption is associated with an image or video, and Text alignment, which offers options for left, center, or right alignment. The Caption position setting allows you to choose whether the caption appears at the top or bottom of the media, impacting visual hierarchy and readability. The Text size setting provides options from small to extra large, with a default of medium, ensuring legibility across devices. For practical usage, you might consider using the Caption settings to highlight product features by placing a descriptive caption at the bottom of a product image, aligned to the center, with a medium text size. For video descriptions, positioning the caption at the top with a large text size can immediately grab attention, maintaining a clean and professional look. These settings offer a versatile framework for enhancing media presentation, ensuring captions are both functional and aesthetically pleasing.

Card color settings

The settings outlined here are designed to control the app-wide look and feel of your shop, focusing on visual aspects such as colors and overlays. These core theme settings are organized into groups and are generally applied throughout the entire shop, but they can be overridden at the section or block level for more granular customization. The Color settings - Cards allow you to customize the color scheme of cards used throughout the theme. You can adjust the background, gradient, border, heading, and text colors to match your brand's aesthetic. This flexibility ensures that your cards can display various types of content, such as products, collections, or articles, in a visually appealing manner. The Banner color settings focus on the visual customization of banners, which are typically used for promotions or important announcements. You can choose overlay colors, apply gradient effects, and control overlay opacity to enhance text visibility against background images. For usage examples, you might consider adjusting card background and border colors to create a unique look that matches your brand. Additionally, applying a semi-transparent black overlay with a gradient effect on banners can help promotional text stand out without obscuring the background image. These settings provide a flexible way to maintain a cohesive visual identity across your shop while allowing for specific customizations where needed.

Color swatch settings

The Color Swatch Settings group allows you to manage the appearance and functionality of color swatches across your theme. These settings enhance the visual appeal and usability of your store by customizing how color options are displayed for products. While applied globally, they can be overridden at the section or block level for more detailed control. Key settings include the ability to display color swatches, choose from various swatch styles, and adjust the number of swatch columns for both desktop and mobile devices. This flexibility ensures a responsive design that adapts to different screen sizes, enhancing the shopping experience. Usage examples include enabling the Display color swatches setting to allow customers to easily select their preferred color options. You might consider customizing the swatch style to complement your store's design, and adjusting the column count settings to ensure an organized layout across devices. By configuring these settings, you can create a visually appealing and user-friendly interface.

Column settings

The settings outlined here define core theme configurations that control the overall look and feel of an online shop. These settings are applied globally but can be overridden at the section or block level. They focus on layout and structure, ensuring a consistent and customizable user experience across devices. Column settings allow you to define the number of columns displayed on different devices, optimizing layout and readability. For desktops, you can choose between 1 and 8 columns, with a default of 4. Tablets offer a range from 0 to 8 columns, defaulting to 0, which uses the desktop setting if unchanged. Mobile devices range from 1 to 4 columns, with a default of 1. These settings are crucial for maintaining a responsive design. For example, you might consider setting a higher column count on desktops to display more content simultaneously, while keeping mobile column counts lower to enhance readability and usability. This flexibility ensures a seamless and user-friendly experience across all screen sizes.

Dynamic content settings

The dynamic content settings are crucial for managing the overall look and feel of your theme. These settings are applied globally but can be overridden at the section or block level, allowing for the automatic integration of content from various sources. This enhances the flexibility and customization of your theme, ensuring that the most relevant and up-to-date information is displayed across your site. Key components include the blog setting, which allows you to specify a blog from which content can be dynamically pulled, and the tag setting, which enables the use of specific tags to filter and display content. The number of items setting controls the volume of content displayed, with a range from 0 to 50 and a default value of 0. Usage examples include integrating blog content into a homepage section to keep your site updated with fresh content, utilizing the tag setting to display content related to specific promotions or events, and adjusting the number of items setting to manage how much content is displayed in a section. These settings provide a robust framework for managing dynamic content, ensuring your site remains engaging and relevant to your audience.

Editor settings

The Editor settings group is an essential part of theme settings, designed to manage the overall look and feel of the shop. These settings are applied globally but can be customized at the section or block level for more specific adjustments. They enhance user experience by allowing for personalization and organization within the theme editor. The Title setting within the Editor settings allows users to define a custom title for the theme editor. This feature aids in organizing and identifying different themes or versions, making it easier to manage multiple themes. For practical usage, you might consider setting a unique title for each theme to easily distinguish them within the editor. This can be particularly useful for identifying themes used for specific promotions, like a "Summer Sale Theme." Additionally, customizing the editor settings can streamline workflows by providing descriptive titles that help team members understand the purpose or status of a theme at a glance.

Filter settings

The filter settings are essential theme settings that enhance the shopping experience by allowing customers to sort and filter products according to their preferences. These settings are applied globally across the shop but can be customized at the section or block level for more specific needs. Key settings include Display filters, which enables or disables the filter display, allowing customers to narrow down product selections. The Display in-stock items setting helps customers find available products by showing only those currently in stock. Display sorting options allows customers to sort products by criteria such as price or popularity, enhancing their shopping experience. For practical usage, you might consider enabling the Display filters setting to allow customers to filter products by categories like size or color. Using the Display in-stock items setting can help reduce customer frustration by showing only available products. Enabling Display sorting options provides flexibility for customers to sort products according to their preferences, aiding in quicker purchasing decisions. These settings collectively improve the store's functionality and user experience.

Footer layout settings

The layout settings are essential for defining the overall look and feel of your shop, impacting how content is displayed across the entire site. These settings allow you to organize content into columns and rows, ensuring a visually appealing and functional layout. While applied globally, they can be customized at the section or block level for more detailed control. The Fill available space setting enables content to stretch and fill its container, providing a balanced appearance. The Show in new column option allows for a multi-column layout, enhancing readability by displaying content side-by-side. Meanwhile, the Show in new row setting stacks content vertically, creating a clear hierarchy of information. For practical application, you might consider enabling the Fill available space to create a cohesive look. Using the Show in new column can enhance the shopping experience by organizing related content side-by-side. The Show in new row option is ideal for stacking content like testimonials or blog posts, making it easy for users to scroll through and consume information. These settings offer flexibility in designing a visually appealing and user-friendly shop layout.

Grid size settings

The grid size settings are essential for configuring the overall look and feel of your shop by managing how content is displayed in a grid format. These settings are applied globally but can be customized at the section or block level to ensure a responsive and visually appealing layout on both desktop and mobile devices. The default grid size setting allows you to choose between three or four columns for larger screens, impacting the presentation and accessibility of content. For mobile devices, the default grid size - mobile setting offers one or two-column options, ensuring content is easily viewable and navigable on smaller screens. Additionally, the enable grid size interface setting allows users to interact with and adjust the grid size settings directly, enhancing the user experience by providing more control over content display. Usage examples include adjusting the grid size to four columns for more content on larger screens, opting for a one-column layout on mobile for a cleaner presentation, and enabling the grid size interface for dynamic layout adjustments. These settings provide a flexible foundation for creating a visually appealing and user-friendly shop layout.

Header settings

The Header settings group is essential for defining the overall look and feel of your shop's header. These settings are applied globally but can be customized at the section or block level for more specific adjustments. They include options for text alignment, icons, headings, and button styles, providing a cohesive and customizable framework for your online store's header. Key components include text alignment, which allows you to control the alignment of text within the header, and icon, which lets you add visual elements to enhance aesthetic appeal. The heading and subheading settings define the main title and additional text layers, crucial for structuring your page and improving SEO. Button-related settings such as button icon, button text, and button style offer various customization options to enhance user interaction. You can also control the button's position and layout, both on desktop and mobile, ensuring a seamless user experience across devices. For practical usage, you might consider using the text alignment setting to center-align your header text, drawing attention to important announcements. Adding an icon next to your main heading can visually indicate the page's purpose, such as a shopping cart icon for a checkout page. For calls to action, choosing a primary button style can ensure it stands out against other elements on the page.

Image overlay settings

The overlay settings are integral to the core theme settings, designed to enhance the overall look and feel of the shop. These settings apply a consistent aesthetic across the theme but allow for customization at the section or block level for specific design needs. By adding layers of color and transparency, overlay settings help create a cohesive design and draw attention to particular areas. Key components include the overlay color, which lets you select a color for the overlay to create a uniform look or highlight specific areas. The overlay gradient adds depth and visual interest with a gradient effect, while the overlay opacity controls transparency, ranging from 0% to 100%, with a default of 48%. Usage examples include using a semi-transparent overlay color to highlight featured products subtly, applying an overlay gradient to promotional banners for added depth, and adjusting overlay opacity on text-heavy sections to ensure readability while maintaining a cohesive design.

Image settings

The image settings are designed to control the appearance and functionality of images across your shop, ensuring a consistent visual style while allowing for customization at the section or block level. These settings include options for selecting images, customizing image styles, and defining maximum image widths and aspect ratios for both desktop and mobile devices. With the image style setting, you can choose from default, rounded corners, or circle styles to enhance the visual appeal of your images. The max image width setting allows you to specify the maximum width of images, providing flexibility in how images are displayed. The aspect ratio settings ensure that images maintain their intended shape across different devices, with specific options available for mobile to optimize display on smaller screens. Additional settings include the ability to set a border color for images, add clickable links, and decide whether these links should open in a new tab. These features enable you to create interactive elements that enhance user engagement without disrupting their browsing experience. In practice, you might consider using the image style and border color settings to align images with your brand's visual identity. The aspect ratio settings can be adjusted to ensure images display correctly on both desktop and mobile devices, maintaining a professional appearance across different screen sizes. By setting links on images and choosing to open them in a new tab, you can create interactive elements that enhance user engagement.

Image swatch settings

The Image Swatch Settings are essential for controlling the global appearance of image swatches across your shop. These settings allow you to visually represent product variants, such as different colors or styles, using images. They are applied globally but can be customized at the section or block level to suit specific needs. Key settings include enabling or disabling the display of image swatches, choosing from various swatch styles like circle or square, and setting the number of columns for swatches on both desktop and mobile devices. The flexibility in column settings allows for optimal display across different screen sizes. Usage examples include enabling the Display swatch image setting to enhance the shopping experience by providing a visual representation of each variant. You might consider selecting a swatch style that complements your theme's design, such as a modern circle style. Adjusting the column count for desktop and mobile ensures that swatches are displayed neatly and are easy to navigate, improving the overall user experience.

Imagery settings

The Imagery settings group is essential for managing the visual presentation of images across your theme. These settings ensure a consistent look and feel throughout your shop, while also allowing for customization at the section or block level for more specific adjustments. The Imagery layout setting provides flexibility in positioning images within your theme, offering options to display them at the top or bottom of the designated area. The default setting places images at the bottom, but you can choose the top position to enhance visual hierarchy. The Image selection setting allows you to choose an image to be used within the theme. This tool enables you to upload or select an image from your library, ensuring that your visuals align with your brand's aesthetic. For practical application, you might consider selecting the top option in the imagery layout setting to draw attention to product images. Additionally, using the image selection setting to upload a high-quality image can enhance the visual appeal of your shop, representing your brand or specific products effectively.

Layout settings

The layout settings are essential for defining the overall look and feel of your shop, applied globally but customizable at the section or block level. These settings ensure effective content display on both desktop and mobile devices, providing a cohesive and responsive design. Key components include the desktop column count, allowing you to specify between 1 and 8 columns, with a default of 4, and the mobile column count, ranging from 1 to 4, with a default of 2. These settings help optimize content arrangement for different screen sizes. The desktop layout and mobile layout settings offer options between a grid or slider format, enhancing visual appeal and usability. It's important to consider different settings for mobile to accommodate varying user experiences and screen sizes. Usage examples include adjusting column counts for seasonal promotions or switching layouts for a new collection launch. These settings provide a robust framework for customizing your store's visual presentation, ensuring a cohesive and responsive design across all devices.

Main navigation layout settings

The settings for managing the layout of main navigation blocks are crucial for defining the overall look and feel of the shop. These settings are applied app-wide but can be overridden at the section or block level, ensuring a consistent and customizable user experience across the site. The Layout settings - Main navigation blocks allow you to customize how navigation elements are displayed. The Display fill available space setting enables navigation elements to stretch and occupy the full width of their container, providing a balanced appearance. The Display centered setting aligns navigation blocks to the center, creating a symmetrical and aesthetically pleasing layout. For practical usage, you might consider enabling the Display fill available space option if your navigation menu has fewer items and you want them to spread out evenly across the header. Alternatively, enabling the Display centered option can be effective for minimalist designs, aligning navigation items centrally on pages with ample whitespace or single-column layouts. These settings offer flexibility in presentation, aligning with the theme's design goals.

Out of stock settings

The out-of-stock settings are essential for managing how unavailable products are displayed in your store. These settings influence the visibility and arrangement of out-of-stock items, affecting the overall aesthetic and functionality of your shop. They are applied globally but can be customized at the section or block level if needed. The out-of-stock settings offer options to control the visibility and placement of unavailable products. You can choose to display them in their usual position, hide them entirely, or move them to the end of product listings. This flexibility helps maintain a seamless shopping experience by clearly communicating product availability. For practical application, you might consider using the Default option to keep the standard product order, ideal for stores with frequent restocks. The Hide option is suitable for showcasing only available products, reducing customer frustration. Alternatively, the Show at end option allows customers to see the full range of items while prioritizing in-stock products. These settings help manage customer expectations and enhance the shopping experience.

Padding settings

The padding settings are integral to the core theme settings, influencing the overall look and feel of a shop. These settings are applied globally but can be customized at the section or block level. They manage the spacing around content sections on both desktop and mobile devices, ensuring a balanced and aesthetically pleasing layout. The padding settings allow you to adjust the space above and below content sections, which is crucial for maintaining consistent spacing across different devices. This enhances the user experience by providing a visually appealing and user-friendly interface. For practical use, you might consider setting the top and bottom padding for both desktop and mobile to maintain a consistent look and feel across devices. If a particular section requires more or less space, adjusting the padding settings can provide the necessary flexibility. Additionally, using different padding values for desktop and mobile can optimize the viewing experience, ensuring content is appropriately spaced for each device type.

Product card settings

The card settings for products are essential for controlling the visual presentation of product cards across your site. These settings allow you to customize the style, image aspect ratio, button appearance, text display, and alignment, providing a cohesive and tailored shopping experience. While these settings are applied globally, they can be adjusted at the section or block level for more specific customization. Key settings include card style, which offers options like banner and no image, and image aspect ratio, which supports various formats such as landscape and square. The button style setting allows for different call-to-action designs, while text display and alignment settings manage how text content is presented and positioned on the cards. For practical application, you might consider using the Banner card style to highlight promotional products or setting the image aspect ratio to Square for uniformity. Choosing Icon only for button style can create a minimalist look, focusing attention on the product image and details. These settings provide a flexible foundation for designing product displays that align with your brand's unique aesthetic and functional needs.

Product card slideshow settings

The Product card slideshow settings are essential for controlling the appearance and behavior of product slideshows across your site. These settings ensure a cohesive look and feel, while allowing for customization at the section or block level. Key components include animation style, autoplay options, and pagination settings, which collectively enhance the visual appeal and functionality of your slideshows. Animation style options, such as default and fade, allow you to choose the transition effect between slides. Autoplay settings enable automatic slide transitions, with adjustable delay and speed to control the pacing. Pagination and navigation settings provide users with controls to navigate through slides, enhancing user interaction. Usage examples include creating dynamic product showcases by enabling autoplay, customizing slideshow appearance with animation styles, and optimizing for different devices by adjusting column counts for desktop and mobile. These settings offer flexibility to tailor the slideshow experience to your brand's aesthetic and user needs.

Product gallery settings

The Product gallery settings are essential for managing the display of product images across your shop, ensuring a cohesive and visually appealing presentation. These settings allow for global application while also offering customization at the section or block level. Key components include options for image aspect ratios, column widths, gallery positions, styles, and zoom functionalities, all tailored for both desktop and mobile devices. For image aspect ratios, you can select from various options to ensure optimal display on different screen sizes. The gallery style settings provide flexibility in layout, allowing you to choose between single-column, multi-column, or slider formats. Additionally, the gallery zoom style enhances user interaction by offering different zoom options, such as lightbox or theme settings. Usage examples include considering different aspect ratios for desktop and mobile to optimize image display, experimenting with gallery styles for dynamic layouts, and enabling zoom features to improve customer engagement. These settings provide a robust foundation for tailoring the visual experience of your shop to meet diverse needs and preferences.

Section width settings

The Width settings group is essential for controlling the overall width of content and sections throughout the site. These settings are applied globally but can be customized at the section or block level for more specific design needs. They play a crucial role in shaping the visual layout and user experience of the shop. The Content width setting allows you to define the maximum width of the content area, ensuring consistent display across different devices. Options range from predefined widths like 768px to 1600px, or you can choose to have no maximum width for full-width content display. The Section width setting offers flexibility in how individual sections are displayed, with options such as content width, full-width, and full-bleed. This allows for different layout styles and visual emphasis within the theme. For practical usage, you might consider setting the section width to full-bleed for a visually impactful hero section. Maintaining a consistent content width can provide a cohesive look throughout the site. Additionally, using narrower content widths for mobile devices can enhance readability and navigation, accommodating varying design needs and user experiences.

Separator settings

The separator settings are essential for controlling the visual separation between different sections of your shop, contributing to a clean and organized layout. These settings are applied universally across the theme but can be customized at the section or block level for specific design needs. They allow you to define the style and color of lines that separate sections, enhancing the overall user experience. With the separator settings, you can choose from various styles such as dashed, dotted, solid lines, or opt for no line at all. The color of these separators can be customized to match your theme's color scheme, ensuring visual consistency and appeal. In practice, you might consider using subtle lines to organize content and guide the user's eye through the page. Alternatively, contrasting colors can be used to highlight specific sections like promotional banners or featured products. For a minimalist design, opting for no separators can help maintain a clean and content-focused layout.

Share and print settings

The Share and Print Settings allow you to manage the visibility of print and share buttons across your site. These settings are applied globally but can be customized at the section or block level to enhance user interaction and accessibility. The Show print button setting enables users to print pages directly from the site, which is beneficial for those who prefer physical copies of information. The Show share button setting allows users to share content on various platforms, helping to increase your site's reach and engagement. You might consider enabling the Show print button to allow users to print product pages or blog posts. Keeping the Show share button enabled encourages users to share your content on social media or via email, potentially boosting your site's visibility and interaction. These settings provide flexibility in how users engage with your site, enhancing both usability and accessibility.

Sidebar settings

The Sidebar settings group enhances the sidebar's functionality and appearance across your theme. These settings allow you to control the display of related products and customize the sidebar heading, providing a more engaging and personalized shopping experience. By utilizing a proprietary algorithm, the sidebar can automatically display products linked within your article content, enriching the user's browsing experience. Key components include the Display related products setting, which determines whether related products are shown in the sidebar. Enabling this feature can enhance product discovery and potentially increase sales by suggesting additional items of interest. The Heading sidebar setting allows you to customize the sidebar's heading text, aligning it with your store's theme or specific content. Usage examples include enabling the Display related products setting to automatically showcase related products, helping customers discover new items. Additionally, you might consider using the Heading sidebar setting to personalize the sidebar's heading, such as changing it to "Explore More Gadgets" for an electronics store. These settings offer flexibility, allowing for a tailored shopping experience adaptable to various themes and product types.

Slideshow control settings

The Slideshow control settings are essential for managing the functionality and appearance of slideshows within the theme. These settings ensure a consistent look across the site but can be customized at the section or block level. They allow you to control animation style, speed, autoplay, and navigation, enhancing the visual engagement of your site. Key settings include options for animation style, such as Default and Fade, and controls for animation speed and autoplay delay. You can also position controls vertically, choose pagination styles, and enable or disable features like looping slides, navigation, and pagination visibility. For practical usage, you might consider using the dynamic pagination style with autoplay for a self-running slideshow. Alternatively, setting the animation style to fade and disabling autoplay can help highlight key features by allowing manual navigation. Enabling loop slides and autoplay can create a continuous product showcase, ensuring constant visibility of your offerings.

Slideshow settings

The Swiper settings group manages the core theme settings for slideshow animations and behaviors, influencing the overall look and feel of the shop's slideshows. These settings include options for animation styles, autoplay functionality, and more, and are applied throughout the theme with the flexibility to customize at the section or block level. Key settings include Animation style, which offers options like Default and Fade for slideshow transitions, and Autoplay slideshow, which controls automatic slide progression. The Autoplay delay and Animation speed settings allow you to fine-tune the timing and speed of transitions, while Loop slides ensures a seamless viewing experience by continuously cycling through slides. Additionally, Show preview of next slides provides a glimpse of upcoming slides, enhancing the slideshow's interactivity. Usage examples include enabling Loop slides for a continuous slideshow experience, using the Fade animation style for elegant transitions, and setting a shorter Autoplay delay with a faster Animation speed for dynamic presentations. These settings offer flexibility to tailor the slideshow experience to fit the aesthetic and functional needs of your shop.

Sort settings

The Sort settings group is essential for managing how products are sorted and displayed across your store, impacting the overall look and feel. These settings are applied globally but can be customized at the section or block level for more specific needs. The Sort by setting allows you to choose the criteria for sorting products, such as by Title or Date published. This enhances the browsing experience by letting customers view products based on specific attributes. The Sort order setting determines the sequence in which products are displayed, offering options like Ascending or Descending. This flexibility allows for strategic presentation of products to align with your merchandising goals. For example, you might consider setting the Sort by option to Title and the Sort order to Ascending to list products alphabetically. Alternatively, setting the Sort by option to Date published and the Sort order to Descending can highlight the newest products at the top of the list.

Video overlay settings

The overlay settings for video are essential for enhancing the visual presentation of video content across your theme. These settings allow you to apply overlays, ensuring a consistent and appealing look that aligns with your brand's aesthetic. They are applied globally but can be customized at the section or block level if needed. The overlay settings - video include options for applying a solid color or gradient overlay, as well as controlling the transparency level with the overlay opacity setting. This flexibility allows you to maintain a cohesive and visually appealing design across your theme. For practical usage, you might consider using the overlay color to apply your brand's primary color over all video content, ensuring alignment with your overall brand aesthetic. If you have text overlaid on your videos, using a gradient overlay with higher opacity can ensure text legibility. Additionally, applying a subtle gradient overlay can add visual interest to your videos without distracting from the content.

Video settings

The video settings are designed to control the app-wide look and feel of video elements across the shop, ensuring consistent and responsive display. These settings can be applied universally or customized at the section or block level, enhancing the visual appeal and functionality of the shop. Key components include the video service URL, which allows embedding videos from YouTube or Vimeo, and the Shopify-hosted video option for using videos hosted directly on the platform. The video poster image setting lets you select an image to display as the first frame of your video, providing a visual cue before playback. The aspect ratio and aspect ratio for mobile settings determine the shape of the video display, with options like landscape, portrait, and widescreen. The maximum video width controls the video's width in pixels, while the autoplay video, loop video, mute video, and show video player controls settings offer additional customization for video playback. Usage examples include embedding promotional videos on your homepage, showcasing product demonstrations with hosted videos, and adjusting aspect ratios for optimal mobile viewing. These settings provide flexibility and control, allowing for a tailored and engaging user experience.

Visibility settings

The Visibility settings are integral to managing the app-wide display of elements across your shop. These settings ensure a consistent look and feel by controlling when and where components are visible. They can be applied globally, with the option for more detailed customization at the section or block level. Visibility settings allow you to tailor the user experience based on the device being used, such as desktops or mobile devices. This flexibility ensures that content is presented in the most appropriate format, enhancing the overall user experience. For example, you might consider setting the visibility to "Hide on mobile" for promotional banners that are too large for mobile screens, ensuring they only appear on desktop devices. Similarly, for content relevant only to desktop users, such as detailed product comparisons, you might set the visibility to "Hide on mobile" to maintain a clean mobile interface. These strategic uses of Visibility settings help display content that is most suitable for the device being used.

Settings

Subscribe to our emails