Featured collection: Show one image on mobile while showing two on desktop

When the desktop setting is two items per row for the homepage's Featured collection section module, mobile will also show two per row. If you'd like to modify that to show one per row on mobile, here's how to you can modify the listing code.

Before:

After:

How to:

Always make a duplicate of your theme before adding any code. This will save you if anything goes wrong or if you decide not to use the added code in the future. We can not support or be responsible of any code changes that you make to your theme. For that reason, save yourself and make a duplicate first.

Make a duplicate before any code changes:

1

Verify you have the items per row set to two products

In the Theme Editor, check your Featured collection section settings:

2

Use the Code Editor to modify the section code

Open the Code Editor:

From your list of themes, find the Actions link for the theme you'd like to edit. Then select Edit code. Example draft theme:

Example if you're working from your main live/published theme:

Open sections/index-collection:

In the code area:

Near the top, there are code groups based on what your setting is in the Theme Editor. For our example and this article, we're using 2 products per row. In the code groups, we'll use this section since our setting is 2. The following three lines are for the device sizes. The mobile one is the last one (arrow pointing at that line):

Simply change that value of small--one-half (which means two per row on mobile) to small--one-whole (which is one per row on mobile).

Change from:

small--one-half

Change to:

small--one-whole

Example:

Save the file.

Undo

Use the Older versions link at the top of the file if you need to rollback or undo this code change.