How can I make my product page full width on Kilts Boutique?

banggear · March 28, 2022, 6:55pm

HI,

I want the product page full width. I try some suggestions it’s not work

Its store URL is kiltsboutique.com. I am waiting expert help Thank you

AvadaCommerce · March 29, 2022, 4:07am

Hi @banggear

Can you share code product.json or product.liquid?

Thanks you

LitCommerce · March 29, 2022, 9:56am

Hi @banggear ,

Please send me the code of sections > product-template.liquid file, I will help you to check and change it.

banggear · March 29, 2022, 10:00am

{%- capture section_settings -%}
{
“enableHistoryState”: true,
“templateSuffix”: {{ product.template_suffix | json }},
“showInventoryQuantity”: {{ section.settings.show_inventory_quantity | json }},
“showSku”: {{ section.settings.show_sku | json }},
“stackProductImages”: {{ section.settings.stack_images | json }},
“showThumbnails”: {{ section.settings.show_thumbnails | json }},
“enableVideoLooping”: {{ section.settings.enable_video_looping | json }},
“inventoryQuantityThreshold”: {{ section.settings.inventory_quantity_threshold }},
“showPriceInButton”: {{ section.settings.show_price_in_button | json }},
“enableImageZoom”: {{ section.settings.enable_image_zoom | json }},
“showPaymentButton”: {{ section.settings.show_payment_button | json }},
“useAjaxCart”: {% if settings.cart_type == ‘drawer’ %}true{% else %}false{% endif %}
}
{%- endcapture -%}

{%- capture action_list_items -%} {%- if section.settings.enable_image_zoom -%}

{% render 'icon' with 'plus' %}

{%- endif -%}

{%- if section.settings.show_share_buttons -%}

{% render 'icon' with 'share' %} {% render 'icon' with 'close' %}

{%- assign share_url = shop.url | append: product.url -%}
{%- assign twitter_text = product.title -%}
{%- assign pinterest_description = product.description | strip_html | truncatewords: 15 | url_param_escape -%}
{%- assign pinterest_image = product.featured_media | img_url: ‘1024x’ | prepend: ‘https:’ -%}

{%- render 'icon' with 'facebook' -%} Facebook {%- render 'icon' with 'pinterest' -%} Pinterest {%- render 'icon' with 'twitter' -%} Twitter

{%- endif -%} {%- endcapture -%}

{%- comment -%}

PRODUCT GALLERY

{%- endcomment -%}

{%- assign initial_media_id = product.featured_media.id -%}
{%- assign initial_media_index = 0 -%}
{%- assign media_count = 0 -%}

{%- capture slideshow_media -%}
{%- for media in product.media -%}
{%- if media.alt == ‘featured’ or media.alt == ‘featured mobile’ -%}
{%- continue -%}
{%- endif -%}

{%- if product.selected_variant and media.id == product.selected_variant.featured_media.id -%}
{%- assign initial_media_index = media_count -%}
{%- assign initial_media_id = media.id -%}
{%- endif -%}

{%- capture supported_sizes -%}{%- render ‘image-size’, sizes: ‘200,400,600,700,800,900,1000,1200,1400,1600’, image: media -%}{%- endcapture -%}

{%- case media.media_type -%}
{%- when ‘image’ -%}

{% assign image_url = media | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}

{%- when ‘external_video’ -%}

{%- when ‘video’ -%}

{%- when ‘model’ -%}

{{- media | model_viewer_tag: image_size: '1024x', reveal: 'interaction', toggleable: true -}}

{%- endcase -%}

{%- assign media_count = media_count | plus: 1 -%}
{%- endfor -%}
{%- endcapture -%}

{%- if product.media.size > 0 -%}

{%- if action_list_items != blank -%}

{%- endif -%}

{%- capture slideshow_nav -%}
{%- if media_count > 1 -%}
{%- if section.settings.show_thumbnails -%}

{%- for media in product.media -%} {%- if media.alt == 'featured' or media.alt == 'featured mobile' -%} {%- continue -%} {%- endif -%}

{%- capture nav_item_badge -%}
{%- case media.media_type -%}
{%- when ‘model’ -%}
{% render ‘icon’, icon: ‘media-model-badge’ %}

{%- when ‘video’ or ‘external_video’ -%}
{% render ‘icon’, icon: ‘media-video-badge’ %}
{%- endcase -%}
{%- endcapture -%}

{%- if section.settings.stack_images -%}

{{ media.alt | escape }}
{{- nav_item_badge -}}

{%- else -%}

{{- nav_item_badge -}}

{%- endif -%}
{%- endfor -%}

{%- endif -%}

{%- if section.settings.stack_images -%}

{%- for media in product.media -%} {%- if media.alt == 'featured' or media.alt == 'featured mobile' -%} {%- continue -%} {%- endif -%}

{%- endfor -%}

{%- endif -%} {%- endif -%} {%- endcapture -%}

{%- if section.settings.stack_images -%}
{{- slideshow_nav -}}
{%- endif -%}

{%- capture flickity_options -%}
{
“prevNextButtons”: false,
“pageDots”: false,
“adaptiveHeight”: true,
“watchCSS”: true,
“dragThreshold”: 8,
“initialIndex”: {{ initial_media_index }},
“arrowShape”: {“x0”: 20, “x1”: 60, “y1”: 40, “x2”: 60, “y2”: 35, “x3”: 25}
}
{%- endcapture -%}

{%- comment -%}Add the “view in your space” button, which allows to show the product in customer’s environment (if the device supports it){%- endcomment -%}
{%- assign first_3d_model = product.media | where: ‘media_type’, ‘model’ | first -%}

{%- if first_3d_model -%}

{%- render ‘icon’, icon: ‘media-view-in-space’ -%} {{- ‘product.general.view_in_space’ | t -}}

{%- endif -%}

{%- if media_count > 1 -%}
{%- comment -%}
IMPLEMENTATION NOTE: The reason we create ourselves our own UI instead of relying of the built-in feature of Flickity is that,
since the media API, Shopify requires to add arrows next to the dot. Unfortunately this layout is not
achievable easily using Flickity options only, so we have to run our own
{%- endcomment -%}

{% render 'icon' with 'media-arrow-left' %}

{%- for i in (1..media_count) -%} {%- endfor -%}

{% render 'icon' with 'media-arrow-right' %}

{%- endif -%}

{%- unless section.settings.stack_images -%}
{{- slideshow_nav -}}
{%- endunless -%}

{%- endif -%}

{%- capture product_aside -%}
{%- comment -%}

PRODUCT TABS

{%- endcomment -%}

{%- render ‘product-tabs’ -%}

{%- comment -%}

PRODUCT WEAR IT WITH

We allow merchants to add a tag that looks like __with:product-handle to feature an additional product

{%- endcomment -%}

{%- for tag in product.tags -%}
{%- if tag contains ‘__with’ -%}
{%- assign product_handle = tag | split: ‘__with:’ | last -%}
{%- assign associated_product = all_products[product_handle] -%}

{%- if associated_product != empty -%}

{% render ‘product-item’, product: associated_product, use_horizontal: true, show_labels: false, show_product_info: true, show_vendor: false, show_price_on_hover: false %}

{%- break -%}
{%- endif -%}
{%- endif -%}
{%- endfor -%}
{%- endcapture -%}

{%- render 'product-meta', product: product, show_description: true -%}

{%- if product.template_suffix != ‘coming-soon’ -%}
{%- render ‘product-form’, product: product -%}
{%- endif -%}

{%- if section.settings.description_below_add_to_cart -%}

{%- comment -%} We have figured out that some merchants were copy-pasting huge chunk of code into the product description, which can make the theme crashes if it contains some special attributes used by the theme. We therefore make sure to process this {%- endcomment -%}

{{ product.description | replace: ‘data-section-type’, ‘data-section-type-placeholder’ }}

{%- if section.settings.show_share_buttons -%}

{%- assign share_url = shop.url | append: product.url -%}
{%- assign twitter_text = product.title -%}
{%- assign pinterest_description = product.description | strip_html | truncatewords: 15 | url_param_escape -%}
{%- assign pinterest_image = product.featured_image | img_url: ‘large’ | prepend: ‘https:’ -%}

{%- render 'icon' with 'facebook' -%} {%- render 'icon' with 'twitter' -%} {%- render 'icon' with 'pinterest' -%}

{%- endif -%}

{%- if section.settings.stack_images and product_aside != blank and media_count > 0 -%}

{{ 'product.form.view_info' | t }} {% render 'icon' with 'select-arrow-right' %} {{ 'product.form.view_images' | t }} {% render 'icon' with 'select-arrow-right' %}

{%- endif -%}

{%- if product_aside != blank -%}

{%- endif -%}

{% comment %}Start automatically added Judge.me widget{% endcomment %} {% render 'judgeme_widgets', widget_type: 'judgeme_review_widget', concierge_install: true, product: product %} {% comment %}End automatically added Judge.me widget{% endcomment %}

{%- comment -%}

FEATURED IMAGE

We allow merchants to use one image as a “featured image” by adding the alt tag “featured”

{%- endcomment -%}

{%- for media in product.media -%}
{%- if media.alt == ‘featured’ -%}
{%- assign desk_featured_media = media.preview_image -%}
{%- endif -%}

{%- if media.alt == ‘featured mobile’ -%}
{%- assign mobile_featured_media = media.preview_image -%}
{%- endif -%}
{%- endfor -%}

{%- if desk_featured_media or mobile_featured_media -%}
{%- assign mobile_featured_media = mobile_featured_media | default: desk_featured_media -%}
{%- assign desk_featured_media = desk_featured_media | default: mobile_featured_media -%}

#shopify-section-{{ section.id }} + .shopify-section--bordered { border-top: 0; }

{%- else -%}

/* This is a bit hacky but allows to circumvent the complete independency of section (as next section included in the page does not know anything about this page) */ @media screen and (max-width: 640px) { #shopify-section-{{ section.id }} + .shopify-section--bordered { border-top: 0; } #shopify-section-{{ section.id }} + .shopify-section--bordered > .Section { padding-top: 0; } }

{%- endif -%}

{%- comment -%}

PHOTO SWIPE

This is the root container for the zoom functionality. Must not be removed, as order element is important.

{%- endcomment -%}

{%- if section.settings.enable_image_zoom -%}

{% render 'icon' with 'arrow-left' %} {% render 'icon' with 'close' %} {% render 'icon' with 'arrow-right' %}

{%- endif -%}

{% schema %}
{
“name”: “Product page”,
“class”: “shopify-section–bordered”,
“settings”: [
{
“type”: “checkbox”,
“id”: “show_share_buttons”,
“label”: “Show social sharing buttons”,
“default”: true
},
{
“type”: “checkbox”,
“id”: “show_vendor”,
“label”: “Show vendor”,
“default”: true
},
{
“type”: “checkbox”,
“id”: “show_sku”,
“label”: “Show SKU”,
“default”: false
},
{
“type”: “checkbox”,
“id”: “show_taxes_included”,
“label”: “Show price taxes notice”,
“default”: false
},
{
“type”: “checkbox”,
“id”: “description_below_add_to_cart”,
“label”: “Description below add to cart”,
“default”: false
},
{
“type”: “select”,
“id”: “selector_mode”,
“label”: “Selector type”,
“options”: [
{
“value”: “block”,
“label”: “Block”
},
{
“value”: “dropdown”,
“label”: “Dropdown”
}
],
“default”: “dropdown”
},
{
“type”: “checkbox”,
“id”: “show_color_swatch”,
“label”: “Show color swatch”,
“default”: false,
“info”: “Some colors appear white? Learn more.”
},
{
“type”: “checkbox”,
“id”: “show_color_carousel”,
“label”: “Show color carousel”,
“info”: “A pop-up selector with variant images for choosing colors. Only enables when color swatch is disabled.”,
“default”: false
},
{
“type”: “checkbox”,
“id”: “show_quantity_selector”,
“label”: “Show quantity selector”,
“default”: true
},
{
“type”: “checkbox”,
“id”: “show_inventory_quantity”,
“label”: “Show inventory quantity”,
“info”: “Make sure that your inventory is tracked. Learn more.”,
“default”: false
},
{
“type”: “range”,
“id”: “inventory_quantity_threshold”,
“label”: “Inventory quantity threshold”,
“info”: “Only show inventory quantity if below threshold. Choose 0 to always show.”,
“min”: 0,
“max”: 50,
“step”: 1,
“default”: 0
},
{
“type”: “checkbox”,
“id”: “show_price_in_button”,
“label”: “Show price in add to cart button”,
“default”: false
},
{
“type”: “checkbox”,
“id”: “show_payment_button”,
“label”: “Show dynamic checkout button”,
“info”: “Each customer will see their preferred payment method from those available on your store, such as PayPal or Apple Pay. Learn more”,
“default”: true
},
{
“type”: “checkbox”,
“id”: “show_pickup_availability”,
“label”: “Show local pickup availability”,
“info”: “Show customers where they can pick up the product. Learn more”,
“default”: false
},
{
“type”: “header”,
“content”: “Media”
},
{
“type”: “paragraph”,
“content”: “Learn more about media types”
},
{
“type”: “select”,
“id”: “image_size”,
“label”: “Size”,
“options”: [
{
“value”: “small”,
“label”: “Small”
},
{
“value”: “medium”,
“label”: “Medium”
},
{
“value”: “large”,
“label”: “Large”
},
{
“value”: “fill”,
“label”: “Fill screen”
}
],
“default”: “large”
},
{
“type”: “checkbox”,
“id”: “stack_images”,
“label”: “Stack images on desktop”,
“default”: true
},
{
“type”: “checkbox”,
“id”: “show_thumbnails”,
“label”: “Show thumbnails on desktop”,
“default”: true
},
{
“type”: “checkbox”,
“id”: “enable_image_zoom”,
“label”: “Enable zoom”,
“default”: true
},
{
“type”: “checkbox”,
“id”: “enable_video_looping”,
“label”: “Enable video looping”,
“default”: false
},
{
“type”: “header”,
“content”: “Tabs”
},
{
“type”: “page”,
“id”: “tab_page_1_handle”,
“label”: “First page”
},
{
“type”: “page”,
“id”: “tab_page_2_handle”,
“label”: “Second page”
},
{
“type”: “paragraph”,
“content”: “The theme also allows you to add specific tabs for a given product only. Learn more about this feature.”
},
{
“type”: “header”,
“content”: “Reviews”
},
{
“type”: “paragraph”,
“content”: “You need to install Shopify’s free Product Reviews app before enabling this option.”
},
{
“type”: “checkbox”,
“id”: “reviews_enabled”,
“label”: “Enable”,
“default”: false
},
{
“type”: “header”,
“content”: “Featured image”
},
{
“type”: “paragraph”,
“content”: “You can highlight an image after product tabs by adding the ALT tag "featured" to a given image. Learn more.”
},
{
“type”: “select”,
“id”: “featured_image_size”,
“label”: “Section size”,
“options”: [
{
“value”: “small”,
“label”: “Small”
},
{
“value”: “normal”,
“label”: “Normal”
},
{
“value”: “large”,
“label”: “Large”
}
],
“default”: “large”
}
]
}
{% endschema %}

banggear · March 29, 2022, 10:03am

{%- capture section_settings -%}
{
“enableHistoryState”: true,
“templateSuffix”: {{ product.template_suffix | json }},
“showInventoryQuantity”: {{ section.settings.show_inventory_quantity | json }},
“showSku”: {{ section.settings.show_sku | json }},
“stackProductImages”: {{ section.settings.stack_images | json }},
“showThumbnails”: {{ section.settings.show_thumbnails | json }},
“enableVideoLooping”: {{ section.settings.enable_video_looping | json }},
“inventoryQuantityThreshold”: {{ section.settings.inventory_quantity_threshold }},
“showPriceInButton”: {{ section.settings.show_price_in_button | json }},
“enableImageZoom”: {{ section.settings.enable_image_zoom | json }},
“showPaymentButton”: {{ section.settings.show_payment_button | json }},
“useAjaxCart”: {% if settings.cart_type == ‘drawer’ %}true{% else %}false{% endif %}
}
{%- endcapture -%}

{%- capture action_list_items -%} {%- if section.settings.enable_image_zoom -%}

{% render 'icon' with 'plus' %}

{%- endif -%}

{%- if section.settings.show_share_buttons -%}

{% render 'icon' with 'share' %} {% render 'icon' with 'close' %}

{%- assign share_url = shop.url | append: product.url -%}
{%- assign twitter_text = product.title -%}
{%- assign pinterest_description = product.description | strip_html | truncatewords: 15 | url_param_escape -%}
{%- assign pinterest_image = product.featured_media | img_url: ‘1024x’ | prepend: ‘https:’ -%}

{%- render 'icon' with 'facebook' -%} Facebook {%- render 'icon' with 'pinterest' -%} Pinterest {%- render 'icon' with 'twitter' -%} Twitter

{%- endif -%} {%- endcapture -%}

{%- comment -%}

PRODUCT GALLERY

{%- endcomment -%}

{%- assign initial_media_id = product.featured_media.id -%}
{%- assign initial_media_index = 0 -%}
{%- assign media_count = 0 -%}

{%- capture slideshow_media -%}
{%- for media in product.media -%}
{%- if media.alt == ‘featured’ or media.alt == ‘featured mobile’ -%}
{%- continue -%}
{%- endif -%}

{%- if product.selected_variant and media.id == product.selected_variant.featured_media.id -%}
{%- assign initial_media_index = media_count -%}
{%- assign initial_media_id = media.id -%}
{%- endif -%}

{%- capture supported_sizes -%}{%- render ‘image-size’, sizes: ‘200,400,600,700,800,900,1000,1200,1400,1600’, image: media -%}{%- endcapture -%}

{%- case media.media_type -%}
{%- when ‘image’ -%}

{% assign image_url = media | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}

{%- when ‘external_video’ -%}

{%- when ‘video’ -%}

{%- when ‘model’ -%}

{{- media | model_viewer_tag: image_size: '1024x', reveal: 'interaction', toggleable: true -}}

{%- endcase -%}

{%- assign media_count = media_count | plus: 1 -%}
{%- endfor -%}
{%- endcapture -%}

{%- if product.media.size > 0 -%}

{%- if action_list_items != blank -%}

{%- endif -%}

{%- capture slideshow_nav -%}
{%- if media_count > 1 -%}
{%- if section.settings.show_thumbnails -%}

{%- for media in product.media -%} {%- if media.alt == 'featured' or media.alt == 'featured mobile' -%} {%- continue -%} {%- endif -%}

{%- capture nav_item_badge -%}
{%- case media.media_type -%}
{%- when ‘model’ -%}
{% render ‘icon’, icon: ‘media-model-badge’ %}

{%- when ‘video’ or ‘external_video’ -%}
{% render ‘icon’, icon: ‘media-video-badge’ %}
{%- endcase -%}
{%- endcapture -%}

{%- if section.settings.stack_images -%}

{{ media.alt | escape }}
{{- nav_item_badge -}}

{%- else -%}

{{- nav_item_badge -}}

{%- endif -%}
{%- endfor -%}

{%- endif -%}

{%- if section.settings.stack_images -%}

{%- for media in product.media -%} {%- if media.alt == 'featured' or media.alt == 'featured mobile' -%} {%- continue -%} {%- endif -%}

{%- endfor -%}

{%- endif -%} {%- endif -%} {%- endcapture -%}

{%- if section.settings.stack_images -%}
{{- slideshow_nav -}}
{%- endif -%}

{%- capture flickity_options -%}
{
“prevNextButtons”: false,
“pageDots”: false,
“adaptiveHeight”: true,
“watchCSS”: true,
“dragThreshold”: 8,
“initialIndex”: {{ initial_media_index }},
“arrowShape”: {“x0”: 20, “x1”: 60, “y1”: 40, “x2”: 60, “y2”: 35, “x3”: 25}
}
{%- endcapture -%}

{%- comment -%}Add the “view in your space” button, which allows to show the product in customer’s environment (if the device supports it){%- endcomment -%}
{%- assign first_3d_model = product.media | where: ‘media_type’, ‘model’ | first -%}

{%- if first_3d_model -%}

{%- render ‘icon’, icon: ‘media-view-in-space’ -%} {{- ‘product.general.view_in_space’ | t -}}

{%- endif -%}

{%- if media_count > 1 -%}
{%- comment -%}
IMPLEMENTATION NOTE: The reason we create ourselves our own UI instead of relying of the built-in feature of Flickity is that,
since the media API, Shopify requires to add arrows next to the dot. Unfortunately this layout is not
achievable easily using Flickity options only, so we have to run our own
{%- endcomment -%}

{% render 'icon' with 'media-arrow-left' %}

{%- for i in (1..media_count) -%} {%- endfor -%}

{% render 'icon' with 'media-arrow-right' %}

{%- endif -%}

{%- unless section.settings.stack_images -%}
{{- slideshow_nav -}}
{%- endunless -%}

{%- endif -%}

{%- capture product_aside -%}
{%- comment -%}

PRODUCT TABS

{%- endcomment -%}

{%- render ‘product-tabs’ -%}

{%- comment -%}

PRODUCT WEAR IT WITH

We allow merchants to add a tag that looks like __with:product-handle to feature an additional product

{%- endcomment -%}

{%- for tag in product.tags -%}
{%- if tag contains ‘__with’ -%}
{%- assign product_handle = tag | split: ‘__with:’ | last -%}
{%- assign associated_product = all_products[product_handle] -%}

{%- if associated_product != empty -%}

{% render ‘product-item’, product: associated_product, use_horizontal: true, show_labels: false, show_product_info: true, show_vendor: false, show_price_on_hover: false %}

{%- break -%}
{%- endif -%}
{%- endif -%}
{%- endfor -%}
{%- endcapture -%}

{%- render 'product-meta', product: product, show_description: true -%}

{%- if product.template_suffix != ‘coming-soon’ -%}
{%- render ‘product-form’, product: product -%}
{%- endif -%}

{%- if section.settings.description_below_add_to_cart -%}

{%- comment -%} We have figured out that some merchants were copy-pasting huge chunk of code into the product description, which can make the theme crashes if it contains some special attributes used by the theme. We therefore make sure to process this {%- endcomment -%}

{{ product.description | replace: ‘data-section-type’, ‘data-section-type-placeholder’ }}

{%- if section.settings.show_share_buttons -%}

{%- assign share_url = shop.url | append: product.url -%}
{%- assign twitter_text = product.title -%}
{%- assign pinterest_description = product.description | strip_html | truncatewords: 15 | url_param_escape -%}
{%- assign pinterest_image = product.featured_image | img_url: ‘large’ | prepend: ‘https:’ -%}

{%- render 'icon' with 'facebook' -%} {%- render 'icon' with 'twitter' -%} {%- render 'icon' with 'pinterest' -%}

{%- endif -%}

{%- if section.settings.stack_images and product_aside != blank and media_count > 0 -%}

{{ 'product.form.view_info' | t }} {% render 'icon' with 'select-arrow-right' %} {{ 'product.form.view_images' | t }} {% render 'icon' with 'select-arrow-right' %}

{%- endif -%}

{%- if product_aside != blank -%}

{%- endif -%}

{% comment %}Start automatically added Judge.me widget{% endcomment %} {% render 'judgeme_widgets', widget_type: 'judgeme_review_widget', concierge_install: true, product: product %} {% comment %}End automatically added Judge.me widget{% endcomment %}

{%- comment -%}

FEATURED IMAGE

We allow merchants to use one image as a “featured image” by adding the alt tag “featured”

{%- endcomment -%}

{%- for media in product.media -%}
{%- if media.alt == ‘featured’ -%}
{%- assign desk_featured_media = media.preview_image -%}
{%- endif -%}

{%- if media.alt == ‘featured mobile’ -%}
{%- assign mobile_featured_media = media.preview_image -%}
{%- endif -%}
{%- endfor -%}

{%- if desk_featured_media or mobile_featured_media -%}
{%- assign mobile_featured_media = mobile_featured_media | default: desk_featured_media -%}
{%- assign desk_featured_media = desk_featured_media | default: mobile_featured_media -%}

#shopify-section-{{ section.id }} + .shopify-section--bordered { border-top: 0; }

{%- else -%}

/* This is a bit hacky but allows to circumvent the complete independency of section (as next section included in the page does not know anything about this page) */ @media screen and (max-width: 640px) { #shopify-section-{{ section.id }} + .shopify-section--bordered { border-top: 0; } #shopify-section-{{ section.id }} + .shopify-section--bordered > .Section { padding-top: 0; } }

{%- endif -%}

{%- comment -%}

PHOTO SWIPE

This is the root container for the zoom functionality. Must not be removed, as order element is important.

{%- endcomment -%}

{%- if section.settings.enable_image_zoom -%}

{% render 'icon' with 'arrow-left' %} {% render 'icon' with 'close' %} {% render 'icon' with 'arrow-right' %}

{%- endif -%}

{% schema %}
{
“name”: “Product page”,
“class”: “shopify-section–bordered”,
“settings”: [
{
“type”: “checkbox”,
“id”: “show_share_buttons”,
“label”: “Show social sharing buttons”,
“default”: true
},
{
“type”: “checkbox”,
“id”: “show_vendor”,
“label”: “Show vendor”,
“default”: true
},
{
“type”: “checkbox”,
“id”: “show_sku”,
“label”: “Show SKU”,
“default”: false
},
{
“type”: “checkbox”,
“id”: “show_taxes_included”,
“label”: “Show price taxes notice”,
“default”: false
},
{
“type”: “checkbox”,
“id”: “description_below_add_to_cart”,
“label”: “Description below add to cart”,
“default”: false
},
{
“type”: “select”,
“id”: “selector_mode”,
“label”: “Selector type”,
“options”: [
{
“value”: “block”,
“label”: “Block”
},
{
“value”: “dropdown”,
“label”: “Dropdown”
}
],
“default”: “dropdown”
},
{
“type”: “checkbox”,
“id”: “show_color_swatch”,
“label”: “Show color swatch”,
“default”: false,
“info”: “Some colors appear white? Learn more.”
},
{
“type”: “checkbox”,
“id”: “show_color_carousel”,
“label”: “Show color carousel”,
“info”: “A pop-up selector with variant images for choosing colors. Only enables when color swatch is disabled.”,
“default”: false
},
{
“type”: “checkbox”,
“id”: “show_quantity_selector”,
“label”: “Show quantity selector”,
“default”: true
},
{
“type”: “checkbox”,
“id”: “show_inventory_quantity”,
“label”: “Show inventory quantity”,
“info”: “Make sure that your inventory is tracked. Learn more.”,
“default”: false
},
{
“type”: “range”,
“id”: “inventory_quantity_threshold”,
“label”: “Inventory quantity threshold”,
“info”: “Only show inventory quantity if below threshold. Choose 0 to always show.”,
“min”: 0,
“max”: 50,
“step”: 1,
“default”: 0
},
{
“type”: “checkbox”,
“id”: “show_price_in_button”,
“label”: “Show price in add to cart button”,
“default”: false
},
{
“type”: “checkbox”,
“id”: “show_payment_button”,
“label”: “Show dynamic checkout button”,
“info”: “Each customer will see their preferred payment method from those available on your store, such as PayPal or Apple Pay. Learn more”,
“default”: true
},
{
“type”: “checkbox”,
“id”: “show_pickup_availability”,
“label”: “Show local pickup availability”,
“info”: “Show customers where they can pick up the product. Learn more”,
“default”: false
},
{
“type”: “header”,
“content”: “Media”
},
{
“type”: “paragraph”,
“content”: “Learn more about media types”
},
{
“type”: “select”,
“id”: “image_size”,
“label”: “Size”,
“options”: [
{
“value”: “small”,
“label”: “Small”
},
{
“value”: “medium”,
“label”: “Medium”
},
{
“value”: “large”,
“label”: “Large”
},
{
“value”: “fill”,
“label”: “Fill screen”
}
],
“default”: “large”
},
{
“type”: “checkbox”,
“id”: “stack_images”,
“label”: “Stack images on desktop”,
“default”: true
},
{
“type”: “checkbox”,
“id”: “show_thumbnails”,
“label”: “Show thumbnails on desktop”,
“default”: true
},
{
“type”: “checkbox”,
“id”: “enable_image_zoom”,
“label”: “Enable zoom”,
“default”: true
},
{
“type”: “checkbox”,
“id”: “enable_video_looping”,
“label”: “Enable video looping”,
“default”: false
},
{
“type”: “header”,
“content”: “Tabs”
},
{
“type”: “page”,
“id”: “tab_page_1_handle”,
“label”: “First page”
},
{
“type”: “page”,
“id”: “tab_page_2_handle”,
“label”: “Second page”
},
{
“type”: “paragraph”,
“content”: “The theme also allows you to add specific tabs for a given product only. Learn more about this feature.”
},
{
“type”: “header”,
“content”: “Reviews”
},
{
“type”: “paragraph”,
“content”: “You need to install Shopify’s free Product Reviews app before enabling this option.”
},
{
“type”: “checkbox”,
“id”: “reviews_enabled”,
“label”: “Enable”,
“default”: false
},
{
“type”: “header”,
“content”: “Featured image”
},
{
“type”: “paragraph”,
“content”: “You can highlight an image after product tabs by adding the ALT tag "featured" to a given image. Learn more.”
},
{
“type”: “select”,
“id”: “featured_image_size”,
“label”: “Section size”,
“options”: [
{
“value”: “small”,
“label”: “Small”
},
{
“value”: “normal”,
“label”: “Normal”
},
{
“value”: “large”,
“label”: “Large”
}
],
“default”: “large”
}
]
}
{% endschema %}

banggear · March 29, 2022, 10:49am

Hi, I have attached product-template.liquid file Thank you

LitCommerce · March 29, 2022, 5:04pm

Hi @banggear ,

Please change code:

{%- capture section_settings -%}
{
"enableHistoryState": true,
"templateSuffix": {{ product.template_suffix | json }},
"showInventoryQuantity": {{ section.settings.show_inventory_quantity | json }},
"showSku": {{ section.settings.show_sku | json }},
"stackProductImages": {{ section.settings.stack_images | json }},
"showThumbnails": {{ section.settings.show_thumbnails | json }},
"enableVideoLooping": {{ section.settings.enable_video_looping | json }},
"inventoryQuantityThreshold": {{ section.settings.inventory_quantity_threshold }},
"showPriceInButton": {{ section.settings.show_price_in_button | json }},
"enableImageZoom": {{ section.settings.enable_image_zoom | json }},
"showPaymentButton": {{ section.settings.show_payment_button | json }},
"useAjaxCart": {% if settings.cart_type == 'drawer' %}true{% else %}false{% endif %}
}
{%- endcapture -%}

  

    

      {%- comment -%}
      We have figured out that some merchants were copy-pasting huge chunk of code into the product description,
      which can make the theme crashes if it contains some special attributes used by the theme. We therefore make sure to process this
      {%- endcomment -%}

      {{ product.description | replace: 'data-section-type', 'data-section-type-placeholder' }}
    

  

{% comment %}Start automatically added Judge.me widget{% endcomment %}
{% render 'judgeme_widgets', widget_type: 'judgeme_review_widget', concierge_install: true, product: product %}
{% comment %}End automatically added Judge.me widget{% endcomment %}

{%- comment -%}
--------------------------------------------------------------------------------------------------------------------
FEATURED IMAGE

We allow merchants to use one image as a "featured image" by adding the alt tag "featured"
--------------------------------------------------------------------------------------------------------------------
{%- endcomment -%}

{%- for media in product.media -%}
{%- if media.alt == 'featured' -%}
{%- assign desk_featured_media = media.preview_image -%}
{%- endif -%}

{%- if media.alt == 'featured mobile' -%}
{%- assign mobile_featured_media = media.preview_image -%}
{%- endif -%}
{%- endfor -%}

{%- if desk_featured_media or mobile_featured_media -%}
{%- assign mobile_featured_media = mobile_featured_media | default: desk_featured_media -%}
{%- assign desk_featured_media = desk_featured_media | default: mobile_featured_media -%}

  

  

{%- else -%}

{%- endif -%}

{%- comment -%}
--------------------------------------------------------------------------------------------------------------------
PHOTO SWIPE

This is the root container for the zoom functionality. Must not be removed, as order element is important.
--------------------------------------------------------------------------------------------------------------------
{%- endcomment -%}

{%- if section.settings.enable_image_zoom -%}

  
  

  
  

    
    

      

      

      

    

    
    
      
      
      
    

  

{%- endif -%}

{% schema %}
{
"name": "Product page",
"class": "shopify-section--bordered",
"settings": [
{
"type": "checkbox",
"id": "show_share_buttons",
"label": "Show social sharing buttons",
"default": true
},
{
"type": "checkbox",
"id": "show_vendor",
"label": "Show vendor",
"default": true
},
{
"type": "checkbox",
"id": "show_sku",
"label": "Show SKU",
"default": false
},
{
"type": "checkbox",
"id": "show_taxes_included",
"label": "Show price taxes notice",
"default": false
},
{
"type": "checkbox",
"id": "description_below_add_to_cart",
"label": "Description below add to cart",
"default": false
},
{
"type": "select",
"id": "selector_mode",
"label": "Selector type",
"options": [
{
"value": "block",
"label": "Block"
},
{
"value": "dropdown",
"label": "Dropdown"
}
],
"default": "dropdown"
},
{
"type": "checkbox",
"id": "show_color_swatch",
"label": "Show color swatch",
"default": false,
"info": "Some colors appear white? [Learn more](http://support.maestrooo.com/article/80-product-uploading-custom-color-for-color-swatch)."
},
{
"type": "checkbox",
"id": "show_color_carousel",
"label": "Show color carousel",
"info": "A pop-up selector with variant images for choosing colors. Only enables when color swatch is disabled.",
"default": false
},
{
"type": "checkbox",
"id": "show_quantity_selector",
"label": "Show quantity selector",
"default": true
},
{
"type": "checkbox",
"id": "show_inventory_quantity",
"label": "Show inventory quantity",
"info": "Make sure that your inventory is tracked. [Learn more](https://help.shopify.com/manual/products/inventory#set-up-inventory-tracking).",
"default": false
},
{
"type": "range",
"id": "inventory_quantity_threshold",
"label": "Inventory quantity threshold",
"info": "Only show inventory quantity if below threshold. Choose 0 to always show.",
"min": 0,
"max": 50,
"step": 1,
"default": 0
},
{
"type": "checkbox",
"id": "show_price_in_button",
"label": "Show price in add to cart button",
"default": false
},
{
"type": "checkbox",
"id": "show_payment_button",
"label": "Show dynamic checkout button",
"info": "Each customer will see their preferred payment method from those available on your store, such as PayPal or Apple Pay. [Learn more](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
"default": true
},
{
"type": "checkbox",
"id": "show_pickup_availability",
"label": "Show local pickup availability",
"info": "Show customers where they can pick up the product. [Learn more](https://help.shopify.com/en/manual/shipping/setting-up-and-managing-your-shipping/local-methods/loca...)",
"default": false
},
{
"type": "header",
"content": "Media"
},
{
"type": "paragraph",
"content": "Learn more about [media types](https://help.shopify.com/en/manual/products/product-media)"
},
{
"type": "select",
"id": "image_size",
"label": "Size",
"options": [
{
"value": "small",
"label": "Small"
},
{
"value": "medium",
"label": "Medium"
},
{
"value": "large",
"label": "Large"
},
{
"value": "fill",
"label": "Fill screen"
}
],
"default": "large"
},
{
"type": "checkbox",
"id": "stack_images",
"label": "Stack images on desktop",
"default": true
},
{
"type": "checkbox",
"id": "show_thumbnails",
"label": "Show thumbnails on desktop",
"default": true
},
{
"type": "checkbox",
"id": "enable_image_zoom",
"label": "Enable zoom",
"default": true
},
{
"type": "checkbox",
"id": "enable_video_looping",
"label": "Enable video looping",
"default": false
},
{
"type": "header",
"content": "Tabs"
},
{
"type": "page",
"id": "tab_page_1_handle",
"label": "First page"
},
{
"type": "page",
"id": "tab_page_2_handle",
"label": "Second page"
},
{
"type": "paragraph",
"content": "The theme also allows you to add specific tabs for a given product only. [Learn more about this feature](http://support.maestrooo.com/article/83-product-adding-different-tabs-per-product)."
},
{
"type": "header",
"content": "Reviews"
},
{
"type": "paragraph",
"content": "You need to install [Shopify's free Product Reviews](https://apps.shopify.com/product-reviews) app before enabling this option."
},
{
"type": "checkbox",
"id": "reviews_enabled",
"label": "Enable",
"default": false
},
{
"type": "header",
"content": "Featured image"
},
{
"type": "paragraph",
"content": "You can highlight an image after product tabs by adding the ALT tag \"featured\" to a given image. [Learn more](http://support.maestrooo.com/article/152-product-highlight-a-featured-image)."
},
{
"type": "select",
"id": "featured_image_size",
"label": "Section size",
"options": [
{
"value": "small",
"label": "Small"
},
{
"value": "normal",
"label": "Normal"
},
{
"value": "large",
"label": "Large"
}
],
"default": "large"
}
]
}
{% endschema %}

Hope it helps!

Lulukoh · August 29, 2023, 8:13am

Hi, I have the same request. Could you help me too? How can I contact you directly?

Topic		Replies	Views
Product Pages are Half Width on Computer Screen Technical Q&A	5	14	December 6, 2021
How can I get the buttons on the product page under the description Store Design	19	27	September 7, 2021
Prestige Theme - Move Content Tabs to the right side of the product page Store Design shopify-themes	8	71	March 17, 2023
Prestige Theme Product Page aligning content sections that I have moved to the right hand side Store Design	2	18	May 19, 2022
Make Broadcast theme Description in collapsible row Store Design design , header , customizations , metafields , shopify-themes , html , product-page	0	15	July 22, 2023

How can I make my product page full width on Kilts Boutique?

Topic summary

{%- comment -%}

PRODUCT GALLERY

{%- capture product_aside -%}
{%- comment -%}

PRODUCT TABS

{%- comment -%}

We allow merchants to add a tag that looks like __with:product-handle to feature an additional product

{{ 'product.buy_it_with.title' | t }}

{%- comment -%}

We allow merchants to use one image as a “featured image” by adding the alt tag “featured”

{%- comment -%}

This is the root container for the zoom functionality. Must not be removed, as order element is important.

{%- comment -%}

PRODUCT GALLERY

{%- capture product_aside -%}
{%- comment -%}

PRODUCT TABS

{%- comment -%}

We allow merchants to add a tag that looks like __with:product-handle to feature an additional product

{{ 'product.buy_it_with.title' | t }}

{%- comment -%}

We allow merchants to use one image as a “featured image” by adding the alt tag “featured”

{%- comment -%}

This is the root container for the zoom functionality. Must not be removed, as order element is important.

How can I make my product page full width on Kilts Boutique?

Topic summary

{%- comment -%}

PRODUCT GALLERY

{%- capture product_aside -%} {%- comment -%}

PRODUCT TABS

{%- comment -%}

We allow merchants to add a tag that looks like __with:product-handle to feature an additional product

{{ 'product.buy_it_with.title' | t }}

{%- comment -%}

We allow merchants to use one image as a “featured image” by adding the alt tag “featured”

{%- comment -%}

This is the root container for the zoom functionality. Must not be removed, as order element is important.

{%- comment -%}

PRODUCT GALLERY

{%- capture product_aside -%} {%- comment -%}

PRODUCT TABS

{%- comment -%}

We allow merchants to add a tag that looks like __with:product-handle to feature an additional product

{{ 'product.buy_it_with.title' | t }}

{%- comment -%}

We allow merchants to use one image as a “featured image” by adding the alt tag “featured”

{%- comment -%}

This is the root container for the zoom functionality. Must not be removed, as order element is important.

Related topics

{%- capture product_aside -%}
{%- comment -%}

{%- capture product_aside -%}
{%- comment -%}