Hi,
I’ve been trying to find a way to make the collection grid on my product pages full width. Does anyone know a code and where to place that code to make the product pages full width on the Capital Theme?
Thanks!
Hi,
I’ve been trying to find a way to make the collection grid on my product pages full width. Does anyone know a code and where to place that code to make the product pages full width on the Capital Theme?
Thanks!
Hi @Gimeau
Thank you for your question.
Please share your store URL, page URL and also password (if your store has one) so we can help you.
Hi,
Thanks for your reply.
URL is https://gimeau.com.
password: stuyeb
Besides the ‘full with’ question, we would like to add an ‘add to cart’
button on the collection page, below all products. Could you please help us
out with this as well?
Kind regards,
irthe
Hi @Gimeau
Just checked your page, in this case if you want to make the section fullwidth, you need to change some code in your theme.
Please share the product.liquid section code, then we can help you
{% assign current_variant = product.selected_or_first_available_variant %}
{% assign showShipping = false %}
{% if shop.shipping_policy.body != blank and block.settings.shipping_policy %}
{% assign showShipping = true %}
{% endif %}
{% if showTax or showShipping %}
<span class=“product-page__policies” {{ block.shopify_attributes }}>
{% if showTax %}
{{ ‘products.product.include_taxes’ | t }}
{% endif %}
{% if showShipping %}
{{ ‘products.product.shipping_policy_html’ | t: link: shop.shipping_policy.url }}
{% endif %}
{% endif %}
{% when ‘swatches’ %}
{% for prod in collections.all.products %}
{% if prod.id == 7054756970544 %}
{% assign swatch_prod = prod %}
{% endif %}
{% endfor %}
{% for tag in product.tags %}
{% if tag contains ‘no-swatch’ %}
{% assign show_filt = false %}
{% endif %}
{% endfor %}
{% if show_filt != false %}
{% assign swatches_names = swatch_prod.metafields.custom.swatches_names.value %}
{% assign swatches_bgs = swatch_prod.metafields.custom.swatches_colours.value %}
{% assign swatches_links = swatch_prod.metafields.custom.swatches_links.value %}
Color
{{ link.title }}
{% endfor %}{% if hasStockCounter %}
{% capture inventory %}{{ inventory | remove_first: ‘|’ | split: ‘|’ | escape }}{% endcapture %}
{% for variant in product.variants %}
{% if variant.inventory_management == null or variant.inventory_management == ‘’ or variant.inventory_management == ‘shopify’ and variant.inventory_policy == ‘continue’ %}
{% else %}
{% if variant.inventory_quantity > threshold %}
{{ ‘products.product.has_stock’ | t }}
{% elsif variant.inventory_quantity > 0 %}
{{ ‘products.product.low_stock’ | t: stock: variant.inventory_quantity }}
{% elsif variant.inventory_quantity == 0 %}
{{ ‘products.product.sold_out’ | t }}
{% endif %}
{% endif %}
{% endfor %}
{% if block.settings.productsSmartPayment and product.available %}
{{ form | payment_button }}
{% endif %}
{% when ‘product-rating’ %}
{% if block.settings.rating != blank %}
{% if block.settings.rating-label != blank %}
{{ block.settings.rating-label }}
{% assign rating_aria_label = block.settings.rating-label %} {% else %} {% assign rating_aria_label = "Rating" %} {% endif %}{% if block.settings.rating-icon-full %}
{% liquid
assign rating_decimal = 0
assign decimal = block.settings.rating | modulo: 1
if decimal >= 0.3 and decimal <= 0.7
assign rating_decimal = 0.5
elsif decimal > 0.7
assign rating_decimal = 1
endif
assign full_icons = block.settings.rating | floor | plus: rating_decimal | floor
assign empty_icons = block.settings.rating-max | round | minus: full_icons
if rating_decimal == 0.5
assign empty_icons = empty_icons | minus: 1
endif
assign full_alt = block.settings.rating-icon-full.alt | default: “Full icon”
assign empty_alt = block.setting.rating-icon-empty.alt | default: “Empty icon”
%}
{% if block.settings.rating-icon-empty %}
{% if rating_decimal == 0.5 %}
{% for i in (1..empty_icons) %}
{% endif %}
{{ block.settings.rating }} / {{ block.settings.rating-max }}
{% endif %} {% endif %}{% when ‘image-offer’ %}
{% if block.settings.image != blank %}
{% assign image_widths = ‘335, 460, 680, 920, 1020, 1100’ %}
{% assign image_noscript_width = ‘1100x’ %}
{% if block.settings.link == blank %}
{% assign image_link = false %}
{% else %}
{% assign image_link = block.settings.link %}
{% endif %}
{% when ‘text-with-icon’ %}
{% render ‘text-with-icon’, icon: block.settings.icon, text: block.settings.text, link: block.settings.link, block_attributes: block.shopify_attributes %}
{% endcase %}
{% endfor %}
{% endform %}
{% schema %}
{
“name”: {
“en”: “Product information”,
“de”: “Produkt”,
“es”: “Producto”,
“fr”: “Produit”,
“pt-PT”: “Produto”
},
“class”: “product-section section-half-width”,
“blocks”: [
{
“type”: “@app”
},
{
“type”: “title”,
“name”: “Name”,
“limit”: 1,
“settings”: [
{
“type”: “paragraph”,
“content”: “This is used to set the order and placement of the product name within the product information”
}
]
},
{
“type”: “vendor”,
“name”: “Vendor”,
“limit”: 1,
“settings”: [
{
“type”: “checkbox”,
“id”: “productType”,
“label”: {
“en”: “Show product type”,
“de”: “Produkttyp anzeigen”,
“es”: “Mostrar tipo de producto”,
“fr”: “Afficher le type de produit”,
“pt-PT”: “Mostrar o tipo de produto”
}
}
]
},
{
“type”: “price”,
“name”: “Price”,
“limit”: 1,
“settings”: [
{
“type”: “paragraph”,
“content”: “This is used to set the order and placement of the product price within the product information”
}
]
},
{
“type”: “tax_and_shipping”,
“name”: “Tax and shipping”,
“limit”: 1,
“settings”: [
{
“type”: “checkbox”,
“id”: “tax_included”,
“label”: {
“en”: “Show ‘tax included’ message”,
“de”: “Nachricht "Steuer enthalten" anzeigen”,
“es”: “Mostrar mensaje "impuesto incluido"”,
“fr”: “Afficher le message « taxe incluse »”,
“pt-PT”: “Mostrar mensagem de ‘impostos incluídos’”
},
“default”: true
},
{
“type”: “checkbox”,
“id”: “shipping_policy”,
“label”: {
“en”: “Show shipping policy link”,
“de”: “Link zur Versandrichtlinie anzeigen”,
“es”: “Mostrar enlace de política de envío”,
“fr”: “Afficher le lien de la politique d’expédition”,
“pt-PT”: “Mostrar hiperligação da política de envios”
},
“default”: true
}
]
},
{
“type”: “swatches”,
“name”: “Variant options”,
“limit”: 1,
“settings”: [
{
“type”: “paragraph”,
“content”: “This is used to set the order and placement of variant options within the product information”
}
]
},
{
“type”: “quantity”,
“name”: “Quantity selector”,
“limit”: 1,
“settings”: [
{
“type”: “paragraph”,
“content”: “This is used to set the order and placement of the quantity selector within the product information”
}
]
},
{
“type”: “stock_indicator”,
“name”: “Low stock indicator”,
“limit”: 1,
“settings”: [
{
“type”: “range”,
“id”: “productStockLevel”,
“label”: {
“en”: “Show variant low stock indicator within product description”,
“de”: “Abweichende Anzeige für niedrigen Lagerbestand in der Produktbeschreibung anzeigen”,
“es”: “Mostrar el indicador de existencias bajas de la variante en la descripción del producto”,
“fr”: “Afficher la variante de l’indicateur de rupture de stock dans la description du produit”,
“pt-PT”: “Mostrar indicador variável de stock reduzido na descrição do produto”
},
“info”: {
“en”: “Enter a number representing the stock level below which the indicator will begin to decrease.”,
“de”: “Geben Sie die Höhe des Lagerbestands an, unterhalb derer die Anzeige fällt.”,
“es”: “Introduzca un número que represente el nivel de disponibilidad por debajo del cual el indicador empezará a disminuir.”,
“fr”: “Saisissez un nombre représentant le niveau de stock en dessous duquel l’indicateur commencera à diminuer.”,
“pt-PT”: “Introduza um número a indicar o nível de stock a partir do qual o indicador começa a descer.”
},
“min”: 0,
“max”: 20,
“step”: 1,
“default”: 0
}
]
},
{
“type”: “buy_buttons”,
“name”: “Buy buttons”,
“limit”: 1,
“settings”: [
{
“type”: “checkbox”,
“id”: “productsSmartPayment”,
“label”: {
“en”: “Show dynamic checkout button”,
“de”: “Dynamischen Bezahlbutton anzeigen”,
“es”: “Mostar el botón de compra dinámica”,
“fr”: “Afficher le bouton de paiement dynamique”,
“pt-PT”: “Mostrar botão de checkout dinâmico”
},
“info”: {
“en”: “Lets customers check out directly using a familiar payment method. Learn More”,
“de”: “Erlaubt Kunden, direkt mit einer bekannten Zahlungsart zu bezahlen. Mehr erfahren”,
“es”: “Permite a los clientes realizar el pago directamente utilizando una forma de pago conocida. Saber más”,
“fr”: “Permet aux clients de payer directement en utilisant un moyen de paiement familier. En savoir plus”,
“pt-PT”: “Permite aos clientes verem diretamente através de um método de pagamento familiar. Saber Mais”
},
“default”: true
}
]
},
{
“type”: “pay_installments”,
“name”: “Shop Pay Installments”,
“limit”: 1,
“settings”: [
{
“type”: “paragraph”,
“content”: “This is used to set the order and placement of the Shop Pay Installments banner within the product information”
}
]
},
{
“type”: “store_availability”,
“name”: “Local pickup”,
“limit”: 1,
“settings”: [
{
“type”: “paragraph”,
“content”: “This is used to set the order and placement of local pickup within the product information. You will need to set your pickup locations to enable. Learn more”
}
]
},
{
“type”: “description”,
“name”: “Description”,
“limit”: 1,
“settings”: [
{
“type”: “paragraph”,
“content”: “This is used to set the order and placement of the product description within the product information”
}
]
},
{
“name”: “Complementary products”,
“type”: “complementary-products”,
“limit”: 1,
“settings”: [
{
“type”: “paragraph”,
“content”: “To select complementary products, add the Search & Discovery app. Learn more”
},
{
“type”: “text”,
“id”: “title”,
“label”: “Heading”,
“default”: “Pairs well with…”
},
{
“type”: “range”,
“id”: “products_to_show”,
“min”: 1,
“max”: 10,
“step”: 1,
“label”: “Products to show”,
“default”: 5
},
{
“type”: “range”,
“id”: “products_per_page”,
“min”: 1,
“max”: 4,
“step”: 1,
“default”: 1,
“label”: {
“en”: “Number of products per page”,
“de”: “Anzahl der Produkte pro Seite”,
“es”: “Cantidad de productos por página”,
“fr”: “Nombre de produits par page”,
“pt-PT”: “Número de produtos por página”
}
},
{
“type”: “color”,
“id”: “complementary_block_bg”,
“label”: “Background color”,
“default”: “#F8F8F8”
}
]
},
{
“name”: “Cross sells”,
“type”: “cross-sells”,
“limit”: 1,
“settings”: [
{
“type”: “text”,
“id”: “title”,
“label”: “Label”,
“default”: “Don’t forget these…”
},
{
“type”: “product”,
“id”: “cross_sell_product_1”,
“label”: “Cross sell product 1”
},
{
“type”: “product”,
“id”: “cross_sell_product_2”,
“label”: “Cross sell product 2”
},
{
“type”: “product”,
“id”: “cross_sell_product_3”,
“label”: “Cross sell product 3”
},
{
“type”: “color”,
“id”: “cross_sell_bg”,
“label”: “Background color”,
“default”: “#FFFFFF”
}
]
},
{
“type”: “social”,
“name”: “Social media”,
“limit”: 1,
“settings”: [
{
“type”: “paragraph”,
“content”: “This is used to set the order and placement of social media icons within the product information”
}
]
},
{
“name”: “Custom Liquid”,
“type”: “custom-liquid”,
“settings”: [
{
“type”: “liquid”,
“id”: “custom-liquid”,
“label”: “Custom Liquid”,
“default”: “
Add app snippets or other Liquid code to create advanced customizations.
”