SHOP Builder(New Page Builder)
關於 SHOP Builder(New Page Builder)
您可以先參閱 SHOP Builder 的 Q&A 文件 來了解更多關於此功能的信息
僅支援使用 layout engine V2 店家，如Ｖ1 店家欲使用本功能，請聯絡業務申請升級到 layout engine V2
如何確認自己的 page 是由 SHOP Builder 所建立出的?
您可以前往網店設計的網店分頁頁面, 並且確認您的分頁名稱後面是否有 *support SHOP Builder 的標籤
若是有, 則代表此分頁必須遵照下面步驟修改您的 liquid 已確保該頁面能正常顯示
Introduction
關於 SHOP Builder 所建造出來新頁面, 我們將其分為三塊
- Header
- Widgets
- Footer
每個項目會對應到不同需要 migration 的檔案,
下面會列出每個區塊所需要 migration 的檔案
a. Header
- theme.liquid
- cart_panel.js.liquid
- general.js.liquid
- menu.js.liquid
- product_detail.js.liquid
- menu_panel.liquid
- member_center.liquid
- theme.css.liquid
b. Widgets
- page.liquid
- promotion_page.liquid
c. Footer
- theme.liquid
您可以根據你所想要支援的項目, 來進行 liquid migration
舉個例子,
若是你想要你的頁面同時支援 Widgets & footer, 但不需要支援 Header
那麼你只需要對 page.liquid & theme.liquid 進行 migration
若是你想要支援 Header Widget Footer 三者都支援的話
就需要對下面列出的檔案都進行 migration
- 若是您在 網店設計編輯 HTML/CSS 頁面內找不到上述的 liquid, 則不須擔心, 您不用在另外做改動
接下來會跟您說明該如何對這些檔案進行 migration
Header
1. theme.liquid (For Header)
步驟一: 搜尋 theme.liquid
步驟二: 搜尋
{% include 'navigation_bar_desktop.liquid' %}
{% include 'navigation_bar_mobile.liquid' %}
步驟三: 將其替換為下列程式碼
{% if page.identifier != 'express_checkout' %}
{% render_announcement %}
{% if use_revamped_header %}
{% render_header %}
{% else %}
{% include 'navigation_bar_desktop.liquid' %}
{% include 'navigation_bar_mobile.liquid' %}
{% endif %}
{% endif %}
2. cart_panel.js.liquid
步驟一: 搜尋 cart_panel.js.liquid
步驟二: 搜尋 hHeader = $('.NavigationBar.mod-desktop').height();
步驟三: 將 hHeader = $('.NavigationBar.mod-desktop').height(); 替換為下列程式碼
- 步驟二與三可能需要執行兩次
hHeader = ($('.js-navbar-desktop').height() || 0) + ($('.js-announcement').height() || 0);
步驟四: 搜尋 docEl.css({ 'max-height': '100%', overflow: 'hidden' });
步驟五: 將docEl.css({ 'max-height': '100%', overflow: 'hidden' }); 替換為下列程式碼
$('html').css({ 'max-height': '100%', overflow: '' });
$('body').css({ 'max-height': '100%', overflow: 'hidden' });
步驟六: 搜尋 docEl.css({ height: '', overflow: '' });
步驟七: 將其修改為 docEl.css({ 'max-height': '', overflow: '' });
步驟八: 搜尋 $('head').append('<style id="fix-cart">#cart-panel { top: ' + hHeader + 'px; }</style>');
步驟九: 將其修改為 $('head').append('<style id="fix-cart">#cart-panel { top: ' + hHeader + 'px; } @media (max-width: 1199px){ #cart-panel { top: 0; }}</style>');
步驟十: 搜尋 function setHeaderTop()
步驟十一: 將 function 內容修改為
PS: function setHeaderTop 的內容可能有在步驟三先被修改過, 但請放心這邊再行覆蓋不會有問題
function setHeaderTop() {
if (window.matchMedia('(max-width: 1199px)').matches) return;
var headerHeight = $('.js-navbar-desktop').height() || 0;
var announcementHeight = $('.js-announcement').height() || 0;
var headerMarginBottom = 20;
hHeader = headerHeight + announcementHeight;
if ($('.header--desktop').not('.header--sticky').length > 0 && $(window).scrollTop() >= hHeader) {
hHeader = hHeader - headerHeight + headerMarginBottom;
}
$('head #fix-cart').html('#cart-panel { top: ' + hHeader + 'px; } @media (max-width: 1199px){ #cart-panel { top: 0; }}');
}
步驟十二: 搜尋 $(window).on('scroll', _.throttle(setHeaderTop, 200));
步驟十三: 將其修改為 $(window).on('resize scroll', _.throttle(setHeaderTop, 200));
步驟十四: 搜尋 var navHeight = $('.js-navbar-desktop').height();
步驟十五: 將其修改為 hHeader = ($('.js-navbar-desktop').height() || 0) + ($('.js-announcement').height() || 0);
步驟十六: 搜尋 var cartItemListMaxHeight = navHeight + checkoutButtonContainerHeight + bottomSpace;
步驟十七: 將其修改為 var cartItemListMaxHeight = hHeader + checkoutButtonContainerHeight + bottomSpace;
步驟十八: 搜尋 var hHeader; hHeader = $('.js-navbar-desktop').height() || 0 + $('.js-announcement').height() || 0
步驟十九: 將其刪除
步驟二十: 找出 /* add top css for cart panel */ 開頭至 $(window).on('resize scroll', _.throttle(setHeaderTop, 200)); 結尾的程式碼段落，如下列程式碼
/* add top css for cart panel */
$('head').append('<style id="fix-cart">#cart-panel { top: ' + hHeader + 'px; } @media (max-width: 1199px){ #cart-panel { top: 0; }}</style>');
function setHeaderTop() {
if (window.matchMedia('(max-width: 1199px)').matches) return;
hHeader = ($('.js-navbar-desktop').height() || 0) + ($('.js-announcement').height() || 0);
$('head #fix-cart').html('#cart-panel { top: ' + hHeader + 'px; } @media (max-width: 1199px){ #cart-panel { top: 0; }}');
}
$(window).on('load', setHeaderTop);
$(window).on('resize scroll', _.throttle(setHeaderTop, 200));
步驟二十一: 將其替換成下列程式碼
const announcementHeight = $('.js-announcement').height() || 0;
const headerHeight = $('.js-navbar-desktop').height() || 0;
const headerMarginBottom = 20;
let hHeader = headerHeight + announcementHeight;
$('head').append('<style id="fix-cart">#cart-panel { top: ' + hHeader + 'px; } @media (max-width: 1199px){ #cart-panel { top: 0; }}</style>');
步驟二十二: 找出 /* adjust cart panel in short browser*/ 開頭的程式碼段落，如下列程式碼
/* adjust cart panel in short browser*/
function adjustCartPanel() {
if (window.matchMedia('(max-width: 1199px)').matches) return;
var bottomSpace = 24;
hHeader = ($('.js-navbar-desktop').height() || 0) + ($('.js-announcement').height() || 0);
var checkoutButtonContainerHeight = $('#cart-panel .cart-chkt-btn-cont').outerHeight();
var cartItemListMaxHeight = hHeader + checkoutButtonContainerHeight + bottomSpace;
$('#cart-panel .cart-items').css({
'max-height': 'calc(100vh - ' + cartItemListMaxHeight + 'px)'
});
};
$(window).on('resize, scroll', _.debounce(function() {
adjustCartPanel();
}, 200));
步驟二十三: 將其替換成下列程式碼
function adjustCartPanel() {
if (window.matchMedia('(max-width: 1199px)').matches) return;
const hHeader = announcementHeight + ($('.js-navbar-desktop').height() || 0);
/* adjust cart panel in short browser */
const checkoutButtonContainerHeight = $('#cart-panel .cart-chkt-btn-cont').outerHeight();
const STATIC_BUTTONS_PADDING_TOP = 15;
const cartItemListMaxHeight = hHeader + checkoutButtonContainerHeight + STATIC_BUTTONS_PADDING_TOP;
$('#cart-panel .cart-items').css({
'max-height': 'calc(100vh - ' + cartItemListMaxHeight + 'px)'
});
/* adjust cart panel when header not sticky */
let cartPosition = hHeader;
if (
$('#shopline-section-header').length > 0 &&
$('#shopline-section-header').css('position') !== 'sticky' &&
$(window).scrollTop() >= hHeader
) {
cartPosition = cartPosition - headerHeight + headerMarginBottom;
}
$('head #fix-cart').html('#cart-panel { top: ' + cartPosition + 'px; } @media (max-width: 1199px){ #cart-panel { top: 0; }}');
};
$(window).on('load', adjustCartPanel);
$(window).on('resize, scroll', _.debounce(function() {
adjustCartPanel();
}, 200));
3. general.js.liquid
步驟一: 搜尋 general.js.liquid
步驟二: 找出
var hHeader = $header.height() + previewingClosedStoreBannerHeight || 0;
if ($('.Grid-row-wrapper').length > 0 && $('body.home.index').length > 0) {
步驟三: 替換成下列程式碼
var hHeader = ($header.height() || 0) + (previewingClosedStoreBannerHeight || 0);
var isSectionPage = $('.shopline-section').length > 0;
if (
$('body.home.index').length > 0 &&
(isSectionPage || $('.Grid-row-wrapper').length > 0)
) {
步驟四: 找出 if (isFullWidth || isBackground) {
步驟五: 替換成下列程式碼
var isSectionFullWidth = isSectionPage && $('.shopline-section').first().find('.section-full-width').length > 0;
if (isFullWidth || isBackground || isSectionFullWidth) {
步驟六: 找出 var image = $('.js-nav-logo img');
步驟七: 將其替換為下列程式碼
var image = $('.js-nav-logo img, .header__logo img');
步驟八: 找出 $('.js-select-sort, .js-select-limit, js-select-filter').removeAttr('style');
步驟九: 將其刪除
步驟十: 找出 if (payload.modalType !== modalTypes.QUICK_CART) return;
步驟十一: 將其替換為下列程式碼
if ([modalTypes.QUICK_CART, modalTypes.QUICK_CART_PRODUCT_SET].indexOf(payload.modalType) === -1) return;
步驟十二: 找出 $(document).on('click', '.js-btn-add-to-cart', function() { 開頭的程式碼區塊
步驟十三: 將其刪除 $(document).on('click', '.js-btn-add-to-cart', function() { 開頭的程式碼區塊，如下列程式碼
$(document).on('click', '.js-btn-add-to-cart', function() {
if ($(window).width() < 992) {
/* diable click sort when popup show */
$('.js-select-sort, .js-select-limit, .js-select-filter').css('pointer-events', 'none');
}
});
步驟十四: 到 general.js.liquid 的最底部，增加下列程式碼
if (
$('body.cart.index, body.checkout.index, body.orders.confirm').length === 0 &&
$('#shopline-section-header').length > 0
) {
$('#shopline-section-header').css('top', ($('#shopline-section-announcement').height() || 0));
}
if ($('body.home.index').length > 0) {
/* Should fix header when the first widget type on the OPB page is carousel or image. */
var firstGridRowWrapper = $('.Grid-row-wrapper').first();
var shouldFixHeaderForOpbPage =
firstGridRowWrapper.length > 0 &&
firstGridRowWrapper.find('.Grid-item').length === 1 &&
firstGridRowWrapper.find(
'.editor-boxify-image-wrapper, .ImageItem-carouselContainer',
).length > 0;
/* When the first image widget has no content, check whether the second widget type is image. */
if (shouldFixHeaderForOpbPage && firstGridRowWrapper.find('.Grid-item').first().find('.image-container').children().length === 0) {
var secondGridRowWrapper = firstGridRowWrapper.next();
shouldFixHeaderForOpbPage =
secondGridRowWrapper.length > 0 &&
secondGridRowWrapper.find('.Grid-item').length === 1 &&
secondGridRowWrapper.find(
'.editor-boxify-image-wrapper, .ImageItem-carouselContainer',
).length > 0;
}
/* Should fix header when first widget type on OPB page is gallery or slideshow with fullscreen option turned on. */
var isSectionPage = $('.shopline-section').length > 0;
var shouldFixHeaderForNpbPage =
isSectionPage &&
$('.shopline-section')
.first()
.find('.section-full-width')
.find('.gallery__mask, .slideshow__list').length > 0;
var shouldFixHeader = shouldFixHeaderForOpbPage || shouldFixHeaderForNpbPage;
var fixedHeader = function () {
$('.header').attr(
'style',
'position: fixed !important; top: ' +
($('#shopline-section-announcement').height() || 0) +
'px',
);
};
var transparentHead = function () {
$('.header').attr('style', 'position: absolute !important');
};
var resetHeader = function () {
$('.header').removeAttr('style');
};
if ($('.header').hasClass('header--sticky')) {
if (shouldFixHeader) {
fixedHeader();
} else {
$(window).on('scroll', _.debounce(function () {
if ($(window).scrollTop() >= 100) {
fixedHeader();
} else {
resetHeader();
}
}, 200));
}
} else {
if (shouldFixHeader) {
transparentHead();
} else {
resetHeader();
}
}
}
4. menu.js.liquid
步驟一: 搜尋 menu.js.liquid
步驟二: 找出 top: currentMenu.topLayer.menu.height() + currentMenu.topLayer.menu.position().top + $('.trial-banner').height()
步驟三: 將其替換為下列程式碼
top: (
(currentMenu.topLayer.menu.height() || 0) +
(currentMenu.topLayer.menu.position().top || 0) +
($('.trial-banner').height() || 0) +
($('.js-announcement').height() || 0) -
($('.header--desktop:not(.header--sticky)').length ? window.scrollY : 0)
),
步驟四: 找出
var trialBannerHeight = $('.trial-banner').height() || 0;
$('.js-product-searchfield-form').css('top', trialBannerHeight);
步驟五: 替換成
var bannerHeight = ($('.trial-banner').height() || 0) + ($('.js-announcement').height() || 0);
$('.js-product-searchfield-form').css('top', bannerHeight);
步驟六: 找出 function setThickMenu(setPosition)
步驟七: 在 setThickMenu 內的 var $logo = $('.js-nav-logo').eq(1).find('img'); 下方插入下列程式碼
if (!$logo[0]) {
$logo = $('.header__logo.header__logo--home img')
}
步驟八: 找出 function setThinMenu(setPosition)
步驟九: 在 setThinMenu 內的 var $logo = $('.js-nav-logo').eq(0).find('img'); 下方插入下列程式碼
if (!$logo[0]) {
$logo = $('.header__logo:not(.header__logo--home) img, .header__logo.header__logo--top-center img')
}
步驟十: 找出 var menus = null;
步驟十一: 在上方加入
function setMobileSearchBarPosition() {
var bannerHeight = ($('.trial-banner').height() || 0) + ($('.js-announcement').height() || 0);
$('.js-product-searchfield-form').css('top', bannerHeight);
}
步驟十二: 找出$(window).on('resize', _.throttle(function() { 內的 setMenuPosition();
步驟十三: 在setMenuPosition(); 後加入 setMobileSearchBarPosition()
5. product_detail.js.liquid
步驟一: 搜尋 product_detail.js.liquid
步驟二: 找出hHeader = $('.js-navbar-desktop').height();
步驟三: 替換成hHeader = ($('.js-navbar-desktop').height() || 0) + ($('.js-announcement').height() || 0);
步驟四: 找出$(window).load(function() { 的程式碼區塊
$(window).load(function() {
...
});
步驟五: 將其替換為下列程式碼
$(window).load(function() {
/* Fix timing of mobile sticky button display, when replace product image placeholder or carousel change image */
if ($(window).width() <= 767) {
const observer = new ResizeObserver(_.throttle(() => {
btns.forEach(function (sel) {
const $btn = $(sel);
if ($btn.length) {
pos = $btn.offset().top;
}
});
if (document.querySelectorAll('.ProductDetail-product-gallery img').length === 2) {
/* only one picture */
observer.disconnect();
}
}, 500, { trailing: true }));
observer.observe(document.querySelectorAll('.ProductDetail-product-gallery')[1]);
}
/* add custom button add to cart and fixed if scroll through button add to cart default */
if ($(window).width() > 767) {
const spbBarHeight = $('#spb-information-bar').height() || 0;
const $header = window.matchMedia('(max-width: 1199px)').matches ? $('.js-navbar-mobile') : $('.js-navbar-desktop');
const STATIC_BUTTONS_PADDING_TOP = 15;
let hHeader = ($('.js-announcement').height() || 0);
/* if new page builder not sticky, not add header height */
if ($('#shopline-section-header').length === 0 || $('#shopline-section-header').css('position') === 'sticky') {
hHeader = hHeader + ($header.height() || 0);
}
$('.js-sticky-cart-button-container').css('top', hHeader + STATIC_BUTTONS_PADDING_TOP + spbBarHeight);
}
$(window).scroll(function() {
if ($(window).width() > 767) {
if ($(window).scrollTop() > pos && !isAvailableTimeDisabled) {
$('.js-sticky-cart-button-container').addClass('active');
} else {
$('.js-sticky-cart-button-container').removeClass('active');
}
} else {
if ($(window).scrollTop() > pos) {
$('.js-sticky-cart-button-container').addClass('active');
} else {
$('.js-sticky-cart-button-container').removeClass('active');
}
}
});
});
6. menu_panel.liquid
步驟一: 搜尋 menu_panel.liquid
步驟二: 找出
<div class="MenuPanel-section-header">
{{ 'shopline_translations.themes.menu_panel.others' | translate }}
</div>
<ul class="MenuPanel-othersMenu">
...
{% if shop.multicurrency_enabled %}
<li class="List-item App-currencyDropdown" >
<a class="Label sl-currency-menu-open"><span class="fa fa-dollar"></span></a>
</li>
{% endif %}
</ul>
步驟三: 將其全部替換為下面程式碼
{% if use_revamped_header %}
{% if header.settings.message_style == "none" %}{% assign hideMessage = true %}{% endif %}
{% if header.settings.language_selector_style == "none" %}{% assign hideLanguageSelector = true %}{% endif %}
{% if header.settings.currency_selector_style != "none" %}{% assign showCurrencySelector = true %}{% endif %}
{% else %}
{% assign hideMessage = false %}
{% assign hideLanguageSelector = shop.hide_language_selector %}
{% assign showCurrencySelector = shop.multicurrency_enabled %}
{% endif %}
{% unless hideMessage and hideLanguageSelector and showCurrencySelector != true %}
<div class="MenuPanel-section-header">
{{ 'shopline_translations.themes.menu_panel.others' | translate }}
</div>
<ul class="MenuPanel-othersMenu">
{% unless hideMessage %}
<li class="List-item">
<a class="MessageDialog-showButton sl-message-toggle">
<i class="fa fa-comment"></i> {{ 'shopline_translations.themes.menu_panel.messaging' | translate }}
</a>
</li>
{% endunless %}
{% unless hideLanguageSelector %}
<li class="List-item">
<a class="sl-language-menu-open">
<svg class="fa fa-v5-globe">
<use xlink:href="#fa-v5-globe"></use>
</svg>
{{ shop.current_locale.name }}
</a>
</li>
{% endunless %}
{% if showCurrencySelector %}
<li class="List-item App-currencyDropdown" >
<a class="Label sl-currency-menu-open"><span class="fa fa-dollar"></span></a>
</li>
{% endif %}
</ul>
{% endunless %}
7. member_center.liquid
步驟一: 搜尋 member_center.liquid
步驟二: 找出<section class="MemberCenter block-inner">
步驟三: 替換成 <section class="MemberCenter block-inner {% unless header.settings.is_sticky_header %} without-sticky-header {% endunless %}">
8. theme.css.liquid
步驟一: theme.css.liquid
步驟二: 在最底下加入以下程式碼
body.page_builder #Content {
padding-bottom: 0;
}
body.page_builder .CustomPage {
margin-bottom: 0;
}
@media (max-width: 767px) {
body.users.edit .MemberCenter.without-sticky-header .sr-tab {
position: absolute;
z-index: 1;
}
}
Widgets
1. page.liquid
步驟一: 搜尋 page.liquid
步驟二: 找出 <div class="CustomPage">
並且在此 div 中插入下面的語法
{% content_for_index %}
example
<div class="CustomPage">
{% content_for_index %}
{% for row in custom_page.rows %}
<div class="Grid-row-wrapper
{% if row.full_width %} m-full-width {% endif %}
{% if row.remove_padding %} m-remove-padding {% endif %}"
>
...
</div>
2. promotion_page.liquid
步驟一: 搜尋 promotion_page.liquid
步驟二: 找出 <img src="https://s3-ap-southeast-1.amazonaws.com/static.shoplineapp.com/web/assets/icon_expired.svg" alt="promotion expired">
步驟三: 將其改成下列程式碼
{% if use_revamped_theme_settings %}
<svg><use xlink:href="#icon-expired"></use></svg>
{% else %}
<svg viewBox="0 0 146 140">
<g id="icon_expired" stroke="none" stroke-width="1" fill-rule="evenodd">
<g id="Group-24-Copy">
<path d="M100,59.000133 C100,61.2092768 101.790723,63 104.000133,63 C106.209277,63 108,61.2092768 108,59.000133 C108,56.7909892 106.209277,55 104.000133,55 C101.790723,55 100,56.7909892 100,59.000133" id="Fill-1" />
<path d="M84,59.000133 C84,56.7909892 82.2092768,55 79.999867,55 C77.7907232,55 76,56.7909892 76,59.000133 C76,61.2092768 77.7907232,63 79.999867,63 C82.2092768,63 84,61.2092768 84,59.000133" id="Fill-3" />
<path d="M31.999867,55 C29.7907232,55 28,56.7909892 28,59.000133 C28,61.2092768 29.7907232,63 31.999867,63 C34.2092768,63 36,61.2092768 36,59.000133 C36,56.7909892 34.2092768,55 31.999867,55" id="Fill-5" />
<path d="M56.999867,55 C54.7907232,55 53,56.7909892 53,59.000133 C53,61.2092768 54.7907232,63 56.999867,63 C59.2092768,63 61,61.2092768 61,59.000133 C61,56.7909892 59.2092768,55 56.999867,55" id="Fill-7" />
<path d="M31.999867,79 C29.7907232,79 28,80.7907232 28,83.000133 C28,85.2092768 29.7907232,87 31.999867,87 C34.2092768,87 36,85.2092768 36,83.000133 C36,80.7907232 34.2092768,79 31.999867,79" id="Fill-9" />
<path d="M56.999867,79 C54.7907232,79 53,80.7907232 53,83.000133 C53,85.2092768 54.7907232,87 56.999867,87 C59.2092768,87 61,85.2092768 61,83.000133 C61,80.7907232 59.2092768,79 56.999867,79" id="Fill-11" />
<path d="M31.999867,100 C29.7907232,100 28,101.790783 28,104 C28,106.209217 29.7907232,108 31.999867,108 C34.2092768,108 36,106.209217 36,104 C36,101.790783 34.2092768,100 31.999867,100" id="Fill-13" />
<path d="M56.999867,100 C54.7907232,100 53,101.790783 53,104 C53,106.209217 54.7907232,108 56.999867,108 C59.2092768,108 61,106.209217 61,104 C61,101.790783 59.2092768,100 56.999867,100" id="Fill-15" />
<g id="Group-19">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"/>
</mask>
<g id="Clip-18"/>
<path d="M12.9234875,17.414965 L29.5068562,17.414965 L29.5068562,21.8729292 C29.5068562,26.3375535 33.0601187,29.9696728 37.4275512,29.9696728 C41.7952442,29.9696728 45.3487674,26.3375535 45.3487674,21.8729292 L45.3487674,17.414965 L90.7270106,17.414965 L90.7270106,21.8729292 C90.7270106,26.3375535 94.2802732,29.9696728 98.6479662,29.9696728 C103.015659,29.9696728 106.568922,26.3375535 106.568922,21.8729292 L106.568922,17.414965 L121.922696,17.414965 C126.174675,17.414965 129.633854,20.9509133 129.633854,25.2972553 L129.633854,35.7724322 L5.21232915,35.7724322 L5.21232915,25.2972553 C5.21232915,20.9509133 8.67176931,17.414965 12.9234875,17.414965 Z M34.7192114,8.19160915 C34.7192114,6.66459523 35.9342114,5.42263101 37.4275512,5.42263101 C38.9214122,5.42263101 40.1364122,6.66459523 40.1364122,8.19160915 L40.1364122,21.8729292 C40.1364122,23.3996767 38.9214122,24.641641 37.4275512,24.641641 C35.9342114,24.641641 34.7192114,23.3996767 34.7192114,21.8729292 L34.7192114,8.19160915 Z M95.9393658,8.19160915 C95.9393658,6.66459523 97.1543658,5.42263101 98.6479662,5.42263101 C100.141567,5.42263101 101.356567,6.66459523 101.356567,8.19160915 L101.356567,21.8729292 C101.356567,23.3996767 100.141567,24.641641 98.6479662,24.641641 C97.1543658,24.641641 95.9393658,23.3996767 95.9393658,21.8729292 L95.9393658,8.19160915 Z M76.5392403,128.438893 L12.9234875,128.438893 C8.67176931,128.438893 5.21232915,124.902679 5.21232915,120.556603 L5.21232915,41.100464 L129.633854,41.100464 L129.633854,67.9380266 C129.633854,69.4093626 130.800901,70.6020425 132.240032,70.6020425 C133.679424,70.6020425 134.846209,69.4093626 134.846209,67.9380266 L134.846209,25.2972553 C134.846209,18.0130366 129.048767,12.0869332 121.922696,12.0869332 L106.568922,12.0869332 L106.568922,8.19160915 C106.568922,3.72698489 103.015659,0.0945992048 98.6479662,0.0945992048 C94.2802732,0.0945992048 90.7270106,3.72698489 90.7270106,8.19160915 L90.7270106,12.0869332 L45.3487674,12.0869332 L45.3487674,8.19160915 C45.3487674,3.72698489 41.7952442,0.0945992048 37.4275512,0.0945992048 C33.0601187,0.0945992048 29.5068562,3.72698489 29.5068562,8.19160915 L29.5068562,12.0869332 L12.9234875,12.0869332 C5.79741602,12.0869332 -2.60617761e-05,18.0130366 -2.60617761e-05,25.2972553 L-2.60617761e-05,120.556603 C-2.60617761e-05,127.840822 5.79741602,133.766925 12.9234875,133.766925 L76.5392403,133.766925 C77.9783716,133.766925 79.145418,132.573979 79.145418,131.102909 C79.145418,129.631573 77.9783716,128.438893 76.5392403,128.438893 Z" id="Fill-17" mask="url(#mask-2)"/>
</g>
<path d="M114.5,134.637046 C99.9535249,134.637046 88.1192043,122.239237 88.1192043,107.000134 C88.1192043,91.7610316 99.9535249,79.3629542 114.5,79.3629542 C129.046475,79.3629542 140.880796,91.7610316 140.880796,107.000134 C140.880796,122.239237 129.046475,134.637046 114.5,134.637046 M114.5,74 C97.1307957,74 83,88.8036306 83,107.000134 C83,125.196369 97.1307957,140 114.5,140 C131.869204,140 146,125.196369 146,107.000134 C146,88.8036306 131.869204,74 114.5,74" id="Fill-20" />
<path d="M128.282152,106.984552 L115.435697,106.984552 L115.435697,89.5077238 C115.435697,88.1227079 114.218916,87 112.717848,87 C111.217053,87 110,88.1227079 110,89.5077238 L110,109.492276 C110,110.877041 111.217053,112 112.717848,112 L128.282152,112 C129.782947,112 131,110.877041 131,109.492276 C131,108.107511 129.782947,106.984552 128.282152,106.984552" id="Fill-22" />
</g>
</g>
</svg>
{% endif %}
Footer
1. theme.liquid (For Footer)
步驟一: 搜尋 theme.liquid
步驟二: 搜尋 {% include 'footer.liquid' %}
將 {% include 'footer.liquid' %} 替換為下列程式碼
{% if page.identifier != 'express_checkout' and page.identifier != 'checkout' %}
{% if use_revamped_footer %}
{% render_footer %}
{% else %}
{% include 'footer.liquid' %}
{% endif %}
{% endif %}
Custom Page
1. theme.liquid (For Custom Page)
步驟一: 搜尋 theme.liquid
步驟二: 搜尋 elements = isQuickCartProduct(imageClass) ? $('product-item') : $('.Product-item');
將 elements = isQuickCartProduct(imageClass) ? $('product-item') : $('.Product-item'); 替換為下列程式碼
elements = isQuickCartProduct(imageClass) ? $('product-item, .CustomPage .product-item') : $('.Product-item');
Updated 7 months ago