Stylizing E-commerce Page

You can style and edit your E-commerce page by editing the Placeholder Text in Cloud Retailer by adding custom CSS (Cascading Style Sheets) codes. CSS can change how your Eshop looks and make it more presentable.  You can control how big your font is by adding this in the placeholder text: font-size: 12px. You can use Pixels (px), cm(centimeter), in(inches), etc. for units. 

Here are the steps on how you can add or edit the CSS within Cloud Retailer. 
  1. Login to Cloud Retailer. 
  2. Click Admin on the left.
  3. Click on Placeholder Text.
  4. The layout used is named EShop-Layout-Header-X, EShop-Layout-Stylesheet-XEShop-Layout-CampaignHero-X, EShop-Layout-CatalogHero-X, and EShop-Layout-Footer-X where X is your company name.
    1. EShop-Layout-Header-X is responsible for the top part of the page that includes the Logo, Menu, Sign in button, location bar, and Car
      1. To change/add the logo, you have to add the class .esh-app-header .navbar-brand  and add a background-image property and point it to where the logo is located. 
        Header
         ex. 
        .esh-app-header .navbar-brand {
         background-image: url(https://link-to/logo.png);
         height: 75px;
        }
      2. EShop-Layout-Stylesheet-X is for the main body of the eshop that includes the search bar, Categories, images , pagination and the products.

      3. EShop-Layout-Footer-X is for the footer. 
  5. Select the placeholder you want to customize and click on the Edit Selected Place Holder Text(s) button. 
    1. Enter your custom code in the "Text" box.
    2. Click on save once you are done adding your custom CSS code.
  6. And you are done. 
You can reference w3schools.com for CSS Reference
Comments