I am using the Impulse Theme.
I have a product I would like to display without an image.
This looks fine on mobile, but when viewing the product page on desktop, the product information takes up half the screen, leaving the other half (where the product image would be) blank.
Is there some css I can add to the Product Section of my page template so that the product information is displayed in the centre on desktop? Ideally 50% width, with 25% margin left and right?
Many thanks.
@SamNZ , Hope you are doing well.
Yes, this is possible using the CSS. Would you like to do this for all products? if yes then please share your store URL so I can check and give the solution for the same.
I @webwondersco thanks for your reply.
I only want to do this for specific products. I only have around 5 or 6 products that need this customisation, so happy to manually do each one.
Can you tell me how?
@SamNZ , Okay so do one thing. just create a separate template for the product and remove the image code from there.
once you are done with that, do one thing select this newly created template for each product in which you donât want to display an image.
and related to keeping that section in the center, once you are done with that and select that template for the product then share the URL with me so based on that weâll give you the CSS so that section will display in the center.
Thanks @webwondersco I am looking at the code and am not sure which part to remove?
{
"sections": {
"main": {
"type": "main-product",
"blocks": {
"66aa8c7a-1120-41b5-b67b-a462344b48c9": {
"type": "text",
"settings": {
"text": "Deposit"
}
},
"price": {
"type": "price",
"settings": {
}
},
"separator": {
"type": "separator",
"settings": {
}
},
"variant_picker": {
"type": "variant_picker",
"settings": {
"variant_labels": false,
"picker_type": "dropdown",
"product_dynamic_variants_enable": true,
"color_swatches": false
}
},
"sales_point": {
"type": "sales_point",
"disabled": true,
"settings": {
"icon": "truck",
"text": "Free worldwide shipping"
}
},
"inventory_status": {
"type": "inventory_status",
"settings": {
"inventory_threshold": 10,
"inventory_transfers_enable": true
}
},
"6c55e9be-8845-428d-a561-df19e47d67fc": {
"type": "quantity_selector",
"settings": {
}
},
"buy_buttons": {
"type": "buy_buttons",
"settings": {
"show_dynamic_checkout": false,
"surface_pickup_enable": true
}
},
"description": {
"type": "description",
"settings": {
"is_tab": false
}
},
"tab": {
"type": "tab",
"disabled": true,
"settings": {
"title": "Shipping information",
"content": "
Use collapsible tabs for more detailed information that will help customers make a purchasing decision.<\/p>
Ex: Shipping and return policies, size guides, and other common questions.<\/p>",
"page": ""
}
},
"contact": {
"type": "contact",
"settings": {
"title": "Ask a question",
"phone": false
}
},
"share": {
"type": "share",
"disabled": true,
"settings": {
}
}
},
"block_order": [
"66aa8c7a-1120-41b5-b67b-a462344b48c9",
"price",
"separator",
"variant_picker",
"sales_point",
"inventory_status",
"6c55e9be-8845-428d-a561-df19e47d67fc",
"buy_buttons",
"description",
"tab",
"contact",
"share"
],
"settings": {
"sku_enable": false,
"image_position": "right",
"image_size": "medium",
"product_zoom_enable": true,
"thumbnail_position": "beside",
"thumbnail_height": "flexible",
"thumbnail_arrows": false,
"mobile_layout": "partial",
"enable_video_looping": true,
"product_video_style": "muted"
}
},
"sub": {
"type": "product-full-width",
"disabled": true,
"blocks": {
"f8173ec6-08f7-4cfc-b4c2-928661089dfe": {
"type": "description",
"settings": {
"is_tab": false
}
}
},
"block_order": [
"f8173ec6-08f7-4cfc-b4c2-928661089dfe"
],
"settings": {
"max_width": true
}
},
"product-recommendations": {
"type": "product-recommendations",
"settings": {
"product_recommendations_heading": "You may also like",
"related_count": 6,
"products_per_row": 3
}
},
"recently-viewed": {
"type": "recently-viewed",
"settings": {
"recent_count": 5
}
},
"collection-return": {
"type": "collection-return",
"settings": {
}
}
},
"order": [
"main",
"sub",
"product-recommendations",
"recently-viewed",
"collection-return"
]
}
Thanks @webwondersco I am looking at the code for my template, but Iâm not sure what part to delete to remove the image.
Can you provide some guidance?
@SamNZ yes sure.
Please find this âproduct-single__stickyâ class div and remove it or comment the whole div.
you can find the above div in the product template. Please check the below screenshot for a better understanding. remove highlight div.
@SamNZ , You donât have to make any changes in JSON file.
Open main-product.liquid file and follow the steps I have suggested in the previous post.
Hi @webwondersco my âmain-product.liquidâ file looks like this:
{%- liquid
assign isModal = false
if template == 'product.modal'
assign isModal = true
endif
-%}
{%- render 'product-template',
product: product,
section_id: section.id,
blocks: section.blocks,
image_position: section.settings.image_position,
image_container_width: section.settings.image_size,
product_zoom_enable: section.settings.product_zoom_enable,
sku_enable: section.settings.sku_enable,
isModal: isModal,
thumbnail_position: section.settings.thumbnail_position,
thumbnail_height: section.settings.thumbnail_height,
thumbnail_arrows: section.settings.thumbnail_arrows,
mobile_layout: section.settings.mobile_layout,
video_looping: section.settings.enable_video_looping,
video_style: section.settings.product_video_style,
context: 'main-product',
-%}
{% schema %}
{
"name": "t:sections.main-product.name",
"settings": [
{
"type": "checkbox",
"id": "sku_enable",
"label": "t:sections.main-product.settings.sku_enable.label"
},
{
"type": "header",
"content": "t:sections.main-product.settings.header_media"
},
{
"type": "paragraph",
"content": "t:sections.main-product.settings.content"
},
{
"type": "select",
"id": "image_position",
"label": "t:sections.main-product.settings.image_position.label",
"default": "left",
"options": [
{
"value": "left",
"label": "t:sections.main-product.settings.image_position.options.left.label"
},
{
"value": "right",
"label": "t:sections.main-product.settings.image_position.options.right.label"
}
]
},
{
"type": "select",
"id": "image_size",
"label": "t:sections.main-product.settings.image_size.label",
"default": "medium",
"options": [
{
"value": "small",
"label": "t:sections.main-product.settings.image_size.options.small.label"
},
{
"value": "medium",
"label": "t:sections.main-product.settings.image_size.options.medium.label"
},
{
"value": "large",
"label": "t:sections.main-product.settings.image_size.options.large.label"
}
]
},
{
"type": "checkbox",
"id": "product_zoom_enable",
"label": "t:sections.main-product.settings.product_zoom_enable.label",
"default": true
},
{
"type": "select",
"id": "thumbnail_position",
"label": "t:sections.main-product.settings.thumbnail_position.label",
"default": "beside",
"options": [
{
"value": "beside",
"label": "t:sections.main-product.settings.thumbnail_position.options.beside.label"
},
{
"value": "below",
"label": "t:sections.main-product.settings.thumbnail_position.options.below.label"
}
]
},
{
"type": "select",
"id": "thumbnail_height",
"label": "t:sections.main-product.settings.thumbnail_height.label",
"info": "t:sections.main-product.settings.thumbnail_height.info",
"default": "flexible",
"options": [
{
"value": "fixed",
"label": "t:sections.main-product.settings.thumbnail_height.options.fixed.label"
},
{
"value": "flexible",
"label": "t:sections.main-product.settings.thumbnail_height.options.flexible.label"
}
]
},
{
"type": "checkbox",
"id": "thumbnail_arrows",
"label": "t:sections.main-product.settings.thumbnail_arrows.label"
},
{
"type": "select",
"id": "mobile_layout",
"label": "t:sections.main-product.settings.mobile_layout.label",
"default": "partial",
"options": [
{
"value": "partial",
"label": "t:sections.main-product.settings.mobile_layout.options.partial.label"
},
{
"value": "full",
"label": "t:sections.main-product.settings.mobile_layout.options.full.label"
}
]
},
{
"type": "checkbox",
"id": "enable_video_looping",
"label": "t:sections.main-product.settings.enable_video_looping.label",
"default": true
},
{
"type": "select",
"id": "product_video_style",
"label": "t:sections.main-product.settings.product_video_style.label",
"default": "muted",
"options": [
{
"value": "muted",
"label": "t:sections.main-product.settings.product_video_style.options.muted.label"
},
{
"value": "unmuted",
"label": "t:sections.main-product.settings.product_video_style.options.unmuted.label"
}
],
"info": "t:sections.main-product.settings.product_video_style.info"
}
],
"blocks": [{
"type": "@app"
},
{
"type": "price",
"name": "t:product_block.price.name",
"limit": 1
},
{
"type": "quantity_selector",
"name": "t:product_block.quantity_selector.name",
"limit": 1
},
{
"type": "complementary_products",
"name": "Complementary products",
"limit": 1,
"settings": [
{
"type": "paragraph",
"content": "t:sections.product-complementary.settings.paragraph.content"
},
{
"type": "text",
"id": "product_complementary_heading",
"label": "t:sections.product-complementary.settings.product_complementary_heading.label",
"default": "Pairs well with"
},
{
"type": "range",
"id": "complementary_count",
"label": "t:sections.product-complementary.settings.complementary_count.label",
"default": 4,
"min": 2,
"max": 10,
"step": 1
},
{
"type": "range",
"id": "per_slide",
"label": "t:sections.product-complementary.settings.per_slide.label",
"default": 2,
"min": 2,
"max": 4,
"step": 1
},
{
"type": "select",
"id": "control_type",
"label": "t:sections.product-complementary.settings.control_type.label",
"options": [
{
"value": "dots",
"label": "t:sections.product-complementary.settings.control_type.options.dots.label"
},
{
"value": "arrows",
"label": "t:sections.product-complementary.settings.control_type.options.arrows.label"
}
],
"default": "dots"
},
{
"type": "header",
"content": "t:sections.product-complementary.settings.header.content"
},
{
"type": "select",
"id": "image_style",
"label": "t:sections.product-complementary.settings.image_style.label",
"options": [
{
"value": "default",
"label": "t:sections.product-complementary.settings.image_style.options.default.label"
},
{
"value": "circle",
"label": "t:sections.product-complementary.settings.image_style.options.circle.label"
}
],
"default": "default"
}
]
},
{
"type": "size_chart",
"name": "t:product_block.size_chart.name",
"limit": 1,
"settings": [
{
"type": "page",
"id": "size_chart",
"label": "t:product_block.size_chart.settings.page.label"
}
]
},
{
"type": "variant_picker",
"name": "Variant picker",
"limit": 1,
"settings": [
{
"type": "checkbox",
"id": "variant_labels",
"label": "t:product_block.variant_picker.settings.variant_labels.label",
"default": true
},
{
"type": "select",
"id": "picker_type",
"label": "t:product_block.variant_picker.settings.picker_type.label",
"options": [
{
"value": "button",
"label": "t:product_block.variant_picker.settings.picker_type.options.button.label"
},
{
"value": "dropdown",
"label": "t:product_block.variant_picker.settings.picker_type.options.dropdown.label"
}
],
"default": "button"
},
{
"type": "checkbox",
"id": "product_dynamic_variants_enable",
"label": "t:product_block.variant_picker.settings.product_dynamic_variants_enable.label",
"default": true
},
{
"type": "checkbox",
"id": "color_swatches",
"label": "Enable color swatches",
"info": "Requires type to be set to 'Buttons'. [Learn how to set up swatches](https://archetypethemes.co/blogs/impulse/how-do-i-set-up-color-swatches)"
}
]
},
{
"type": "description",
"name": "t:product_block.description.name",
"limit": 1,
"settings": [
{
"type": "checkbox",
"id": "is_tab",
"label": "t:product_block.description.settings.is_tab.label"
}
]
},
{
"type": "buy_buttons",
"name": "t:product_block.buy_buttons.name",
"limit": 1,
"settings": [
{
"type": "checkbox",
"id": "show_dynamic_checkout",
"label": "t:product_block.buy_buttons.settings.show_dynamic_checkout.label",
"info": "t:product_block.buy_buttons.settings.show_dynamic_checkout.info",
"default": true
},
{
"type": "checkbox",
"id": "surface_pickup_enable",
"label": "t:product_block.buy_buttons.settings.surface_pickup_enable.label",
"info": "t:product_block.buy_buttons.settings.surface_pickup_enable.info",
"default": true
}
]
},
{
"type": "inventory_status",
"name": "t:product_block.inventory_status.name",
"limit": 1,
"settings": [
{
"type": "range",
"id": "inventory_threshold",
"label": "t:product_block.inventory_status.settings.inventory_threshold.label",
"default": 10,
"min": 0,
"max": 20,
"step": 2
},
{
"type": "checkbox",
"id": "inventory_transfers_enable",
"label": "t:product_block.inventory_status.settings.inventory_transfers_enable.label",
"info": "t:product_block.inventory_status.settings.inventory_transfers_enable.info",
"default": true
}
]
},
{
"type": "sales_point",
"name": "t:product_block.sales_point.name",
"settings": [
{
"type": "select",
"id": "icon",
"label": "t:product_block.sales_point.settings.icon.label",
"default": "globe",
"options": [
{
"value": "checkmark",
"label": "t:product_block.sales_point.settings.icon.options.checkmark.label"
},
{
"value": "gift",
"label": "t:product_block.sales_point.settings.icon.options.gift.label"
},
{
"value": "globe",
"label": "t:product_block.sales_point.settings.icon.options.globe.label"
},
{
"value": "heart",
"label": "t:product_block.sales_point.settings.icon.options.heart.label"
},
{
"value": "leaf",
"label": "t:product_block.sales_point.settings.icon.options.leaf.label"
},
{
"value": "lock",
"label": "t:product_block.sales_point.settings.icon.options.lock.label"
},
{
"value": "package",
"label": "t:product_block.sales_point.settings.icon.options.package.label"
},
{
"value": "phone",
"label": "t:product_block.sales_point.settings.icon.options.phone.label"
},
{
"value": "ribbon",
"label": "t:product_block.sales_point.settings.icon.options.ribbon.label"
},
{
"value": "shield",
"label": "t:product_block.sales_point.settings.icon.options.shield.label"
},
{
"value": "tag",
"label": "t:product_block.sales_point.settings.icon.options.tag.label"
},
{
"value": "truck",
"label": "t:product_block.sales_point.settings.icon.options.truck.label"
}
]
},
{
"type": "text",
"id": "text",
"label": "t:product_block.sales_point.settings.text.label",
"default": "Free worldwide shipping"
}
]
},
{
"type": "text",
"name": "t:product_block.text.name",
"settings": [
{
"type": "text",
"id": "text",
"default": "Text block",
"label": "t:product_block.text.settings.text.label"
}
]
},
{
"type": "trust_badge",
"name": "t:product_block.trust_badge.name",
"settings": [
{
"type": "image_picker",
"id": "trust_image",
"label": "t:product_block.trust_badge.settings.trust_image.label"
}
]
},
{
"type": "tab",
"name": "t:product_block.tab.name",
"settings": [
{
"type": "text",
"id": "title",
"label": "t:product_block.tab.settings.title.label",
"default": "Shipping information"
},
{
"type": "richtext",
"id": "content",
"label": "t:product_block.tab.settings.content.label",
"default": "
Use collapsible tabs for more detailed information that will help customers make a purchasing decision.
Ex: Shipping and return policies, size guides, and other common questions.
"
},
{
"type": "page",
"id": "page",
"label": "t:product_block.tab.settings.page.label"
}
]
},
{
"type": "share",
"name": "t:product_block.share_on_social.name",
"limit": 1,
"settings": [
{
"type": "paragraph",
"content": "t:product_block.share_on_social.settings.content"
}
]
},
{
"type": "separator",
"name": "t:product_block.separator.name"
},
{
"type": "contact",
"name": "t:product_block.contact_form.name",
"limit": 1,
"settings": [
{
"type": "paragraph",
"content": "t:product_block.contact_form.settings.content"
},
{
"type": "text",
"id": "title",
"label": "t:product_block.contact_form.settings.title.label",
"default": "Ask a question"
},
{
"type": "checkbox",
"id": "phone",
"label": "t:product_block.contact_form.settings.phone.label"
}
]
},
{
"type": "custom",
"name": "t:product_block.html.name",
"settings": [
{
"type": "liquid",
"id": "code",
"label": "t:product_block.html.settings.code.label",
"default": "#### Custom code block
Use this advanced section to add custom HTML, app scripts, or liquid.
",
"info": "t:product_block.html.settings.code.info"
}
]
}
]
}
{% endschema %}
@SamNZ , Hmm okay.
If you donât mind Should I help you with this? I just want your theme code access Iâll do it for you and update you for the same.
@webwondersco Yes, that would be great thanks!
@SamNZ , Created an easy way to hide the image in the product you want. itâll look like this once you hide the image.
I have created one meta field with the value true/false. set the value true to hide the image for the product you want. please refer to the below screenshot.
I hope this will easy to manage from yourend.
Hi @webwondersco thank you for your time on this.
It worked!
Hey @webwondersco was curious what the solution might have been since I too am in the same post as the original poster and would like to hide/delete images one a a few products.
@stickerbulls Hope you are doing well.
Yeah sure can help you with it. could you please share your store URL? and do you have an idea on liquid coding?
