This article will guide you through the most important section of your Reactive website, customizing your storefront to match your brand identity and aesthetic. By the end of this article you will be able to:
The General settings tab allows you to customize the most important sections of your storefront by also providing you with a real-time preview of your changes.
Favicon. The favicon is a small image that appears in your browser tab when loading your site. It can be added to your website as a visual reminder of your website identity in the address bar or in tabs.
Product list layout (Reactive Ordering). This setting allows you to choose the layout of your product list. You have two (2) different options, shop and menu layout. The menu layout allows your customers to shop directly from the product list whereas the shop layout requires your visitors to first enter the product page. In case you choose the menu layout and you need to have all your products listed in one page make sure you add a high number in the products per page section.
Product List items. This setting lets you control how many products you would like to show for every line on your product list. Setting 1 per line will transform your product list to a list view. Setting it to a number more than 1 will transform your product list to a Grid Layout.
Product categories visibility. This setting allows you to choose where you would like your product categories to appear. Reactive Ordering has the categories enabled under the header of your website. The equivalent for Reactive Shop is a checkbox that lets you choose whether you would like the sidebar categories to appear or not.
Display Items: This setting is only available to Reactive Shop customers and allows you to control which items to show in your product list.
Products per page. This setting allows you to control how many products will be shown on every page of your products list.
Basic Colors: in this section you can specify some of the basic colors for your storefront. By Upgrading to a different plan you will be able to customize those even further though the colors tab.
Product images height: this lets you control the height (in pixels) of your product images in the product list. An optimal height is 180.
Reactive comes with some ready-designed product page styles for your website. Through this section, you can choose from different types of product page variations. Simply choose the one you like and see it live. Besides those there some other cool features for your product page.
Product page version: This setting allows you to choose the design of your product page in combination with the product image thumbnails position.
Product page thumbnails position: This feature allows you to control the position of the thumbnail images inside your product page. Depending on the product page layout you have chosen this setting may look different.
Related products. This setting allows you to choose whether related products will be show in your product pages.
Product Specifications: For Reactive Shop customers will also allow the option to choose the appearance of the product properties inside your product pages.
Reactive comes with some ready-designed headers & footer for your website. Through this section, you can choose from numerous variations. Of course you can see them in live preview. Besides those you can also customize some additional features.
Header height: If you wish to have a larger header than the default one simply change the value of that field (this value is in pixels).
Logo height: this setting specifies the height of your logo. If you would like to have a larger logotype simply choose a bigger number (this value is in pixels).
Footer columns: Depending on the footer version of your choice this setting also allows you to control home many columns you would like to have for your navigation items Change the columns to fit your aesthetic.
Social icons style: This settings allows you to choose the styling of your social icons in the footer of your storefront. Squared or Rounded.
Through the colors and typography sections, you can personalize the header, footer and menus even further.
Through this section you can customize the layout and appearance of your Blog.
Blog list layout: This feature allows you to control the layout of the page you have set to be your Blog archive. You may choose one of the layouts and see the changes at your storefront in real time.
Blog Sidebar: This feature allows you to choose if you would like to have a sidebar with categories to your blog list.
Through this section, you can customize the majority of the colors of your Reactive website. To change the colors of your website do the following.
Click on the Colors Tab.
Choose one of the colors you want to edit.
This will open the color picker where you can choose your desired color.
Once you do click the save button. Once you save visit your storefront to see the changes.
Through this section, you can customize the sizes of your website in various places. Those include, for example, the width of your website or the spacing of your buttons.
Click on the Dimensions Tab.
Edit any size from the listed fields.
Scroll down at the bottom of the page and click the submit button to save your changes.
Through this section, you can customize the typography settings for the text that appears in various sections of your Reactive website. To change the typography of your website do the following.
Click on the Typography Tab.
Reactive is fully integrated with Google Fonts. You can choose a different font family for every text that appears on your website.
By adjusting the font family, font size, letter spacings etc you will be able to see a preview of how your text will look in real time.
Scroll down at the bottom of the page and click the submit button to save your changes.
Adding more than one Font Families for your website will significantly increase the load times of your website.
Through this section, you can customize some of the additional settings of your Reactive website that have to do primarily with the layout of your storefront. This section will keep on getting populated with various settings in the future.
Page Loader. This setting controls whether you would like to use a loader/spinner for your store-front. Enabling this feature will add an animation to your website every time a customer navigates between pages.
In this section you can add custom Javascript or CSS Code that will affect your website instantly and will be added to all pages.
Please use this section with caution when adding Javascript code because you might break the functionality of your website.