Section Design (eCommerce App)

Section Design (eCommerce App)

1. How to modify the design of your sections

By default, your shop has a global style  applied to all your app's pages. For more info, please refer to this online help.

You can modify the default design of each section to fit the image of your brand.

1. Go to the menu  Content & Design > Design > Sections Design   which will show you the entirety of your sections on the right column
2. On the right column menu, hover the section you wish to edit
3. Click "Modify the style" that will appear next the to name of the section. 


You will be able to change the following: 
- Fonts and font colors
- Lists templates
- Background colors and images
- Shape and color of action buttons
- How thumbnails, images and slideshows will be displayed etc...
 

The design set in each section will apply to the entirety of the section. For exemple you've applied a design to your "Products list" section, this design will apply on the products list of each collection. Even though it is not recommended ( you want to keep your design as uniform as possible), it is possible to apply a different design to a specific section within list of sections.  For more info, refer to this online help.

Note: The design of the product page will be applied to all your products. It is not possible to unhook the design of the product page.


2. Design of a multi-level page

In certain sections (Ex: "Cart" or "My Account"), there are intermediate pages whose design you can configure.

1. Go to My app> Design> Section Design
2. Hover over the section that interests you (Ex: "Cart" or "My Account") and click on "Modify the style"
3. You will see the list of intermediate pages.
4. Click on the page that interests you and you can modify the design



3. "Cart" section - advanced preview

This section has an advanced preview function that allows you to preview the cart design and in all possible situations (client connected or not, Apple Pay, one-click payment ..).

How to preview the cart design?
1. In Content & Design> Design> Design of Sections hover over the "Cart section and click on "Modify the style"
2. Click on "Edit Cart"
3. Click on "Preview", you will see a drop-down menu. You have the choice to preview your Design in "Classic Cart, "Web Configuration" and "Apple Pay Configuration" modes.
4. Scroll down the right menu to the "Empty Screen" submenu
5. Click on "Preview", you will see a drop-down menu. You have the choice to preview your empty shopping cart screen in "Empty  cart connected" mode (client registered and connected in your shop) or "Empty  cart not connected" (client not registered or not connected in your shop)


4. "Order" section - advanced preview

This section has an advanced preview function that allows you to preview the design of the order page in all possible situations (client connected or not, Apple Pay, one-click payment ..).

How to preview the design of an order?

1. In Content & Design> Design> Design of Sections hover over the "Cart section and click on "Modify the style"
2. Click on "Modify Order"
3. Click on "Preview" (top right), and you will see a drop-down menu. You have the choice to preview the design of your orders in "Connected order" mode (client registered and connected in your shop), "Order not connected" (client not registered or not connected in your shop), "One-Click Apple Pay "or" One-Click Navigator "

    • Related Articles

    • Design the Categories of your Sections (eCommerce App)

      Depending on the type of content you have on your app, you can add categories to your CMS content section or filter your external content when using an external source (Youtube, WordPress, etc.). Please refer to this online help for more ...

    • Copy the Design of a Section onto Another Section (eCommerce App)

      This feature is made to copy the design of a section  into another section of the same type, so you do not need to recreate the design from scratch: - It copies the full design settings of the source section page into the new section: fonts, colors, ...

    • Section Design

      By default, your application has a global style applied to all your app's pages. To modify colors, fonts, backgrounds, formats, etc... of each element of your application: 1. Go to the menu Design & Structure > Structure > Sections, which will show ...

    • Global Style (eCommerce App)

      The Global Style menu manages your app's overall design from one single menu.  Colors, fonts, and effects chosen in this menu are applied to every section of your app. WARNING! Very important: When applying your global style to your app. If you had ...

    • Header (eCommerce App)

      The header (logo and title) is the upper part of the app that is always visible and accessible in all sections. The header serves 4 purposes : to display your app's identity to give the section a title to display shortcuts to navigate in the app To ...