Make Lines Around my Product Page

Store Design
, , , , , , ,
1

Hey, i want to make my Product page a little more interesting by adding lines around everything.

now it looks like this:

sixdreamz_0-1726690301622.png
sixdreamz_0-1726690301622.png399Ă—215 21.6 KB

but i want it to look a little like this:

sixdreamz_1-1726690301765.png
sixdreamz_1-1726690301765.png399Ă—215 34.4 KB

URL is: sixdreamz.com

1 Like
2

Hi @sixdreamz

Check this one.

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.

.product__media.media.media--transparent {
    border: 1px solid black;
}

.product__description.rte.quick-add-hidden {
     border: 1px solid black;
    padding: 10px;
}

modal-opener.product-popup-modal__opener.no-js-hidden.quick-add-hidden {
    border: 1px solid black;
    padding-right: 1.3rem;
    padding-left: 1.3rem;
}

AndSave.

Result:

Made4uoRibe_0-1726691110123.png
Made4uoRibe_0-1726691110123.png1705Ă—796 66 KB

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

3

Hi @sixdreamz Careful in wearing the designer hat to apply personal aesthetics to a brand and give oneself a feeling of doing “something”.

It’s the quickest way to devolve a nondescript brand design into looking like every other drop shipping store and end up another merchant on the store feedback forum asking about traffic but no sales.

If using monochrome, adding lines & borders increases UI noise if not thought through that other high priority landmarks have to then compete with: image, price, add to cart those are the priorities.

Instead focus on actual usability issues like improving site color contrasts for better legibility of things that actually matter.

If doing this at least make sure the colors use the theme settings / brand colors to avoid having one-off mismatching colors.

4

-wrong post.

5

This is Richard from PageFly - Shopify Page Builder App

Hi Please add code here to edit design
Step 1: Online Stores > Themes > More Actions > Edit code
Step 2: Click on Theme.liquid and paste the code above the 

.product-form__input {
    border: 1px solid black;
}

.product__description {
     border: 1px solid black;
    padding: 8px;
}

Hope this can help you solve the issue.

Best regards,
Richard | PageFly