Create a Minimalistic Shopify Store with FKX Lite Theme

Table of Contents

1. Introduction
2. Installing the Light Theme
3. Customizing the Home Page
   • Choosing a Background Color or Gradient
   • Selecting a Logo for the Home Page
   • Customizing the Home Page for Mobile Devices
   • Customizing the Text Color and Size
   • Customizing the Menu
   • Showing or Hiding Social Media Links
   • Hiding the Home Page
4. Setting up the Header
   • Choosing the Menu to be Displayed
   • Customizing the Logo
   • Hiding the Date from the Time
   • Customizing the Announcement Bar
5. Setting up the Product Grid
   • Customizing the Number of Products Displayed
   • Customizing the Product Cards and Filter
   • Displaying Collections
6. Setting up the Product Page
   • Using the Page Template
   • Customizing the Buttons
7. Theme Settings
   • Changing the Font
   • Customizing the Theme Color
8. Setting up the Lookbook Page
9. Conclusion

Installing and Customizing the Light Theme for Your Shopify Store

If you're looking to give your Shopify store a fresh new look, installing a new theme is a great way to do it. In this article, we'll walk you through the process of installing and customizing the Light theme for your store.

Installing the Light Theme

The first step in installing the Light theme is to download the theme zip file. Once you have the file, go to the online store tab in your Shopify dashboard and select the themes section. Click the add theme button and upload the theme file. Once the theme has successfully loaded, click on customize to proceed to the theme customization step.

Customizing the Home Page

To customize your home page, click on the home setting. In the background section, you can choose a background color or change it to a gradient. In the logo section, you can choose the logo that will be displayed on the home page as well as the size for PC and mobile devices. To check how the website will look on a phone, click on the phone icon.

Next, you can show or remove the current time and date of the user who entered the site, text color and size. If you notice that the distance from the logo to the time and date line is too large, cut off the empty space using any graphics editor. If you use GIF, then we recommend the esgift service.

The next setting allows us to choose the menu that will be displayed, the size of links on PCs and phones, the font size and colors, as well as positioning. We can align text to the left, center, and right. We can also turn on the highlight feature or disable select text and background colors. With the last setting, we can show or hide social media links as well as choose their color. To insert links to your social networks, click on theme customize and paste the links.

We have also added the ability to hide the home page. To do this, go to theme settings and find the hide home page section. When this setting is activated, everyone who gets to the home page will be automatically redirected to the catalog page.

Setting up the Header

It is important to choose the menu you want to be displayed. It will be visible on mobile devices. Under the menu link size setting, we can turn the Border header on or off. To customize the logo, go to theme settings and find the shop logo tab. Here we can choose the logo and its size. We can also choose the logo icon that will be displayed on the tab in the browser.

To hide the date from the time, go to the shop and time section. Here you can hide this block on the PC, on the phone, choose the color of the text and its size. To customize the announcement bar, expand the settings. Here we can set our own text. To hide this block, click on the icon.

Setting up the Product Grid

Here we can customize the displayed number of products per page and per row. Next, we can choose the settings for product cards and a filter. We can turn off the filter and choose the text size. This filter will display all the collections you have, so make sure they are properly configured.

At the bottom of the site, we can see the navigation on the site. This menu is displayed on the PC. We can also turn off email collection and social icons.

Setting up the Product Page

This is the page template that will be used for your products page. I recommend not changing or hiding the blocks here as this is just the bare essentials. Please pay attention to the buttons located under the add to cart button. They make it possible to switch between products in the collection. You can hide them by clicking on this setting. If both buttons are crossed out, it means that there are no more products in the collection to which you added this product. So make sure you set up collections correctly.

Theme Settings

To change the font on the site, you can go to the typography tab. Here are the fonts from the standard Shopify Library. You can choose the font for headings and body text as well as its size. If you want to install your own custom font, go to the Shopify settings panel and find the files tab. Here you can upload your font in wofff2 format. Copy the link to the font and go back to theme customization. Go to the custom font tab and activate this setting. Paste the link to the font and enter its name. If your font looks broken, make sure the file format is wofff2. It also happens that after converting a font to this format, it may break and look uncool. In this case, I recommend choosing a different font.

With the following setting, we can hide the price of the product on the catalog page name and badges and also choose the size of the text and its positioning. We can also choose the animation with which the product cards will appear when we go to the catalog page. The following setting will help us change the theme color. Each setting changes the color of certain elements on the site, the name of which is written above each of them. If you want to use a dark theme, change black to white and white to black. Thus, you can change the theme color to dark. After adjusting the colors, make sure that the color of the text and background do not merge so that your customers have no difficulty in making a purchase.

Setting up the Lookbook Page

In the drop-down list, select pages and select lookbook. Please note that we are now setting up the page template. To add a lookbook page, go to your Shopify page management, create a page, and choose a lookbook template. Here we can add slides with photos, add descriptions, and a button to them. For example, you can add a photo with a product and add a button the link of which leads to the page of this product.

Conclusion

Setting up a new theme for your Shopify store can be a daunting task, but with the Light theme, it's easy to get started. By following the steps outlined in this article, you can customize your store's home page, header, product grid, product page, and lookbook page to create a unique and engaging shopping experience for your customers. If you have any questions or need further assistance, feel free to reach out to us on our Instagram account or leave a request on our website.

Highlights

• Installing and customizing the Light theme for your Shopify store
• Customizing the home page, header, product grid, product page, and lookbook page
• Choosing a background color or gradient, selecting a logo, and customizing the menu
• Hiding the home page and changing the font and theme color
• Adding slides with photos and descriptions to the lookbook page

FAQ

Q: Can I use my own custom font with the Light theme? A: Yes, you can upload your font in wofff2 format and activate the custom font setting in the theme customization tab.

Q: How do I hide the price of a product on the catalog page? A: You can use the setting in the theme settings tab to hide the price of the product on the catalog page.

Q: Can I customize the product cards and filter on the product grid? A: Yes, you can turn off the filter and choose the text size. This filter will display all the collections you have, so make sure they are properly configured.

Q: How do I add a lookbook page to my Shopify store? A: In the drop-down list, select pages and select lookbook. Please note that we are now setting up the page template. To add a lookbook page, go to your Shopify page management, create a page, and choose a lookbook template.