سفارشی کردن تم ناپ‌کامرس

این مقاله ما به صورت کلی نحوه سفارشی کردن قسمت‌های مختلف تم ناپ‌کامرس را بررسی می‌کنیم.

آپلود کردن لوگو فروشگاه

برای آپلود کردن لوگو در فروشگاه ناپ‌کامرس دو روش وجود دارد:

روش اول:

آپلود کردن از طریق منوی ادمین. توضیحات بیشتر را در این مقاله مطالعه کنید.

روش دوم:

در پوشه ناپ‌کامرس در این مسیر بروید

/Themes/YOUR THEME/Content/images/

فایل عکس logo.png را پیدا کنید

فایل لوگو خود را با همین نام با فایل مربوطه جابجا کنید.(اندازه لوگو باید 50*50 باشد)

اگر می‌خواهید تغییراتی در stylesheet لوگو ایجاد کنید کد زیر را در فایل styles.css سرچ کنید:

.header-logo {
    margin: 0 0 20px;
    text-align: center;
}
.header-logo a {
    display: inline-block;
    max-width: 100%;
    line-height: 0; /*firefox line-height bug fix*/
}
.header-logo a img {
    max-width: 100%;
    opacity: 1;
}

مهم: برای دیدن تغییرات لوگو و css احتمالا باید کش مرورگر خود را پاک کنید (ctrl+f5)

تغییر Layout

1. اگر قصد تغییر در ساختار Layout ناپ‌کامرس دارید (Root.cshtml_) در فایل styles.css این کدها را سرچ کنید:

.master-wrapper-content {
    position: relative;
    z-index: 0;
    width: 90%;
    margin: 0 auto;
}
.master-column-wrapper {
    position: relative;
    z-index: 0;
}
.master-column-wrapper:after {
    content: &quot&quot
    display: block;
    clear: both;
}

2. اگر قصد تغییر در ColumnOne.cshtml_ دارید، این کد را در فایل styles.css سرچ کنید:

.center-1 {
    margin: 0 0 100px;
}

3. اگر قصد تغییر در ColumnTwo.cshtml_ دارید، این کد را در فایل styles.css سرچ کنید:

.center-2, .side-2 {
    margin: 0 0 50px;
}
.side-2:after {
    content: &quot&quot
    display: block;
    clear: both;
}

تغییر در منوی هدر (منوی بالا)

اگر قصد تغییر در منوی هدر وب‌سایت ناپ‌کامرس خود دارید به آدرس زیر برید:

/Views/Shared/Components/TopMenu/Default.cshtml

فایل Default.chtml باز کنید و با توجه به نیازهاتون منوی مورد نظر خود <li> را اضافه یا حذف کنید.

تغییر در فوتر

اگر قصد تغییر در فوتر (لینک‌های فوتر) وب‌سایت ناپ‌کامرس خود دارید به آدرس زیر برید:

/Views/Shared/Components/TopMenu/Default.cshtml

فایل Default.chtml را باز کنید و با توجه به نیازهاتون لینک مورد نظر خود را <li> یا به صورت کامل <ul> اضافه یا حذف کنید.

ممنون از همراهیتون.

(قسمت سوم)

منبع