Align product to centre of the page

Solved
HassanMakke
Tourist
13 1 7

Hi, 

 

I am using the Debutify theme and I have one of my collection that has only one product. I want to align this product to the centre of the page so it does not look odd on the side of the page. 

 

Thank you 

 

@dmwwebartisan 

Accepted Solution (1)

Accepted Solutions
HassanMakke
Tourist
13 1 7

This is an accepted solution.


1. Go to Online Store->Theme->Edit code
2. Asset->/themes.scss.liquid->paste below code at the bottom of the file.

.grid, .grid--rev, .grid--full, .grid-uniform {
display: flex;
    justify-content: center;
}

 Thanks to @KetanKumar 

View solution in original post

Replies 7 (7)
RM_Muzamil
New Member
5 0 0

Hi bigmack, 

 

Goto your theme, click edit code, select collection and put <center> at the start of your product and add </center> at the end of your product then save it. Check your products now. It will work. 

HassanMakke
Tourist
13 1 7

Should the collection be in the sections section?

RM_Muzamil
New Member
5 0 0
yes, in the collection section. where you added your single product.
HassanMakke
Tourist
13 1 7

I was not able to locate the code section you mentioned. What I did is that I changed the desktop grid to 1 in collection.json section

However, this made the image really big, is there a way to make it smaller?

{
"sections": {
"collection-image": {
"type": "collection-image",
"settings": {
}
},
"breadcrumbs": {
"type": "breadcrumbs",
"settings": {
}
},
"main": {
"type": "collection-template",
"settings": {
"collection_tags_enable": false,
"collection_tags_count": false,
"collection_multiple_tags_filtering_enable": false,
"collection_sort_enable": false,
"tag_selector": "button",
"collection_layout": "grid_list",
"rows": "3",
"desktop_grid": "1",
"mobile_grid": "1"
}
}
},
"order": [
"collection-image",
"breadcrumbs",
"main"
]
}

HassanMakke
Tourist
13 1 7

I am not sure where to find the product

HassanMakke
Tourist
13 1 7

This is an accepted solution.


1. Go to Online Store->Theme->Edit code
2. Asset->/themes.scss.liquid->paste below code at the bottom of the file.

.grid, .grid--rev, .grid--full, .grid-uniform {
display: flex;
    justify-content: center;
}

 Thanks to @KetanKumar 

View solution in original post

KetanKumar
Shopify Partner
24923 2498 9041

@HassanMakke 

thanks for it

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing