\n<\/a>How to create new Shopify sections (blocks in PageBuilder)
\n<\/a>How to create new Shopify templates
\n<\/a>How to create a Shopify checkout page
\n<\/a>How to add a product to Shopify<\/a><\/p>\n
How to edit Shopify theme<\/h2>\n
If you decide to create your own theme, you need to register on the Shopify service, and then set up your own store following the instructions.<\/p>\n
Once you enter the basic information, such as store name, currency, country and others, you can start customizing a standard theme or use ours. If you choose the second option (our theme), go to the Online store<\/strong> -> Themes<\/strong>.<\/p>\n Click on Upload theme<\/strong> and select the archive with our theme. Now you can customize our theme and then choose it as the main one.<\/p>\n Here we demonstrate how you can edit Shopify theme at the example of FoodStore theme by BelVG<\/strong>. It’s parent theme is the standard one. Customization of themes created by other developers might slightly differ.<\/p>\n To start customizing the theme, you need to click on the Customize<\/strong> button. It will open the page builder with the main page of your store.<\/p>\n To change the visuals of your theme, you need to click on Theme settings<\/strong>. It opens the fields where you can change the visuals.<\/p>\n Return to the Section<\/strong> to modify the content on the main and other pages. You can move blocks in this section or, by clicking on the block, change the content in the block.<\/p>\n For instance, select the Call to actions<\/strong> block. In this block, you can simply select the parameters, such as picture, background color, title text, text for the block, button text, and a link when pressed. With such simple manipulations, you can add content to your site.<\/p>\n To add a new block to the page, you need to return to the section with all the blocks and select Add section<\/strong>. It will bring up a list of blocks that can be used in your theme.<\/p>\n Let’s create a new block, identical to the Call to Actions<\/strong> one but with the ability to change the color of the header text. To create a new block, go to Online store<\/strong> -> Themes<\/strong> -> Actions<\/strong> -> Edit code<\/strong> in the admin panel. Click on the Add a new section<\/strong> button and enter a name for a new template.<\/p>\n Then, you need to copy the code of the Call to actions<\/strong> block to our file.<\/p>\n First, we need to add a color picker for the title in this block. To do this, you should add the following piece of code to our template:<\/p>\n If we want to apply settings to the title, we need to add a unique class to the h1 tag:<\/p>\n To use the color variable exactly with the title that we change, we need to add the following code to the HTML part:<\/p>\n To make our block unique, change its name. It will make it much easier to find:<\/p>\n As a result, the code of our template will look like this:<\/p>\n To add our block to the site, you need to open the needed page in the Customize<\/strong> mode. Click on Add sections<\/strong> and select the block. Add the main information and see that the title text changes depending on the one you’ve selected.<\/p>\n To create or edit page templates, open the Template<\/strong> tab in the code editor. In this section, select an existing file or create a new one. For instance, create a new Collection<\/strong> page template with static text below the title. To do this, create a file called collection.width-static-text.liquid<\/strong>. In this file, the standard collection section will be displayed by default.<\/p>\n {% comment %} {% section ‘collection-template’ %}<\/p>\n You need to create your new section to display the static text. To do this, create a new section called collection-template-width-text<\/strong>, copy the code from the standard section of the collection into this section and edit it.<\/p>\n Change the path to the section file in the new collection template:<\/p>\n {% comment %} {% section ‘collection-template-width-section’ %}<\/p>\n To apply these settings to a specific section, go to Products<\/strong> -> Collections<\/strong> in the admin panel. Select the needed collection and change the template of our page to the previously created one. Save all changes. And now the page of the selected category will look like this:<\/p>\n To change visuals of the checkout page, open the cart page in PageBuilder<\/strong> mode. The basic Shopify<\/a> version provides several settings to change visuals. To add your blocks to the checkout page or add your own css styles, you need to operate the Shopify Plus version<\/a>.<\/p>\n The basic Shopify plan provides the following settings to change the checkout visuals:<\/p>\n To add a product to the catalog, open the Products<\/strong> -> add product<\/strong> tab in the admin panel. You will see the page where you can enter the basic information about the product.<\/p>\n Besides that, you can create combined products with different prices for each characteristic.<\/p>\n You can also change the title and description for SEO.<\/p>\n As a result, the page with the created product looks like that:<\/p>\n![\"How](\"https:\/\/belvg.com\/blog\/wp-content\/uploads\/2020\/05\/How-to-edit-Shopify-theme-and-add-new-shopify-sections.png\" "\\"How")
<\/a><\/p>\n![\"edit](\"https:\/\/belvg.com\/blog\/wp-content\/uploads\/2020\/05\/edit-Shopify-theme.png\" "\\"How")
<\/a><\/p>\n![\"Shopify](\"https:\/\/belvg.com\/blog\/wp-content\/uploads\/2020\/05\/shopify-theme-customization.png\" "\\"How")
<\/a><\/p>\nThe visuals include:<\/h3>\n
\n
![\"customize](\"https:\/\/belvg.com\/blog\/wp-content\/uploads\/2020\/05\/customize-shopify-theme.png\" "\\"How")
<\/a><\/p>\n\n
![\"How](\"https:\/\/belvg.com\/blog\/wp-content\/uploads\/2020\/05\/How-to-edit-shopify-theme-fonts.png\" "\\"How")
<\/a><\/p>\n\n
![\"how](\"https:\/\/belvg.com\/blog\/wp-content\/uploads\/2020\/05\/how-to-edit-shopify-theme-social-networks.png\" "\\"How")
<\/a><\/p>\n\n
![\"how](\"https:\/\/belvg.com\/blog\/wp-content\/uploads\/2020\/05\/how-to-edit-shopify-theme-favicon.png\" "\\"How")
<\/a><\/p>\n\n
![\"how](\"https:\/\/belvg.com\/blog\/wp-content\/uploads\/2020\/05\/how-to-edit-shopify-theme-header.png\" "\\"How")
<\/a><\/p>\n\n
![\"how](\"https:\/\/belvg.com\/blog\/wp-content\/uploads\/2020\/05\/how-to-edit-shopify-theme-footer.png\" "\\"How")
<\/a><\/p>\n![\"how](\"https:\/\/belvg.com\/blog\/wp-content\/uploads\/2020\/05\/how-to-eidt-shopify-theme-shopify-sections.png\" "\\"How")
<\/a><\/p>\n![\"how](\"https:\/\/belvg.com\/blog\/wp-content\/uploads\/2020\/05\/how-to-edit-shopify-theme-call-to-action.png\" "\\"How")
<\/a><\/p>\nHow to create new Shopify sections (blocks in PageBuilder)<\/h2>\n
![\"how](\"https:\/\/belvg.com\/blog\/wp-content\/uploads\/2020\/05\/how-to-add-new-shopify-sections-pagebuilder.png\" "\\"How")
<\/a><\/p>\n![\"add](\"https:\/\/belvg.com\/blog\/wp-content\/uploads\/2020\/05\/add-shopify-sections.png\" "\\"How")
<\/a><\/p>\n {\r\n \"type\": \"color\", \/\/ type selector\r\n \"id\": \"title_color\", \/\/id this block\r\n \"label\": \"Title color\", \/\/ label on the page builder\r\n \"default\": \"#333333\" \/\/default setting\r\n },\r\n<\/pre>\n<h1 class=\"little-image-text--tittle color-text-{{ section.id }}\">{{ section.settings.text-box }}<\/h1><\/code><\/p>\n<style>\r\n.color-text-{{ section.id }} {\r\n\tcolor: {{ section.settings.title_color }};\r\n} \r\n<\/style>\r\n<\/pre>\n<\/a><\/p>\n<div class=\"little-image-text--block\" style=\"background-color:{{section.settings.background_color }}\">\r\n <div class=\"little-image-text--block-wrapper page-width feature-row\">\r\n <div class=\"little-image-text--image-wrapper\">\r\n {{ section.settings.image_little | img_url: '600x' | img_tag }}\r\n \t<\/div>\r\n <div class=\"little-image-text--text-wrapper\">\r\n <h1 class=\"little-image-text--tittle color-text-{{ section.id }}\">{{ section.settings.text-box }}<\/h1>\r\n <p class=\"little-image-text--text\">{{ section.settings.text }}<\/p>\r\n <a href=\"{{ section.settings.link }}\" style=\"color:{{section.settings.color_btn }};\" class=\"btn little-image-text--btn\">{{ section.settings.linktext }}<\/a>\r\n \t<\/div>\r\n <\/div>\r\n<\/div>\r\n\r\n<style>\r\n.color-text-{{ section.id }} {\r\n\tcolor: {{ section.settings.title_color }};\r\n} \r\n<\/style>\r\n\r\n{% schema %}\r\n{\r\n \"name\": \"Call to Actions\",\r\n \"class\": \"index-section index-section--flush\",\r\n \"settings\": [\r\n {\r\n \"type\": \"image_picker\",\r\n \"id\": \"image_little\",\r\n \"label\": \"Image\" \r\n },\r\n {\r\n \"type\": \"color\",\r\n \"id\": \"background_color\",\r\n \"label\": \"Background color\",\r\n \"default\": \"#ffffff\"\r\n },\r\n {\r\n \"id\": \"text-box\",\r\n \"type\": \"text\",\r\n \"label\": \"Heading\",\r\n \"default\": \"Title\"\r\n },\r\n {\r\n \"type\": \"color\",\r\n \"id\": \"title_color\",\r\n \"label\": \"Title color\",\r\n \"default\": \"#333333\"\r\n },\r\n {\r\n \"id\": \"text\",\r\n \"type\": \"richtext\",\r\n \"label\": \"Add custom text below\",\r\n \"default\": \"<p>Add your text here<\/p>\"\r\n },\r\n\t {\r\n \"id\": \"link\",\r\n \"type\": \"url\",\r\n \"label\": \"Button link\"\r\n },\r\n { \r\n \"id\": \"linktext\",\r\n \"type\": \"text\",\r\n \"label\": \"Button text\",\r\n \"default\": \"Click Here\"\r\n }\r\n ],\r\n \"presets\": [\r\n {\r\n \"name\": \"Call actions width color\",\r\n \"category\": \"BelVG\"\r\n }\r\n ]\r\n}\r\n{% endschema %}\r\n<\/pre>\n![\"how](\"https:\/\/belvg.com\/blog\/wp-content\/uploads\/2020\/05\/how-to-add-shopify-sections-customization.png\" "\\"How")
<\/a><\/p>\nHow to create new Shopify templates<\/h2>\n
\nThe contents of the collection.liquid template can be found in \/sections\/collection-template.liquid
\n{% endcomment %}<\/p>\n
\nThe contents of the collection.liquid template can be found in \/sections\/collection-template.liquid
\n{% endcomment %}<\/p>\n![\"shopify](\"https:\/\/belvg.com\/blog\/wp-content\/uploads\/2020\/05\/shopify-theme-customization-sections.png\" "\\"How")
<\/a><\/p>\nHow to create a Shopify checkout page<\/h2>\n
\n
![\"how](\"https:\/\/belvg.com\/blog\/wp-content\/uploads\/2020\/05\/how-to-edit-shopify-theme-checkout-page.png\" "\\"How")
<\/a><\/p>\n![\"how](\"https:\/\/belvg.com\/blog\/wp-content\/uploads\/2020\/05\/how-to-edit-shopify-theme-shopify-chechout.png\" "\\"How")
<\/a><\/p>\nHow to add a product to Shopify<\/h2>\n
![\"how](\"https:\/\/belvg.com\/blog\/wp-content\/uploads\/2020\/05\/how-to-add-a-product-to-shopify.png\" "\\"How")
<\/a><\/p>\n![\"how](\"https:\/\/belvg.com\/blog\/wp-content\/uploads\/2020\/05\/how-to-add-a-product-to-shopify-in-admin.png\" "\\"How")
<\/a><\/p>\n![\"shopify](\"https:\/\/belvg.com\/blog\/wp-content\/uploads\/2020\/05\/shopify-customization-add-products-to-shopify.png\" "\\"How")
<\/a><\/p>\n![\"how](\"https:\/\/belvg.com\/blog\/wp-content\/uploads\/2020\/05\/how-to-edit-shopify-page-title-and-description.png\")
<\/a><\/p>\n
![\"create](\"https:\/\/belvg.com\/blog\/wp-content\/uploads\/2020\/05\/create-product-in-shopify.png\" "\\"How")
<\/a><\/p>\n