{"html":"\u003cdiv class=\"sc-container sc-me\" id=\"SC-article-migrating-components-to-content-block-template\"\u003e\n  \u003cdiv class=\"SC-Grid\"\u003e\n      \u003cdiv class=\"SC-Grid_sidebar\"\u003e\u003cnav class=\"SC-PageNav\"\u003e\n  \u003cdiv class=\"SC-PageNav_content is-hidden\" data-toggle-visibility-target=\"article-sidebar\"\u003e\n    \u003cdiv class=\"SC-PageNav_heading\"\u003e\n      Categories\n    \u003c/div\u003e\n        \u003ca href=\"/articles/news\" class=\"SC-PageNav_link is-current\"\u003eNews \u0026amp; Updates\u003c/a\u003e\n        \u003ca href=\"/articles/podcasts\" class=\"SC-PageNav_link\"\u003ePodcasts\u003c/a\u003e\n        \u003ca href=\"/articles/media\" class=\"SC-PageNav_link\"\u003eMedia\u003c/a\u003e\n        \u003ca href=\"/articles/blogs\" class=\"SC-PageNav_link\"\u003eBlogs\u003c/a\u003e\n        \u003ca href=\"/articles/case-studies\" class=\"SC-PageNav_link\"\u003eCase Studies\u003c/a\u003e\n        \u003ca href=\"/articles/events\" class=\"SC-PageNav_link\"\u003eUpcoming Events\u003c/a\u003e\n        \u003ca href=\"/articles/tutorials\" class=\"SC-PageNav_link\"\u003eTutorials\u003c/a\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"SC-PageNav_menu-toggle target-hidden\" data-toggle-visibility=\"article-sidebar\"\u003e\u003csvg class=\"\" width=\"12\" viewBox=\"0 0 100 100\"\u003e\n  \u003cpath d=\"M56.7,75.75 L95.4,37.05 C98.8,33.65 98.8,28.05 95.4,24.65 C92,21.25 86.4,21.25 83,24.65 L50.5,57.05 L18,24.55 C14.6,21.15 9,21.15 5.6,24.55 C3.9,26.25 3,28.55 3,30.75 C3,33.05 3.9,35.25 5.6,36.95 L44.3,75.75 C47.7,79.15 53.3,79.15 56.7,75.75 Z\"\u003e\u003c/path\u003e\n\u003c/svg\u003e\n  \u003cdiv\u003e\n\u003c/nav\u003e\n      \u003c/div\u003e\n\n    \u003cdiv class=\"SC-Grid_main\"\u003e\n      \u003csection class=\"sc-rich-text\"\u003e\n        \u003carticle class=\"SC-Article\"\u003e\u003cheader class=\"SC-PageHeader \" \u003e\n    \u003ch1 class=\"SC-PageHeader_heading\"\u003e\n      Migrating Components to a Content Block Template\n    \u003c/h1\u003e\n\u003c/header\u003e\n              \u003cimg src=\"https://res.cloudinary.com/hzkr6fi81/image/upload/c_fit,f_auto,h_1024,w_1024/v1/media/migrating-content-storeconnect-socials.png\" class=\"sc-mb-base\" loading=\"lazy\"\u003e\n            \u003cdiv class=\"sc-mb-base sc-shade-neutral\"\u003e\n              September 13, 2022\n            \u003c/div\u003e\n          \u003cp\u003eThis article will help you understand the basics of migrating your theme. Whether importing templates from an existing theme or creating a brand new one, you will need to understand how to build custom content blocks and use the basic functionalities of the theme builder.\u003c/p\u003e\n\n\u003cp\u003eAlso, to follow this tutorial and before developing a new theme, you will need to understand the basics of the following subjects:\u003c/p\u003e\n\n\u003cul\u003e\n  \u003cli\u003e\u003ca href=\"https://help.getstoreconnect.com/documentation/themes/theme-reference.html\" target=\"_blank\"\u003eLiquid themes\u003c/a\u003e\u003c/li\u003e\n  \u003cli\u003e\u003ca href=\"https://help.getstoreconnect.com/documentation/adding-custom-javascript-css-and-head-content.html\" target=\"_blank\"\u003eAdding custom JS, CSS and Body Content\u003c/a\u003e\u003c/li\u003e\n  \u003cli\u003eHTML, CSS and Liquid basic knowledge\u003c/li\u003e\n\u003c/ul\u003e\n\n\u003ch3 id=\"step-1-design-aspects\"\u003eStep 1: Design Aspects\u003c/h3\u003e\n\n\u003cp\u003eOne of the easiest ways to learn how to migrate an existing theme or create a brand new theme is by creating a Content Block Template. For this tutorial, we have decided to build an event card template to display our information on upcoming webinars. It needs to contain a title, date, brief description and a call to action button.\u003c/p\u003e\n\n\u003cp\u003eThis is what we have currently:\u003c/p\u003e\n\n\u003cp\u003e\u003cimg src=\"https://res.cloudinary.com/hzkr6fi81/image/upload/v1662421605/media/current-component.png\" alt=\"StoreConnect article component\" width=\" 100% \" /\u003e\u003c/p\u003e\n\n\u003cp\u003eWe will migrate this component into event cards like this:\u003c/p\u003e\n\n\u003cp\u003e\u003cimg src=\"https://res.cloudinary.com/hzkr6fi81/image/upload/v1662421668/media/event-cards.png\" alt=\"StoreConnect new event card template\" width=\" 100% \" /\u003e\u003c/p\u003e\n\n\u003cp\u003eYou may want to build something different, like a banner or a featured products card, and as this tutorial will show you the basics, you can try and build your own template as you follow along.\u003c/p\u003e\n\n\u003cp\u003eAlthough they can have different designs, your design will likely contain HTML, CSS and liquid to render your data. Sometimes, you will need to use custom JS too. So the purpose of this tutorial is to teach you some basics of theme templates so you can then replicate the steps on your own content blocks.\u003c/p\u003e\n\n\u003ch3 id=\"step-2-create-a-theme-record\"\u003eStep 2: Create a Theme Record\u003c/h3\u003e\n\n\u003cp\u003eThemes provide the functionality to help you organise your assets and templates. Your theme record can hold multiple types of templates as well as assets like icons and CSS libraries.\u003c/p\u003e\n\n\u003cp\u003eThere is also a Preview feature that allows you to view how your site will look using your new theme without affecting your live site. This is handy when developing new themes or customising your store, so you can preview your changes before publishing them.\u003c/p\u003e\n\n\u003cp\u003ePlease read the \u003ca href=\"https://help.getstoreconnect.com/documentation/themes/theme-reference.html\" target=\"_blank\"\u003eTheme Builder Reference\u003c/a\u003e to familiarise yourself with its capabilities.\u003c/p\u003e\n\n\u003cp\u003e\u003cimg src=\"https://res.cloudinary.com/hzkr6fi81/image/upload/v1662421744/media/create-theme.gif\" alt=\"Create a StoreConnect Theme\" width=\" 100% \" /\u003e\u003c/p\u003e\n\n\u003col\u003e\n  \u003cli\u003eFrom the Themes tab, click the ‘New’ button \u003c/li\u003e\n  \u003cli\u003eGive your theme a name\u003c/li\u003e\n  \u003cli\u003eClick ‘Save’\u003c/li\u003e\n\u003c/ol\u003e\n\n\u003ch3 id=\"step-3-creating-a-new-template\"\u003eStep 3: Creating a new Template\u003c/h3\u003e\n\n\u003cp\u003eTo save time, Theme Builder allows you to create one template that will show dynamic data that you will be introducing whenever you create a new content block.\u003c/p\u003e\n\n\u003cp\u003eLet’s say you want to make weekly posts of your upcoming webinars and keep an updated page with all your upcoming events. For this, we will build an event card template.\u003c/p\u003e\n\n\u003cp\u003eInstructions:\u003c/p\u003e\n\n\u003col\u003e\n  \u003cli\u003eFrom your theme record’s related list, find Theme Templates\u003c/li\u003e\n  \u003cli\u003eClick the ‘New’ button\u003c/li\u003e\n  \u003cli\u003eCreate a key name for this template. For content block templates, the key name must always start with blocks/. We will name this key blocks/event_card\u003c/li\u003e\n  \u003cli\u003eClick on the Save button\u003c/li\u003e\n\u003c/ol\u003e\n\n\u003cp\u003eYou need to \u003ca href=\"https://help.getstoreconnect.com/documentation/adding-templates-to-content-template-picklist.html\" target=\"_blank\"\u003eadd your custom template to the Content Template picklist\u003c/a\u003e so users can use your template when creating new content blocks.\u003c/p\u003e\n\n\u003ch3 id=\"step-4-creating-the-html-markup\"\u003eStep 4: Creating the HTML markup\u003c/h3\u003e\n\n\u003cp\u003eWe now have the basic setup to build our template with dynamic data.\u003c/p\u003e\n\n\u003cp\u003eIf you’re migrating a component from an existing theme using WordPress, Shopify, or any other platform, use your browser inspector tool to copy the HTML of that component. Another way to do it is to dig into your theme files and look at the HTML of that component. Another option is to create the component from scratch.\u003c/p\u003e\n\n\u003cp\u003eI have my current site on an existing e-commerce platform, so I have used my browsers inspector tool and copied-pasted the following HTML markup into my new template’s Content field.\u003c/p\u003e\n\n\u003cpre\u003e\u003ccode\u003e\u0026lt;div class=\"event-card\"\u0026gt;\n  \u0026lt;div class=\"event-card_heading\"\u0026gt;\n    \u0026lt;h3\u0026gt;StoreConnect Webinar\u0026lt;/h3\u0026gt;\n  \u0026lt;/div\u0026gt;\n  \u0026lt;div class=\"event-card_date\"\u0026gt;\n    \u0026lt;span\u0026gt;20 Jun 2022, 5:00 p.m. Online\u0026lt;/span\u0026gt;\n  \u0026lt;/div\u0026gt;\n  \u0026lt;div class=\"event-card_body\"\u0026gt;\n     \u0026lt;p\u0026gt;Learn all the basic of StoreConnect,\n     create outstanding themes with our theme builder.\u0026lt;/p\u0026gt;\n  \u0026lt;/div\u0026gt;\n  \u0026lt;div class=\"event-card_action\"\u0026gt;\n     \u0026lt;a href=\"/webinar\" class=\"event-card_btn\"\u0026gt;Enrol now\u0026lt;/a\u0026gt;\n  \u0026lt;/div\u0026gt;\n\u0026lt;/div\u0026gt;\n\u003c/code\u003e\u003c/pre\u003e\n\n\u003cp\u003e\u003c/p\u003e\n\n\u003ch3 id=\"step-5-replacing-static-text-with-liquid-code\"\u003eStep 5: Replacing Static Text with Liquid Code\u003c/h3\u003e\n\n\u003cp\u003eYou will want a content block template that allows users to populate it with data from the content block record. We will use \u003ca href=\"https://help.getstoreconnect.com/documentation/liquid/0.9.5/objects/content_block-object-reference.html\" target=\"_blank\"\u003eliquid objects\u003c/a\u003e to access the content block fields.\u003c/p\u003e\n\n\u003cp\u003eStoreConnect provides a list of objects that work as placeholders which get replaced with dynamic data to create a better user experience. We will keep this simple, but you can create more complex code for different use cases.\u003c/p\u003e\n\n\u003cp\u003eWe are going to use the following fields from the content block record:\u003c/p\u003e\n\n\u003cul\u003e\n  \u003cli\u003eTitle\u003c/li\u003e\n  \u003cli\u003eSubtitle\u003c/li\u003e\n  \u003cli\u003eLabel and link target\u003c/li\u003e\n  \u003cli\u003eContent\u003c/li\u003e\n\u003c/ul\u003e\n\n\u003cp\u003eIn the following markup, we use the liquid reference to replace the hard-coded HTML with dynamic liquid objects so users can create or edit content blocks without needing to know or use any code.\u003c/p\u003e\n\n\u003cpre\u003e\u003ccode\u003e\u0026lt;div class=\"event-card\"\u0026gt;\n  \u0026lt;div class=\"event-card_heading\"\u0026gt;\n    \u0026lt;h3\u0026gt;{{ content_block.title }}\u0026lt;/h3\u0026gt;\n  \u0026lt;/div\u0026gt;\n  \u0026lt;div class=\"event-card_date\"\u0026gt;\n    \u0026lt;span\u0026gt;{{ content_block.subtitle }}\u0026lt;/span\u0026gt;\n  \u0026lt;/div\u0026gt;\n  \u0026lt;div class=\"event-card_body\"\u0026gt;\n    {{ content_block.content }}\n  \u0026lt;/div\u0026gt;\n  \u0026lt;div class=\"event-card_action\"\u0026gt;\n    \u0026lt;a href=\"{{ content_block.link_target }}\" class=\"event-card_btn\"\u0026gt;\n      {{ content_block.link_label | escape }}\n    \u0026lt;/a\u0026gt;\n  \u0026lt;/div\u0026gt;\n\u0026lt;/div\u0026gt;\n\u003c/code\u003e\u003c/pre\u003e\n\n\u003cp\u003e\u003c/p\u003e\n\n\u003cp\u003eThe HTML above contains the simplest way to render all the content blocks liquid objects. However,  I recommend you add some logic or conditionals, so you only render and display the object that contains actual data.\u003c/p\u003e\n\n\u003cpre\u003e\u003ccode\u003e\u0026lt;div class=\"event-card\"\u0026gt;\n\n  {% unless content_block.title == blank %}\n  \u0026lt;div class=\"event-card_heading\"\u0026gt;\n    \u0026lt;h3\u0026gt;{{ content_block.title }}\u0026lt;/h3\u0026gt;\n  \u0026lt;/div\u0026gt;\n  {% endunless %}\n\n  {% unless content_block.subtitle == blank %}\n  \u0026lt;div class=\"event-card_date\"\u0026gt;\n    \u0026lt;span\u0026gt;{{ content_block.subtitle }}\u0026lt;/span\u0026gt;\n  \u0026lt;/div\u0026gt;\n  {% endunless %}\n\n  {% unless content_block.content == blank %}\n  \u0026lt;div class=\"event-card_body\"\u0026gt;\n    {{ content_block.summary_content }}\n  \u0026lt;/div\u0026gt;\n  {% endunless %}\n\n  {% unless content_block.link_label == blank and content_block.link_target == blank %}\n  \u0026lt;div class=\"event-card_action\"\u0026gt;\n    \u0026lt;a href=\"{{ content_block.link_target }}\" class=\"event-card_btn\"\u0026gt;\n      {{ content_block.link_label | escape }}\n    \u0026lt;/a\u0026gt;\n  \u0026lt;/div\u0026gt;\n  {% endunless %}\n\n\u0026lt;/div\u0026gt;\n\u003c/code\u003e\u003c/pre\u003e\n\n\u003cp\u003e\u003c/p\u003e\n\n\u003ch3 id=\"step-6-adding-css\"\u003eStep 6: Adding CSS\u003c/h3\u003e\n\n\u003cp\u003eOnce you have your CSS worked out and are happy with it, you will save it as a CSS file and upload it as an asset to your theme.\u003c/p\u003e\n\n\u003cp\u003eWhile playing around with your CSS, you can do this from the store’s Custom Styles field. This is easier than having to upload a new file every time you make a change.\u003c/p\u003e\n\n\u003cpre\u003e\u003ccode\u003e.event-card {\n  border-radius: 5px;\n  box-shadow: rgba(9, 30, 66, 0.25) 0px 4px 8px -2px, rgba(9, 30, 66, 0.08) 0px 0px 0px 1px;\n  -webkit-box-shadow: rgba(9, 30, 66, 0.25) 0px 4px 8px -2px, rgba(9, 30, 66, 0.08) 0px 0px 0px 1px;      \n  font-family: 'Kanit', sans-serif;\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n  justify-content: space-between;\n  min-height: 150px;\n  padding: 20px;\n}\n.event-card_heading h3 {\n  font-size: 22px;\n}\n.event-card_date {\n  font-size: 15px;\n  margin-top: -5px;\n  margin-bottom: 10px;\n}\n.event-card_action {\n  margin-top: 20px;\n}\n\u003c/code\u003e\u003c/pre\u003e\n\n\u003cp\u003e\u003c/p\u003e\n\n\u003ch3 id=\"step-7-using-your-template\"\u003eStep 7: Using your template\u003c/h3\u003e\n\n\u003cp\u003eWe have created a test page for this step, but you can test it or use it on any page you like. First, you will need to create a container with the \u003ca href=\"https://help.getstoreconnect.com/documentation/content-block-containers.html\" target=\"_blank\"\u003elayout\u003c/a\u003e of your preference; I have created one using the Full width on smaller screens and three columns on larger screens and \u003ca href=\"https://help.getstoreconnect.com/documentation/nesting-content-blocks\" target=\"_blank\"\u003eattached\u003c/a\u003e it to the test page.\u003c/p\u003e\n\n\u003cp\u003eAssuming you have done those previous steps, then follow these instructions:\u003c/p\u003e\n\n\u003col\u003e\n  \u003cli\u003eGo to your container and find the related tab\u003c/li\u003e\n  \u003cli\u003eClick on the New button within the Child Content Blocks tab\u003c/li\u003e\n  \u003cli\u003eOn the new window, click on the search icon\u003c/li\u003e\n  \u003cli\u003eFind New Content Block and click on it\u003c/li\u003e\n  \u003cli\u003eSelect the event card template you have created in the previous steps\u003c/li\u003e\n  \u003cli\u003eFill up the fields and remember that we will be using:\n    \u003cul\u003e\n      \u003cli\u003eTitle\u003c/li\u003e\n      \u003cli\u003eSubtitle (to display time and day)\u003c/li\u003e\n      \u003cli\u003eSummary (to show a brief description of the event)\u003c/li\u003e\n      \u003cli\u003eLink label and target (in case you want a call to action button)\u003c/li\u003e\n    \u003c/ul\u003e\n  \u003c/li\u003e\n  \u003cli\u003eYou can create two more cards repeating steps 2 - 6\u003c/li\u003e\n\u003c/ol\u003e\n\n\u003cp\u003eSelecting “full width on smaller screens and three columns on larger” layout will distribute your cards as follows:\u003c/p\u003e\n\n\u003cp\u003e\u003cimg src=\"https://res.cloudinary.com/hzkr6fi81/image/upload/v1662422179/media/event-cards-complete.png\" alt=\"StoreConnect event cards template in use\" width=\" 100% \" /\u003e\u003c/p\u003e\n\n\u003ch3 id=\"overview\"\u003eOverview\u003c/h3\u003e\n\n\u003cp\u003eThe preview above is our final result, but it could be different on your end depending on how you configured yours.\u003c/p\u003e\n\n\u003cp\u003eA few things to consider. You can reutilise your templates and give them different uses. You can showcase a service or product or whatever suits your needs.\u003c/p\u003e\n\n\u003cp\u003eIf your cards are not displaying, always check your liquid code and use the liquid reference to check if you are using the correct liquid object. Also, check if your content block is correctly assigned to the page you are working with.\u003c/p\u003e\n\n\u003cp\u003eTest your CSS using the custom styles field, and when you have finalised your development, you can upload it to the theme assets. This way, it will avoid you uploading new CSS files every time you make a change.\u003c/p\u003e\n\n\u003cp\u003eAs a piece of final advice, don’t hesitate to contact our support team. They are always happy to help and provide any guidance you may need.\u003cbr /\u003e\nsupport@getstoreconnect.com\u003c/p\u003e\n\n\u003ch4 id=\"related-articles\"\u003eRelated articles\u003c/h4\u003e\n\n\u003cul\u003e\n  \u003cli\u003e\u003ca href=\"https://getstoreconnect.com/articles/get-ecommerce-up-and-running\"\u003eGet eCommerce up and running in an afternoon within Salesforce\u003c/a\u003e\u003c/li\u003e\n  \u003cli\u003e\u003ca href=\"https://help.getstoreconnect.com/documentation/liquid/liquid-reference.html\"\u003eTheme builder liquid reference\u003c/a\u003e\u003c/li\u003e\n  \u003cli\u003e\u003ca href=\"https://shopify.github.io/liquid/\"\u003eLiquid open-source template\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\n        \u003c/article\u003e\n      \u003c/section\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/div\u003e","flash":null,"action":null,"notice":null}