Create a Frame around collection on Spoke/Athens theme

Store Design
1

Hi, You had helped me a few weeks ago put a frame around “featured product” and I would like to do it on the “simple collection” and “featured collection”.

https://mb9plr5a0nkyx5bd-20889773.shopifypreview.com/pages/genuine-mikuni-carburetor-rebuild-kits-and-parts

2

hey @offroadjim if you share the Screen shoot so then i can help you

3

I would like to add the border like this

image
image1540×622 123 KB

To This

image
image1509×525 149 KB

They are located on the same page

4

Got it
Follow these Steps:

  1. Go to Online Store
  2. Edit Code
  3. Find theme.liquid file
  4. Add the following code in the bottom of the file above </ body> tag
.collection {
    border: 1px solid black !important;
    border-radius: 10px !important;
    padding-right: 1rem !important;
    padding-left: 1rem !important;
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
}

image
image1517×499 135 KB

if this code work please do not forget to like and mark it solution

5

Is there a way to make it around the heading and description as well?

6

Got it
try this

#shopify-section-template--26095365325079__featured_collection_EDtPAb .section-content {
    border: 1px solid black !important;
    border-radius: 15px !important;
    padding-right: 1rem !important;
    padding-left: 1rem !important;
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
}

image
image1563×572 161 KB

7

For some reason that one is not working?

image
image1603×780 294 KB

8

plz don’t paste the code in custom css

Follow these Steps:

  1. Go to Online Store
  2. Edit Code
  3. Find theme.liquid file
  4. Add the following code in the bottom of the file above </ body> tag
9

Is this correct?

It did not do anything when I previewed the page

image
image1349×700 38.1 KB

10

I see that you’re pasting the css without Style tag, which leads to the css not working.

In this case, you need to wrap the style within the css tag and then you’ve to check.

Like replace the current css with this one.

<style>
#shopify-section-template--26095365325079__featured_collection_EDtPAb .section-content {
  border: 1px solid black !important;
  border-radius: 15px !important;
  padding-right: 1rem !important;
  padding-left: 1rem !important;
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
}
</style>

The above solution will 100% work.

11

I must be doing something wrong….

Here is where I put it but still nothing

image
image1309×600 35.1 KB

12

It’s better if you put css code in the “custom css” instead of theme.liquid with a style tag…

Screenshot 2026-01-01 155002
Screenshot 2026-01-01 155002275×930 62 KB

And get rid of the style tags.

Then stop using the section ID and whatever else that is, and use the class name instead. Replace this:

image
image1309×600 38.2 KB

With this:

.section-featured-collection

Ends up being:

.section-featured-collection {
  border: 1px solid black !important;
  border-radius: 15px !important;
  padding-right: 1rem !important;
  padding-left: 1rem !important;
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
}

And you may want to play around with the padding amount, depending on what your other sections look like. Refer to your other solution: Create a Frame around featured product on Spoke/Athens theme - #3 by tim_1 It could be as simple as doing the same thing you did there.

13

That did it! Thank you!!!

14

Good morning,
Would you happen to know how I make the width of the frame collection the same size as the one you did for featured products?

image
image1923×790 253 KB

15

Got it… Thank you….

It was

.section-featured-collection {
padding: 2rem 1rem;
}
.section-content {
border: 2px solid;
border-radius: 2rem;
padding: 1rem 1rem;
}