- \n
- How to add selection conditions for an automated collection on Shopify<\/a><\/li>\n\n\n\n
- How to insert Disqus to your blog in Shopify<\/li>\n\n\n\n
- How to insert breadcrumb navigation to your store in Shopify<\/a><\/li>\n<\/ul>\n\n\n\n
How to insert a layout, collection, and blog to a static site<\/h2>\n\n\n\n
- \n
- 1. Setup<\/strong><\/a>\n
- \n
- Step 1: Download and setup your theme<\/a><\/li>\n\n\n\n
- Step 2: Open your site<\/a><\/li>\n<\/ul>\n<\/li>\n\n\n\n
- 2. Layouts<\/strong><\/a>\n
- \n
- Step 1: Create
\/_layouts\/default.html<\/code><\/a><\/li>\n\n\n\n- Step 2: Remove the HTML content<\/a><\/li>\n\n\n\n
- Step 3: Fix up the other pages<\/a><\/li>\n<\/ul>\n<\/li>\n\n\n\n
- 3. Collection<\/strong><\/a>\n
- \n
- Step 1: Create
_config.yml<\/code> and set up a collection<\/a><\/li>\n\n\n\n- Step 2: Create a
_portfolio<\/code> directory and add portfolio items<\/a><\/li>\n\n\n\n- Step 3: Loop over collection documents and output item details<\/a><\/li>\n<\/ul>\n<\/li>\n\n\n\n
- 4. Blogging<\/strong><\/a>\n
- \n
- Step 1: Create a layout for the posts<\/a><\/li>\n\n\n\n
- Step 2: Create the post<\/a><\/li>\n\n\n\n
- Step 3: Create
blog.html<\/code><\/a><\/li>\n\n\n\n- Step 4: Add link to
\/blog.html<\/code><\/a><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n1. Setup<\/h3>\n\n\n\n
Step 1: Download and setup your theme<\/h4>\n\n\n\n
In this instruction, we will be using the theme called Creative. After the theme Creative is downloaded<\/a>, you have to unzip it, navigate to the directory in the terminal then run
jekyll serve<\/code>.<\/p>\n\n\n\n\n\n$ cd ~\/Downloads\/creative # or wherever you've unzipped the template\n$ jekyll serve\n<\/code><\/pre>\n<\/div>\n<\/div>\n\n\n\nStep 2: Open your site<\/h4>\n\n\n\n
To open and see your site, open your browser then navigate to http:\/\/localhost:4000 .<\/p>\n\n\n\n
![\"open](\"https:\/\/cdn4.avada.io\/media\/shopify\/aJtWmiS.jpg\")
<\/figure>\n\n\n\n<\/p>\n\n\n\n
2. Layouts<\/h3>\n\n\n\n
Since it\u2019s a four-page static site and the header, navigation, and footer of each page are repeated, we need to reduce this repetition with a layout<\/a>.<\/p>\n\n\n\n
Step 1: Create
\/_layouts\/default.html<\/code><\/h4>\n\n\n\nIn this step, the first thing to do is to create
\/_layouts\/default.html<\/code> and copy the contents ofindex.html<\/code> into it.<\/p>\n\n\n\nNext, replace the content in the layout that changes between pages with placeholder variable. You also need to replace all the contents of
<title><\/code> with{{ page.title }}<\/code>, which helps you to easily change it on each page.<\/p>\n\n\n\n\n\n\n<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n <meta name=\"description\" content=\"\">\n <meta name=\"author\" content=\"\">\n <title>Creative - {{ page.title }}<\/title>\n <!-- Bootstrap Core CSS -->\n <link rel=\"stylesheet\" href=\"\/css\/bootstrap.min.css\" type=\"text\/css\">\n <!-- Custom Fonts -->\n <link href='http:\/\/fonts.googleapis.com\/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text\/css'>\n <link href='http:\/\/fonts.googleapis.com\/css?family=Merriweather:400,300,300italic,400italic,700,700italic,900,900italic' rel='stylesheet' type='text\/css'>\n <link rel=\"stylesheet\" href=\"\/font-awesome\/css\/font-awesome.min.css\" type=\"text\/css\">\n <!-- Custom CSS -->\n <link rel=\"stylesheet\" href=\"\/css\/creative.css\" type=\"text\/css\">\n <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->\n <!--[if lt IE 9]>\n <script src=\"https:\/\/oss.maxcdn.com\/libs\/html5shiv\/3.7.0\/html5shiv.js\"><\/script>\n <script src=\"https:\/\/oss.maxcdn.com\/libs\/respond.js\/1.4.2\/respond.min.js\"><\/script>\n <![endif]-->\n <\/head>\n <body id=\"page-top\">\n <nav id=\"mainNav\" class=\"navbar navbar-default navbar-fixed-top\">\n <div class=\"container-fluid\">\n <!-- Brand and toggle get grouped for better mobile display -->\n <div class=\"navbar-header\">\n <button type=\"button\" class=\"navbar-toggle collapsed\" data-toggle=\"collapse\" data-target=\"#bs-example-navbar-collapse-1\">\n <span class=\"sr-only\">Toggle navigation<\/span>\n <span class=\"icon-bar\"><\/span>\n <span class=\"icon-bar\"><\/span>\n <span class=\"icon-bar\"><\/span>\n <\/button>\n <a class=\"navbar-brand page-scroll\" href=\"\/\">Start Bootstrap<\/a>\n <\/div>\n <!-- Collect the nav links, forms, and other content for toggling -->\n <div class=\"collapse navbar-collapse\" id=\"bs-example-navbar-collapse-1\">\n <ul class=\"nav navbar-nav navbar-right\">\n <li>\n <a href=\"\/about.html\">About<\/a>\n <\/li>\n <li>\n <a href=\"\/services.html\">Services<\/a>\n <\/li>\n <li>\n <a href=\"\/portfolio.html\">Portfolio<\/a>\n <\/li>\n <\/ul>\n <\/div>\n <!-- \/.navbar-collapse -->\n <\/div>\n <!-- \/.container-fluid -->\n <\/nav>\n {{ content }}\n <section id=\"contact\">\n <div class=\"container\">\n <div class=\"row\">\n <div class=\"col-lg-8 col-lg-offset-2 text-center\">\n <h2 class=\"section-heading\">Let's Get In Touch!<\/h2>\n <hr class=\"primary\">\n <p>Ready to start your next project with us? That's great! Give us a call or send us an email and we will get back to you as soon as possible!<\/p>\n <\/div>\n <div class=\"col-lg-4 col-lg-offset-2 text-center\">\n <i class=\"fa fa-phone fa-3x wow bounceIn\"><\/i>\n <p>123-456-6789<\/p>\n <\/div>\n <div class=\"col-lg-4 text-center\">\n <i class=\"fa fa-envelope-o fa-3x wow bounceIn\" data-wow-delay=\".1s\"><\/i>\n <p><a href=\"mailto:your-email@your-domain.com\">feedback@startbootstrap.com<\/a><\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n <!-- jQuery -->\n <script src=\"\/js\/jquery.js\"><\/script>\n <!-- Bootstrap Core JavaScript -->\n <script src=\"\/js\/bootstrap.min.js\"><\/script>\n <\/body>\n<\/html>\n\n<\/code><\/pre>\n<\/div>\n<\/div>\n\n\n\nStep 2: Remove the HTML content<\/h4>\n\n\n\n
Next, you are now able to load the default layout on
index.html<\/code> and set a title in the front matter. After that, you can remove the HTML content in the layout.<\/p>\n\n\n\n\n\n\n---\nlayout: default\ntitle: A Bootstrap theme\n---\n<header>\n <div class=\"header-content\">\n <div class=\"header-content-inner\">\n <h1>Your Favorite Source of Free Bootstrap Themes<\/h1>\n <hr>\n <p>Start Bootstrap can help you build better websites using the Bootstrap CSS framework! Just download your template and start going, no strings attached!<\/p>\n <a href=\"\/about.html\" class=\"btn btn-primary btn-xl page-scroll\">Find Out More<\/a>\n <\/div>\n <\/div>\n<\/header>\n<aside class=\"bg-dark\">\n <div class=\"container text-center\">\n <div class=\"call-to-action\">\n <h2>Free Download at Start Bootstrap!<\/h2>\n <a href=\"\/services.html\" class=\"btn btn-default btn-xl wow tada\">Download Now!<\/a>\n <\/div>\n <\/div>\n<\/aside>\n\n<\/code><\/pre>\n<\/div>\n<\/div>\n\n\n\nStep 3: Fix up the other pages<\/h4>\n\n\n\n
In this step, you have to fix up
about.html<\/code>,services.html<\/code>, andportfolio.html<\/code> which all have a block of HTML for the heading.<\/p>\n\n\n\n\n\n\n...\n<section class=\"bg-dark\">\n <div class=\"text-center\">\n <h1>About<\/h1>\n <\/div>\n<\/section>\n...\n\n<\/code><\/pre>\n<\/div>\n<\/div>\n\n\n\n![\"fix](\"https:\/\/cdn4.avada.io\/media\/shopify\/Ot7vIV7.jpg\")
<\/figure>\n\n\n\n<\/p>\n\n\n\n
So as to reduce the repetition in the source code of every page, creating another layout that inherits from the
_layouts\/default.html<\/code> is the next thing you should do.<\/p>\n\n\n\nFollowing the content below, let\u2019s create
_layouts\/page.html<\/code>.<\/p>\n\n\n\n\n\n\n---\nlayout: default\n---\n<section class=\"bg-dark\">\n <div class=\"text-center\">\n <h1>{{ page.title }}<\/h1>\n <\/div>\n<\/section>\n\n{{ content }}\n\n<\/code><\/pre>\n<\/div>\n<\/div>\n\n\n\nThis layout can now be used in
about.html<\/code>,services.html<\/code> andportfolio.html<\/code> without repeating source code. This is an example of howabout.html<\/code> looks like:<\/p>\n\n\n\n\n\n\n---\nlayout: page\ntitle: About\n---\n<section class=\"bg-primary\" id=\"about\">\n <div class=\"container\">\n <div class=\"row\">\n <div class=\"col-lg-8 col-lg-offset-2 text-center\">\n <h2 class=\"section-heading\">We've got what you need!<\/h2>\n <hr class=\"light\">\n <p class=\"text-faded\">Start Bootstrap has everything you need to get your new website up and running in no time! All of the templates and themes on Start Bootstrap are open source, free to download, and easy to use. No strings attached!<\/p>\n <a href=\"#\" class=\"btn btn-default btn-xl\">Get Started!<\/a>\n <\/div>\n <\/div>\n <\/div>\n<\/section>\n\n<\/code><\/pre>\n<\/div>\n<\/div>\n\n\n\n3. Collection<\/h3>\n\n\n\n
- Step 2: Create the post<\/a><\/li>\n\n\n\n
- Step 2: Create a
- Step 2: Remove the HTML content<\/a><\/li>\n\n\n\n
- Step 2: Open your site<\/a><\/li>\n<\/ul>\n<\/li>\n\n\n\n
- Step 1: Download and setup your theme<\/a><\/li>\n\n\n\n
![\"collection\"\/](\"https:\/\/cdn4.avada.io\/media\/shopify\/nUUFnfq.jpg\")
<\/figure>\n\n\n\n![\"post\"\/](\"https:\/\/cdn4.avada.io\/media\/shopify\/chHqP1b.jpg\")
<\/figure>\n\n\n\n![\"entire](\"https:\/\/cdn4.avada.io\/media\/shopify\/MhxgUA4.jpg\")
<\/figure>\n\n\n\n