shopify开发总结

最新推荐文章于 2024-05-06 16:30:18 发布
最新推荐文章于 2024-05-06 16:30:18 发布
阅读量2.7k 收藏 12
点赞数 2
分类专栏： shopify
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gongliming_qd/article/details/118383846
版权

shopify开发

准备工作


// 1. mac安装程序

brew tap shopify
brew install themekit    // 类似于 node.js 

// 2. 注册shopify

// 3. shopify设置成中文
==> 后台页面左下角设置 ==> store language ==> 当前语言设置成简体中文

// 4. 设置专用应用
应用-创建专有应用 ==> 权限 ==> 选择模版（允许读取和写入）
// 4. 下载主题

// 5。 添加主题， 
将准备好的主题压缩成zip文件 ==> 目录：在线商店-模版-添加模版 ==> 添加成功后在操作中发布

// 6. vscode准备
打开解压好的主题 ==> 

在页面中创建 config.yml文件，内容如下 ：

development:
  password: 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
  theme_id: "124534685867"
  store: shy-boys.myshopify.com


//说明 ： 密码位置 ： shopify后台==> 应用 ==》 管理专有应用 ==> 点开专有应用名称 ==> 找到密码
//        theme_id 位置 ： shopify后台 ==> 在线商店 ==> 模版 ==> 自定义 ==> url上的数字就是主题id

 //        store ：当前url的链接， 不要http， 内容如上


 // 7. 命令启动本地和远程连接


// theme get  拉取shopify店铺主题最新代码
// theme watch --allow-live  动态监听代码变更及上传

// 说明 ：当在后台手动修改了配置后， 本地需要更新代码使用 theme get来获取最新的代码
// 当本地修改了代码， 代码会自动提交到远程， 不需要像git一样进行远程push

主题目录说明

assets

和vue结构一样， 存放一些静态文件的地方， 比如img， 字体图标， 公共js， js插件等

config

当前保存的主题配置

settings_data.json

当前已经选好的所有数据，最好不要动这里

“current”: 当前已选择了的所有 sections

“presets”: 能在 Add section 目录中看到的预设的 section

settings_schema.json

列出全局主题设置, 注意是全局的， 使用 settings.xxxx来获取设置的值

layout

默认下是theme.liquid, 类似于vue中的html文件

sections

可复用模块, 说简单点就是组件存放的地方（普通组件）
注意事项 ：

  1. 一般只在这里使用 schema， 来配置哪些需要自定义输入(shopify的精髓即在此)
  2. section不能调用section
  3. section调用全局的直接settings.xxxx即可， 本地的用前面加session.section调用全局的直接settings.xxxx才可以
    4.导入section ==> {%- section 'prime-banner' -%}

snippets

小模块，比section更小的模块， 通常是静态的
导入使用 include或者reder，用法如sections

templates

路由模块
通过 page.xxxx.liquid的文件命名格式就可以作为shopify的后面页面开使用

config.yml

本地开发与远程数据修改的桥梁

liquid语言学习

学习地址 ： https://liquid.bootcss.com/filters/escape/

总结 ：是一门不太好用的语言

基础语法

申明变量

// 单行
      {%- assign natural_height = false -%}

// 内容内为变量
      {% capture my_variable %}I am being captured.{% endcapture %}

// 多行

{% liquid 
        assign product_img = block.settings.top_products_img
        assign product_sale_percent = product_price_sale | divided_by: product_price_virtual | times: 100 | minus: 100 | abs | round | append: '%' 
      %}
操作符

== 相等
!= 不相等

大于
< 小于
= 大于或等于
<= 小于或等于
or 逻辑或
and 逻辑与


{% if product.type == "Shirt" or product.type == "Shoes" %}
  This is a shirt or a pair of shoes.
{% endif %}

// contains 包含
{% if product.title contains 'Pack' %}
  This product's title contains the word Pack.
{% endif %}

// if/else

{% assign username = "John G. Chalmers-Smith" %}
{% if username and username.size > 10 %}
  Wow, {{ username }}, you have a long name!
{% else %}
  Hello there!
{% endif %}
for循环
  • first

input :
{% for product in collections.frontpage.products %}
    {% if forloop.first == true %}
        First time through!
    {% else %}
        Not the first time.
    {% endif %}
{% endfor %}

output :
First time through!
Not the first time.
Not the first time.
Not the first time.
Not the first time.
  • index

input :
{% for product in collections.frontpage.products %}
    {{ forloop.index }}
{% else %}
    // no products in your frontpage collection
{% endfor %}

output :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16



 - index0

```javascript

input :
{% for product in collections.frontpage.products %}
  {{ forloop.index0 }}
{% endfor %}

output :
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15



 - last

```javascript

input :
{% for product in collections.frontpage.products %}
    {% if forloop.last == true %}
        This is the last iteration!
    {% else %}
        Keep going...
    {% endif %}
{% endfor %}

output :
Keep going...
Keep going...
Keep going...
Keep going...
Keep going...
This is the last iteration!



 - length

```javascript

input :
<!-- if collections.frontpage.products contains 4 products -->
{% for product in collections.frontpage.products %}
  {% if forloop.first %}
  <p>This collection has {{ forloop.length }} products:</p>
  {% endif %}
  <p>{{ product.title }}</p>
{% endfor %}

output :
This collection has 4 products:
Apple
Orange
Peach
Plum



 - rindex0

```javascript

input :
{% for product in collections.frontpage.products %}
    {{ forloop.rindex0 }}
{% endfor %}

output :
15 14 13 12 11 10 9 8 7 6 5 4 3 2 1 0

项目

page

<div class="prime_day">
  {%- section 'prime-banner' -%}
  {%- section 'prime-top-products' -%}
  {%- section 'prime-featured-products' -%}
</div>

<style>
.prime_day [data-animate_images=true] .lazyload {
  opacity:0
}
.prime_day [data-animate_images=true] .lazyloaded {
  opacity:1;
  animation:0.5s cubic-bezier(0.26, 0.54, 0.32, 1) 0s forwards;
  animation-name:zoom-fade-small;
  transition:none;
}
.prime_day [data-animate_text=true] {
  opacity: 0;
}
.prime_day .lazyloaded [data-animate_text=true]{
  opacity: 1;
  animation: 0.8s cubic-bezier(0.26, 0.54, 0.32, 1) 0.3s forwards;
  animation-name: rise-up;
}
</style>

blocks

{% for block in section.blocks %}
      {% liquid 
        assign product_img = block.settings.top_products_img
        assign product_img_mobile = block.settings.top_products_img_mobile
        assign product_image = block.settings.top_products_image
        assign product_image_mobile = block.settings.top_products_image_mobile
        assign voice_control = block.settings.assistantable
        assign product_title = block.settings.top_products_title
        assign product_sub_title = block.settings.top_products_sub_title
        assign product_price_sale = block.settings.top_products_price_sale 
        assign product_price_virtual = block.settings.top_products_price_virtual 
        assign product_url = block.settings.top_products_url
        assign product_sale_percent = product_price_sale | divided_by: product_price_virtual | times: 100 | minus: 100 | abs | round | append: '%' 
      %}
  <a href="{{ product_url }}" target="_blank" rel="nofollow" class="top_product_wrap">
  </a> 
{% endfor %}

sections使用

{% liquid
  assign discount_bg = 'https://cdn.shopifycdn.net/s/files/1/0556/4203/0246/files/265_2x_1e877f82-e25a-45de-863d-fce15adeda91.png?v=1623512350'  

  assign voice_bg = 'https://cdn.shopifycdn.net/s/files/1/0556/4203/0246/files/195_2x_831e54fd-1076-47c0-a70d-2e9768ba9b44.png?v=1623512350'  

  assign star_bg = 'https://cdn.shopifycdn.net/s/files/1/0556/4203/0246/files/27_2x_f8989dcf-e752-4200-af30-532a69d4aa9a.jpg?v=1623514323'

  assign header = section.settings.top_header

%}
  1. type类型

  • image

    <img data-src="{{ product_image | img_url: 'master' }}" alt="{{ product_image.alt }}" class="lazyload mobile-hide">

  • checkbox

    <div class="top_voice_wrap {% unless voice_control %} hide {% endunless %}">
      <img src="{{ voice_bg }}" alt="" class="lazyload">
    </div>

  • range

  • select

    
    {%- if section.settings.section_height == 'natural' or section.settings.mobile_height == 'auto' -%}
    {%- endif -%}

  • textarea

  • url

    <a href="{{ product_url }}" target="_blank" rel="nofollow" class="top_product_wrap">
</a>


{
    "name": "Slideshow",
    "class": "index-section--hero",
    "max_blocks": 5,
    "settings": [
      {
        "type": "select",
        "id": "section_height",
        "label": "Desktop height",
        "default": "650px",
        "options": [
          {
            "label": "Natural",
            "value": "natural"
          },
          {
            "label": "450px",
            "value": "450px"
          },
          {
            "label": "550px",
            "value": "550px"
          },
          {
            "label": "650px",
            "value": "650px"
          },
          {
            "label": "750px",
            "value": "750px"
          },
          {
            "label": "Full screen",
            "value": "100vh"
          }
        ]
      },
      {
        "type": "select",
        "id": "mobile_height",
        "label": "Mobile height",
        "default": "auto",
        "options": [
          {
            "label": "Auto",
            "value": "auto"
          },
          {
            "label": "250px",
            "value": "250px"
          },
          {
            "label": "300px",
            "value": "300px"
          },
          {
            "label": "400px",
            "value": "400px"
          },
          {
            "label": "500px",
            "value": "500px"
          },
          {
            "label": "Full screen",
            "value": "100vh"
          }
        ]
      },
      {
        "type": "checkbox",
        "id": "parallax",
        "label": "Enable parallax",
        "default": true
      },
      {
        "type": "select",
        "id": "style",
        "label": "Slide navigation style",
        "default": "minimal",
        "options": [
          {
            "value": "minimal",
            "label": "Minimal"
          },
          {
            "value": "arrows",
            "label": "Arrows"
          },
          {
            "value": "dots",
            "label": "Dots"
          }
        ]
      },
      {
        "type": "checkbox",
        "id": "autoplay",
        "label": "Auto-change slides",
        "default": true
      },
      {
        "type": "range",
        "id": "autoplay_speed",
        "label": "Change images every",
        "default": 7,
        "min": 5,
        "max": 10,
        "step": 1,
        "unit": "s"
      }
    ],
    "blocks": [
      {
        "type": "image",
        "name": "Slide",
        "settings": [
          {
            "type": "checkbox",
            "id": "sign_form_valiable",
            "label": "Append Sign Up Form",
            "default": false
          },
          {
            "type": "textarea",
            "id": "title",
            "label": "Heading",
            "default": "Two line\nslide title."
          },
          {
            "type": "range",
            "id": "title_size",
            "label": "Heading text size",
            "default": 80,
            "min": 40,
            "max": 100,
            "unit": "px"
          },
          {
            "type": "text",
            "id": "subheading",
            "label": "Subheading",
            "default": "And an optional subheading"
          },
          {
            "type": "url",
            "id": "link",
            "label": "Slide link"
          },
          {
            "type": "text",
            "id": "link_text",
            "label": "Slide link text",
            "default": "Optional button"
          },
          {
            "type": "select",
            "id": "text_align",
            "label": "Text alignment",
            "default": "vertical-bottom horizontal-left",
            "options": [
              {
                "value": "vertical-center horizontal-left",
                "label": "Center left"
              },
              {
                "value": "vertical-center horizontal-center",
                "label": "Center"
              },
              {
                "value": "vertical-center horizontal-right",
                "label": "Center right"
              },
              {
                "value": "vertical-bottom horizontal-left",
                "label": "Bottom left"
              },
              {
                "value": "vertical-bottom horizontal-center",
                "label": "Bottom center"
              },
              {
                "value": "vertical-bottom horizontal-right",
                "label": "Bottom right"
              }
            ]
          },
          {
            "type": "image_picker",
            "id": "image",
            "label": "Image"
          },
          {
            "type": "image_picker",
            "id": "image_mobile",
            "label": "Mobile image"
          },
          {
            "type": "range",
            "id": "overlay_opacity",
            "label": "Text protection",
            "info": "Darkens your image to ensure your text is readable",
            "default": 0,
            "min": 0,
            "max": 100,
            "step": 2,
            "unit": "%"
          },
          {
            "type": "select",
            "id": "focal_point",
            "label": "Image focal point",
            "info": "Used to keep the subject of your photo in view.",
            "default": "center center",
            "options": [
              {
                "value": "20% 0",
                "label": "Top left"
              },
              {
                "value": "top center",
                "label": "Top center"
              },
              {
                "value": "80% 0",
                "label": "Top right"
              },
              {
                "value": "20% 50%",
                "label": "Left"
              },
              {
                "value": "center center",
                "label": "Center"
              },
              {
                "value": "80% 50%",
                "label": "Right"
              },
              {
                "value": "20% 100%",
                "label": "Bottom left"
              },
              {
                "value": "bottom center",
                "label": "Bottom center"
              },
              {
                "value": "80% 100%",
                "label": "Bottom right"
              }
            ]
          }
        ]
      }
    ],
    "presets": [{
      "name": "Slideshow",
      "category": "Image",
      "settings": {
        "autoplay": true,
        "autoplay_speed": 5
      },
      "blocks": [
        {
          "type": "image",
          "settings": {
            "title": "Endless\npossibilities.",
            "subheading": "Bring your brand to life"
          }
        },
        {
          "type": "image",
          "settings": {
            "title": "Two line\nslide titles.",
            "subheading": "And big, beautiful imagery"
          }
        }
      ]
    }]
  }
来陪人家玩游戏嘛
关注
  • 2
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
专栏目录
【shopify如何搭建本地开发环境】
seven070707的专栏
04-23 1793
Shopify macos 搭建本地 开发环境
从零开始开发Shopify主题：（3）自定义配置文件
qq_38402659的博客
03-02 1209
在创建主题时，可以为客户预留一些自定义的配置，是Shopify主题模板常用的做法。Shopify使用settings_schema.json文件提供了这个自定义配置的方式。 在Shopify主题的config目录中，在此文件中定义一些对象属性，就可以实现自定义的配置选项。当你选择在线商店 》 模板 》自定义按钮，就可以看到控制面板中这些选项。 配置文件的文件格式 settings_schema.j...
shopify应用开发，shopify二次开发，shopify中文开发教程
最新发布
github_31369641的博客
05-06 306
通过这个shopify中文教程学会shopify的二次开发后，无论是想自己在shopify官方开店，给自己的店铺增加功能，还是单纯的以个人开发者名义开发shopify的app上架到shopify应用市场进行销售，赚取收益，都可以从这本shopify应用实战开发小册中掌握到全部技能。大家可以在码小课中学习该教程，本小册一共分为二十几章内容，从shopify创建店铺，到创建shopify项目代码，进行二次开发编写代码，最终将自己开发的app上线等完整功能。最后，祝愿大家早日掌握shopify二次开发技能。
ThemeKit-开源
07-20
Mac OS X 上主题的通用参考框架。
Shopify开发入门-前端保姆级教程
热门推荐
采黎的博客
02-08 1万+
Shopify、Shopify开发、Shopify前端开发教程、Shopify主题开发、Shopify应用开发、Shopify插件开发。本文旨在介绍Shopify开发入门、环境、配置等，帮助开发者配置环境、了解各个开发模式的区别及用途；已有Shopify开发经验者可退出，以免浪费你的宝贵时间。**本文5k字+，图片、链接、代码块较多，请耐心阅读~**
shopify二次开发及目录详解
lubaba20的博客
01-09 7286
Evernote Export shopify的二次开发 公司需求要求对shopify的官网要进行二次开发，可以创建新的模块，再此我也一脸懵，点进去发现他的开发对习惯了前后端分离和模块化开发的人来说简直是折磨。整个官网的样式都在一个文件下，但是没办法需求来了还是要完成，发现对shopify二次开发的资料少的可怜。所以写下这篇文章看看能不能帮助到各位同道中人，下面先说说要知道哪些才能进行开发 开发条件 基本的html，css，JavaScript，Liquid模板...
Laravel开发-shopify
08-28
Laravel开发-shopify 使用最新的Guzzle将API与Laravel集成进行购物。
The Definitive Guide to Shopify Themes
05-14
Master the design techniques and practical skills needed to build Shopify themes and make you and your clients profitable. An increasing number of businesses use Shopify and all of them need a well-...
Laravel开发-laravel-shopify
08-27
Laravel开发-laravel-shopify 为Laravel提供购物包以帮助应用程序开发
Laravel开发-shopify-api
08-28
Laravel开发-shopify-api 为PHP购买API
Laravel开发-shopify-oauth
08-28
Laravel开发-shopify-oauth 用于Shopify应用程序的OAuth 2.0身份验证
从零开始开发Shopify主题：（2）安装Shopify主题开发工具包
qq_38402659的博客
03-02 1451
Shopify Theme Kit是Shopify开发主题的命令行开发工具包，这套工具包主要功能如下： 上传主题到多种环境 快速上传和下载主题 监测本地文件更改情况并自动上传至Shopify 适用于Windows、Linux和MacOS 1、安装Shopify Theme Kit 我这里使用的mac，并使用了homebrew，因此使用下面的命令安装： brew tap shopify/shopif...
Shopify二次开发之四：完成第一个section
SupperSA的博客
11-30 1312
简单的开发第一个shopify liquid section, 通过之前学习到的schema配置、liquid语法学习，模板渲染对象。
Shopify二次开发之一：项目结构解析
SupperSA的博客
11-03 945
关于shopify的二次开发，项目结构简介介绍，以及需要注意的点。
shopify cli 安装记录
时间在飞飞的博客
09-18 789
先安装 rubyDownloadsThe easy way to install Ruby on Windows This is a self-contained Windows-based installer that includes the Ruby language, an execution environment, important...https://rubyinstaller.org/downloads/
Shopify 主题样式开发
sinat_35272898的博客
05-23 3880
Shopify 前端开发，主题样式开发初体验，本地开发环境搭建，section 开发，liquid 编写，代码提交
为什么很多客户找我进行 shopify定制开发
时间在飞飞的博客
04-11 131
您可以根据您的需求定制页面布局、颜色方案、字体和图像等元素，以便为您的客户提供更好的用户体验。例如，您可以定制产品详情页面，突出产品的特点和优势，并提供丰富的图片和视频资料，帮助客户更好地了解产品。除了上述提到的一些搜索引擎优化技巧外，您还可以考虑对您的 Shopify 网站进行模板定制开发，以便更好地满足您的业务需求，提高销售。总之，通过模板定制开发，您可以创建一个更加专业、个性化和功能强大的 Shopify 网站，从而吸引更多客户、提高转化率并增加销售。
shopify开发经验
sinat_15682257的博客
08-10 1620
shopify小结
Shopify应用开发
07-27
Shopify应用开发是指开发与Shopify电子商务平台集成的应用程序。这些应用可以增强商家在Shopify上运营的功能，提供更多的定制化选项和工具，帮助他们优化业务流程、提升销售和用户体验。 要进行Shopify应用开发，你需要了解以下内容： 1. Shopify平台：了解Shopify的基本架构、API和开发文档，熟悉Shopify的商店管理功能和界面。 2. 编程语言：Shopify应用可以使用多种编程语言进行开发，如Ruby、Python、PHP等。选择一种你熟悉的语言来进行开发。 3. Shopify API：使用Shopify提供的API，可以与商店数据进行交互，包括商品、订单、顾客等信息的读取和修改。 4. 应用功能：根据你的需求和目标，确定要开发的应用功能，例如增加新的商店管理功能、定制化主题、集成第三方服务等。 5. 应用安全：确保你的应用与Shopify平台之间的通信是安全的，处理用户数据时要遵守隐私政策和安全标准。 6. 应用发布：完成应用开发后，你可以将应用提交到Shopify应用商店进行审核和发布，使其他商家能够安装和使用你的应用。 希望以上信息能帮助你开始进行Shopify应用开发。如果你有具体的问题或需要更多帮助，请随时提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值