Customizing Online Store design

Sometimes you require customization beyond what the Online Store template offers. In this case, you can create a completely unique theme on your own. Let's learn how can you create a unique design on your own.

Creating a custom CSS theme

Building a CSS theme from scratch requires knowledge of web design, HTML, and CSS. If you want to design your store on your own, you can create your own CSS theme. The set of CSS codes will give you control over every visual element in your store including shape, size, color, and format.

You can create your own CSS themes by following these steps:

1. Navigate to Design in your Control Panel and scroll down to Themes & In Depth Customization. Click on Create New Theme.

Screenshot_2019-07-05_at_13.28.17.png

2. If this is going to be your first custom theme, click Add New CSS Theme:

Screenshot_2019-07-05_at_13.31.44.png

3. If you already have a custom theme with CSS codes, add the new codes to that theme. Paste the new codes under the old ones.

4. Add the code you copied from the CSS codes collection to the large white field. In this example, we want to place all Buy It Now buttons on the storefront at the same level, regardless of the title length.

Screenshot_2019-07-05_at_13.41.41.png

5. If you want to add several custom CSS codes to one theme, you must add them all at once to the theme, one followed by another one.

6. Once done adding the CSS codes, click Activate and then Save or Ctrl-S to apply the changes.

Important: only one custom CSS theme can be active at a time.

This feature is available on all Online Store plans.

Was this article helpful?
0 out of 0 found this helpful