Modify collection card on featured collection: Ventures Theme

Store Design
,

Topic summary

Goal: Tidy featured collection cards in the Ventures theme by showing 10 products per collection and adding an orange “View more” button at the bottom.

Context: Store URL provided and a screenshot shared to show the current, undesired look.

Proposed change: One reply suggests adding custom CSS in theme.css to restyle the collection card:

  • Center the collection-card meta content; make the grid container relative with extra bottom space.
  • Remove subtext margin; hide the collection title.
  • Turn the collection card into a centered, absolute-positioned 200×49px button below the card.
  • Apply an orange background (#f89821) with a darker hover color (#ae6205).

Status: The CSS addresses button styling/placement and layout, but does not cover displaying 10 products. No confirmation of results; discussion remains open.

Summarized with AI on December 26. AI used: gpt-5.
1

Hi team,

I’m looking for some help to modify the collection card on my featured collections as it looks out of place, and quite honestly ugly.

I would like 10 products to be displayed, and a orange button at the bottom of each featured collection reading “view more”.

Store URL: https://stickerhub.co.nz/

Theme: Ventures

Here is what it currently looks like:

EG3333.png
EG3333.png1531×795 190 KB

Thanks very much! :slightly_smiling_face:

2

Add This css in your edit code > theme.css file

.collection .collection-card__meta {
    bottom: unset !important;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50% !important;
    width: 100%;
}
.grid.grid--no-gutters.grid--uniform.collection {
    position: relative;
    margin-bottom: 70px;
}
.collection p.collection-card__subtext {
    margin: 0;
}
.collection a.collection-card {
    background-image: unset !important;
    position: absolute;
    padding: 0;
    width: 200px;
    height: 49px;
    bottom: -70px;
    z-index: 2;
    left: 50%;
    transform: translate(-50%);
}
.collection .collection-card:after{
    background-color: #f89821 !important;
    opacity: 1 !important;
}
.collection .collection-card:hover:after{
    opacity: 1 !important;
    background-color:#ae6205 !important;
}
.collection p.h1.collection-card__title {
    display: none;
}