Remove border around collections in Collection List on Refresh theme.

[homerun]

Hello,

I want to:

1. Remove the border around the collection in the collection list on Homepage. (Arrow Marked Below Image)

2. Remove the name of the collection. (Arrow Marked below Image)

3. Increase the size of the image.

Please help. The existing solution of adding “.collection-card-wrapper .card {border: none !important;}” to base.css is not working for me.

[Huptech-Web]

Hello @homerun , Could you kindly provide me with the link to your store?

[topnewyork]

Hi @homerun ,

1. Go to Online Store → Theme → Edit code.
2. Open your theme.liquid file
3. In theme.liquid, paste the below code before

If my reply is helpful, kindly click like and mark it as an accepted solution.

Thanks!

[Huptech-Web]

Hello @homerun , Please follow these steps to add this CSS code:

1. Access your Shopify Admin.
2. Go to Online Store > Themes.
3. Locate the theme you are currently using and select Actions > Edit code.
4. In a CSS file: Go to Assets, find your CSS file, and add your styles, OR in base.css OR,
5. In theme.liquid: Go to Layout, open theme.liquid, and add your CSS inside a tag in the section.

.collection-list-wrapper .card-wrapper .card__inner{
    border: none;
}

Here is the screenshot of the same.

To remove the title, just write this code.

.collection-list-wrapper .card-wrapper .card__heading {
    display: none;
}

Feel free to reach out if you have any additional questions. If this solution is helpful, please consider liking and accepting it.
S.P

[BSSCommerce-HDL]

Hi @homerun ,

Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above tag:

Here is result:

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you

[homerun]

Thank you so much . Could you also help with Point 2 and 3. Removing the name should still leave the image clickable to take the customer the respective collection.

I want to:

1. Remove the border around the collection in the collection list on Homepage. (Arrow Marked Below Image)

2. Remove the name of the collection. (Arrow Marked below Image)

3. Increase the size of the image.

[homerun]

This kinda worked. However, it is also making the Collection Image non clickable and does not take the user to the respective collection page.

[Made4uo-Ribe]

Hi @homerun

For 2 and 3.

From you Admin page, go to Online Store > Themes

Select the theme you want to edit

Under the Asset folder, open the main.css(base.css, style.css or theme.css)

Then place the code below at the very bottom of the file.

.card .icon-wrap {
    display: none;
}
.collection-card-wrapper .card, .contains-card--collection  {
    --image-padding: 0px;
}

And Save.

result:

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

[BSSCommerce-HDL]

Hi @homerun , Pls replace this code to new code:

New code:

#shopify-section-template--23176277819707__collection_list_N9Egrn .card__heading a {
    position: absolute;
    opacity: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
}

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you

[homerun]

Perfect, Thank you.

[homerun]

Thank you for taking the time out.

[BSSCommerce-HDL]

@homerun , No problem. Glad to help you