How do I change the design of my Storefront?

  • 0
  • 1
  • Question
  • Updated 5 years ago
  • Answered
Archived and Closed

This conversation is no longer open for comments or replies and is no longer visible to community members. The community moderator provided the following reason for archiving: Archived

One of the most important things about your store (save adding products and giving your customers a way to pay for them and get them) is the design of the store. If a store has a shoddy design, customers may shy away from it and may be less likely to trust it. Luckily, Storefront powered by BigCommerce has included over 100 built-in templates to make the designing of your storefront as easy as possible. We have also given you ways to then customize that design, including uploading a logo, alternate header, favicon, etc. and even have given you access to all of the template files used to create that design. Thus, if you want a completely custom website, it is possible. For now, however, we're going to stick to the basics.

Changing the Built-in Template
Uploading a Logo
Uploading a Favicon
Enabling Design Mode


Changing the Built-in Template

1.) Login to your store's control panel.
2.) Click on Design.



3.) Here, the template you are currently using and your alternatives are listed. To change to another template, simply find the one that you like, and click Apply this Template.



4.) A small window will pop up asking you to confirm your choice. Please note that if you have previously done any customizations to your template files, those customizations will be erased. Also note that anything you have uploaded to your FTP will not be affected, but may not be correctly referenced after the template change.
5.) Once you have checked the three boxes confirming your understanding, click Continue.



6.) Now, a status bar will display, and when the change has completed, you will receive a confirmation message on your control panel.

Feel free to test out any of our built-in templates, as there is no limit to how many times you can change your design.

Uploading a Logo

1.) Login to your store's control panel.
2.) Click on Design.



4.) Here, you can choose from among a number of options, though they depend upon your chosen template. All templates will allow you to have a text or image logo that you create yourself, though some will also create a logo for you based on the template design. In this example, we'll upload our own logo.
5.) Choose the Upload a logo from my computer. Then, find the logo image on your computer, and then click upload.



Now you are using your own logo for your store. Keeping your logo to about 300 x 75 pixels will ensure compatibility in the majority of our templates. You can find the recommended logo sizes here for some of our templates. You can always modify your HTML/CSS files to tweak the location and size of your logo, however.

Uploading a Favicon

1.) Login to your store's control panel.
2.) Click on Design.



3.) Click on the Favicon tab.



4.) Click the Browse button to find your favicon on your computer. Remember to keep the picture to about 16 x 16 pixels.
5.) Click the Upload Favicon button when you've found the picture.



You now are using a new favicon image.

Enabling Design Mode

1.) Login to your store's control panel.
2.) Click on Design.



3.) Click on the Design Mode tab.



4.) Click on the Open my Store in Design Mode button.



5.) You should now see a Design Mode bar like the one below.



6.) If you want to make any changes, make sure that the Toggle button is orange. Then, you can drag and drop panels, change text, etc.



7.) When you are done making changes to your store, click the Save button.

Photo of Angela M

Angela M

  • 150 Points 100 badge 2x thumb

Posted 5 years ago

  • 0
  • 1

There are no replies.

This conversation is no longer open for comments or replies.