Hi guys, I was wondering how to create 2 products per row on collection page for palo alto theme (mobile version)? Let me know! Thank you so much!
Hello There,
Could you kindly share your store URL with me so that I can take a look and suggest you. As palo alto theme is Paid theme so it might be having some different structure on which will need to check.
https://vobapbelhwv0pfm0-44487868571.shopifypreview.com
here’s the preview! THank you so much. The theme is yet to be published
Hello Holahome,
Thank you for the preview link.
Kindly check your collection template and find the below given class:-
grid__item text-center small–one-whole medium–one-half large–one-third product-grid-item
In the below given class you will need to change the small–one-whole to small–one-half
By doing this it will help you in making two products per row in the mobile version.
Kindly DM me if you need any further information on the same.
I cant find the code! This is the full HTML on collection template.
{%- assign subcollectionsPosition = section.settings.subcollections -%}
{%- assign subcollections_per_row = section.settings.subcollections_per_row -%}
{%- assign filter_mode = section.settings.filter_mode -%}
{%- unless filter_mode == ‘hidden’ -%}
{%- assign enable_filters = true -%}
{%- else -%}
{%- assign enable_filters = false -%}
{%- endunless -%}
{%- assign position_filters = section.settings.position_filters -%}
{%- assign enable_sorting = section.settings.enable_collection_sorting -%}
{%- assign enable_swatches = settings.color_swatches -%}
{%- assign enable_reviews = settings.enable_reviews -%}
{%- assign show_review_stars = settings.show_review_stars -%}
{%- assign image_size = settings.image_size -%}
{%- assign image_aspect_ratio = settings.image_aspect_ratio -%}
{%- assign product_grid_slideshow = settings.product_grid_slideshow -%}
{%- assign product_grid_slideshow_arrows = settings.product_grid_slideshow_arrows -%}
{%- assign subheading = section.settings.subheading -%}
{%- assign heading_font_size = section.settings.heading_font_size -%}
{%- assign text_font_size = section.settings.text_font_size -%}
{%- assign collections_all = false -%}
{%- if collection.handle == ‘all’ -%}
{%- assign collections_all = true -%}
{%- endif -%}
{%- if enable_filters -%}
{% comment %}
Assign all selected tags to the container data attributes
{% endcomment %}
{%- assign selected_tags = ‘’ -%}
{%- for tag in current_tags -%}
{%- assign current_tag_handle = tag | replace: ‘’', ‘’ | replace: ‘"’, ‘’ | handle -%}
{%- assign selected_tags = selected_tags | append: current_tag_handle -%}
{%- unless forloop.last -%}
{%- assign selected_tags = selected_tags | append: ‘+’ -%}
{%- endunless -%}
{%- endfor -%}
{%- endif -%}
{% comment %}
If there is a collection image, the split header is used.
Else, the plain, centered text header is used.
{% endcomment %}
{% comment %}
Collection header
{% endcomment %}
{%- capture collection_header -%}
{%- if collection.image -%}
{%- assign collectionHeaderClass = ‘collection-header–has-image’ -%}
{%- else -%}
{%- assign collectionHeaderClass = ‘collection-header–no-image’ -%}
{%- endif -%}
{%- if collection.description != blank -%}
{%- unless collections_all -%}
{%- if subheading != blank -%}
{%- endcapture -%}
{{ subheading }}
{%- endif -%}
{%- endunless -%}
{{ collection.title | escape }}
{{- collection.description -}}
{%- else -%}
{%- unless collections_all -%}
{%- if subheading != blank -%}
{{ subheading }}
{%- endif -%}
{%- endunless -%}
{%- if collection.handle == ‘all’ -%}
{{ 'products.general.catalog' | t }}
{%- else -%}{{ collection.title }}
{%- endif -%} {%- endif -%}{%- if collection.image -%}
{% comment %} Banner Settings {% endcomment %}
{%- assign banner_height = section.settings.banner_height -%}
{%- assign text_position = section.settings.text_position -%}
{%- assign overlay_opacity = section.settings.overlay_opacity | times: 0.01 | round: 2 -%}
{%- unless banner_height == 'original-height' -%}
{%- else -%}
{%- render 'responsive-image', image: collection.image, image_alt: collection.image.alt, container_class: 'banner-img--original' -%}
{%- endunless -%}
{%- else -%}
{%- assign bg_color = section.settings.bg_color | default: '#fafafa' -%}
.site-header,
.collection-header--no-image { background: {{ bg_color }}; }
{{- collection_header -}}
{{ collection_header }}
{%- endif -%}
{%- if enable_filters -%}
{%- render 'collection-filters',
enable_filters: enable_filters, filter_mode: filter_mode, position_filters: position_filters -%}
{%- endif -%}
{%- assign collection_count = collection.all_products_count -%}
{%- if subcollectionsPosition == ‘top’ -%}
{%- render ‘sub-collections’,
subcollectionsPosition: subcollectionsPosition, subcollections_per_row: subcollections_per_row -%}
{%- endif -%}
{%- if section.settings.show_breadcrumbs -%}
{%- render ‘breadcrumbs’ -%}
{%- endif -%}
{%- if enable_sorting -%}
{%- render ‘collection-sorting’ -%}
{%- endif -%}
{%- paginate collection.products by 12 -%}
{%- if collection_count > 0 -%}
{%- if collection.products_count > 0 -%}
{%- endif -%}
{%- elsif collection.handle == 'all' and collection_count == 0 -%}
{{- 'theme-onboarding.css' | global_asset_url | stylesheet_tag -}}
{%- render 'onboarding-empty-collection', product_grid_slideshow: product_grid_slideshow -%}
{%- elsif collection.handle != 'all' and collection_count == 0 -%}
{%- endif -%}
{% comment %} Infinity scrolling {% endcomment %}
{%- for product in collection.products -%}
{% comment %}
{%- include 'product-grid-item', collection_count: ‘collection.all_products_count’ -%}
{% endcomment %}
{% render ‘product-grid-item’,
product: product, enable_swatches: enable_swatches, enable_reviews: enable_reviews, enable_carousel: enable_carousel,
show_review_stars: show_review_stars, product_grid_slideshow: product_grid_slideshow %}
{%- endfor -%}
{%- else -%}
{{ 'collections.general.no_matches_by_filter' | t : products_count: collection.products_count }}
{%- if enable_filters and filter_tags != blank -%}
{% render 'icon-close' %}{{ 'products.general.reset' | t }}
{%- endif -%}
{{ 'collections.general.no_matches' | t }}
{{ 'general.404.button_text' | t }}
{%- if paginate.next -%}
{%- endif -%}
{%- if subcollectionsPosition == ‘bottom’ -%}
{%- render ‘sub-collections’,
subcollectionsPosition: subcollectionsPosition, subcollections_per_row: subcollections_per_row -%}
{%- endif -%}
{%- endpaginate -%}