Website Themes
15 min
ov ervi ew a theme defines the overall look, feel, and style of your website it includes key visual elements such as color schemes, layouts, and design components that work together to create a cohesive appearance purpose a well designed website theme helps create a strong first impression and enhances the user experience it directly reflects your brand identity and plays a vital role in building trust and engagement with your customers configuration this guide will help you select, apply, and manage website themes to ensure a visually appealing and brand consistent online presence the dashboard lists all the storefront themes available you can take a quick preview of the themes and select one as your storefront theme website logos this is the screen where you can add a logo for each store user type and the default store from the user type drop down, select the store to add logos for various instances, such as the logo for mobile, favicon, site logo, email logo, logo for the studio, and studio app logo you can repeat the above steps for every store added into your system and customize their appearance the system will refer to the logos uploaded from this interface and display them in the front store however, certain conditions need to be taken care of while uploading the logo while uploading the files please make sure they are of the proper resolution, as the system will display the image as it is action menu every website theme will have a dropdown of action menu, with quick actions for example, you can preview the theme, define theme settings, and write a custom css and js for the theme field description use case/example preview opens the selected theme in a new tab so you can view how your storefront will appear with that theme, based on its default settings use this to visually evaluate a new theme before applying it to your live site theme settings allows you to access and modify 20+ customizable settings related to website appearance, including layout, colors, fonts, and more change the header layout or homepage structure without needing coding knowledge custom css lets you write and apply custom css to override the default theme styles you can apply it for all stores or specific stores using provided links a designer updates font styles across all store pages using global custom css custom jss allows you to write custom javascript (jss) for your website to add interactive features or modify behaviors a developer adds a custom scroll animation or tracking script specific to a theme breadcrumbs breadcrumbs navigation generally enhances the way users find their ways around they improve the find ability and thus reduce the number of actions a website visitor has to perform breadcrumbs function similar to the process bars they are horizontally arranged texts, separated with a “greater than” or any other kind of symbol at onprintshop, breadcrumb options don’t setup automatically on your website contact a support person at support\@onprintshop com to activate breadcrumb options we have also developed certain breadcrumb styles that you can use on your website also, mention the breadcrumb style you want on your website you can personalize your storefront web pages by applying different styles of breadcrumbs you can choose different breadcrumbs for web pages like product flow, personalize flow, checkout flow, my account flow, and other pages flow choose the type and position of the breadcrumb from – admin >> store configurations >> settings >> search "breadcrumb" >> display style for breadcrumbs – front choose breadcrumb style from – admin >> store configurations >> settings >> search "breadcrumb" >> breadcrumb layout style (click on help icon to learn more) you can choose different styles for breadcrumbs, mentioned in the help icon you need to contact a technical onprintshop consultant for applying different breadcrumb styles example of how breadcrumbs look at the website – product showcase settings you can make your customers' shopping experience by showing recommended products based on trending or top selling items from your store the product showcase settings help highlight popular choices, driving engagement and increasing conversions! settings to manage the product showcase on the storefront, we have moved a few settings from site configuration to the product showcase settings screen home page the home page section allows the admin to manage how products are displayed on the storefront home page using these settings, you can select what will be displayed on the home page, define the number of products shown per page , and control how many products appear in each row to maintain a neat and organized layout you can configure the content for the home page from the home page setup docid 7yr1l6jsy8emxhp f6yuu section product / category / group list page the product / category / group list page section allows you to control how products are displayed on listing pages using these settings, you can define the number of products shown per page and the number of products displayed in each row , helping you customize the layout and improve the browsing experience for customers advanced search landing page the advanced search landing page setting enhances the storefront search bar by displaying products and categories before customers begin searching based on the selected option, the search bar can work normally ( none ), display products enabled for the home page ( home page products ), or show a random set of 9 products from the popular products section ( popular products ) related product the related product section allows you to display recommended products on the product details page you can configure which products should appear as related from the related products docid\ kh196boouya4dgh2xlwj4 screen using this section, you can also define the number of related products to display and select the display setting to control where and how the related products block will appear on the storefront explore products with the same design the explore products with same design setting allows the admin to enable this block and configure how products should be displayed for customers none this block will not be visible in the admin panel or on the storefront explore same design products – manually displays only the products manually selected by the admin same category products displays other products from the same category as the main product same group products displays other products from the same category group as the main product’s category all products displays all available products the products to be displayed in this block can be set up from the explore design product docid\ kh196boouya4dgh2xlwj4 section real time data sync with the "enable real time data sync" setting, the ai model can access your order data in real time, enabling it to generate accurate and timely product recommendations to enable this feature, scroll down to enable real time data sync , select " yes " from the drop down, and save the changes once enabled, a toggle button to enable the real time data sync will be available for each recommendation section (top selling, trending, popular) the admin can enable the feature from the respective section settings to allow the data transfer and fetch the real time recommendations assign products the assign products section allows admins to manually select and manage the recommended products to be displayed under the top selling , trending , and popular product sections top selling products these recommendations are based on sales data from the past 24 months this helps highlight products that have consistently performed well over a longer period trending products these are identified based on sales data from the past 15 days, showcasing products that are currently gaining popularity popular products recommendations in this category are based on sales data from the past 6 months, providing a balance between long term top sellers and current trends when the automatic data transfer is disabled, the admin can manually select products to be promoted a drop down menu will be available in each section, allowing the admin to choose the products you wish to highlight to select products under top selling , trending , or popular products , first search for the required products and then choose them from the search results display at home page the display at home page setting allows the admin to control which items should be shown on the storefront home page using this option, you can choose to display products , categories , or category groups , helping customers easily explore featured items directly from the home page when the home page display setting is set to product , category , or category group , the system displays only the items selected under this setting on the storefront home page to display the recommended products on the home page, the display setting must first be set to cms then, within the home page cms fixed page, the blocks for top selling, trending, and popular products need to be added to the page content section