TIPSランキング

販売数の多い順に並んだSTORE DOJOの人気TIPSです。

[Horizon] Shopify Theme "Horizon" UI Design Kit for Figma

[Horizon] Shopify Theme "Horizon" UI Design Kit for Figma

[Dawn] A setting example for the top page of the Shopify theme "Dawn" that allows you to make the header background transparent and display it over a slideshow or image banner.

[Dawn] A setting example for the top page of the Shopify theme "Dawn" that allows you to make the header background transparent and display it over a slideshow or image banner.

Code

[Dawn] Example of implementation to display "Free shipping when you leave a certain amount" on the cart screen in Shopify without using an app

[Dawn] Example of implementation to display "Free shipping when you leave a certain amount" on the cart screen in Shopify without using an app

Code

[Dawn] How to display payment methods near the buy button on Shopify product detail pages

[Dawn] How to display payment methods near the buy button on Shopify product detail pages

[Dawn] Manage size charts in Shopify as meta objects to easily reuse and modify in bulk

[Dawn] Manage size charts in Shopify as meta objects to easily reuse and modify in bulk

Code

[Dawn] Custom banner image section available in Shopify's Dawn theme

[Dawn] Custom banner image section available in Shopify's Dawn theme

Code

目的から探す

やりたいことの領域からTIPSを絞り込めます。

UI/UX Improvements

UI/UX Improvements

Purchase promotion

Purchase promotion

Expanded product information

Expanded product information

SEO related

SEO related

Promote visits and reduce abandonment

Promote visits and reduce abandonment

Membership registration promotion

Membership registration promotion

Blog Related

Blog Related

Shopiry Theme Related

Shopiry Theme Related

Notifications

Notifications

Discount Related

Discount Related

Recommended Apps

Recommended Apps

Product Management

Product Management

実装方法から探す

使う技術からTIPSを絞り込めます。

LIQUID

LIQUID

Javascript

Javascript

HTML/CSS

HTML/CSS

Shopify Flow

Shopify Flow

UI/UX Improvements

Shopify UI/UX Improvement Guide

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.

  • Search function optimization - Improved information accessibility through product and blog searches
  • Form improvement - Optimized the order of fields on the address editing screen of the account page
  • Navigation Enhancements - Tag filtering and breadcrumb list
  • Inventory display optimization - Improved shopping experience by automatically hiding out-of-stock items
  • Improved usability - Intuitive and easy-to-use interface design

Improvements based on user-centered design philosophy are expected to reduce abandonment rates and significantly improve purchase completion rates.

UI/UX Improvements

[MetaSync] Show the full terms of service in a scrollable box on the sign-up form

[MetaSync] Show the full terms of service in a scrollable box on the sign-up form

[Horizon] Scoping storefront search to the articles of one specific blog when a store has several blogs

[Horizon] Scoping storefront search to the articles of one specific blog when a store has several blogs

Code

[MetaSync] Hide Extra Sign-up Form Fields Behind an Expand Button to Reduce Form Friction

[MetaSync] Hide Extra Sign-up Form Fields Behind an Expand Button to Reduce Form Friction

Show the last order date on a Shopify product page automatically

Show the last order date on a Shopify product page automatically

Code

Auto-record stock status to a metafield with Shopify Flow and use it as a Search & Discovery filter

Auto-record stock status to a metafield with Shopify Flow and use it as a Search & Discovery filter

[Horizon] A/B Test Product Photos with Shopify Rollouts | Swap the Entire Gallery via a Metafield

[Horizon] A/B Test Product Photos with Shopify Rollouts | Swap the Entire Gallery via a Metafield

Code

Shopiry Theme Related

Shopify Theme Customization Guide

This book provides practical techniques for customizing Shopify themes (especially Dawn) to your liking and building an original store optimized for your brand.

  • Section Customization - Setting up product information citations in multi-column/multi-row sections
  • Utilizing metafields - Use HTML tags and data linkage in collapsible rows
  • Layout Optimization - Effective display of thumbnail layouts and variant images
  • Text display improvements - Allow line breaks in heading sections and improve expressiveness
  • Strengthening branding - Unique design and user experience

Use your coding knowledge to build a unique and attractive store design.

Shopiry Theme Related

[Horizon] How to configure the "Collection List" page to display only the collections you need

[Horizon] How to configure the "Collection List" page to display only the collections you need

How to delete unwanted color schemes in Shopify's theme colors (color schemes)

How to delete unwanted color schemes in Shopify's theme colors (color schemes)

Example of setting rounded corners for product images, collection images, and blog list images in the Shopify theme "Rise/Dawn"

Example of setting rounded corners for product images, collection images, and blog list images in the Shopify theme "Rise/Dawn"

[Dawn] An example of a setting that hides a metafield if the metafield of the target product has no value when adding a block linked to the metafield on the product page of the Shopify theme "Rise/Dawn"

[Dawn] An example of a setting that hides a metafield if the metafield of the target product has no value when adding a block linked to the metafield on the product page of the Shopify theme "Rise/Dawn"

Code

[Dawn] Example of adding an ON/OFF setting item for the search function to the "Settings" screen of the Shopify theme "Rise/Dawn"

[Dawn] Example of adding an ON/OFF setting item for the search function to the "Settings" screen of the Shopify theme "Rise/Dawn"

Code

[Dawn] An example of adding fields to the contact form of the Shopify theme "Rise/Dawn" by making changes through the theme editor without directly modifying the liquid file.

[Dawn] An example of adding fields to the contact form of the Shopify theme "Rise/Dawn" by making changes through the theme editor without directly modifying the liquid file.

Code

Product Management

A complete guide to using the Shopify admin screen

This article summarizes the hidden features of the Shopify admin panel and practical ways to use them to streamline store operations and dramatically improve management tasks.

  • Product management optimization - Check sale items and filter metafields
  • Use the search function - Exclusion search and data extraction in discount management
  • Quantity control - Efficiently check the number of products and collections using count.json
  • Data analysis - Obtain detailed information on the management screen and improve work efficiency
  • Operational efficiency - Management screen techniques to shorten daily tasks

This is an advanced technique for the admin screen that can significantly reduce work time just by knowing about it.

Product Management

[Sidekick] Admin App That Shows Product Names & Shipping Addresses in the Order List (Order Product Checker)

[Sidekick] Admin App That Shows Product Names & Shipping Addresses in the Order List (Order Product Checker)

Code

[Sidekick] Manage product publish dates in one list (Publish Schedule Manager)

[Sidekick] Manage product publish dates in one list (Publish Schedule Manager)

Code

What to do when you want to download product images in bulk on Shopify

What to do when you want to download product images in bulk on Shopify

Example of setting up Shopify to use metafields to filter by the number of registered product images on the product management screen

Example of setting up Shopify to use metafields to filter by the number of registered product images on the product management screen

[Dawn] Example of setting to tag a customer with the correct total number of orders minus the number of canceled orders in Shopify

[Dawn] Example of setting to tag a customer with the correct total number of orders minus the number of canceled orders in Shopify

Code

How to check for products with out-of-stock variations in Shopify's product management screen

How to check for products with out-of-stock variations in Shopify's product management screen