Step-by-step Store Guide

This is our suggested step-by-step Store Guide

You just installed Noblesse theme and you love our demo store? 

Here’s what you going to do:

Products and Collections

1. First you need to add the products. From your dashboard, select Products and then Add Product. 

2. For creating collections just like ours, on the Dashboard go to Products -> Collections -> Add Collection. 

Menus

3. Let’s setup the menus. From the dashboard go to Content and select Menus. 

4. Here we can see all the menus we created for Noblesse Riviera demo store. For creating a new menu, click on Create menu.

5. Let’s first see how we can create these menus and later on we’ll talk on how to select these in the theme customizer. Let’s take the Main Menu for example. 

It’s very important to give a name to the menu as you’ll need it in the customizer. Then, click on Add menu item and choose a Label for the menu item and Link it to a collection, product, page, blog post, etc.

THEME CUSTOMIZATION

Let’s get to the FUN STUFF, the theme customization. We’ll get through every section and setting of our demo store so you can recreate it 1:1.

6. From the Shopify Dashboard, click on Sales Channel -> Online Store -> Themes. Then, in order to customize our theme, click on Customize.

7. Here we have the theme customizer dashboard. On the left side we can edit 1. Sections of a chosen page, 2. Theme Settings, 3. App widgets and 4. Where we choose what page we want to edit. 

THEME SETTINGS

8. Let’s start with 2. Theme Settings -> Colors sections. Here we have a variety of color schemes, and I’ll show each of these schemes. 

8.1. Scheme 1 

8.2. Scheme 2

8.3. Scheme 3 

8.4. Scheme 4

8.5. Scheme 5

8.6 Scheme 6

8.7. Scheme 7

9. Let’s continue with the rest of the elements in the Theme Settings and recreate our Demo Store. Let’s select Colors individual elements and add the same colors codes. 

10. Select the next element in the Theme Settings -> Typography. For the headings font select ITC Galliard Bold (Bold) and for the body font select Lato (Regular). 

11. Select the next element in the Theme Settings -> Layout.

12. Select the next element in the Theme Settings -> Breadcrumbs.

13. Select the next element in the Theme Settings -> Product labels.

14. Select the next element in the Theme Settings -> Product item.

15. Select the next element in the Theme Settings -> Color swatches variants.

16. Select the next element in the Theme Settings -> Share buttons.

17. Select the next element in the Theme Settings -> Buttons.

18. Select the next element in the Theme Settings -> Inputs.

19. Select the next element in the Theme Settings -> Media.

20. Select the next element in the Theme Settings -> Social media accounts. Here you can add the links to all of your accounts.

21. Select the next element in the Theme Settings -> Search behavior.

Here we added one of the menus we created ‘Suggested Links’ -> 

22. Select the next element in the Theme Settings -> Favicon. The Favicon is a small image or logo that displays next to a web page's name. This can be an element from your logo.

23. Select the next element in the Theme Settings -> Cart. In the cart drawer you can choose a collection which will be visible when the cart drawer is empty.

24. Select the next element in the Theme Settings -> Drawer.

25. Select the next element in the Theme Settings -> Advanced and enable both options.

SECTIONS

HOME PAGE

26. Now let’s select Sections, first option on the upper left.

27. The Home Page will be selected by default everytime you enter customizer, so we’ll show you every setting here to recreate our look, and we’ll continue with the rest of the pages.

    
    

    Go to Header Group -> Add section -> Choose Announcement Bar & Header.

27. 1.  Let’s customize the Header Group. 

Hover the mouse between the blocks and the option to Add Announement will appear. Create 2 blocks here. 

27. 2. Now click on the Announcement bar so we can set up the settings on the right side. Choose Effect style -> Fading blocks, enable Bottom border, set animation speed to 6 and choose the Background Color black and Color text white. 

27.3. The settings of every block will appear on the right side of the customizer. Select the first block and add the text: “Catch the summer vibe - Up to 60% off!” and link it to the desired collection, in our case, Sale. 

27.4. Now select the second block, add the text: “Ready, steady, beach! Shop one pieces now. ” and link it to the desired collection, in our case, One Pieces.  And don’t forget to SAVE everytime you make an adjustment. 

27.5. For the Header, we use 3 types of blocks. In order to add them, select Header -> Add block -> Sidebar Menu -> Header logo -> Header Links -> Header burger menu.

27.5.1. click on the Header so we can set up the settings on the right side. Please choose the same settings for an identical look with the Riviera Demo Store.

27.5.2. We will take every block, starting with the Header Logo. On the right side we can adjust the settings for every block. Add your logo and set the width to 100.

27.5.3. Click on the Header Links and copy the same settings.

27.5.4. Click on the Header burger menu and copy the same settings. 

27.5.5. Click on the Sidebar menu, name the title Menu and link it to the Sidebar menu. 

Sidebar menu: 

28. Now we’ll move on to the next sections of the Home page. Go to Template -> Add Section and add the following sections in the same order: 

• Generic hero banner
• Brand Stories
• Collection list
• Icons trustbar
• Collection tabs
• Big Statement
• Animated featured product
• Video
• Running text
• Shop the look 
• Image with text
• Instagram

We will take every section we added in order and add the same settings. 

29. Generic hero banner

30. Brand stories - you can add stories to any of the following options: Product; Collection; Product list; Product video; Collection video.

30.1. Click on Brand stories for setting adjustments: 

Here are some of our block settings: 

31. Collection list - you can add up to 5 collections. For settings, click on Collection list:

32. Icons trustbar - Add all 4 icons and then click on Icons trustbar for settings: 

33. Collection tabs

34. Big statement 

Big statement block settings: 

35. Animated featured product

36. The following section to add to the Template, is a Video. Here are our settings: 

37. Add Running Text and the following settings: 

38. Add Shop the look and add the products you want to showcase in this section with the following settings: 

39. Add Image with text and the following settings

    
    

    

40. The last section of Template in the Homepage is Instagram:

41. In the Notification Group, add Modals and Toasts. In the Modals, add Newsletter Popup with the following settings: 

In the Toasts add Cookies with the following settings: 

42. The last section is Footer where you will add all four blocks: Logo/Image with text, Menu (About us), Menu (Customer support), Newsletter.

Click on Footer and add the following settings: 

Now let’s add the settings for the following blocks. 

Logo/Image with text: 

About us: 

Customer Support: 

Newsletter: 

PRODUCT PAGE

43. Let’s continue with the Product Page. In order to select it, go on the upper center Selector where it says Homepage, click on it, and from the drop down menu select Products -> Default Product.

The Header Group, Icons trustbar, Instagram, Notifications Group and the Footer remain the same on all pages, so we will focus on the Template settings. 

44. Select Product Information add Text, Title, Price, Size Chart, Quantity Selector, Buy Buttons, Share, Description and 5 Products Tabs.  Click on Product Infotmation and add the following settings: 

Some blocks have no customizable settings available, but we will showcase the ones that do: 

45. Text

46. Title

47. Size Chart 

48. Buy buttons 

49. Description 

50. 1st Product Tab: 

50.1. 2nd Product Tab:

50.2. 3rd Product Tab:

50.3. 4th Product Tab: 

50.4. 5th Product Tab: 

51. Add Image with Text with the following settings: 

52. Related Product Sliders with the following settings: 

COLLECTION PAGE

53. Let’s continue with the Collection Page. In order to select it, go on the upper center Selector, click on it, and from the drop down menu select Collection Page -> Default Collection Page.

The Header Group, Icons trustbar, Instagram, Notifications Group and the Footer remain the same on all pages, so we will focus on the Template settings. 

54. Collection banner with the following settings:

55. Related collection with the following settings:

56.  Product grid with the following settings:

COLLECTION LIST PAGE

57. Let’s continue with the Collection List Page. In order to select it, go on the upper center Selector, click on it, and from the drop down menu select Collection List. Then go to Template -> Collection List Page and use the same settings on the right side.

GIFT CARD

58.  Let’s continue with the Gift Card. In order to select it, go on the upper center Selector, click on it, and from the drop down menu select Gift Card. Then select the same settings.

BLOGS

59.  Let’s continue with the Blogs. In order to select it, go on the upper center Selector, click on it, and from the drop down menu select Blogs -> Default blog. Then go to Template -> Main blog and use the same following settings. 

BLOG POSTS

60.  Let’s continue with the Blog Post. In order to select it, go on the upper center Selector, click on it, and from the drop down menu select Blog Post -> Default blog post. Then go to Template -> Blog Post and use the same following settings.