Collections Re-Format

[ellacoker]

Hello,

Is someone able to help me in fixing my collections list on the home page? I would like the collections to be spread full width in long rectangles…

How do I go about the coding for this? Thank you.

URL: www.livwithin.com.au

[Small_Task_Help]

Hi,

Hope this will help

• At featured-collections.liquid or collection-list.liquid similar section need to add custom css

Code example:

/* Make collection items full-width rectangles */
.collection-list .grid__item {
  width: 100% !important;   /* Full width */
  margin-bottom: 20px;      /* Some space between rows */
}

.collection-list .card {
  display: flex;
  align-items: center;
  height: 200px;             /* Rectangle shape height */
  background-color: #f7f7f7;
  padding: 20px;
  border-radius: 8px;
}

.collection-list .card__image {
  max-width: 30%;            /* Keep image on one side */
  margin-right: 20px;
}

.collection-list .card__content {
  flex-grow: 1;              /* Let text fill rest of space */
}

[ellacoker]

I just put this in base.css and it didn’t seem to work - It just added a card background. See screenshot, thank you.

[Melbourne1]

I see that the issue has already been addressed. However, you might consider enhancing the collection by implementing an auto-sliding style. refer to the video provided below for inspiration. If you will like to consider to enhance the collection style I will like to provide the coding to enhance it

You can check it https://pressdot.shop/ am able to upload the video

[WebDeskSolution]

Hello @ellacoker

Please follow the steps below after logging into the Shopify admin:

• Go to your Shopify Admin panel.

• Click on Online Store > Themes.

• Find the live theme and then click Actions > Edit code.

• Search base.css

• Insert the provided CSS code at the end of the file and save the changes.

.collection-list-wrapper .collection-list__item.grid__item
{
    width: 100%;
    max-width: 100%;
    height: 300px;
}
.collection-list-wrapper .collection-list.contains-card
{
    display: flex;
    flex-direction: row;
}
.collection-list-wrapper .collection-list.contains-card .card__inner.ratio
{
    height: 100%;
}

Please hit Like and Mark it as a Solution if you find our reply helpful.