Shopify主题,液体,徽标和用户体验
要继续收到付款,您需要在2023年1月18日之前启用两步身份验证来保护您的帐户。如果两步验证没有打开,您的支付将被暂停。了解更多< / >
我试图把一个形象的产品,但形象是太大和模糊。只有一部分的图像显示在产品上,因为图像已经被放大,超过了产品的尺寸。我的图像大小是2048px x 1985px(我读到Shopify推荐方形图像为2048px x 2048px)。分辨率为72dpi。我没有压缩文件。非常感谢你对这个问题提出的解决办法。
解决了!找到解决方案< / >
请把card-product的代码发给我液体文件,我会帮你更改。
我宁愿不进入编码我的网站。有没有办法在不改变代码的情况下调整产品上的图像大小?如果需要更改代码,请说明如何查找卡片产品的代码。液体文件。谢谢你的帮助。
请转到Actions >编辑代码> snippets > card-product。液体文件。
希望能有所帮助!
谢谢这个非常有帮助的链接。我还有一些工作要做,让我的产品上的形象看起来正确。我认为你建议的链接会让我找到答案,所以我把你的回复标记为接受的解决方案。非常感谢。
它会引导你去卡产品。液体文件,如果你想解决模糊,请把所有代码发给我,我帮你改
是的,如果你想让图像显示得更清楚,你可以把代码发给我,我会告诉你如何修改,让它看起来和原来的图像一样。
液体代码如下:
< !doctype html >
< >头
< meta charset = " utf - 8 " >
https://cdn.shopify.com< / >“crossorigin >
{%-如果设置。= blank -%}
https://fonts.shopifycdn.com< / >“crossorigin >
{%- endunless -%}
<标题>
{{page_title}}
{%-如果current_tags %} –标记“{{current_tags |加入 : ', ' }}"{% endif - %}
{%- if current_page != 1 %} –页面{{current_page}}{% endif -%}
{%-除非page_title包含shop.name %} –{{shop.name}}{% endunless -%}
< /名称>
{如果page_description %}
.js
{{content_for_header}}
{% -液体
指定body_font_bold = settings。Type_body_font: '粗体','粗体'
指定body_font_italic = settings。Type_body_font: 'style', '斜体'
指定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。{{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。重量| plus: 300 | at_most: 1000}};
——font-heading-family: {{settings.type_header_font。{{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:设置。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:{{设置。colors_background_1}};
——gradient-base-background-1: {% if设置。= blank %}{{设置。Gradient_background_1}}{% else %}{{设置。Colors_background_1}}{% endif %};
——gradient-base-background-2: {% if设置。= blank %}{{设置。Gradient_background_2}}{% else %}{{设置。Colors_background_2}}{% endif %};
——gradient-base-accent-1: {% if设置。= blank %}{{设置。{% else %}{{设置。Colors_accent_1}}{% endif %};
——gradient-base-accent-2: {% if设置。= blank %}{{设置。{% else %}{{设置。Colors_accent_2}}{% endif %};
——media-padding:{{设置。media_padding}} px;
——media-border-opacity:{{设置。Media_border_opacity | divided_by: 100.0}};
——media-border-width:{{设置。media_border_thickness}} px;
——media-radius:{{设置。media_radius}} px;
——media-shadow-opacity:{{设置。Media_shadow_opacity | divided_by: 100.0}};
——media-shadow-horizontal-offset:{{设置。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:{{设置。Page_width | divided_by: 10}};
——page-width-margin: {%page_width = =‘1600’%}2{%其他%}0 {% endif %}快速眼动;
——product-card-image-padding:{{设置。Card_image_padding | divided_by: 10.0}}rem;
——product-card-corner-radius:{{设置。Card_corner_radius | divided_by: 10.0}}rem;
——product-card-text-align:{{设置。card_text_alignment}};
——product-card-border-width:{{设置。Card_border_thickness | divided_by: 10.0}}rem;
——product-card-border-opacity:{{设置。Card_border_opacity | divided_by: 100.0}};
——product-card-shadow-opacity:{{设置。Card_shadow_opacity | divided_by: 100.0}};
——product-card-shadow-visible: {% if设置。Card_shadow_opacity > 0 %}1{% else %}0{% endif %};
——product-card-shadow-horizontal-offset:{{设置。Card_shadow_horizontal_offset | divided_by: 10.0}}rem;
——product-card-shadow-vertical-offset:{{设置。Card_shadow_vertical_offset | divided_by: 10.0}}rem;
——product-card-shadow-blur-radius:{{设置。Card_shadow_blur | divided_by: 10.0}}rem;
——collection-card-image-padding:{{设置。Collection_card_image_padding | divided_by: 10.0}}rem;
——collection-card-corner-radius:{{设置。Collection_card_corner_radius | divided_by: 10.0}}rem;
——collection-card-text-align:{{设置。collection_card_text_alignment}};
——collection-card-border-width:{{设置。Collection_card_border_thickness | divided_by: 10.0}}rem;
——collection-card-border-opacity:{{设置。Collection_card_border_opacity | divided_by: 100.0}};
——collection-card-shadow-opacity:{{设置。Collection_card_shadow_opacity | divided_by: 100.0}};
——collection-card-shadow-visible: {% if设置。Collection_card_shadow_opacity > 0 %}1{% else %}0{% endif %};
——collection-card-shadow-horizontal-offset:{{设置。Collection_card_shadow_horizontal_offset | divided_by: 10.0}}rem;
——collection-card-shadow-vertical-offset:{{设置。Collection_card_shadow_vertical_offset | divided_by: 10.0}}rem;
—collection-card-shadow-blur-radius:{{设置。Collection_card_shadow_blur | divided_by: 10.0}}rem;
——blog-card-image-padding:{{设置。Blog_card_image_padding | divided_by: 10.0}}rem;
——blog-card-corner-radius:{{设置。Blog_card_corner_radius | divided_by: 10.0}}rem;
——blog-card-text-align:{{设置。blog_card_text_alignment}};
——blog-card-border-width:{{设置。Blog_card_border_thickness | divided_by: 10.0}}rem;
——blog- cardborder -opacity:{{设置。Blog_card_border_opacity | divided_by: 100.0}};
——blog-card-shadow-opacity:{{设置。Blog_card_shadow_opacity | divided_by: 100.0}};
——blog-card-shadow-visible: {% if设置。Blog_card_shadow_opacity > 0 %}1{% else %}0{% endif %};
——blog-card-shadow-horizontal-offset:{{设置。Blog_card_shadow_horizontal_offset | divided_by: 10.0}}rem;
——blog-card-shadow-vertical-offset:{{设置。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;
——popup-border-width:{{设置。popup_border_thickness}} px;
——popup-border-opacity:{{设置。Popup_border_opacity | divided_by: 100.0}};
——popup-corner-radius:{{设置。popup_corner_radius}} px;
——popup-shadow-opacity:{{设置。Popup_shadow_opacity | divided_by: 100.0}};
——popup-shadow-horizontal-offset:{{设置。popup_shadow_horizontal_offset}} px;
——popup-shadow-vertical-offset:{{设置。popup_shadow_vertical_offset}} px;
——pop -shadow-blur-radius:{{设置。popup_shadow_blur}} px;
——drawer-border-width:{{设置。drawer_border_thickness}} px;
——drawer-border-opacity:{{设置。Drawer_border_opacity | divided_by: 100.0}};
——draw -shadow-opacity:{{设置。draw_shadow_opacity | divided_by: 100.0}};
——drawer-shadow-horizontal-offset:{{设置。drawer_shadow_horizontal_offset}} px;
——drawer-shadow-vertical-offset:{{设置。drawer_shadow_vertical_offset}} px;
——drawer-shadow-blur-radius:{{设置。drawer_shadow_blur}} px;
——spacing-sections-desktop:{{设置。spacing_sections}} px;
——spacing-sections-mobile:{%如果设置。Spacing_sections < 24%}{{设置。{% else %}{{设置。Spacing_sections | times: 0.7 | round | at_least: 20}}{% endif %}px;
——grid-desktop-vertical-spacing:{{设置。spacing_grid_vertical}} px;
——grid-desktop-horizontal-spacing:{{设置。spacing_grid_horizontal}} px;
——grid-mobile-vertical-spacing:{{设置。Spacing_grid_vertical | divided_by: 2}}px;
——grid-mobile-horizontal-spacing:{{设置。Spacing_grid_horizontal | divided_by: 2}}px;
——text-boxes-border-opacity:{{设置。Text_boxes_border_opacity | divided_by: 100.0}};
——text-boxes-border-width:{{设置。text_boxes_border_thickness}} px;
——text-boxes-radius:{{设置。text_boxes_radius}} px;
——text-boxes-shadow-opacity:{{设置。Text_boxes_shadow_opacity | divided_by: 100.0}};
——text-boxes-shadow-visible: {% if设置。Text_boxes_shadow_opacity > 0 %}1{% else %}0{% endif %};
——text-boxes-shadow-horizontal-offset:{{设置。text_boxes_shadow_horizontal_offset}} px;
——text-boxes-shadow-vertical-offset:{{设置。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 | plus:设置。{% else %}0{% endif %}px;
——button -border-width: {%Buttons_border_opacity > 0 %}{{设置。{% else %}0{% endif %}px;
——button -border-opacity:{{设置。Buttons_border_opacity | divided_by: 100.0}};
——buttons-shadow-opacity:{{设置。Buttons_shadow_opacity | divided_by: 100.0}};
——button -shadow-visible: {% if设置。Buttons_shadow_opacity > 0 %}1{% else %}0{% endif %};
——buttons-shadow-horizontal-offset:{{设置。buttons_shadow_horizontal_offset}} px;
——button -shadow-vertical-offset:{{设置。buttons_shadow_vertical_offset}} px;
——buttons-shadow-blur-radius:{{设置。buttons_shadow_blur}} px;
——button -border-offset: {% if设置。Buttons_radius > 0或设置。Buttons_shadow_opacity > 0 %}0.3{% else %}0{% endif %}px;
——inputs-radius:{{设置。inputs_radius}} px;
——inputs-border-width:{{设置。inputs_border_thickness}} px;
——inputs-border-opacity:{{设置。Inputs_border_opacity | divided_by: 100.0}};
——inputs-shadow-opacity:{{设置。Inputs_shadow_opacity | divided_by: 100.0}};
——input -shadow-horizontal-offset:{{设置。inputs_shadow_horizontal_offset}} px;
——inputs-margin-offset: {% if设置。Inputs_shadow_vertical_offset = 0和设置。Inputs_shadow_opacity > 0 %}{{设置。Inputs_shadow_vertical_offset | abs}}{% else %}0{% endif %}px;
——input -shadow-vertical-offset:{{设置。inputs_shadow_vertical_offset}} px;
——inputs-shadow-blur-radius:{{设置。inputs_shadow_blur}} px;
——inputs-radius-outset:{%如果设置。Inputs_radius > 0 %}{{设置。Inputs_radius | plus:设置。Inputs_border_thickness}}{% else %}0{% endif %}px;
——variant-pill -radius:{{设置。variant_pills_radius}} px;
——variable -pill -border-width:{{设置。variant_pills_border_thickness}} px;
——variable -pill -border-opacity:{{设置。Variant_pills_border_opacity | divided_by: 100.0}};
——variable -pill -shadow-opacity:{{设置。Variant_pills_shadow_opacity | divided_by: 100.0}};
——variable -pill -shadow-horizontal-offset:{{设置。variant_pills_shadow_horizontal_offset}} px;
——variable -pill -shadow-vertical-offset:{{设置。variant_pills_shadow_vertical_offset}} px;
—variable -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;
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);
}
@media screen and (min-width: 750px) {
身体{
字体大小:1.6快速眼动;
}
}
{% endstyle %}
{{'base.css' | asset_url | styleshe_tag}}
{%-除非settings.type_body_font.system?- - - - - - %}
{%- endunless -%}
{%-除非settings.type_header_font.system?- - - - - - %}
{%- endunless -%}
{%-如果设置。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}}
< / >
{%-如果设置。Cart_type == '抽屉' -%}
{%-显示“购物车抽屉”-%}
{%- endif -%}
{%节'公告栏' %}
{% section 'header' %}
{{content_for_layout}}
主> < /
{% section '页脚' %}
< 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 ' bb_0 t}} ',
salesout: ' {{'products.product。Sold_out ' bb_0 t}} ',
不可用:“{{”products.product。不可用' | t}} ',
}
窗口。accessitystrings = {
imageAvailable: ' {{'products.product.media。Image_available ' | t: index: '[index]'}} ',
shareSuccess: ' {{'general.share。Success_message ' | t}} ',
pausesslideshow: ' {{'Pause_slideshow ' | t}} ',
播放幻灯片:' {{'sections.slideshow。Play_slideshow ' | t}} ',
}
> < /脚本
{%-如果设置。predictive_search_enabled - %}
.js
{%- endif -%}
身体< / >
< / html >
这不是主题。Liquid file,请把card-product的代码发给我。液体文件,我会帮你更改。