Customizing your store theme allows you to personalize your e-commerce store to reflect your company, products, and brand. In this documentation, we’ll show you how to customize your store's Home page and overall theme.
To get access to the design studio you will need to navigate to the Theme section on the left hand side of your Dashboard. From there, click on the 'Customize theme' button to get access to the design center.
First up we have the Sections tab where you will be to style the Home page of your store. Below you will find a break down of each category within the Sections Tab.
Sections
Header
The Header Layout drop down gives you five different options for the layout of the top header bar that lists your Store name and category options. Pro tip: make sure that your screen is in full view in order to see the different options.
Header 1
Header 2
Header 3
Header 4
Header 5
Next, select 'Enable Sticky Header' to have the menu stay in place while a customer scrolls down through the page. Ex.
Sticky Header
vs. No Sticky Header
Menu options allows you to edit the order of the main menu (at the top of your home page) as well as being able to edit the footer section. By selecting edit you can ' Add new link' to create a new navigation page, the order of appearance can be adjusted by selecting the page you'd like to move and selecting up or down to get your desired order. Select 'Save' at the bottom once you've completed your changes.
The Top Bar feature, which you can see below in blue, allows you to create a banner across the top your home page to create an Announcement's bar, this is an optional feature that you can create for seasonal sales or anything you wish! The display features of the bar can all be changed to your desire below. Check or uncheck the box for your preference.
Slideshow
The first set of options help you fine tune the details of your slideshow options, if you scroll down to the bottom of the options you will find the 'Blocks' category which is where you will be able to add in additional slide photograph's as well as choose the order in which they appear.
Simply click on the 'Hero Banner' as shown below.
This will take you to a page where you can upload a picture and edit the slide, as shown below:
The 'Edit' button on the right under the Blocks section allows you to choose its place in the slideshow by selecting 'Up' or 'Down'. The 'Add a Block' button at the very bottom allows you to add in more pages to the slideshow.
Featured Collection
The Featured collection allows you to showcase any favorted products directly on your home page
You can create specific Collections in your store for you to feature in this space and select them in the Collection drop down menu.
The Display type gives you two different options for the display that you can choose, 'Carousel' or 'Grid'. With the number of items being adjustable with the Column number drop down menu. The Grid and Carousel each have their own section for you to customize after you select which one you would like to choose below
The Mobile layout refers to how your store will look on a mobile device.
The last decision for this section will be the Background image this detail appears beneath your desired collection that will help create the overall theme of your store.
Image with text overlay
Here you will be able to upload another image that appears at the bottom of your store homepage. The text and details that go inside the image are all able to be customized in this section.
A button is also another optional design piece that you can implement, customer's are able to click on the button that will navigate them to a page of your choosing. The text of the button can also be edited to say whatever you'd like.
Bottom Bar
The bottom bar allows you to edit the footer of your home page, this display's the name of your company for copyright purposes and has button links for you to include your social media.
Theme
General
The General tab allows you to alter a variety of items on your store's home page.
The first option is the 'Show back to top button'. This gives you the option to include an arrow that stay's on the page so your customer's can easily navigate back to the top of the page while scrolling.
Other options under this tab allow you to include a URL for your company's newsletter along with an 'Instagram access token'.
The 'Header background image' can also be uploaded here.
Logo & Favicon
Here you are able to upload your own logo to showcase on your page.
The Favicon image is a small, iconic image represents your website. They are most often found in the address bar of your web browser and can also be used in lists of bookmarks in web browsers.
Typography
The typography tab allows you to edit the style of font you have on your along with the spacing.
Colors
Here your brand's colors can be chosen and customized for different page's on your site.
Currency
This allows you to select which currency your store operates with
Newsletter Popup
The optional pop-up newsletter feature can be selected here where you can customize the image that appears along with a description.
Social Media
This section is were you will input all of your social media links to share with your customer's
Cart
The 'Enable cart notes 'box you can check here creates notes text box on your cart page. This allows you to collect special instructions from customers about how to prepare and deliver an order. Like so:
The drop down menu below for the 'Mini Cart Layout' allows you to adjust how the customer's products are viewed when they are not on the checkout page.
Cookie Law
Turn on this option and your customer will see an information box at the bottom of the page that alert's them that your website is using cookies. If they select 'Accepts a new reminder will appear again in 60 days. The popup text can be customized to your wishes.
Collection/Category settings
Your collections page can be edited here. You have a few different styles to shoow from along with being able to customize the number of items that appear.
The mobile layout is also available to customize here.
Product pages
The product pages layout can be designed here. This allows you to adjust the placement of the product pages with customizing options for images and viewing.
Comments
0 comments
Please sign in to leave a comment.