Shopify主题,液体,标识和用户体验
要继续收到付款,您需要在2023年1月18日之前启用两步身份验证来保护您的帐户。如果两步验证没有打开,您的支付将被暂停。了解更多< / >
我试图把一个图像上的产品,但图像太大和模糊。产品上只显示了部分图像,因为图像已经放大,超出了产品的尺寸。我的图像大小是2048px x 1985px(我读到Shopify推荐2048px x 2048px的正方形图像)。分辨率为72dpi。我还没有压缩文件。非常感谢你对这个问题提出的解决方案。
解决了!找到解决方案< / >
这是一个公认的解决方案。
你可以参考https://help.shopify.com/en/manual/online-store/themes/theme-structure/extend/edit-theme-code< / >
希望你明白了。
请把卡产品的代码发给我液体文件,我帮你换。
我宁愿不进入我的网站编码。有没有办法在不改变代码的情况下调整产品上的图像大小?如果需要更改代码,请说明如何查找卡片产品的代码。液体文件。谢谢你的帮助。
请转操作>编辑代码>片段>卡-产品。液体文件。
希望能有所帮助!
这是一个公认的解决方案。
你可以参考https://help.shopify.com/en/manual/online-store/themes/theme-structure/extend/edit-theme-code< / >
希望你明白了。
谢谢你提供的非常有用的链接。我仍然有一些工作要做,让我的产品上的图像看起来正确。我认为你建议的链接会让我找到答案,所以我把你的回复标记为接受的解决方案。非常感谢。
它会引导你去卡片产品。液体文件,如果你想解决模糊,请把所有的代码发给我,我会帮你修改
是的,如果你想让图片显示的更清晰,你可以把代码发给我,我会告诉你如何修改,让它和原来的图片显示的一样。
液体代码如下:
<!doctype html >
< >头
< meta charset = " utf - 8 " >
.
https://cdn.shopify.com< / >“crossorigin >
{%- if设置。= blank -%}
{%- endif -%}
{%-除非settings.type_header_font.system?和settings.type_body_font.system吗?- - - - - - %}
https://fonts.shopifycdn.com< / >“crossorigin >
{%- endunless -%}
<标题>
{{page_title}}
{%- if current_tags %} –标记“{{current_tags |加入 : ', ' }}"{% endif - %}
{%- if current_page != 1%} –页面{{current_page}}{% endif -%}
{%-除非page_title包含shop.name %} –{{shop.name}}{% endunless -%}
< /名称>
如果page_description %}
{% endif %}
{%渲染“元标签”%}
.js' | asset_url}}
{{content_for_header}}
{% -液体
指定body_font_bold = settings。Type_body_font | font_modify: 'weight', 'bold'
指定body_font_italic = settings。| font_modify: 'style', 'italic'
指定body_font_bold_italic = body_font_bold | font_modify: 'style', 'italic'
%}
{% style %}
{{设置。Type_body_font | font_face: font_display: 'swap'
{{body_font_bold | font_face: font_display: 'swap'}}
{{body_font_italic | font_face: font_display: 'swap'}}
{{body_font_bold_italic | font_face: font_display: 'swap'}}
{{设置。Type_header_font | font_face: font_display: 'swap'}}
:根{
——font-body-family: {{settings.type_body_font。Family}}, {{settings.type_body_font。fallback_families}};
——font-body-style: {{settings.type_body_font。风格}};
——font-body-weight: {{settings.type_body_font。体重}};
——font-body-weight-bold: {{settings.type_body_font。权重| +:300 | at_most: 1000}};
——font-heading-family: {{settings.type_header_font。Family}}, {{settings.type_header_font。fallback_families}};
——font-heading-style: {{settings.type_header_font。风格}};
——font-heading-weight: {{settings.type_header_font。体重}};
——font-body-scale:{{设置。Body_scale | divided_by: 100.0}};
——font-heading-scale:{{设置。Heading_scale | times: 1.0 | divided_by: settings。body_scale}};
——color-base-text: {{settings.colors_text。红色}},{{settings.colors_text。绿色}},{{settings.colors_text。蓝色}};
——color-shadow: {{settings.colors_text。红色}},{{settings.colors_text。绿色}},{{settings.colors_text。蓝色}};
——color-base-background-1: {{settings.colors_background_1。红色}},{{settings.colors_background_1。绿色}},{{settings.colors_background_1。蓝色}};
——color-base-background-2: {{settings.colors_background_2。红色}},{{settings.colors_background_2。绿色}},{{settings.colors_background_2。蓝色}};
——color-base-solid-button-labels: {{settings.colors_solid_button_labels。红色}},{{settings.colors_solid_button_labels。绿色}},{{settings.colors_solid_button_labels。蓝色}};
——color-base-outline-button-labels: {{settings.colors_outline_button_labels。红色}},{{settings.colors_outline_button_labels。绿色}},{{settings.colors_outline_button_labels。蓝色}};
——color-base-accent-1: {{settings.colors_accent_1。红色}},{{settings.colors_accent_1。绿色}},{{settings.colors_accent_1。蓝色}};
——color-base-accent-2: {{settings.colors_accent_2。红色}},{{settings.colors_accent_2。绿色}},{{settings.colors_accent_2。蓝色}};
——payment-terms-background-color: {{settings。colors_background_1}};
——gradient-base-background-1:{%如果设置。Gradient_background_1 != blank %}{{设置。Gradient_background_1}}{% else %}{{设置。Colors_background_1}}{% endif %};
——gradient-base-background-2:{%如果设置。Gradient_background_2 != blank %}{{设置。Gradient_background_2}}{% else %}{{设置。Colors_background_2}}{% endif %};
——gradient-base-accent-1:{%如果设置。Gradient_accent_1 != blank %}{{设置。Gradient_accent_1}}{% else %}{{设置。Colors_accent_1}}{% endif %};
——gradient-base-accent-2:{%如果设置。Gradient_accent_2 != blank %}{{设置。Gradient_accent_2}}{% else %}{{设置。Colors_accent_2}}{% endif %};
——media-padding: {{settings。media_padding}} px;
——media-border-opacity: {{settings。Media_border_opacity | divided_by: 100.0}};
——media-border-width: {{settings。media_border_thickness}} px;
——media-radius: {{settings。media_radius}} px;
——media-shadow-opacity: {{settings。Media_shadow_opacity | divided_by: 100.0}};
——media-shadow-horizontal-offset: {{settings。media_shadow_horizontal_offset}} px;
——media-shadow-vertical-offset:{{设置。media_shadow_vertical_offset}} px;
——media-shadow-blur-radius:{{设置。media_shadow_blur}} px;
——media-shadow-visible: {% if设置。Media_shadow_opacity > 0 %}1{% else %}0{% endif %};
——page-width: {{settings。Page_width | dividd_by: 10}}rem;
——page-width-margin:{%如果设置。page_width = =‘1600’%}2{%其他%}0 {% endif %}快速眼动;
——product-card-image-padding: {{settings。Card_image_padding | divided_by: 10.0}}rem;
——product-card-corner-radius: {{settings。Card_corner_radius | divided_by: 10.0}}rem;
——product-card-text-align: {{settings。card_text_alignment}};
——product-card-border-width: {{settings。Card_border_thickness | divided_by: 10.0}}rem;
——product-card-border-opacity: {{settings。Card_border_opacity | divided_by: 100.0}};
——product-card-shadow-opacity: {{settings。Card_shadow_opacity | divided_by: 100.0}};
——product-card-shadow-visible:{%如果设置。Card_shadow_opacity > 0 %}1{% else %}0{% endif %};
——product-card-shadow-horizontal-offset: {{settings。car_shadow_horizontal_offset | divided_by: 10.0}}rem;
——product-card-shadow-vertical-offset: {{settings。Card_shadow_vertical_offset | divided_by: 10.0}}rem;
——product-card-shadow-blur-radius: {{settings。Card_shadow_blur | divided_by: 10.0}}rem;
——collection-card-image-padding: {{settings。Collection_card_image_padding | divided_by: 10.0}}rem;
——collection-card-corner-radius: {{settings。Collection_card_corner_radius | divided_by: 10.0}}rem;
——collection-card-text-align: {{settings。collection_card_text_alignment}};
——collection-card-border-width: {{settings。Collection_card_border_thickness | divided_by: 10.0}}rem;
——collection-card-border-opacity: {{settings。Collection_card_border_opacity | divided_by: 100.0}};
——collection-card-shadow-opacity: {{settings。Collection_card_shadow_opacity | divided_by: 100.0}};
——collection-card-shadow-visible:{%如果设置。Collection_card_shadow_opacity > 0 %}1{% else %}0{% endif %};
——collection-card-shadow-horizontal-offset: {{settings。Collection_card_shadow_horizontal_offset | divided_by: 10.0}}rem;
——collection-card-shadow-vertical-offset: {{settings。Collection_card_shadow_vertical_offset | divided_by: 10.0}}rem;
——collection-card-shadow-blur-radius: {{settings。Collection_card_shadow_blur | divided_by: 10.0}}rem;
——blog-card-image-padding: {{settings。Blog_card_image_padding | divided_by: 10.0}}rem;
——blog-card-corner-radius: {{settings。Blog_card_corner_radius | divided_by: 10.0}}rem;
——blog-card-text-align: {{settings。blog_card_text_alignment}};
——blog-card-border-width: {{settings。Blog_card_border_thickness | divided_by: 10.0}}rem;
——blog-card-border-opacity: {{settings。Blog_card_border_opacity | divided_by: 100.0}};
——blog-card-shadow-opacity: {{settings。Blog_card_shadow_opacity | divided_by: 100.0}};
——blog-card-shadow-visible: {% if settings。Blog_card_shadow_opacity > 0 %}1{% else %}0{% endif %};
——blog-card-shadow-horizontal-offset: {{settings。Blog_card_shadow_horizontal_offset | divided_by: 10.0}}rem;
——blog-card-shadow-vertical-offset: {{settings。Blog_card_shadow_vertical_offset | divided_by: 10.0}}rem;
——blog-card-shadow-blur-radius:{{设置。Blog_card_shadow_blur | divided_by: 10.0}}rem;
——badge-corner-radius:{{设置。Badge_corner_radius | divided_by: 10.0}}rem;
——弹出-border-width:{{设置。popup_border_thickness}} px;
——弹出-边界-透明度:{{设置。Popup_border_opacity | divided_by: 100.0}};
——popup-corner-radius:{{设置。popup_corner_radius}} px;
——弹出-阴影-透明度:{{设置。Popup_shadow_opacity | divided_by: 100.0}};
——弹出-阴影-水平偏移:{{设置。popup_shadow_horizontal_offset}} px;
——弹出-阴影-垂直偏移:{{设置。popup_shadow_vertical_offset}} px;
——弹出-阴影-模糊-半径:{{设置。popup_shadow_blur}} px;
——drawer-border-width: {{settings。drawer_border_thickness}} px;
——drawer-border-opacity: {{settings。drwer_border_opacity | divided_by: 100.0}};
——drawer-shadow-opacity: {{settings。Drawer_shadow_opacity | divided_by: 100.0}};
——drawer-shadow-horizontal-offset: {{settings。drawer_shadow_horizontal_offset}} px;
——drawer-shadow-vertical-offset: {{settings。drawer_shadow_vertical_offset}} px;
——draw -shadow-blur-radius:{{设置。drawer_shadow_blur}} px;
——space -sections-desktop: {{settings。spacing_sections}} px;
——spacing-sections-mobile:{%如果设置。Spacing_sections < 24%}{{设置。Spacing_sections}}{% else %}{{设置。Spacing_sections | times: 0.7 | round | at_least: 20}}{% endif %}px;
——grid-desktop-vertical-spacing: {{settings。spacing_grid_vertical}} px;
——grid-desktop-horizontal-spacing: {{settings。spacing_grid_horizontal}} px;
——grid-mobile-vertical-spacing: {{settings。Spacing_grid_vertical | divided_by: 2}}px;
——grid-mobile-horizontal-spacing:{{设置。Spacing_grid_horizontal | divided_by: 2}}px;
——text-boxes-border-opacity: {{settings。Text_boxes_border_opacity | divided_by: 100.0}};
——text-boxes-border-width: {{settings。text_boxes_border_thickness}} px;
——text-boxes-radius: {{settings。text_boxes_radius}} px;
——text-boxes-shadow-opacity: {{settings。Text_boxes_shadow_opacity | divided_by: 100.0}};
——text-boxes-shadow-visible: {% if settings。Text_boxes_shadow_opacity > 0 %}1{% else %}0{% endif %};
——text-boxes-shadow-horizontal-offset: {{settings。text_boxes_shadow_horizontal_offset}} px;
——text-boxes-shadow-vertical-offset: {{settings。text_boxes_shadow_vertical_offset}} px;
——text-boxes-shadow-blur-radius:{{设置。text_boxes_shadow_blur}} px;
——buttons-radius:{{设置。buttons_radius}} px;
——buttons-radius-outset:{%如果设置。Buttons_radius > 0 %}{{设置。Buttons_radius | +:设置。Buttons_border_thickness}}{% else %}0{% endif %}px;
——buttons-border-width:{%如果设置。Buttons_border_opacity > 0 %}{{设置。Buttons_border_thickness}}{% else %}0{% endif %}px;
——buttons-border-opacity: {{settings。Buttons_border_opacity | divided_by: 100.0}};
——按钮-阴影-透明度:{{设置。Buttons_shadow_opacity | divided_by: 100.0}};
——buttons-shadow-visible:{%如果设置。Buttons_shadow_opacity > 0 %}1{% else %}0{% endif %};
——buttons-shadow-horizontal-offset: {{settings。buttons_shadow_horizontal_offset}} px;
——buttons-shadow-vertical-offset:{{设置。buttons_shadow_vertical_offset}} px;
——buttons-shadow-blur-radius:{{设置。buttons_shadow_blur}} px;
——buttons-border-offset:{%如果设置。Buttons_radius > 0或设置。Buttons_shadow_opacity > 0 %}0.3{% else %}0{% endif %}px;
——输入-半径:{{设置。inputs_radius}} px;
——input -border-width: {{settings。inputs_border_thickness}} px;
——input -border-opacity: {{settings。Inputs_border_opacity | divided_by: 100.0}};
——输入-阴影-透明度:{{设置。Inputs_shadow_opacity | divided_by: 100.0}};
——input -shadow-horizontal-offset: {{settings。inputs_shadow_horizontal_offset}} px;
——input -margin-offset:{%如果设置。Inputs_shadow_vertical_offset != 0和设置。Inputs_shadow_opacity > 0 %}{{设置。Inputs_shadow_vertical_offset | abs}}{% else %}0{% endif %}px;
——input -shadow-vertical-offset: {{settings。inputs_shadow_vertical_offset}} px;
——输入-阴影-模糊-半径:{{设置。inputs_shadow_blur}} px;
——input -radius-outset:{%如果设置。Inputs_radius > 0 %}{{设置。Inputs_radius | +:设置。Inputs_border_thickness}}{% else %}0{% endif %}px;
——variant-pill -radius: {{settings。variant_pills_radius}} px;
——variant-pill -border-width: {{settings。variant_pills_border_thickness}} px;
——variant-pill -border-opacity: {{settings。Variant_pills_border_opacity | divided_by: 100.0}};
——variant-pill -shadow-opacity:{{设置。Variant_pills_shadow_opacity | divided_by: 100.0}};
——variant-pill -shadow-horizontal-offset: {{settings。variant_pills_shadow_horizontal_offset}} px;
——variant-pill -shadow-vertical-offset: {{settings。variant_pills_shadow_vertical_offset}} px;
——variant-pill -shadow-blur-radius:{{设置。variant_pills_shadow_blur}} px;
}
*,
*::,
{后*::
box-sizing:继承;
}
html {
box-sizing: border-box;
Font-size: calc(var(——font-body-scale) * 62.5%);
高度:100%;
}
身体{
显示:网格;
Grid-template-rows: auto auto 1fr auto;
grid-template-columns: 100%;
最小高度:100%;
保证金:0;
字体大小:1.5快速眼动;
字母间距:0.06快速眼动;
Line-height: calc(1 + 0.8 / var(——font-body-scale));
字体类型:var(——font-body-family);
字体样式:var(——font-body-style);
粗细:var(——font-body-weight);
}
@媒体屏幕和(min-width: 750px) {
身体{
字体大小:1.6快速眼动;
}
}
{% endstyle %}
{{'base.css' | asset_url | stylesheet_tag}}
{%-除非settings.type_body_font.system?- - - - - - %}
{%- endunless -%}
{%-除非settings.type_header_font.system?- - - - - - %}
{%- endunless -%}
{%- if设置。predictive_search_enabled - %}
.
{%- endif -%}
< >脚本document.documentElement。className = document.documentElement.className。替换(“no-js”、“js”);
if (Shopify.designMode) {
document.documentElement.classList.add(“shopify-design-mode”);
}
> < /脚本
< / >头
<身体类=“梯度”>
{{”可访问性。Skip_to_text " | t}}
< / >
{%- if设置。Cart_type == 'drawer' -%}
{%-渲染'cart-drawer' -%}
{%- endif -%}
{% section 'announcement-bar' %}
{% section 'header' %}
{{content_for_layout}}
< /主要>
{% section 'footer' %}
< ul隐藏>
<脚本>
窗口。shopUrl = '{{请求。起源}}';
窗口。路由= {
Cart_add_url: '{{路由。cart_add_url}},
Cart_change_url: '{{路由。cart_change_url}},
Cart_update_url: '{{路由。cart_update_url}},
Cart_url: '{{路由。cart_url}},
Predictive_search_url: '{{路由。predictive_search_url}}’
};
窗口。cartStrings = {
错误:“{{”sections.cart。Cart_error ' | t}} ',
quantityError: ' {{'sections.cart。Cart_quantity_error_html ' | t: quantity: '[quantity]'}} '
}
窗口。variantStrings = {
addToCart: ' {{'products.product。Add_to_cart ' | t}} ',
soldOut:“{{”products.product。售罄' | t}} ',
不可用:“{{”products.product。不可用' | t}} ',
}
窗口。accessibilityStrings = {
imageAvailable:“{{”products.product.media。Image_available ' | t: index: '[index]'}} ',
shareSuccess:“{{”general.share。Success_message ' | t}} ',
pauseSlideshow:“{{”sections.slideshow。Pause_slideshow ' | t}} '
playSlideshow:“{{”sections.slideshow。play_slide ' | t}} ',
}
> < /脚本
{%- if设置。predictive_search_enabled - %}
.js' | asset_url}}
{%- endif -%}
< /身体>
< / html >
这不是主题。Liquid file,请把card-product的代码发给我液体文件,我帮你换。