Stylizing E-commerce Page

When it comes to styling your e-shop site you have 3 options:

1)  Choose from one of our templates.

You can choose from one of our 5 templates, pick your colors, assign your logo.   Setting this up one time is included in your e-shop setup. 

2)  Have your graphic designer "paint us a picture"

The company or people responsible for your advertisement graphics, etc can create a graphic of what you want your website to appear like.  We will then apply that styling to your site for you.   They need to stay inside the basic frameworks we have in place - for example, how the categories of products appear on the landing page, what the product record looks like, how the search control works, etc.  They should not attempt to change how the site works - instead, the focus needs to be on how it looks and that it matches your brand.  There is a cost for us to apply the theme of $1500, provided the graphic designer "paints within the lines"

3)  Use a coder to create a style from scratch

This is the option for those that want ultimate control. 

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