Hello,
I want to add some “image with text” section to the product page on Kalles Theme. Unfortunately there is no option for that on the product page.. Could anyone help me to add this? Probably we have to add it to the code I guess.
Would be amazing, if someone got solution for that!
Thanks a lot!
Hello @don76 ,
We are OneExperts from OneCommerce and we’re here to help you out.
Unfortunately, with the Kalles Theme, you have to add image with text by code. You can try follow these steps:
Your text here
.product-image-text-section {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.product-image-text-section img {
max-width: 100%;
}
.product-image-text-section p {
margin-left: 10px;
}
Hope we can help you out with this solution. If you need any further information, hit us up at julia@onecommerce.io
Regards,
OneExperts by OneCommerce
Hi @don76
to update code these steps:
Go to Store Online-> theme → edit code
Go to Templates/product.liquid
add code below to this file
{% section 'image-with-text' %}
Thanks a lot for the reply!
I guess this solution will bring me the same image with text on every product then. The problem is I got several products and I want to have different images/text on every. And I want to use the section multiple times on every product, with different content. Maybe you got a solution for that as well?
Thank you very much for the reply!
I copied it to product.liquid , but nothing changed.
Is there any specific line in that liquid where I have to copy it to?
{% section 'image-with-text' %}
UPDATE: I managed to add a Image with text section to the product page, I did it mainly like you said but the name is different on Kalles theme, it worked with: {%- section ‘image_text’ -%}
BUT now Its permanent on the product page, and I need the function to disable it.
I already managed to add a checkbox to it (copied from the other sections on product page to the image_text.liquid), but the checkbox doesn’t work.
Anyone knows how to make the checkbox work? Or any other solutions to create an enable/disable option?
Hi @don76
Could you share your code? I will help check it.
Thank you would be great!
Which code do you want to see exactly?
This is product.liquid :
{%- comment -%}
The contents of the product.liquid template can be found in /sections/pr_summary.liquid
{%- endcomment -%}
{%- liquid
assign img_zoom_size = 'master'
assign img_size = product.images.size
assign eq_imgtb = settings.ratio_img_main
assign sett_pr = settings.design_products
assign des_pr_layout = settings.des_pr_layout
assign image = product.images[0] | default:settings.placeholder_img
case sett_pr
when '2'
assign singles_sp = 'sp-single-2'
assign cl_tb = '2'
when '3'
assign singles_sp = 'sp-single-3'
assign cl_tb = '3'
when '7'
assign singles_sp = 'sp-single-7'
assign cl_tb = '7'
when '4'
assign singles_sp = 'sp-single-4'
assign cl_tb = 'bottom'
when '5'
assign singles_sp = 'sp-single-5'
assign cl_tb = 'right'
when '6'
assign singles_sp = 'sp-single-6'
assign cl_tb = 'none'
else
assign singles_sp = 'sp-single-1'
assign cl_tb = 'left'
endcase
case settings.size_img_pr
when '1'
assign class_images = 'col-md-4'
assign class_summary = 'col-md-8'
when '2'
assign class_images = 'col-md-6'
assign class_summary = 'col-md-6'
when '3'
assign class_images = 'col-md-7'
assign class_summary = 'col-md-5'
endcase
assign zoom_tp = settings.zoom_tp
assign pr_media = product.media
assign class_main = '12'
assign no_sidebar = true
assign pr_sidebar = settings.pr_sidebar
case pr_sidebar
when 'right'
assign no_sidebar = false
case settings.pr_size_sidebar
when '1'
assign class_main = '10 order-1'
assign class_sidebar = '2 order-12'
when '2'
assign class_main = '9 order-1'
assign class_sidebar = '3 order-12'
when '3'
assign class_main = '8 order-1'
assign class_sidebar = '4 order-12'
endcase
when 'left'
assign no_sidebar = false
case settings.pr_size_sidebar
when '1'
assign class_main = '10 order-lg-12 order-1'
assign class_sidebar = '2 order-lg-1 order-12'
when '2'
assign class_main = '9 order-lg-12 order-1'
assign class_sidebar = '3 order-lg-1 order-12'
when '3'
assign class_main = '8 order-lg-12 order-1'
assign class_sidebar = '4 order-lg-1 order-12'
endcase
endcase
assign currently_var = product.selected_or_first_available_variant
assign cur_var_id = currently_var.id
assign pid = product.id
assign hd_up = 'fbt-' |append:pid
assign fbt_tag = product.tags| where:'fbtt4_' | first | default:hd_up | remove:'fbtt4_'
assign nav_up = linklists[fbt_tag].links | where:'type','product_link'
assign nav_up_size = nav_up.size
if product.available == false or settings.fbt_pos == '2'
assign nav_up_size = 0
endif
assign ck_next_pr = false
if settings.back_next_pr and collection != blank
assign ck_next_pr = true
endif -%}
{%- if ck_next_pr or settings.breadcrumb_pr -%}
{% if settings.breadcrumb_pr %}{% endif %}
{%- if ck_next_pr -%}
{%- assign next_pr = collection.next_product -%}
{%- assign prev_pr = collection.previous_product -%}
{%- if prev_pr -%}{{prev_pr.title}}{%- endif -%}
{{'products.product.back_to' | t:title:collection.title}}
{%- if next_pr -%}{{next_pr.title}}{%- endif -%}
{%- endif -%}
{%- endif -%}
{%- if settings.pr_sidebar_full and pr_sidebar != 'none' -%}
{%- unless no_sidebar %}
{% section 'pr-sidebar' %}
{% endunless -%}
{%- if image != blank and pr_media.size < 2 -%}{%- assign ratio = image.aspect_ratio -%}{%- assign iw = image.width -%}
{%- render 'product_labels',on:'singe' -%}
{%- render 'p_group_btns' -%}
{%- elsif pr_media.size > 0 -%}
{%- render 'page_pr_img',call_cl:'_ppr',pr_media:pr_media,sett_pr:sett_pr,eq_imgtb:eq_imgtb,e_imgnv:settings.ratio_img_thumb -%}
{%- endif -%}
{%- if zoom_tp == '2' %}
{% endif -%}
{%- section 'pr_summary' -%}{% if des_pr_layout == '2' %}{%- section 'pr_description' -%}{% if settings.social_pr %}
{% if settings.share_source == '1' %}{%- render 'social-sharing' -%}{% else %}
{% endif %}
{% endif %}{% endif %}
{%- if nav_up_size > 0 %}{%- render 'fbt_snipet',nav_up:nav_up,currently_var:currently_var,cur_var_id:cur_var_id,pid:pid -%}
{% endif -%}
{%- if des_pr_layout == '1' %}
{%- section 'pr_description' -%}
{% endif -%}
{%- section 'image_text' -%}
{%- section 'image_text' -%}
{%- section 'product-recommendations' -%}
{%- section 'recently_viewed' -%}
{%- else -%}
{%- unless no_sidebar %}
{% section 'pr-sidebar' %}
{% endunless -%}
{%- if image != blank and pr_media.size < 2 -%}{%- assign ratio = image.aspect_ratio -%}{%- assign iw = image.width -%}
{%- render 'product_labels',on:'singe' -%}
{%- render 'p_group_btns' -%}
{%- elsif pr_media.size > 0 -%}
{%- render 'page_pr_img',call_cl:'_ppr',pr_media:pr_media,sett_pr:sett_pr,eq_imgtb:eq_imgtb,e_imgnv:settings.ratio_img_thumb -%}
{%- endif -%}
{%- if zoom_tp == '2' %}
{% endif -%}
{%- section 'pr_summary' -%}{% if des_pr_layout == '2' %}{%- section 'pr_description' -%}{% if settings.social_pr %}
{% if settings.share_source == '1' %}{%- render 'social-sharing' -%}{% else %}
{% endif %}
{% endif %}{% endif %}
{%- if nav_up_size > 0 %}{%- render 'fbt_snipet',nav_up:nav_up,currently_var:currently_var,cur_var_id:cur_var_id,pid:pid -%}
{% endif -%}
{%- if des_pr_layout == '1' %}
{%- section 'pr_description' -%}
{% endif -%}
{%- section 'product-recommendations' -%}
{%- section 'recently_viewed' -%}
{%- endif -%}
This is image_text.liquid:
{%- liquid
assign sid = section.id
assign se_stts = section.settings
assign img_ratio = se_stts.image_ratio
assign ck = false
if img_ratio == 'auto'
assign ck = true
endif
assign image = se_stts.image
assign url = se_stts.button_link
if se_stts.cl_txt == 'dark'
assign cl_txt = 'cd,cg'
else
assign cl_txt = 'cw,cw,button-o-w'
endif
assign cl_arr = cl_txt | split:"," -%}
{%- capture image_layout -%}
{%- comment -%}{%- endcomment -%}
{%- if image != blank -%}
{%- else -%}
{%- endif -%}
{%- comment -%}{%- endcomment -%}
{%- endcapture -%}
{%- if se_stts.img_position == '1' -%}{{- image_layout -}}{%- endif -%}
### {{se_stts.title}}
{{se_stts.text}}
{%- if url != blank and se_stts.button_label -%}
{{se_stts.button_label}}
{%- endif -%}
{%- if se_stts.img_position == '2' -%}{{- image_layout -}}{%- endif -%}
{%- render 'section_css' -%}
{%- schema -%}
{
"name": "Image with text",
"class": "nt_section type_image_text",
"settings": [
{
"type": "checkbox",
"id": "show",
"label": "Show Image with text",
"default": true
},
{
"type": "header",
"content": "== image Settings"
},
{
"type": "image_picker",
"id": "image",
"label": "Image"
},
{
"type": "select",
"id": "img_align",
"default": "center",
"options": [
{
"value": "top",
"label": "Top"
},
{
"value": "center",
"label": "Middle"
},
{
"value": "bottom",
"label": "Bottom"
}
],
"label": "Image alignment",
"info":"Not active when enable Adapt to image"
},
{
"type": "select",
"id": "img_position",
"options": [
{
"value": "1",
"label": "Left"
},
{
"value": "2",
"label": "Right"
}
],
"label": "Image position",
"default": "1"
},
{
"type": "select",
"id": "image_ratio",
"label": "Aspect Ratio",
"default": "auto",
"info": "Aspect Ratio Custom will settings in General panel.",
"options": [
{
"group": "Auto",
"value": "auto",
"label": "Adapt to image"
},
{
"group": "Landscape",
"value": "ratio2_1",
"label": "2:1"
},
{
"group": "Landscape",
"value": "ratio16_9",
"label": "16:9"
},
{
"group": "Landscape",
"value": "ratio8_5",
"label": "8:5"
},
{
"group": "Landscape",
"value": "ratio3_2",
"label": "3:2"
},
{
"group": "Landscape",
"value": "ratio4_3",
"label": "4:3"
},
{
"group": "Landscape",
"value": "ratio_nt",
"label": "Ratio ASOS"
},
{
"group": "Squared",
"value": "ratio1_1",
"label": "1:1"
},
{
"group": "Portrait",
"value": "ratio2_3",
"label": "2:3"
},
{
"group": "Portrait",
"value": "ratio1_2",
"label": "1:2"
},
{
"group": "Custom",
"value": "ratio_cus1",
"label": "Ratio Custom 1"
},
{
"group": "Custom",
"value": "ratio_cus2",
"label": "Ratio Custom 2"
},
{
"group": "Custom",
"value": "ratio_cus3",
"label": "Ratio Custom 3"
},
{
"group": "Custom",
"value": "ratio_cus4",
"label": "Ratio Custom 4"
}
]
},
{
"type": "header",
"content": "== Text Settings"
},
{
"type": "select",
"id": "text_size",
"label": "Text size",
"default": "60,18",
"options": [
{
"value": "30,15",
"label": "Small"
},
{
"value": "40,15",
"label": "Medium"
},
{
"value": "60,18",
"label": "Large"
}
]
},
{
"type": "text",
"id": "title",
"label": "Heading",
"default": "Image with text"
},
{
"type": "richtext",
"id": "text",
"label": "Text",
"default": "
Pair large text with an image to give focus to your chosen product, collection, or blog post. Add details on availability, style, or even provide a review.
"
},
{
"type": "text",
"id": "button_label",
"label": "Button label",
"default": "Shop Now"
},
{
"type": "url",
"id": "button_link",
"label": "Button link (Optional)"
},
{
"type": "select",
"id": "open_link",
"options": [
{
"value": "_self",
"label": "Current window (_self)"
},
{
"value": "_blank",
"label": "New window (_blank)"
}
],
"label": "Open link in",
"default": "_blank"
},
{
"type": "select",
"id": "txt_align",
"options": [
{
"value": "tl",
"label": "Left"
},
{
"value": "tc",
"label": "Center"
},
{
"value": "tr",
"label": "Right"
}
],
"label": "Text alignment",
"default": "tc"
},
{
"type": "header",
"content": "== Color"
},
{
"type": "checkbox",
"id": "use_shadow",
"label": "Use text shadow?",
"default": false
},
{
"type": "select",
"id": "cl_txt",
"options": [
{
"value": "dark",
"label": "Dark"
},
{
"value": "light",
"label": "Light"
}
],
"label": "Text"
},
{
"type": "header",
"content": "== Design Options"
},
{
"type": "select",
"id": "layout",
"options": [
{
"value": "container",
"label": "Container"
},
{
"value": "nt_full",
"label": "Full Width"
}
],
"label": "Layout"
},
{
"type": "text",
"id": "mg",
"label": "Margin",
"info":"Margin top, margin right, margin bottom, margin left. If you not use to blank",
"default": "50px,,50px,",
"placeholder": "50px,,50px,"
},
{
"type": "text",
"id": "pd",
"label": "Padding",
"info":"Padding top, padding right, padding bottom, padding left. If you not use to blank",
"placeholder": "50px,,50px,"
},
{
"type": "header",
"content": "== Design Mobile Options"
},
{
"type": "text",
"id": "mg_mb",
"label": "Margin",
"placeholder": "50px,,50px,"
},
{
"type": "text",
"id": "pd_mb",
"label": "Padding",
"placeholder": "50px,,50px,"
}
],
"presets": [
{
"name": "7. Image with text",
"category": "III. Image"
}
]
}
{% endschema %}
Hi @don76
You try to use code below for image-text.liquid
{%- liquid
assign sid = section.id
assign se_stts = section.settings
assign img_ratio = se_stts.image_ratio
assign ck = false
if img_ratio == 'auto'
assign ck = true
endif
assign image = se_stts.image
assign url = se_stts.button_link
if se_stts.cl_txt == 'dark'
assign cl_txt = 'cd,cg'
else
assign cl_txt = 'cw,cw,button-o-w'
endif
assign cl_arr = cl_txt | split:"," -%}
{%- if section.settings.show -%}
{%- capture image_layout -%}
{%- comment -%}{%- endcomment -%}
{%- if image != blank -%}
{%- else -%}
{%- endif -%}
{%- comment -%}{%- endcomment -%}
{%- endcapture -%}
{%- if se_stts.img_position == '1' -%}{{- image_layout -}}{%- endif -%}
### {{se_stts.title}}
{{se_stts.text}}
{%- if url != blank and se_stts.button_label -%}
{{se_stts.button_label}}
{%- endif -%}
{%- if se_stts.img_position == '2' -%}{{- image_layout -}}{%- endif -%}
{%- render 'section_css' -%}
{%- endif -%}
{%- schema -%}
{
"name": "Image with text",
"class": "nt_section type_image_text",
"settings": [
{
"type": "checkbox",
"id": "show",
"label": "Show Image with text",
"default": true
},
{
"type": "header",
"content": "== image Settings"
},
{
"type": "image_picker",
"id": "image",
"label": "Image"
},
{
"type": "select",
"id": "img_align",
"default": "center",
"options": [
{
"value": "top",
"label": "Top"
},
{
"value": "center",
"label": "Middle"
},
{
"value": "bottom",
"label": "Bottom"
}
],
"label": "Image alignment",
"info":"Not active when enable Adapt to image"
},
{
"type": "select",
"id": "img_position",
"options": [
{
"value": "1",
"label": "Left"
},
{
"value": "2",
"label": "Right"
}
],
"label": "Image position",
"default": "1"
},
{
"type": "select",
"id": "image_ratio",
"label": "Aspect Ratio",
"default": "auto",
"info": "Aspect Ratio Custom will settings in General panel.",
"options": [
{
"group": "Auto",
"value": "auto",
"label": "Adapt to image"
},
{
"group": "Landscape",
"value": "ratio2_1",
"label": "2:1"
},
{
"group": "Landscape",
"value": "ratio16_9",
"label": "16:9"
},
{
"group": "Landscape",
"value": "ratio8_5",
"label": "8:5"
},
{
"group": "Landscape",
"value": "ratio3_2",
"label": "3:2"
},
{
"group": "Landscape",
"value": "ratio4_3",
"label": "4:3"
},
{
"group": "Landscape",
"value": "ratio_nt",
"label": "Ratio ASOS"
},
{
"group": "Squared",
"value": "ratio1_1",
"label": "1:1"
},
{
"group": "Portrait",
"value": "ratio2_3",
"label": "2:3"
},
{
"group": "Portrait",
"value": "ratio1_2",
"label": "1:2"
},
{
"group": "Custom",
"value": "ratio_cus1",
"label": "Ratio Custom 1"
},
{
"group": "Custom",
"value": "ratio_cus2",
"label": "Ratio Custom 2"
},
{
"group": "Custom",
"value": "ratio_cus3",
"label": "Ratio Custom 3"
},
{
"group": "Custom",
"value": "ratio_cus4",
"label": "Ratio Custom 4"
}
]
},
{
"type": "header",
"content": "== Text Settings"
},
{
"type": "select",
"id": "text_size",
"label": "Text size",
"default": "60,18",
"options": [
{
"value": "30,15",
"label": "Small"
},
{
"value": "40,15",
"label": "Medium"
},
{
"value": "60,18",
"label": "Large"
}
]
},
{
"type": "text",
"id": "title",
"label": "Heading",
"default": "Image with text"
},
{
"type": "richtext",
"id": "text",
"label": "Text",
"default": "
Pair large text with an image to give focus to your chosen product, collection, or blog post. Add details on availability, style, or even provide a review.
"
},
{
"type": "text",
"id": "button_label",
"label": "Button label",
"default": "Shop Now"
},
{
"type": "url",
"id": "button_link",
"label": "Button link (Optional)"
},
{
"type": "select",
"id": "open_link",
"options": [
{
"value": "_self",
"label": "Current window (_self)"
},
{
"value": "_blank",
"label": "New window (_blank)"
}
],
"label": "Open link in",
"default": "_blank"
},
{
"type": "select",
"id": "txt_align",
"options": [
{
"value": "tl",
"label": "Left"
},
{
"value": "tc",
"label": "Center"
},
{
"value": "tr",
"label": "Right"
}
],
"label": "Text alignment",
"default": "tc"
},
{
"type": "header",
"content": "== Color"
},
{
"type": "checkbox",
"id": "use_shadow",
"label": "Use text shadow?",
"default": false
},
{
"type": "select",
"id": "cl_txt",
"options": [
{
"value": "dark",
"label": "Dark"
},
{
"value": "light",
"label": "Light"
}
],
"label": "Text"
},
{
"type": "header",
"content": "== Design Options"
},
{
"type": "select",
"id": "layout",
"options": [
{
"value": "container",
"label": "Container"
},
{
"value": "nt_full",
"label": "Full Width"
}
],
"label": "Layout"
},
{
"type": "text",
"id": "mg",
"label": "Margin",
"info":"Margin top, margin right, margin bottom, margin left. If you not use to blank",
"default": "50px,,50px,",
"placeholder": "50px,,50px,"
},
{
"type": "text",
"id": "pd",
"label": "Padding",
"info":"Padding top, padding right, padding bottom, padding left. If you not use to blank",
"placeholder": "50px,,50px,"
},
{
"type": "header",
"content": "== Design Mobile Options"
},
{
"type": "text",
"id": "mg_mb",
"label": "Margin",
"placeholder": "50px,,50px,"
},
{
"type": "text",
"id": "pd_mb",
"label": "Padding",
"placeholder": "50px,,50px,"
}
],
"presets": [
{
"name": "7. Image with text",
"category": "III. Image"
}
]
}
{% endschema %}
Check show image with text option to show this block.
Uncheck to hide it
You are the best, thanks a lot, that worked!
BUT one more problem: I added this text_image section 3 times to the product liquid. But when I upload one image to one of them, all of them show that same image. Also if I disable one of them with the checkbox, all of them are automatically disabled. Any idea how to fix that?
Hi @don76 ,
You have to use 3 other files for 3 sections or you can use a section but use block( this on can repeat) in the schema.
You can refer this article
Perfect, thank you so much!!!
I just duplicated the image_text sections and named the new ones image_text2 and image_text3 and now everything works perfect.
Okay, I am sorry, but I just noticed its still not perfect. Now its possible to show 3 different pictures on those 3 different image with text sections, BUT it shows on every product the same 3 pictures. But of course I need different pictures on every product… Any ideas for that?
i have the same problem, did you find a solution for that ?
