Coffee Shop

You can install the theme via 2 methods.

• You may follow the woocommerce instruction here. https://woocommerce.com/document/managing-woocommerce-com-subscriptions/#automatic-installation
• Once you connect to the Woocommerce.com account, you’ll also receive a notification when the update is available.

• Download the zip file you purchased.
• Go to “Appearance > Themes > Add New”
• Upload The zip file
• Activate the theme.

• After activating the theme, you’ll be redirected to Theme Setup page. ( You can also find it at “Appearance > Theme Setup” )
• Follow the steps to install Child Theme, Plugins and Import The Demo Content

• After you finish importing the demo content, there are two more things that you have to do. Please check the points below.

• You have to connect your site with Jetpack. Go to ‘Jetpack > My Jetpack’ and check the Connection section at the bottom. 
• The reason to do this is because after you import the demo content, the contact form won’t appear yet unless you enable the extra items by connecting to Jetpack. Otherwise, you can choose to use other contact form plugins such as Contact Form 7.

MailPoet doesn’t provide the option to export/import the email subscription form, hence you will need to set it up manually. 

1. Go to ‘MailPoet > Forms’ and add new form 

2. Select ‘Skip, start with a blank form’ button.

3. Then you can start customizing the form from there. And below are the settings of the hero subscription form and footer subscription form that you can follow.

Hero Section

Wrapper setting in hero section

Email field setting in hero section

Button setting in hero section

Footer Section

Wrapper setting in footer section

Email field setting in footer section

Footer setting in footer section 

*At the bottom, Fill the Additional CSS class name as well > ‘has-text-align-right’

• Customizer allows you to change theme basic settings, such as Top Bar, Site Width, Font Style, Element Colors
• You can access Customizer at “Appearance > Customize”
• If you need to add extra css to style the theme, you can add it to the “Additional CSS” area.

• “Site Editor” is a tool that is used to modify specific parts of the site (Eg. Header, Footer, Single Page or Product Page)
• You can also use a “Site Editor” to create a custom template if you need the layout of the Header/Footer to be different on any specific page as well.
• You can access site editor at “Appearance > Editor”

• Header is a section that appears at the top of every page on the site.

• Header can be changed at the “Site Editor Navigation > Template Part > Header” 
• You can edit “Logo & Navigation” directly using wordpress block editor.

• If you need to use a different header for a specific page, first, you have to create a new Template Parts first for your new header style. Then you have to create new Templates and combine the new Template Parts(header) that you create with content area and footer. After that, in the specific page, you can choose the new page template that you created(which consists of the new Template Parts which is your new header).

• You can manage the menu in ‘Appearance > Editor’. Click on the menu item to customize it(change links, texts, etc.) then click ‘Save’ to save the work. For more in-depth detail : https://wordpress.org/support/article/navigation-block/ 

• Footer is a section that appears at the bottom of every page on the site.

• Footer can be changed at the “Appearance > Editor”
• Go to “Site Editor Navigation > Template Part > Footer” 
• You can edit “Columns, Widget and Copyright” directly using wordpress block editor.

• Page template is an option to change the layout of the page to be different. ( Eg. Hide Title, Transparent Header )
• You can select a page template when you edit each page.

• Blog List can be created using the “Query Loop” component.
• Click the “Choose” button and select the blog list style you want to display.
• You can add “Pagination” inside the “Query Loop” item to display pagination. 
• If you could not find the “Pagination” component, please make sure to add it under the “Query Loop” item since it could not be added elsewhere.

• You can also select the carousel option on the “Query Loop” item to make blog appear as “Carousel Slider”
• Carousel bullets can be added using the “Slider Controls” component by filling “Bullet ID” option with the ID you filled at “Slider Controls” component.

• You can create a product list view using the “Product By Category” component.
• You can also select different styles & layouts in the item option area.

• “Group Custom” is a component that behaves the same way as “Group” component, but with more varieties of options. Ex. margin, padding & background image on different screen sizes for mobile responsive support, radius border, shadow effect.
• You can enable “Group Custom” by installing “Goodlayers Gutenberg Plugin”

• You can also use “Group Custom” to create a custom carousel component.
• First use “Group Custom” as parent component
• Then, create children component ( Can be normal group component )
• And select the layout in parent component to “Carousel”

• Slider Bullet can be assigned using “Slider Controls” component
• Fill the id of “Slider Controls” component to “Bullet ID” fields of the “Group Custom” parent component.

“coffeeshop-sync-height”

• Sync height between item that has same class
• Use for syncing the height of “Blog Template” on the demo page.

“coffeeshop-center-middle-element“

• Mainly used for header center style.
• Add this class to center the middle element of “Row” ( group component ) when there’re 3 child elements.

“coffeeshop-tablet-left-padding0”

• Set left padding in tablet size to 0

“coffeeshop-tablet-right-padding0”

• Set right padding in tablet size to 0

“goodlayers-title-wrap”

• Add default title background to the section.

“goodlayers-list-link”

• Use to style list element to plain style ( as in the footer of the demo site )

“goodlayers-column-tablet-break”

• Add to “Columns” component to break column on tablet size ( 999px )