{"title":"UI\/UX Improvements","description":"\u003ch2\u003eShopify UI\/UX Improvement Guide\u003c\/h2\u003e\n\u003cp\u003e This article summarizes practical UI\/UX improvement methods for Shopify that will improve usability and increase customer satisfaction and conversion rates at the same time.\u003c\/p\u003e\n\u003cul\u003e\n\n\u003cli\u003e\n\n \u003cstrong\u003eSearch function optimization\u003c\/strong\u003e\u003cspan\u003e \u003c\/span\u003e- Improved information accessibility through product and blog searches\u003c\/li\u003e\n\n\u003cli\u003e\n\n \u003cstrong\u003eForm improvement\u003c\/strong\u003e\u003cspan\u003e \u003c\/span\u003e- Optimized the order of fields on the address editing screen of the account page\u003c\/li\u003e\n\n\u003cli\u003e\n\n \u003cstrong\u003eNavigation Enhancements\u003c\/strong\u003e\u003cspan\u003e \u003c\/span\u003e- Tag filtering and breadcrumb list\u003c\/li\u003e\n\n\u003cli\u003e\n\n \u003cstrong\u003eInventory display optimization\u003c\/strong\u003e\u003cspan\u003e \u003c\/span\u003e- Improved shopping experience by automatically hiding out-of-stock items\u003c\/li\u003e\n\n\u003cli\u003e\n\n \u003cstrong\u003eImproved usability\u003c\/strong\u003e\u003cspan\u003e \u003c\/span\u003e- Intuitive and easy-to-use interface design\u003c\/li\u003e\n\n\n\u003c\/ul\u003e\n\u003cp\u003e Improvements based on user-centered design philosophy are expected to reduce abandonment rates and significantly improve purchase completion rates.\u003c\/p\u003e","products":[{"product_id":"2022-12-28","title":"Display thumbnails in menus to improve user experience with Shopify","description":"\u003cp\u003e\u003cmeta charset=\"utf-8\"\u003e\u003cmeta charset=\"utf-8\"\u003e\u003cspan\u003eDepending on the theme, Shopify menus can be set up to look good with mega menus, but it is recommended to display thumbnails in normal menus as well, as this will increase the convenience of users. This is a method to get the image URL from the menu element object (link.links) and display a thumbnail.\u003c\/span\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003cdiv class=\"divider\"\u003e\u003cbr\u003e\u003c\/div\u003e\n\u003ch3\u003e Example of displaying images in a menu \u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2022-12-28_1.jpg?v=1736003033\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003ch3\u003e Among the things that can be set in the menu, images can only be displayed in \"Collections,\" \"Products,\" and \"Blog Posts.\" \u003c\/h3\u003e\n\u003cp\u003e\u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2022-12-28_2.jpg?v=1736003033\" alt=\"\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003ch3\u003e Example code to reference collection and product images set in links \u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2022-12-28_3.jpg?v=1736003033\" class=\"zoomable-image\"\u003e\u003c\/p\u003e","brand":"STORE DOJO","offers":[{"title":"Default Title","offer_id":46823935803643,"sku":null,"price":0.0,"currency_code":"JPY","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2022-12-28.png?v=1736037693"},{"product_id":"2023-01-23","title":"Example of implementation for displaying collections in ranking format on Shopify","description":"\u003cp\u003e\u003cmeta charset=\"utf-8\"\u003e\u003cmeta charset=\"utf-8\"\u003e\u003cspan\u003eThis is an example of how to display collections in ranking format on Shopify, but be careful with pagination. By using \"paginate.current_offset\", you can correctly display the ranking order from the second page onwards even if the number of items displayed per page changes.\u003c\/span\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003cdiv class=\"divider\"\u003e\u003cbr\u003e\u003c\/div\u003e\n\u003ch3\u003e [Dawn 7.0.1] Added ranking display\/hide setting item to main-collection-product-grid.liquid schema \u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-01-23_1.jpg?v=1736046249\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003ch3\u003e [Dawn 7.0.1] Fixed main-collection-product-grid.liquid and card-product.liquid \u003c\/h3\u003e\n\u003cp\u003e\u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-01-23_2.jpg?v=1736046249\" alt=\"\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003ch3\u003e [Dawn 7.0.1] Duplicate the template for rankings to prevent it from being reflected in all collections \u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-01-23_3.jpg?v=1736046248\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003ch3\u003e Set the theme template of the collection that displays the ranking to \"ranking\" \u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-01-23_4.jpg?v=1736046249\" class=\"zoomable-image\"\u003e\u003c\/p\u003e","brand":"STORE DOJO","offers":[{"title":"Default Title","offer_id":46827006820603,"sku":null,"price":0.0,"currency_code":"JPY","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-01-23.png?v=1736046249"},{"product_id":"2023-03-04","title":"Example of setting up an email newsletter permission confirmation item on the Shopify account registration screen","description":"\u003cp\u003e\u003cmeta charset=\"utf-8\"\u003e\u003cmeta charset=\"utf-8\"\u003e\u003cspan\u003eThere are times when you may want to include an email newsletter permission confirmation item on the Shopify account registration screen, but as officially explained, you need to be careful because if you do not include it alongside a hidden item, the permission will be granted even if you unchecked the box when registering.\u003c\/span\u003e \u003cbr\u003e\u003c\/p\u003e\n\u003cdiv class=\"divider\"\u003e\u003cbr\u003e\u003c\/div\u003e\n\u003ch3\u003e\n\n\u003cmeta charset=\"utf-8\"\u003e\n\n\u003cmeta charset=\"utf-8\"\u003e\n\n\u003cspan\u003e\u003c\/span\u003e\u003cspan\u003e\u003c\/span\u003e \u003cspan\u003ePoints to note when adding a newsletter reception checkbox to the account creation screen\u003c\/span\u003e \n\n\u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-03-04_1.jpg?v=1736057360\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003carticle class=\"link-card\"\u003e \u003ca href=\"https:\/\/shopify.dev\/docs\/storefronts\/themes\/customer-engagement\/email-consent#customer-registration-form-checkbox\" target=\"_blank\"\u003e\n\u003cdiv\u003e\u003cimg alt=\"Customer registration form checkbox\" src=\"https:\/\/cdn.shopify.com\/assets\/images\/logos\/shopify-bag.png\"\u003e\u003c\/div\u003e\n\n \u003cdiv class=\"content\"\u003e\n\n\u003ch2\u003eCustomer registration form checkbox\u003c\/h2\u003e\n\n\u003cp\u003e\u003c\/p\u003e\n\n \u003ccite\u003eshopify.dev\u003c\/cite\u003e\n\n\u003c\/div\u003e\n\n\u003c\/a\u003e\u003c\/article\u003e","brand":"STORE DOJO","offers":[{"title":"Default Title","offer_id":46827129503995,"sku":null,"price":0.0,"currency_code":"JPY","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-03-04.png?v=1736057360"},{"product_id":"2023-03-05","title":"How to set individual sort filters for collections in Shopify","description":"\u003cp\u003e\u003cmeta charset=\"utf-8\"\u003e\u003cmeta charset=\"utf-8\"\u003e\u003cspan\u003eWe sometimes receive requests to hide the sales order in the sort filter on the Shopify collection page in order to prevent competition. In that case, you can hide it directly with code, but it would be convenient to make it editable from the theme editor so that you can respond to policy changes after operation.\u003c\/span\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003cdiv class=\"divider\"\u003e\u003cbr\u003e\u003c\/div\u003e\n\u003ch3\u003e Customization example using the theme \"Dawn\" 8.0.0 \u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-03-05_1.jpg?v=1736057995\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e ① Modify main-collection-product-grid.liquid \u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-03-05_2.jpg?v=1736057995\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e ② Modify facets.liquid \u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-03-05_3.jpg?v=1736057995\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e ③ Modify ja.scheme.json \u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-03-05_4.jpg?v=1736057995\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e","brand":"STORE DOJO","offers":[{"title":"Default Title","offer_id":46827141824763,"sku":null,"price":0.0,"currency_code":"JPY","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-03-05.png?v=1736057995"},{"product_id":"2023-03-13","title":"How to use Shopify metafields to specify mobile images for collection images","description":"\u003cp\u003e\u003cmeta charset=\"utf-8\"\u003e\u003cmeta charset=\"utf-8\"\u003e\u003cspan\u003eSince Shopify only allows you to specify one collection image, the same image is displayed on PC and SP. However, you still want to display the optimal image for each device. Therefore, it is quite common to use meta fields to specify a separate image for mobile devices.\u003c\/span\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003cdiv class=\"divider\"\u003e\u003cbr\u003e\u003c\/div\u003e\n\u003ch3\u003e How to use metafields to set collection images for mobile \u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-03-13_1.jpg?v=1736059986\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e ① Set file meta fields \u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-03-13_2.jpg?v=1736059986\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e ②Edit the code to display the collection image \u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-03-13_3.jpg?v=1736059986\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e","brand":"STORE DOJO","offers":[{"title":"Default Title","offer_id":46827181244667,"sku":null,"price":0.0,"currency_code":"JPY","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-03-13.png?v=1736059986"},{"product_id":"2023-03-20","title":"[Dawn] Example of implementation to display \"Free shipping when you leave a certain amount\" on the cart screen in Shopify without using an app","description":"\u003cp\u003e\u003cmeta charset=\"utf-8\"\u003e\u003cmeta charset=\"utf-8\"\u003e\u003cspan\u003eThis is an example of how to display \"Free shipping when you leave a certain amount\" on the cart screen without using an app in Shopify. Some themes update the total amount without reloading the cart screen when changing the quantity or deleting an item, so it's better to change it dynamically with js rather than Liquid.\u003c\/span\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003cdiv class=\"divider\"\u003e\u003cbr\u003e\u003c\/div\u003e\n\u003ch3\u003e Uses the theme \"Dawn\". Supports real-time calculations based on changes in cart quantities. \u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-03-20_1.jpg?v=1736060948\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e Add a \"Customized Liquid\" section to your cart screen and enter the code \u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-03-20_2.jpg?v=1736060948\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n","brand":"STORE DOJO","offers":[{"title":"Default Title","offer_id":46827222434043,"sku":null,"price":0.0,"currency_code":"JPY","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-03-20.png?v=1736060948"},{"product_id":"2023-03-30","title":"How to set smartphone images in the slideshow section of the Shopify theme \"Dawn\"","description":"\u003cp\u003e\u003cmeta charset=\"utf-8\"\u003e\u003cmeta charset=\"utf-8\"\u003e\u003cspan\u003eThe \"Slideshow\" section of the Shopify theme \"Dawn\" allows you to specify only one image per block, so the same image will be displayed on all devices, with only slight differences in cropping. However, you will probably want to display a vertically long image on a smartphone, so here is an example of how to set it up.\u003c\/span\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003cdiv class=\"divider\"\u003e\u003cbr\u003e\u003c\/div\u003e\n\u003ch3\u003e How to set up smartphone images in the \"Slideshow section\" of Dawn \u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-03-30_1.jpg?v=1736076672\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e ① Modify the \"slideshow.liquid\" schema, ② Modify \"ja.schema.json\" \u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-03-30_2.jpg?v=1736076672\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e ③ Edit the code where the image is displayed in \"slideshow.liquid\" \u0026amp; modify the CSS as necessary. \u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-03-30_3.jpg?v=1736076672\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e","brand":"STORE DOJO","offers":[{"title":"Default Title","offer_id":46827756323067,"sku":null,"price":0.0,"currency_code":"JPY","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-03-30.png?v=1736076672"},{"product_id":"2023-03-31","title":"How to prioritize products and collections in Shopify","description":"\u003cp\u003e\u003cmeta charset=\"utf-8\"\u003e\u003cmeta charset=\"utf-8\"\u003e\u003cspan\u003eWe sometimes receive requests to set priorities for Shopify collections and adjust the display order of products. Although it is not possible to do it fully automatically and in real time, we sometimes use an app called Matrixify to perform bulk updates via CSV based on the priorities set in meta fields.\u003c\/span\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003cdiv class=\"divider\"\u003e\u003cbr\u003e\u003c\/div\u003e\n\u003ch3\u003e How to set the display order priority for product information and set the display order for collections (semi-automatic process using the Matrixify app by downloading data → processing → uploading) \u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-03-31_1.jpg?v=1736079599\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e ① Create a display order priority setting item in the product meta field and set the priority for each product \u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-03-31_2.jpg?v=1736079598\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e ② Use Matrixify to export the target collection and product information \u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-03-31_3.jpg?v=1736079598\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e 3) Use the downloaded collection and product information data to change the product order and create a CSV for uploading \u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-03-31_4.jpg?v=1736079598\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e","brand":"STORE DOJO","offers":[{"title":"Default Title","offer_id":46827869503739,"sku":null,"price":0.0,"currency_code":"JPY","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-03-31.png?v=1736079598"},{"product_id":"2023-04-01","title":"Example of changing the order of items on the address editing screen on the Shopify theme \"Dawn\" account page","description":"\u003cp\u003e\u003cmeta charset=\"utf-8\"\u003e\u003cspan\u003e\u003cmeta charset=\"utf-8\"\u003eThe address editing screen on your Shopify account page has a strange default layout, so here's how to edit it.\u003c\/span\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e Dawn theme account page: Change the order of items on the address editing screen \u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-04-01_1.jpg?v=1736079917\" class=\"zoomable-image\"\u003e\u003c\/p\u003e","brand":"STORE DOJO","offers":[{"title":"Default Title","offer_id":46827893195003,"sku":null,"price":0.0,"currency_code":"JPY","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-04-01.png?v=1736079916"},{"product_id":"2023-04-04","title":"Example of setting up Shopify to display pages in a blog-like list with thumbnails","description":"\u003cp\u003e\u003cmeta charset=\"utf-8\"\u003e\u003cmeta charset=\"utf-8\"\u003e\u003cspan\u003eThis is a setting example for a request to display Shopify pages in a list like a blog. Since it is not possible to set a main image on a page like a blog, a meta field is used instead. Also, since it is not necessary to display all of them, an exclusion process is also included.\u003c\/span\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003cdiv class=\"divider\"\u003e\u003c\/div\u003e\n\u003ch3\u003e Example of settings to display pages in a list with thumbnails like a blog \u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-04-04_1.jpg?v=1736081682\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e ① Add two definitions to the page meta field: \"Thumbnail\" and \"Exclude from list pages\" \u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-04-04_2.jpg?v=1736081682\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e ② Set metafield contents for each page as necessary \u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-04-04_3.jpg?v=1736081682\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e 3) Create a new page template, add a \"Custom Liquid\" section, and insert the code \u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-04-04_4.jpg?v=1736081682\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n","brand":"STORE DOJO","offers":[{"title":"Default Title","offer_id":46827902501115,"sku":null,"price":0.0,"currency_code":"JPY","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-04-04.png?v=1736081682"},{"product_id":"2023-04-10","title":"How to change the display content of the second and subsequent collection pages of the Shopify theme \"Dawn\"","description":"\u003cp\u003e\u003cmeta charset=\"utf-8\"\u003e\u003cmeta charset=\"utf-8\"\u003e\u003cspan\u003eIn addition to the title and description, you can add various unique items to the Shopify collection (product list) page, but it is a bit inconvenient to have the same content displayed every time from the second page onwards.\u003cmeta charset=\"utf-8\"\u003e This is an example of settings for the theme \"Dawn\".\u003c\/span\u003e \u003cbr\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-04-10_1.jpg?v=1736084036\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e","brand":"STORE DOJO","offers":[{"title":"Default Title","offer_id":46827914723579,"sku":null,"price":0.0,"currency_code":"JPY","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-04-10.png?v=1736084036"},{"product_id":"2023-04-17","title":"How to change the background image for each collection page in Shopify","description":"\u003cp\u003e\u003cmeta charset=\"utf-8\"\u003e\u003cmeta charset=\"utf-8\"\u003e\u003cspan\u003eThis is a method to change the background image for each collection using Shopify's metafields. Although it is for collections, it can also be applied to other templates such as product details and blogs. If you do not plan to change the CSS, there is no problem in editing the code directly, but this is an example of settings using the theme editor.\u003c\/span\u003e \u003cbr\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-04-17_1.jpg?v=1736087173\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e","brand":"STORE DOJO","offers":[{"title":"Default Title","offer_id":46827941036283,"sku":null,"price":0.0,"currency_code":"JPY","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-04-17.png?v=1736087172"},{"product_id":"2023-04-20","title":"Example of settings to display search word suggestions in the header search box of the Shopify theme \"Dawn\"","description":"\u003cp\u003e\u003cmeta charset=\"utf-8\"\u003e\u003cmeta charset=\"utf-8\"\u003e\u003cspan\u003eAlthough Shopify's site search has a predictive conversion function, suggestions are not displayed unless you enter some characters. Therefore, it is recommended to display trending and popular search terms from the beginning when you open the search box. This is an example of a setting that can be edited in the theme editor for easy operation.\u003c\/span\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003cdiv class=\"divider\"\u003e\u003c\/div\u003e\n\u003ch3\u003e Example of settings to display search word suggestions in the header search box of the theme \"Dawn\" \u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-04-20_1.jpg?v=1736087490\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e Setting step 1: Add the scheme to \"header.liquid\" and the label to \"ja.schema.json\" \u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-04-20_2.jpg?v=1736087491\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e Setting Step 2: Modify the display code of \"header.liquid\" \u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-04-20_3.jpg?v=1736087490\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e Step 3: Turn off the theme prediction search function \u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-04-20_4.jpg?v=1736087490\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n","brand":"STORE DOJO","offers":[{"title":"Default Title","offer_id":46827941789947,"sku":null,"price":0.0,"currency_code":"JPY","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-04-20.png?v=1736087490"},{"product_id":"2023-04-23","title":"Example of settings to display product tags on collection pages for the Shopify theme \"Dawn\"","description":"\u003cp\u003e\u003cmeta charset=\"utf-8\"\u003e\u003cmeta charset=\"utf-8\"\u003e\u003cspan\u003eThere are many cases where you may want to display product tags on a Shopify collection page. There are various ways to set this up depending on the theme you use, but here is an example using \"Dawn\". Since apps may automatically tag products, we recommend that you also implement a setting to exclude them from display.\u003c\/span\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003cdiv class=\"divider\"\u003e\u003cbr\u003e\u003c\/div\u003e\n\u003ch3\u003e Example of settings to display product tags on collection pages of the theme \"Dawn\" \u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-04-23_1.jpg?v=1736088087\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e Setup Step 1: Add scheme to \"main-collection-product-grid.liquid\" and label to \"ja.schema.json\" \u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-04-23_3.jpg?v=1736088088\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e Step 2: Modify the display code of \"main-collection-product-grid.liquid\" and \"card-product.liquid\" \u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-04-23_3.jpg?v=1736088088\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e Step 3: Set tags for product information and tags you do not want to display in the theme editor \u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-04-23_4.jpg?v=1736088087\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n","brand":"STORE DOJO","offers":[{"title":"Default Title","offer_id":46827946836219,"sku":null,"price":0.0,"currency_code":"JPY","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-04-23.png?v=1736088087"},{"product_id":"2023-04-29","title":"How to implement \"submission confirmation\" and \"transition to a page of your choice after submission\" in the contact form of the Shopify theme \"Dawn\"","description":"\u003cp\u003e\u003cmeta charset=\"utf-8\"\u003e\u003cmeta charset=\"utf-8\"\u003e\u003cspan\u003eThe standard contact form in the Shopify theme \"Dawn\" is a great way to improve customer UX by tweaking it a bit. By displaying a confirmation message before submission and displaying a separate page after submission is complete, you can impress upon customers that their inquiry is being handled appropriately.\u003c\/span\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003cdiv class=\"divider\"\u003e\u003cbr\u003e\u003c\/div\u003e\n\u003ch3\u003e How to implement \"Submission confirmation\" and \"Transition to a page after submission\" in the contact form of the theme \"Dawn\" \u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-04-29_1.jpg?v=1736089609\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e [How to set it up] Add a \"Custom Liquid\" section to the page template \"contact\" and insert the code \u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-04-29_2.jpg?v=1736089609\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n","brand":"STORE DOJO","offers":[{"title":"Default Title","offer_id":46827972067579,"sku":null,"price":0.0,"currency_code":"JPY","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-04-29.png?v=1736089609"},{"product_id":"2023-05-02","title":"[Dawn] How to Add a Back to Top of Page Button to Your Footer in Shopify","description":"\u003cp\u003e\u003cmeta charset=\"utf-8\"\u003e\u003cmeta charset=\"utf-8\"\u003e\u003cspan\u003eShopify themes now allow you to add sections to the header and footer, so it's a good idea to add a \"Back to top of page\" button. (If you have other modals to display, such as chat or email newsletter forms, you'll need to be careful with the positioning.)\u003c\/span\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e How to Add a Back to Top Button to Your Footer \u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-05-02_1.jpg?v=1736343447\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n","brand":"STORE DOJO","offers":[{"title":"Default Title","offer_id":46835411321083,"sku":null,"price":0.0,"currency_code":"JPY","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-05-02.png?v=1736343446"},{"product_id":"2023-05-11","title":"[Dawn] How to implement collection search in the Shopify theme \"Dawn\"","description":"\u003cp\u003e\u003cmeta charset=\"utf-8\"\u003e\u003cspan\u003eBy default, Shopify does not provide a function to search collections themselves. If you need advanced search functionality, we recommend using an app, but if you don't need such functionality, you can customize it to search by title or handle. Here is an example of how to set it up.\u003c\/span\u003e\u003c\/p\u003e\n\u003ch3\u003e How to implement collection search in the theme \"Dawn\" \u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-05-11_1.jpg?v=1736510524\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e [Implementation method] Add a search form and search result display function to \"main-list-collections.liquid\" \u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-05-11_2.jpg?v=1736510524\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e [Position of code to add] Additional code ① \u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-05-11_3.png?v=1736510525\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e [Position of code to add] Additional code ② \u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-05-11_4.png?v=1736510525\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e [Position of code to add] Additional code ③ \u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-05-11_5.png?v=1736510524\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n","brand":"STORE DOJO","offers":[{"title":"Default Title","offer_id":46839463117051,"sku":null,"price":0.0,"currency_code":"JPY","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-05-11.png?v=1736510524"},{"product_id":"2023-05-17","title":"[Dawn] How to Display Content in the Middle of a Collection Page in the Shopify Theme \"Dawn\"","description":"\u003cp\u003e\u003cmeta charset=\"utf-8\"\u003e\u003cmeta charset=\"utf-8\"\u003e\u003cspan\u003eWe sometimes receive requests to display content such as a banner in the middle of a Shopify collection (product list) page, separate from the header. Here is an example of how to do this using the theme \"Dawn\".\u003c\/span\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e How to display content in the middle of a collection page in the Dawn theme \u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-05-17_1.jpg?v=1736594649\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e [Settings Step 1] Add the scheme to \"main-collection-product-grid.liquid\" and the label to \"ja.schema.json\" \u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-05-17_2.jpg?v=1736594648\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e [Settings Step 2] Add code to \"main-collection-product-grid.liquid\" \u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-05-17_3.jpg?v=1736594649\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e [Operation Procedure] Set liquid content and adjust the display position \u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-05-17_4.jpg?v=1736594649\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n","brand":"STORE DOJO","offers":[{"title":"Default Title","offer_id":46841250185467,"sku":null,"price":0.0,"currency_code":"JPY","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-05-17.png?v=1736594648"},{"product_id":"2023-05-18","title":"How to make \"sale (discounted) products\" filterable on collections and search results pages in Shopify","description":"\u003cp\u003e\u003cmeta charset=\"utf-8\"\u003e\u003cmeta charset=\"utf-8\"\u003e\u003cspan\u003eThis is a way to filter \"discounted (sale) products\" on Shopify collections and search result pages. Since the presence or absence of a discount price itself cannot be set as a filtering condition, \"tags\" are usually used. If you use the app, you can automatically add and remove tags just by setting the discount price.\u003c\/span\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e How to make it possible to filter \"sale (discounted) products\" on collections and search result pages \u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-05-18_1.jpg?v=1736596824\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e [Settings Step 1] Set up \"Shopify Search \u0026amp; Discovery\" from the \"Online Store\" sales channel menu and add \"Tags (detailed filtering)\" to the filtering conditions \u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-05-18_2.jpg?v=1736596825\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e [Setting Step 2] Set the discount price for the target product and add tags such as \"sale\" \u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-05-18_3.jpg?v=1736596824\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e [Additional Information] How to automatically add and remove tags after setting a discount price \u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-05-18_4.jpg?v=1736596824\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e","brand":"STORE DOJO","offers":[{"title":"Default Title","offer_id":46841255592187,"sku":null,"price":0.0,"currency_code":"JPY","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-05-18.png?v=1736596824"},{"product_id":"2023-05-19","title":"How to change the maximum number of slides that can be set in the Shopify theme \"Dawn\" (up to 50)","description":"\u003cp\u003e\u003cmeta charset=\"utf-8\"\u003e\u003cmeta charset=\"utf-8\"\u003e\u003cspan\u003eThe Shopify theme \"Dawn\" allows a maximum of five slideshows, but there may be cases where you want to increase the number. You can expand this by modifying the schema in slideshow.liquid. Images are compatible with lazy loading, but please note that adding too many elements will slow down the entire screen.\u003c\/span\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e How to change the maximum number of slides that can be set in the \"Dawn\" theme slideshow (up to 50) \u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-05-19_1.jpg?v=1736641726\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e","brand":"STORE DOJO","offers":[{"title":"Default Title","offer_id":46841872580859,"sku":null,"price":0.0,"currency_code":"JPY","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-05-19.png?v=1736641726"},{"product_id":"2023-05-20","title":"[Dawn] How to Display Product Variations on Collection Pages in the Shopify Theme \"Dawn\"","description":"\u003cp\u003e\u003cmeta charset=\"utf-8\"\u003e\u003cmeta charset=\"utf-8\"\u003e\u003cspan\u003eThis is a setting example for displaying product variations on the Shopify listing screen. By displaying variation information on the listing screen, it becomes easier for visitors to select products and improves the purchasing experience. This is effective for stores that handle products with a wide variety of variations.\u003c\/span\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e Displaying product variations on collection pages in the Dawn theme \u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-05-20_1.jpg?v=1736644051\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e [How to set it up] Add the code to \"card-product.liquid\" \u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-05-20_2.jpg?v=1736644051\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n","brand":"STORE DOJO","offers":[{"title":"Default Title","offer_id":46841905447163,"sku":null,"price":0.0,"currency_code":"JPY","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-05-20.png?v=1736644051"},{"product_id":"2023-05-22","title":"How to bypass the default \"search modal\" in Shopify and transition directly to a search page with various types of navigation","description":"\u003cp\u003e\u003cmeta charset=\"utf-8\"\u003e\u003cmeta charset=\"utf-8\"\u003e\u003cspan\u003eMany Shopify themes will prompt you to enter a search term when you tap the search icon, but it can also be useful to take your visitors directly to a search page with intuitive navigation to help them find the products they're looking for more easily.\u003c\/span\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e The default \"search modal\" is not displayed, and users are directed directly to a search page with various search options. \u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-05-22_1.jpg?v=1736648521\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e","brand":"STORE DOJO","offers":[{"title":"Default Title","offer_id":46841945817339,"sku":null,"price":0.0,"currency_code":"JPY","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-05-22.png?v=1736648520"},{"product_id":"2023-06-05","title":"[Dawn] How to dynamically serve content to Instagram visitors in Shopify (LPO)","description":"\u003cp\u003e\u003cmeta charset=\"utf-8\"\u003e\u003cmeta charset=\"utf-8\"\u003e\u003cspan\u003eThere are various apps that link Instagram posts to Shopify, but it is also important to take measures to attract traffic from Instagram. Visitors are likely to be interested in the content of your posts, so if you have a link to your homepage, it's a good idea to link it so that Instagram-related content is immediately visible.\u003c\/span\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e How to dynamically replace content for visitors from Instagram (LPO) \u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-06-05_1.jpg?v=1736860369\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e [How to set it up] Add a navigation section for Instagram-related content and a customized Liquid section (insert Javascript code into the customized Liquid section) \u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-06-05_2.jpg?v=1736860369\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e","brand":"STORE DOJO","offers":[{"title":"Default Title","offer_id":46847853723899,"sku":null,"price":0.0,"currency_code":"JPY","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-06-05.png?v=1736860368"},{"product_id":"2023-06-14","title":"[Dawn] How to make product photos sticky on the mobile product detail page of the Shopify theme \"Dawn\"","description":"\u003cp\u003e\u003cmeta charset=\"utf-8\"\u003e\u003cmeta charset=\"utf-8\"\u003e\u003cspan\u003eThis is a way to make the product photos scrollable while fixing them on the mobile product detail page of the Shopify theme \"Dawn\". Users can check the images while reading the product description. You can also turn this feature on\/off as needed.\u003c\/span\u003e \u003cbr\u003e\u003c\/p\u003e\n\u003cvideo controls=\"controls\" style=\"max-width: 100%; height: auto;\"\u003e\n\u003csource src=\"https:\/\/cdn.shopify.com\/videos\/c\/o\/v\/1a7b285a384847828db05ed62c3e53b2.mp4\" type=\"video\/mp4\"\u003e\n Your browser does not support our video. \n\u003c\/source\u003e\u003c\/video\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-06-14_2.png?v=1737042788\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e","brand":"STORE DOJO","offers":[{"title":"Default Title","offer_id":46855175045371,"sku":null,"price":0.0,"currency_code":"JPY","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-06-14.png?v=1737042788"},{"product_id":"2023-06-15","title":"[Dawn] How to create a page without a header or footer in the Shopify theme \"Dawn\"","description":"\u003cp\u003e\u003cmeta charset=\"utf-8\"\u003e\u003cmeta charset=\"utf-8\"\u003e\u003cspan\u003eWhen creating a landing page with Shopify, there are times when you want to create a page without the default header or footer. In general, we recommend using a builder app such as PageFly, but if you want to implement it without using an app, you can hide it in this way, even though it is a bit of a stretch.\u003c\/span\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e How to create a page without a header or footer in the Dawn theme \u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-06-15_1.png?v=1737168845\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e [Step 1] Add the scheme to \"main-page.liquid\" and the label to \"ja.schema.json\", [Step 2] Add the following code to \"main-page.liquid\" \u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-06-15_2.png?v=1737168845\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e [Step 3] Create a new page template based on the \"Default Page\" template; [Step 4] Turn on the \"Hide Header\/Footer\" setting in the page section of the newly created template; [Step 5] Create a page for which you want to hide the header and footer, and set the newly created page as the theme template. \u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-06-15_3.png?v=1737168845\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e","brand":"STORE DOJO","offers":[{"title":"Default Title","offer_id":46859242045691,"sku":null,"price":0.0,"currency_code":"JPY","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-06-15.png?v=1737168844"},{"product_id":"2023-06-18","title":"[Dawn] Example of how to change the sorting of collection pages from dropdown to tabs in the Shopify theme \"Dawn\"","description":"\u003cp\u003eMany themes offer a pull-down sorting function on Shopify's collection page, but there may be cases where you want to change this to a tab-type sorting function. Normally, you would customize it by editing the Liquid code, but here is an example of how to make changes using the theme editor. *Only available in \"Dawn\"\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e Example of how to change the sorting of collection pages from pull-down to tab-type in the theme \"Dawn\" \u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-06-18_1.png?v=1737178285\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e [Setup Method 1] Turn off Enable sorting for product grid in collection template and add a customized Liquid section \u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-06-18_2.png?v=1737178286\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e [Setup Method 2] Insert the code into the customized Liquid section \u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-06-18_3.png?v=1737178285\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e [Note] Available regardless of whether or not the filter function is enabled and regardless of the layout \u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-06-18_4.png?v=1737178285\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e","brand":"STORE DOJO","offers":[{"title":"Default Title","offer_id":46859396907259,"sku":null,"price":0.0,"currency_code":"JPY","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-06-18.png?v=1737178284"},{"product_id":"2023-06-22","title":"[Dawn] How to change the pagination style image displayed in the slideshow of the Shopify theme \"Dawn\"","description":"\u003cp\u003eHere is an example of a more esoteric customization. It is a way to change the pager icon of Shopify slideshows and other apps to any icon other than the default to match the tone of your brand. The method varies depending on the theme, but if you use SVG, you can do it just by editing the code without uploading an image file.\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e How to change the pagination style image displayed in the slideshow of the theme \"Dawn\" \u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-06-22_1.jpg?v=1737188373\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e Setup Step 1: Add the scheme to \"slideshow.liquid\" and the label to \"ja.schema.json\" \u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-06-22_2.jpg?v=1737188373\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e Step 2: Create an icon image in SVG format, add a snippet file for the icon, and modify the display code of \"slideshow.liquid\" \u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-06-22_3.jpg?v=1737188373\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e Setup Step 3: Add a slideshow section in the theme editor and select the \"Pagination Style\" you want to use. \u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-06-22_4.jpg?v=1737188373\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e","brand":"STORE DOJO","offers":[{"title":"Default Title","offer_id":46859610194171,"sku":null,"price":0.0,"currency_code":"JPY","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-06-22.png?v=1737188372"},{"product_id":"2023-06-24","title":"[Dawn] How to change the number of posts per page on the blog post listing page of the Shopify theme \"Dawn\"","description":"\u003cp\u003e\u003cmeta charset=\"utf-8\"\u003e\u003cmeta charset=\"utf-8\"\u003e\u003cspan\u003eThe \"Default Blog\" template in the Shopify theme \"Dawn\" has a fixed number of blog post cards displayed per page: 6. Since you may want to increase the number of posts displayed at once, this is a setting example that allows you to set the number of posts displayed as you wish.\u003c\/span\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e How to change the number of posts per page on the Dawn theme blog post list page \u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-06-24_1.jpg?v=1737195632\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e Step 2: Modify the code in “main-blog.liquid” \u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-06-24_2.png?v=1737195633\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e","brand":"STORE DOJO","offers":[{"title":"Default Title","offer_id":46859712397563,"sku":null,"price":0.0,"currency_code":"JPY","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-06-24.png?v=1737195632"},{"product_id":"2023-07-02","title":"[Dawn] Example of a block that allows you to place an in-page link on a product page of the Shopify theme \"Dawn\"","description":"\u003cp\u003eThis is an example of a \"block\" setting for installing an in-page scrolling menu in the product details of the Shopify theme \"Dawn\". It is very important to have a rich content, but there is a concern that the viewing rate will decrease accordingly, so an in-page navigation that can guide users while clearly indicating the items is particularly useful for improving the bounce rate on smartphones.\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e Example of block settings for placing in-page links on product pages in the theme \"Dawn\" \u003c\/h3\u003e\n\u003cp\u003e\u003cvideo controls=\"controls\" style=\"max-width: 100%; height: auto;\"\u003e\n\u003csource src=\"https:\/\/cdn.shopify.com\/videos\/c\/o\/v\/a09fa93d9ef741ec974ed91f12997209.mp4\" type=\"video\/mp4\"\u003e\n Your browser does not support our video. \n\u003c\/source\u003e\u003c\/video\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-07-02_1.png?v=1737729671\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e Setup Step 1: Modify the scheme and display code in \"main-product.liquid\" (create a new block for product information) \u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-07-02_2.png?v=1737729672\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e Setup Step 2: Add the newly created \"Navigation\" block to the product information section of the product template and specify each setting item. \u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-07-02_3.png?v=1737729672\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e","brand":"STORE DOJO","offers":[{"title":"Default Title","offer_id":46877199794427,"sku":null,"price":0.0,"currency_code":"JPY","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-07-02.png?v=1737729669"},{"product_id":"2023-07-07","title":"[Dawn] Example of settings for displaying the product description first on the product detail page of the Shopify theme \"Dawn\"","description":"\u003cp\u003eThe product details screen of the Shopify theme \"Dawn\" has a small display frame for the product description even on a PC screen, so if you put a lot of information on it, it becomes a little hard to read. So, like Rakuten, it's a good idea to move the product description to the beginning on a PC screen and expand it to the full width of the screen.\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e If you want to display the product description first on the product details page for the theme \"Dawn\" on a PC screen \u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-07-07_1.jpg?v=1737783106\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e [Settings] Hide or delete the \"Description\" block in the \"Product Information\" section of the product template, add customized Liquid, and insert the code. \u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-07-07_2.jpg?v=1737783106\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e","brand":"STORE DOJO","offers":[{"title":"Default Title","offer_id":46878646599931,"sku":null,"price":0.0,"currency_code":"JPY","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-07-07.png?v=1737783106"},{"product_id":"2023-07-08","title":"[Dawn] How to make the number of columns in the featured collection section and collection template of the Shopify theme \"Dawn\" compatible with three columns on mobile","description":"\u003cp\u003eThe Shopify theme “Dawn” allows you to choose either one or two columns to display on the mobile screen by default, but with a little tweaking, you can also display three columns.\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e How to make the number of columns in the featured collection section and collection template of the theme \"Dawn\" compatible with three columns on mobile \u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-07-08_1.jpg?v=1737786723\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e [Settings Step 1: Product Grid Section] Add the scheme to \"main-collection-product-grid.liquid\" and the label to \"ja.schema.json\" \u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-07-08_2.png?v=1737786723\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e [Settings Step 2: Featured Collection Section] Add the scheme to \"featured-collection.liquid\" and the label to \"ja.schema.json\" \u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-07-08_3.png?v=1737786723\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e [Settings Step 3] Modify base.css \u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-07-08_4.png?v=1737786723\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e","brand":"STORE DOJO","offers":[{"title":"Default Title","offer_id":46878661050619,"sku":null,"price":0.0,"currency_code":"JPY","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-07-08.png?v=1737786582"},{"product_id":"2023-07-11","title":"[Dawn] How to display the alt text set for an image as a caption on the product detail page of the Shopify theme \"Dawn\"","description":"\u003cp\u003eYou can specify alt text for each product photo on Shopify, but this method displays it as the image caption on the product detail page of the theme \"Dawn\". This will help visitors understand the product better, while also having an SEO effect. (There is no problem with using both the alt text and caption of an image from an SEO perspective.)\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e How to display the alt text set for an image as a caption on the product detail page of the theme \"Dawn\" \u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-07-11_1.jpg?v=1737789926\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e [Settings Step 1] Add the scheme to \"main-product.liquid\" and the label to \"ja.schema.json\" \u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-07-11_2.jpg?v=1737789926\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e [Settings Step 2] Modify \"product-media-gallery.liquid\" \u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-07-11_3.jpg?v=1737789926\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e [Settings Step 3] Add alt text to product images as needed \u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-07-11_4.jpg?v=1737789926\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e","brand":"STORE DOJO","offers":[{"title":"Default Title","offer_id":46878686019835,"sku":null,"price":0.0,"currency_code":"JPY","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-07-11.png?v=1737789926"},{"product_id":"2023-07-20","title":"[Dawn] Example of settings to display \"Welcome Mr.\/Ms. XX\" to logged-in users using the Shopify theme \"Dawn\"","description":"\u003cp\u003eYou will often see this in stores where it is assumed that users will be logged in at all times, but this is an example of how to set it up if you want to display a \"Welcome Mr.\/Ms. XX\" message in the header etc. to users who log in to Shopify.\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e Example of setting to display \"Welcome Mr.\/Ms. XX\" to logged-in users with the theme \"Dawn\" \u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-07-20_1.png?v=1737867723\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e [How to set it up] Add code to header.liquid and header-drawer.liquid \u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-07-20_2.png?v=1737867724\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e","brand":"STORE DOJO","offers":[{"title":"Default Title","offer_id":46881028014331,"sku":null,"price":0.0,"currency_code":"JPY","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-07-20.png?v=1737867723"},{"product_id":"2023-07-21","title":"[Dawn] Example of settings for randomly displaying products from a featured collection in the Shopify theme \"Dawn\"","description":"\u003cp\u003eThis is a setting example for randomly displaying products in Shopify's \"Featured Collections\". In order to update the content every time it is accessed using liquid with strong cache, I experimentally created this example based on the method using cart attributes adopted in the theme \"Prestige\".\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003cdiv class=\"divider\"\u003e\u003c\/div\u003e\n\u003ch3\u003e How to set up random display of featured collection products in the Dawn theme \u003c\/h3\u003e\n\u003cvideo controls=\"controls\" style=\"max-width: 100%; height: auto;\"\u003e\n\u003csource src=\"https:\/\/cdn.shopify.com\/videos\/c\/o\/v\/380fd5c4e5f54a709a957c67f63cb68f.mp4\" type=\"video\/mp4\"\u003e\n Your browser does not support our video. \n\u003c\/source\u003e\u003c\/video\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-07-21_1.png?v=1737900416\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e Setup Step 1: Add the scheme to \"featured-collection.liquid\" and the label to \"ja.schema.json\" \u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-07-21_2.png?v=1737900415\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e Setting procedure 2: Modify \"featured-collection.liquid\" (part 1) \u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-07-21_3.png?v=1737900417\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e Setup Step 3: Modify \"featured-collection.liquid\" (part 2), Modify \"main-cart-items.liquid\" \u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-07-21_4.png?v=1737900416\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e Setup Step 4: Select the collection you want to display in the theme's featured section and turn on \"Show randomly\" \u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-07-21_5.png?v=1737900417\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e","brand":"STORE DOJO","offers":[{"title":"Default Title","offer_id":46881788330235,"sku":null,"price":0.0,"currency_code":"JPY","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-07-21.png?v=1737900414"},{"product_id":"2023-07-25","title":"[Dawn] Example of how to enable or disable the announcement bar for the Shopify theme \"Dawn\" in the theme editor for each device","description":"\u003cp\u003eThis isn't limited to the announcement bar, but it's an example of how to set up Shopify to show or hide sections for each device using the theme editor.\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e Example of setting to show\/hide the Dawn theme's announcement bar on each device in the theme editor \u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-07-25_1.jpg?v=1738392967\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e Setup Step 1: Add the scheme to \"announcement-bar.liquid\" and the label to \"ja.schema.json\" \u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-07-25_2.jpg?v=1738392967\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e Step 2: Modify the code in \"announcement-bar.liquid\" \u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-07-25_3.png?v=1738392967\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e","brand":"STORE DOJO","offers":[{"title":"Default Title","offer_id":46893622886651,"sku":null,"price":0.0,"currency_code":"JPY","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-07-25.png?v=1738392831"},{"product_id":"2023-07-28","title":"[Dawn] CSS setting example for displaying SNS icons in the announcement bar of Shopify's theme \"Dawn\" on mobile devices","description":"\u003cp\u003eThe theme header functionality has also been improved, and Dawn version 11 now displays SNS icons in the announcement bar by default. Here is an example of CSS settings to make it displayable not only on desktop but also on mobile.\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e CSS setting example to display SNS icons that can be displayed in the Dawn theme's notification bar on mobile devices \u003c\/h3\u003e\n\u003cp\u003e\u003cvideo style=\"max-width: 100%; height: auto;\" controls=\"controls\"\u003e\n\u003csource type=\"video\/mp4\" src=\"https:\/\/cdn.shopify.com\/videos\/c\/o\/v\/f65b3fa4d0824c2e9f758ce75fb2d188.mp4\"\u003e\n Your browser does not support our video. \n\u003c\/source\u003e\u003c\/video\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cimg class=\"zoomable-image\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-07-28_1.png?v=1738401405\" alt=\"\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e [Setup Steps] Add customized Liquid to the header and insert CSS code \u003c\/h3\u003e\n\u003cp\u003e\u003cimg class=\"zoomable-image\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-07-28_2.png?v=1738401404\" alt=\"\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e","brand":"STORE DOJO","offers":[{"title":"Default Title","offer_id":46893693763835,"sku":null,"price":0.0,"currency_code":"JPY","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-07-28.png?v=1738401404"},{"product_id":"2023-08-04","title":"How to hide products with zero stock in a collection in Shopify","description":"\u003cp\u003eIf you want to hide products with zero stock on the Shopify product list (collection) page, it's best to simply set conditions in an automatic collection. If you try to do this with manual collections and code customization, it will be difficult to do so. \u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-08-04_1.jpg?v=1738933223\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e","brand":"STORE DOJO","offers":[{"title":"Default Title","offer_id":46915655794939,"sku":null,"price":0.0,"currency_code":"JPY","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-08-04.png?v=1738933222"},{"product_id":"2023-08-13","title":"[Dawn] How to Display Stock Status in Collections with the Shopify Theme \"Dawn\"","description":"\u003cp\u003eThe Shopify theme Dawn allows you to display inventory status on product detail pages, but here's how to make it so that it also appears on collections (list pages).\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e How to display inventory status in collections with the Dawn theme \u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-08-13_1.png?v=1738939878\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e Setting step 1: Reuse part of the scheme of \"main-product.liquid\" in \"main-collection-product-grid.liquid\" \u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-08-13_2.png?v=1738939877\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e Setting step 2: Modify the code in \"main-collection-product-grid.liquid\" \u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-08-13_3.png?v=1738939876\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e Setup Step 3: Add a modified version of the code from \"main-product.liquid\" above the price in \"card-product.liquid\" \u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-08-13_4.png?v=1738939877\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e","brand":"STORE DOJO","offers":[{"title":"Default Title","offer_id":46915761340667,"sku":null,"price":0.0,"currency_code":"JPY","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-08-13.png?v=1738939875"},{"product_id":"2023-08-19","title":"Example of setting to display SKU on the cart screen of Shopify theme \"Dawn\"","description":"\u003cp\u003eThis is a setting example for displaying the product SKU on the cart screen of the Shopify theme \"Dawn\". You can also turn the display on and off in the theme editor settings screen, but if you are sure you want to display it, I think it's fine to just write the code directly.\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e Example of setting to display SKU on the cart screen of the theme \"Dawn\" \u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-08-19_1.jpg?v=1738995211\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e","brand":"STORE DOJO","offers":[{"title":"Default Title","offer_id":46917281415419,"sku":null,"price":0.0,"currency_code":"JPY","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-08-19.png?v=1738995211"},{"product_id":"2023-08-20","title":"[Dawn] Example of settings for displaying product descriptions in collections using the Shopify theme \"Dawn\"","description":"\u003cp\u003eThis is a setting example for displaying product descriptions for each product on a Shopify collection page. Depending on the products you handle, you can assist customers in choosing products more easily by displaying product descriptions in addition to product photos and prices.\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e Example of settings for displaying product description quotes in collections using the Dawn theme \u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-08-20_1.png?v=1738996628\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e Setup Step 1: Add scheme to \"main-collection-product-grid.liquid\" and label to \"ja.schema.json\" \u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-08-20_2.png?v=1738996627\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e Setting step 2: Modify the code in \"main-collection-product-grid.liquid\" \u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-08-20_3.png?v=1738996627\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e Step 3: Modify the code in \"card-product.liquid\" \u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-08-20_4.png?v=1738996627\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e","brand":"STORE DOJO","offers":[{"title":"Default Title","offer_id":46917289509115,"sku":null,"price":0.0,"currency_code":"JPY","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-08-20.png?v=1738996624"},{"product_id":"2023-09-08","title":"[Dawn] Example of how to hide prices on collection pages in the Shopify theme \"Dawn\"","description":"\u003cp\u003eThere was a case where I wanted to display the price only in the product details and not display it on the Shopify collection page. The theme \"Dawn\" does not have a setting to hide the price by default, so this is an example of how to do it.\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e Example of setting to hide prices on collection pages in the theme \"Dawn\" \u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-09-08_1.png?v=1739630054\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e Setup Step 1: Add the schema to \"main-collection-product-grid.liquid\" and the label to \"ja.schema.json\" \u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-09-08_2.jpg?v=1739630735\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e Setting Step 2: Modify the code in \"main-collection-product-grid.liquid\" and \"product-grid.liquid\" \u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-09-08_3.jpg?v=1739630053\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e","brand":"STORE DOJO","offers":[{"title":"Default Title","offer_id":46931240124667,"sku":null,"price":0.0,"currency_code":"JPY","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-09-08.png?v=1739630053"},{"product_id":"2023-09-11","title":"[Dawn] How to add LINE icons to social icons in the Shopify theme \"Dawn\"","description":"\u003cp\u003eThis is an example of adding LINE to the social icons of the Shopify theme Dawn. LINE icon images cannot be monochrome, so it stands out, but you may want to replace it with a color that matches the Instagram or Facebook icons.\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e Add LINE icons to social icons in the Dawn theme \u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-09-11_1.jpg?v=1739674819\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e Setting Step 1: Add the schema to \"setting_scheme.json\" and the label to \"ja.schema.json\" \u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-09-11_2.png?v=1739674820\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e Setting Step 2: Modify \"social-icon.liquid\", \"en.default.json\", and \"footer.liquid\" and add a new \"icon-line.svg\" \u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-09-11_3.png?v=1739674820\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e","brand":"STORE DOJO","offers":[{"title":"Default Title","offer_id":46932131610875,"sku":null,"price":0.0,"currency_code":"JPY","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-09-11.png?v=1739674820"},{"product_id":"2023-09-15","title":"How to sort collections on the Shopify collection list page (\/collections)","description":"\u003cp\u003eBy default, Shopify's collections are sorted by name, date, number of items, etc. However, in many cases, you may want to list your collections in a different order. In that case, you can use the Collection List section to list your collections in the order you want.\u003c\/p\u003e\n\u003ch3\u003e How to arrange collections on the collection list page (\/collections) \u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-09-15_1.png?v=1740147839\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e","brand":"STORE DOJO","offers":[{"title":"Default Title","offer_id":46946956247291,"sku":null,"price":0.0,"currency_code":"JPY","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-09-15.png?v=1740147838"},{"product_id":"2023-09-18","title":"[Dawn] A setting example to prevent users from proceeding beyond the cart screen if the product is inconvenient for them to purchase on its own in Shopify","description":"\u003cp\u003eWhen using gift wrapping and other items as paid products in Shopify, you want to prevent them from being purchased on their own. This is a setting example that tags the target products to prevent customers from proceeding beyond the cart screen unless they are accompanied by a regular product. (However, this cannot be prevented if the checkout URL is specified directly.)\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e Example of settings to prevent users from proceeding beyond the cart screen if the product is inconvenient to purchase by itself \u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-09-18_1.jpg?v=1740182724\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e [Settings Step 1] Remove the \"Dynamic Checkout\" setting from the purchase button of the relevant product template or all product templates, and add a tag to the product (e.g., not available for individual purchase). \u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-09-18_2.png?v=1740186738\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e [Setup Step 2] Add a \"Customized Liquid\" section to the cart screen and insert the code \u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-09-18_3.png?v=1740186737\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e","brand":"STORE DOJO","offers":[{"title":"Default Title","offer_id":46948199039227,"sku":null,"price":0.0,"currency_code":"JPY","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-09-18.png?v=1740182724"},{"product_id":"2023-10-01","title":"[Dawn] How to set up the Shopify theme \"Dawn\" so that you can specify images other than the first and second images for the product thumbnails in the collection","description":"\u003cp\u003eThe product photo displayed on the collection page of the Shopify theme Dawn is fixed to the first image registered in the product information (second image when the mouse is over), but here is how to set it so that you can specify an image of your choice. There is an input field in the meta field, so you can specify it for each product.\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e How to set up the Dawn theme so that you can specify images other than the first and second images for the product thumbnails in the collection \u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-10-01_1.png?v=1740285830\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e Setup Step 1: Create product metafields \u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-10-01_2.png?v=1740285830\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e Step 2: Modify card-product.liquid (Part 1: Main thumbnail image) \u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-10-01_3.png?v=1740285830\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e Step 3: Modify card-product.liquid (Part 2: Thumbnail image when hovering mouse over) \u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-10-01_4.png?v=1740285830\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e","brand":"STORE DOJO","offers":[{"title":"Default Title","offer_id":46949955993851,"sku":null,"price":0.0,"currency_code":"JPY","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-10-01.png?v=1740285829"},{"product_id":"2023-10-03","title":"[Dawn] Example of settings to redirect to another URL after submitting the inquiry form for the Shopify theme \"Dawn\"","description":"\u003cp\u003eBy default, the contact form in the Shopify theme \"Dawn\" displays a message immediately upon successful submission and is complete. However, there are times when you may want to jump to a different page (URL) for measurement purposes or to display a message without a separate form. Here is an example of how to do this.\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e Example of settings to redirect to another URL after submitting the inquiry form for the theme \"Dawn\" \u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-10-03_1.png?v=1740287965\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e Setup Step 1: Add the scheme to \"contact-form.liquid\" and the label to \"ja.schema.json\" \u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-10-03_2.png?v=1740288146\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e Setup Step 2: Modify the code in “contact-form.liquid” \u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-10-03_3.png?v=1740287965\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e Step 3: Setting in the Theme Editor \u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-10-03_4.png?v=1740287965\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e","brand":"STORE DOJO","offers":[{"title":"Default Title","offer_id":46949980012795,"sku":null,"price":0.0,"currency_code":"JPY","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-10-03.png?v=1740287964"},{"product_id":"2023-10-04","title":"[Dawn] Example of settings for hiding the button container but keeping the link active in the slideshow section of the Shopify theme \"Dawn\"","description":"\u003cp\u003eIn the slideshow section of the Shopify theme \"Dawn,\" when you specify a link destination, it is displayed as a link button on top of the image. This is good as it makes it easy to understand as a guide, but in some cases you may want to specify the link destination on the entire image without displaying a button. Here is an example of that setting.\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e Example of settings for keeping links active even when the button container is hidden in the slideshow section of the theme \"Dawn\" \u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-10-04_1.png?v=1740288711\" class=\"zoomable-image\" width=\"800\" height=\"640\" style=\"aspect-ratio: 1.25;\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e Setup procedure: Edit the code in \"slideshow.liquid\" \u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-10-04_2.png?v=1740288711\" class=\"zoomable-image\" width=\"800\" height=\"640\" style=\"aspect-ratio: 1.25;\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e","brand":"STORE DOJO","offers":[{"title":"Default Title","offer_id":46949995184379,"sku":null,"price":0.0,"currency_code":"JPY","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-10-04.png?v=1740288710"},{"product_id":"2023-10-10","title":"[Dawn] Example of settings to display a confirmation dialog when deleting an item from the cart using the Shopify theme \"Dawn\"","description":"\u003cp\u003eIn the Shopify theme \"Dawn,\" when you press the delete button for an item in your cart, the item is removed immediately without a confirmation message. Here's a way to display a dialog box to prevent accidental deletion. (Please make a backup of your theme before implementing this, as cart.js will be modified.)\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e Example of setting to display a confirmation dialog when deleting an item from the cart in the \"Dawn\" theme \u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-10-10_1.png?v=1740799955\" class=\"zoomable-image\" width=\"800\" height=\"640\" style=\"aspect-ratio: 1.25;\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e Setting procedure: Modify some of the code in Assets \u0026gt; \"cart.js\" \u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-10-10_2.png?v=1740799955\" class=\"zoomable-image\" width=\"800\" height=\"640\" style=\"aspect-ratio: 1.25;\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e","brand":"STORE DOJO","offers":[{"title":"Default Title","offer_id":46968864866555,"sku":null,"price":0.0,"currency_code":"JPY","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-10-10.png?v=1740799954"},{"product_id":"2023-10-13","title":"[Dawn] A setting example for the Shopify theme \"Dawn\" that allows you to specify the label displayed for out-of-stock products using meta fields for each product.","description":"\u003cp\u003eIn the Shopify theme \"Dawn,\" the text \"Sold Out (can be changed by editing the theme's content)\" is displayed for out-of-stock items in the product details and product list. This is a setting example for changing this to any text you like for each product. It can be used to set a label for products that are regularly replenished.\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e Example of setting that allows you to specify the label displayed for out-of-stock products by meta field for each product in the theme \"Dawn\" \u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-10-13_1.png?v=1740809326\" class=\"zoomable-image\" width=\"800\" height=\"640\" style=\"aspect-ratio: 1.25;\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e [Step 1] Add an alternative display item when the product is sold out to the product meta field \u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-10-13_2.png?v=1740809325\" class=\"zoomable-image\" width=\"800\" height=\"640\" style=\"aspect-ratio: 1.25;\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e Setup Step 2: Edit the code in \"contact-form.liquid\" (add a confirmation email address input form) \u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-10-13_3.png?v=1740809393\" class=\"zoomable-image\" width=\"800\" height=\"640\" style=\"aspect-ratio: 1.25;\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e Step 3: Edit the code in \"contact-form.liquid\" (add JavaScript for address matching) \u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-10-13_4.png?v=1740809396\" class=\"zoomable-image\" width=\"800\" height=\"640\" style=\"aspect-ratio: 1.25;\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e","brand":"STORE DOJO","offers":[{"title":"Default Title","offer_id":46969010258171,"sku":null,"price":0.0,"currency_code":"JPY","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-10-13.png?v=1740809325"},{"product_id":"2023-10-15","title":"Example of settings for displaying menu text in both Japanese and English on Shopify","description":"\u003cp\u003eIf you want to display both English and Japanese on the Shopify menu, you can enter them as delimiters and then use split to break them down and expand them. This is convenient because it makes it easy to add and edit new items.\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003carticle class=\"link-card\"\u003e \u003ca href=\"https:\/\/community.shopify.com\/c\/%E6%8A%80%E8%A1%93%E7%9A%84%E3%81%AAq-a\/%E3%82%B0%E3%83%AD%E3%83%BC%E3%83%90%E3%83%AB%E3%83%A1%E3%83%8B%E3%83%A5%E3%83%BC%E3%81%AE%E8%A1%A8%E8%A8%98%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6\/td-p\/1283105#threadeddetaildisplaymessageviewwrapper_5\" target=\"_blank\"\u003e\n\u003cdiv\u003e\u003cimg alt=\"Global menu notation\" src=\"https:\/\/cdn.shopify.com\/assets\/images\/logos\/shopify-bag.png\"\u003e\u003c\/div\u003e\n\n \u003cdiv class=\"content\"\u003e\n\n\u003ch2\u003eGlobal menu notation\u003c\/h2\u003e\n\n\u003cp\u003e\u003c\/p\u003e\n\n \u003ccite\u003ecommunity.shopify.com\u003c\/cite\u003e\n\n\u003c\/div\u003e\n\n\u003c\/a\u003e\u003c\/article\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e Example of settings for displaying menu text in both Japanese and English \u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-10-15_1.png?v=1740811233\" class=\"zoomable-image\" width=\"800\" height=\"640\" style=\"aspect-ratio: 1.25;\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e [Setting method ①] Set the menu name with the \"English\" and \"Japanese\" you want to display side by side, connected with a delimiter \u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-10-15_2.png?v=1740811233\" class=\"zoomable-image\" width=\"800\" height=\"640\" style=\"aspect-ratio: 1.25;\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003ch3\u003e [Setting Method 2] (Example of setting with the theme \"Dawn\") Modify all menu files where menu text (link.title) is displayed \u003c\/h3\u003e\n\u003cp\u003e\u003cimg alt=\"\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-10-15_3.png?v=1740811233\" class=\"zoomable-image\" width=\"800\" height=\"640\" style=\"aspect-ratio: 1.25;\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e","brand":"STORE DOJO","offers":[{"title":"Default Title","offer_id":46969056985339,"sku":null,"price":0.0,"currency_code":"JPY","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2023-10-15.png?v=1740811232"}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/collections\/collection-ui-ux.png?v=1743495614","url":"https:\/\/store-dojo.com\/en-us\/collections\/ui-ux.oembed?page=5","provider":"STORE DOJO","version":"1.0","type":"link"}