ShopOnCloud Knowledge Center
What are you looking for?
Maintaining a user-friendly and an attractive interface on your online-store helps to attract more customers and provide them with a better interface. You can change the appearance of your Shop on Cloud through proper management of CSS. CSS stands for Cascading Style Sheets. They are used to define the styles for your web pages, including the design, layout and variations in display for different devices and screen sizes. By customising these CSS settings you can change the visual appearance of your online store. Follow the steps given below to change the appearance of your Shop on Cloud.
Step 1 - Log in to your ShopOnCloud account.
Step 2 - Click on “Settings” in the left side menu.
Step 3 - Click on “Content” under the Settings section.
Step 4 - Click on “Advanced UI Customization”.
Step 5 - Click the “Edit” button at the right corner of Customer CSS. This will open a new tab.
Step 6 - The newly opened tab is the "Customer CSS File Editor" This is where you can edit the CSS setting of the online store to change its visual appearance.
Step 7 - Navigate back to the console tab.
Step 8 - Click the “View Shop” button at the right-top corner of the screen.
Step 9 - Right-click anywhere within your shop and click on “Inspect”.
Step 10 - Click the “Select an element in the page to inspect” icon and select the element that you wish to change.
Step 11 - Copy the related CSS code into a text file and do the required changes.
Step 12 - Copy and paste the edited CSS code into the Customer CSS File Editor.
Step 13 - Click the “Save” button in the right-top corner.
Step 14 - Go back to the console tab and click on “FLUSH CACHE” button once you are done.
Step 15 - Navigate back to the console tab.
Step 16 - Click the “View Shop” button at the right-top corner of the screen to review the changes you have made
You have updated the User Interface of your Shop on Cloud. Now your customers can enjoy a better shopping experience.
