Libreria Theme

Installation  

To create a site with Libreria, you need to install the Libreria theme and WooCommerce plugin.

Libreria Download and Install  

1. Log in to your WooCommerce.com account and navigate to the Downloads page. Click the Download Icon to get a compressed libreria.zip theme file on your computer  
2. From the dashboard of your site, navigate to Appearance > Themes and click on the Add New button  
3. Click the Upload Theme button to upload the libreria.zip file you downloaded in step 1  
4. Click the Install Now button  
5. You’ll be redirected to the activation page. Click the Activate button

Install WooCommerce  

If you haven’t installed WooCommerce already, follow the steps below:  

1. Go to Plugins > Add New  
2. Search for “WooCommerce” 
3. Hit the Install Now button on the box containing the WooCommerce title 
4. Finally, press the Activate Now button 

Import Demo Site 

Libreria comes with a pre-built demo site which you can import into your site and start editing content. To import the demo, you need to install the ThemeGrill Demo Importer plugin and follow these few steps:

1. Go to Plugins > Add New 
2. Search for the “ThemeGrill Demo Importer” plugin
3. Once the plugin appears on the search result, click on the Install Now button  
4. Click on the Activate Now button
5. Go to Appearance > Demo Importer 
6. Hover over the Libreria box and click the Import button 
7. On the confirmation box, read the heads-up message carefully and click the Confirm button if all points look good to you 
8. Wait till the Importing… text on the button changes to Live Preview 
9. Click the Live Preview button 
10. Your site should now look like the Libreria demo site

Now, it’s time to edit the content of your site like posts, pages, products, images, etc. Go through the documentation below for detailed information 

Set Page Template for Gutenberg Page  

1. Go to the edit screen of the page  
2. On the right side, click on the Template.  
3. Choose Gutenberg Block / Page Builder (Libreria) from the dropdown.   
4. Click the Update button at the top right.  

The overall customizations of the site’s design can be done via options available in WordPress Dashboard > Appearance > Customize. Basically, options are arranged in the following ways:  

1. Global: Affects globally throughout the site. For example, primary colors, heading color, container width, etc.  
2. Section-wise: Options for website components like header, footer, and content area  
3. WooCommerce: Customize the WooCommerce page, products, and design  

From Appearance > Customize > Global > Colors, change the primary color, base color, link color, and heading colors throughout the site.

Container Width  

From Appearance > Customize > Global > Layout > Container, you can adjust overall site width.  

From Appearance > Customize > Header > Site Identity, you can  

• Upload the logo and change its size
• Plus, it supports the retina logo
• Upload site icon
• Add site title and tagline
• Change site title color

From Appearance > Customize > Header > Primary Header, you can  

• Make header full width expanding it to the edges 
• Change header background-color 
• Add border-bottom and change its color
• Customize text and background colors of the menu, submenu, and mobile hamburger icon 
• Enable/disable header search and change its placeholder text 
• Enable/disable the WooCommerce account icon in the header 
• Enable/disable WooCommerce mini cart in the header
• Show/hide the number of products added to the cart on the header mini cart icon.
• Add an icon in the header to open a sliding box where you can add logo and Gutenberg blocks

From Appearance > Customize > Header > Page Header, you can enable/disable page title and breadcrumbs.  

From Appearance > Customize > WooCommerce > Shop, you can  

• Show checkout panel after clicking add to cart button 
• Enable/disable shop filters 
• Enable/disable product result count 
• Enable/disable the sales badge and change its text 
• Show hide product elements like product title, ratings, price, add to cart button 
• Adjust horizontal and vertical spacing among products 
• Change product image and content alignment 
• Change the color and background color of the product title, price, sale badge 
• Set pagination to be either numbered or infinite load. In the infinite load option, you can either load posts by scrolling or by clicking a button

From Appearance > Customize > WooCommerce > Single Product, you can  

• Adjust the width of the product image area
• Enable add to cart button on scrolling down the single product page
• Enable/disable the sale badge
• Show/hide product meta information and tabs 
• Enable/disable related products to be displayed
• Enable/disable related and upsell products area

From Appearance > Customize > WooCommerce > Checkout, you can enable distraction-free view on the checkout pages. It’ll remove the primary menu, header actions, footer, etc. so that customers can focus on the checkout process.

Blog  

From Appearance > Customize > Content > Blog, you can  

• Set the row gap of each post
• Choose from image sizes to load in the post thumbnail
• Adjust excerpt length (summary text)
• Change CTA button text (Read More)
• Show/hide post elements like post title, featured image, meta tags, excerpt, and CTA button
• Enable/disable blog pagination

Single Post  

From Appearance > Customize > Content > Single Post, you can  

• Show/hide post elements like post title, featured image, meta tags, and excerpt
• Enable/disable related posts and choose to show in 1 or 2 columns

Footer  

The Footer area has 2 parts: Footer Columns, and Footer Bar.

From Appearance > Customize > Footer, you can  

• Customize footer background, heading, text, link, link list color
• Add border top size and change color
• Enable/Disable  list separator
• Edit footer copyright text and its color
• Enable scroll to the top button and customize its sizes, icon size, and colors

Edit Footer Copyright 

From Appearance > Customize > Footer > Footer Bar, you can customize footer copyright text. You can use the string mentioned below in the copyright text editor to generate dynamic strings like the current year, your site’s link, etc.

• {copyright}: Generates copyright icon
• {site-title}: Generates site title text
• {year}: Generates the current year
• {theme-credit}: Generate Credit text to the theme author, ThemeGrill

Now, you can customize the way the copyright text appears by editing the content in the text editor. For example, if you want to remove the theme credit, you can remove the {theme-credit} text from the editor.

If you want to add your own custom code to the Libreria theme, then the best way is to use a child theme. Read the article below and use the ready-made child theme for Libreria:

A child theme allows you to change small aspects of your site’s appearance yet still preserve your theme’s look and functionality. It inherits the look and feel of the parent theme and all of its functions, but can be used to make modifications to any part of the theme.

Child Theme: WordPress Theme Developer Handbook