{"id":59426,"date":"2016-01-12T02:24:01","date_gmt":"2016-01-12T07:24:01","guid":{"rendered":"http:\/\/www.templatemonster.com\/help\/?p=59426"},"modified":"2016-03-01T04:21:49","modified_gmt":"2016-03-01T09:21:49","slug":"shopify-how-to-add-one-more-set-row-of-banners","status":"publish","type":"post","link":"https:\/\/www.templatemonster.com\/help\/shopify-how-to-add-one-more-set-row-of-banners.html","title":{"rendered":"Shopify. How to add one more set (row) of banners"},"content":{"rendered":"

\r\n

This tutorial shows how to add one more set (row) of banners in Shopify theme.<\/p>\r\n

Shopify. How to add one more set (row) of banners<\/a>\r\n

    \r\n
  1. \r\n

    In our case template comes with 6 banners: <\/p>\r\n

    \"Shopify.<\/a>\r\n<\/li>\r\n

  2. \r\n

    Let’s add 3 more banners (row of banners). Open Chrome developer tool<\/strong>. You may use Firebug<\/strong> in Firefox browser. We can see that classes like custom_showcase<\/strong> and custom_showcase__1<\/strong> are used. In order to add banners, we should modify template files and styles. We can use such classes in order to locate appropriate part of code in template files:<\/p>\r\n

    \"Shopify.<\/a>\r\n<\/li>\r\n

  3. \r\n

    Make sure you have downloaded theme files and unzipped them. Open software like Notepadd++<\/a> in order to search code in template files. Open search dialog access Find and replace tab<\/strong>. Specify class name in Find what<\/strong> field. Select the folder where theme files are located, make sure you have the same options and click on Find All<\/strong>:\r\n <\/p>\r\n

    \"Shopify.<\/a>\r\n<\/li>\r\n

  4. \r\n

    We have located files with styles. We should perform changes in responsive.css.liquid<\/strong> and style.css.liquid<\/strong> files. Open responsive.css.liquid<\/strong> file in Shopify editor. Find the appropriate code. Copy code for the first three banners:\r\n<\/p>\r\n

    \"Shopify.<\/a><\/p>\r\n<\/li>\r\n

  5. \r\n

    Paste the code below css code of the last banner. Change classes and save changes:<\/p>\r\n

    \r\ncustom_showcase__1 to custom_showcase__7\r\n\r\ncustom_showcase__2 to custom_showcase__8\r\n\r\ncustom_showcase__3 to custom_showcase__9 <\/pre>\r\n
    \"Shopify.<\/a><\/p>\r\n<\/li>\r\n
  6. \r\n
    Now we should perform similar changes to style.less.liquid <\/strong>file. Open file in Shopify editor. Find appropriate code and copy code for three banners. Paste the code below styles for the last block. Change classes in the way we have specified previously:<\/p>\r\n
    \"Shopify.<\/a>\r\n<\/li>\r\n
  7. \r\n
    Now we should look for files that define code and settings for banners. In our case the best way is searching using custom_showcase<\/strong> keyword in template files. In our case changes should be performed to the following files: settings_data.json<\/strong>, settings_schema.json<\/strong>, widget-homepage-showcase.liquid.<\/strong> Open settings_data.json<\/strong> in Shopify editor. Search code using custom_showcase<\/strong> keyword. Copy the code for the first three banners:<\/p>\r\n
    \"Shopify.<\/a>\r\n<\/li>\r\n
  8. \r\n
    Perform changes to classes and add them below the code for the last banner. Save the changes:<\/p>\r\n
    \"Shopify.<\/a>\r\n<\/li>\r\n
  9. \r\n
    Now we should modify settings_schema.json<\/strong> file. Search the appropriate part of code using custom_showcase<\/strong> keyword. We can see the code for the first block. We should copy the code for three banners and change class names. Paste the updated code below the code for the last banner. Change block number (Block #1<\/strong> shuold be changed to Block #7<\/strong> etc.). Please check video version of tutorial for more detailed information:<\/p>\r\n
    \"Shopify.<\/a>\r\n<\/li>\r\n
  10. \r\n
    We should also edit widget-homepage-showcase.liquid<\/strong> file. Open the file in Shopify editor: <\/p>\r\n
    \"Shopify.<\/a>\r\n<\/li>\r\n
  11. \r\n
    Change number to the number of your banners in cycle. In our case there are 9 banners:<\/p>\r\n
    \"Shopify.<\/a>\r\n<\/li>\r\n
  12. \r\n
    Go to Themes section and click Customize theme. <\/strong>Open Custom blocks<\/strong>. New banners were added. You may need to upload images for new banners: <\/p>\r\n
    \"Shopify.<\/a>\r\n<\/li>\r\n
  13. \r\n
    Refresh the page. We have added a new row of banners:<\/p>\r\n
    \"Shopify.<\/a>\r\n<\/li>\r\n<\/ol>\r\n
    Feel free to check the detailed video tutorial below:<\/p>\r\n
    Shopify. How to add one more set (row) of banners<\/a><\/p>","protected":false},"excerpt":{"rendered":"
    This tutorial shows how to add one more set (row) of banners in Shopify theme.<\/p>\n","protected":false},"author":39,"featured_media":59445,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[1771],"tags":[547,617,1756,2419],"_links":{"self":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/59426"}],"collection":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/users\/39"}],"replies":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/comments?post=59426"}],"version-history":[{"count":0,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/59426\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media\/59445"}],"wp:attachment":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media?parent=59426"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/categories?post=59426"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/tags?post=59426"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}