Kristin Weswoo
Aug 30, 2023
article outline
H1. ShopifyHow to customize the number of columns displayed on the product listing page
H2: What is a Shopify Product Listing Page?
H3: Basic functionality of the product listing page
H3: Why is it important to customize the number of columns displayed?
H2: How to change the number of columns displayed on a product listing page in Shopify
H3: Go to the Shopify backend
H4: Login to Shopify backend
H4: Go to Theme Settings
H3: Modify product page template
H4: Find the appropriate template file
H4: Editing CSS code
H3: Customization with Liquid Code
H4: Code to locate the product list section
H4: Modify the number of columns displayed for a product
H2: Customized settings for the number of columns in different themes
H3: Using the Shopify Default Theme
H3: Using third-party themes
H2: Other considerations for adjusting the number of columns
H3: Consider Mobile Adaptation
H3: Impact of number of columns on page load speed
H2: Frequently Asked Questions about Custom Columns
H3: Can't display after customizing the number of columns?
H3: How do I restore the default number of columns?
H2: Summary and recommendations
How Shopify customizes the number of columns displayed on the product listing page
What is a Shopify product listing page?
On the Shopify platform, the product listing page is the page that displays all the products in the store, and it is usually the first place that customers see when they browse the products. It is an important interface connecting merchants and consumers, so the layout and design of the product listing page directly affects the user experience. How to make these products presented in the most attractive way is something every store owner needs to consider.
Basic functions of the product listing page
The basic function of a product listing page is to display products, which usually contain product images, names, prices, and other information. By default, Shopify arranges these products in a certain number of columns, but sometimes, store owners would like to adjust these columns according to their needs, or optimize the display according to the screen size of different devices.
Why is the number of custom display columns important?
Every store has different product categories, brand styles, and target customers, so customizing the number of columns displayed can help store owners create a page layout that better suits their store. For example, some stores with larger products or more content on display may need wider columns to provide more information, while others may prefer a clean and simple layout with fewer columns on display so that customers can focus more on each item.
How to change the number of columns displayed on a product listing page in Shopify
To modify the number of columns displayed on a product listing page, Shopify offers several ways to do so, depending on the theme and template you're using. Below we'll take a look at how to do this in detail in a few steps.
Go to the Shopify backend
You need to login to your Shopify backend. Once you are in the backend, click on the "Online Store" option and then select "Themes" settings. Here, you can see the theme that is currently being used.
Log in to the Shopify backend
Once you enter the backend, you will see a "Customize" button. Click this button and you can start to adjust your theme settings. Choose the page you want to edit - generally speaking, the product listing page corresponds to the "Collection" page.
Go to Theme Settings
In the Theme Settings screen, you will see several options that you can edit. Find the "Theme Code" or "Code Editor" option. This contains all the code files of your theme, including HTML, CSS and Liquid files.
Modify product page templates
Find the appropriate template file
In the theme code, find the template files related to the product display, usually collection.liquid or product-grid.liquid.These files control the layout and display of the product listings.
Editing CSS code
In the template file, find the CSS code that controls the number of columns for product display. By default, Shopify themes usually set a fixed number of columns, maybe 4 or 3. You can adjust the number of columns by modifying grid-template-columns or similar CSS properties.
For example, if you want to change the product display to 3 columns, simply change the relevant CSS code as follows:
.product-grid {
grid-template-columns: repeat(3, 1fr); }
}
Customization with Liquid code
Locate the code in the product list section
If you want to further customize the way your products are displayed, you can use Shopify's Liquid code. liquid is a templating language that helps you control the layout, number of product displays, and more. In the collection.liquid file, you can find the for loop, which controls the circular display of products.
Modify the number of columns displayed for a product
By modifying the Liquid code, you can dynamically adjust the number of columns displayed per row. For example, you can set variables in the Liquid code to define the number of columns, or automatically adjust the number of columns based on the type of device (e.g., desktop or mobile).
{% assign product_columns = 3 %}
The variable is then used in the appropriate code segment to control the number of products displayed per line.
Column customization settings for different themes
Different Shopify themes may have different ways of adjusting the number of columns; Shopify's default themes (such as Debut or Dawn) generally have simple adjustments via CSS or Liquid files, while third-party themes may have more advanced customization options, or even the ability to adjust the number of columns directly via the theme settings panel without editing the code.
Using the Shopify Default Theme
For most Shopify default themes, you can adjust the number of columns for product listings by modifying the theme.css and Liquid template files. You can also find some simplified options in the Theme Settings, such as the choice of "Number of columns for product display".
Using third-party themes
Third-party themes usually offer more customization options. In these themes, you may find the "Number of Columns" setting directly in the theme settings panel, allowing you to select the number of columns you want via a drop-down menu.
Other considerations for adjusting the number of columns
Adjusting the number of columns may seem simple, but in practice there are some details to consider.
Consider mobile adaptation
With the popularity of mobile devices, it's important to make sure that your product listing pages display properly on cell phones as well. Often, on mobile, you may need to reduce the number of columns to avoid overcrowding the page with content. You can control the number of columns under different devices by using CSS media queries (@media).
Impact of the number of columns on page load speed
Adjusting the number of columns may affect the loading speed of the page. If there are too many columns, especially if the images are large, it may cause the page to load slower. Therefore, when increasing the number of columns, it is important to consider the overall performance of the site to ensure that the page still loads quickly.
Frequently Asked Questions about Custom Columns
Can't display after customizing the number of columns?
If the product doesn't display properly after changing the number of columns, it could be because the CSS code wasn't applied correctly, or there is a problem with the logic of the Liquid code. You can check if the code is saved correctly, or try reloading the page by clearing the cache.
How do I restore the default number of columns?
If you don't like the results after customization, you can always restore the default settings. Simply go back to the original theme settings or CSS file and undo the changes you made.
Summary and recommendations
Customizing the number of columns displayed on the Shopify product listing page is an effective way to enhance user experience. With simple code modifications, you can adjust the number of columns according to different needs to make the product display more in line with the style of your store. Remember to consider the adaptation of different devices and page loading speed when making adjustments to ensure a smooth store experience.
Frequently Asked Questions (FAQ)
-
Can Shopify set the number of columns a product is displayed in?
Yes, Shopify allows you to set the number of display columns by modifying the CSS and Liquid code, and even adaptively adjust it for different devices. -
What should I do if the product image does not display properly after modifying the number of columns?
It may be due to CSS style conflict or the image size is not adapted after the number of columns is adjusted. Check the CSS file to make sure the image size matches the number of columns. -
Is it easier to adjust the number of columns using a third-party theme?
Yes, many third-party themes offer simplified setup options where you can adjust the number of columns directly through the theme panel without having to manually change the code. -
How do I adjust the number of columns on mobile?
You can use CSS media queries to adjust the number of columns for different devices to ensure a more appropriate layout is displayed on mobile devices. -
How do I restore the default column settings?
If you want to restore the default number of columns, simply undo the changes you've made to the CSS or Liquid code, or reinstall the theme's default settings.
Article Outline H1: How Shopify implements a similar navigation bar underneath an applet H2: Introduction H3: What is Shopify? H3: What is an applet navigation bar? H3: Why implement an applet-like navigation bar on Shopify? H2: Basic Concepts and Technical Requirements H3: Overview of Shopify's Customization...
WESWOO - Cross-border Independent Website Development Experts
Helping Chinese brands to go overseas, we provide you with professional independent station building and Shopify Plus integration technical services. Accurate cross-border e-commerce solutions to help brands successfully land in the global market and easily cross the border.
- shopify standalone site branding
- Overseas UI Visual Design
- SNS Multi-Channel Brand Marketing