マイページの表示が崩れてしまう場合、適用されているテーマのCSSを最後に読み込んでいるため、テーマのCSSファイルに当該HTMLに適用されるようなCSSを記述いただくことで、デザインをアップデートすることが可能です。
iframeで読み込まれているもののサンプルHTML
<html lang="en">
<script type="text/javascript">window["_gaUserPrefs"] = { ioo: function () { return true; } }</script>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title></title>
</head>
<body>
<div id="root" class="grid myaccount">
<div class="grid__item">
<h2>定期購買</h2>
<table class="responsive-table">
<thead>
<tr>
<th scope="col">ID</th>
<th scope="col">作成日</th>
<th scope="col">ステータス</th>
</tr>
</thead>
<tbody>
<tr>
<th data-label="注文" scope="row"><a class="btn btn--secondary btn--small"
href="/?path=/subscriptions/gid%3A%2F%2Fshopify%2FSubscriptionContract%2F1112637591">1112637591</a></th>
<td><time>2021年03月30日</time></td>
<td>アクティブ</td>
</tr>
<tr>
<th data-label="注文" scope="row"><a class="btn btn--secondary btn--small"
href="/?path=/subscriptions/gid%3A%2F%2Fshopify%2FSubscriptionContract%2F1103921303">1103921303</a></th>
<td><time>2021年03月18日</time></td>
<td>アクティブ</td>
</tr>
<tr>
<th data-label="注文" scope="row"><a class="btn btn--secondary btn--small"
href="/?path=/subscriptions/gid%3A%2F%2Fshopify%2FSubscriptionContract%2F1103855767">1103855767</a></th>
<td><time>2021年03月18日</time></td>
<td>アクティブ</td>
</tr>
<tr>
<th data-label="注文" scope="row"><a class="btn btn--secondary btn--small"
href="/?path=/subscriptions/gid%3A%2F%2Fshopify%2FSubscriptionContract%2F1103888535">1103888535</a></th>
<td><time>2021年03月18日</time></td>
<td>アクティブ</td>
</tr>
</tbody>
</table>
</div>
</div>
<script>!function (e) { function t(t) { for (var n, a, i = t[0], c = t[1], l = t[2], s = 0, p = []; s < i.length; s++)a = i[s], Object.prototype.hasOwnProperty.call(o, a) && o[a] && p.push(o[a][0]), o[a] = 0; for (n in c) Object.prototype.hasOwnProperty.call(c, n) && (e[n] = c[n]); for (f && f(t); p.length;)p.shift()(); return u.push.apply(u, l || []), r() } function r() { for (var e, t = 0; t < u.length; t++) { for (var r = u[t], n = !0, i = 1; i < r.length; i++) { var c = r[i]; 0 !== o[c] && (n = !1) } n && (u.splice(t--, 1), e = a(a.s = r[0])) } return e } var n = {}, o = { 1: 0 }, u = []; function a(t) { if (n[t]) return n[t].exports; var r = n[t] = { i: t, l: !1, exports: {} }; return e[t].call(r.exports, r, r.exports, a), r.l = !0, r.exports } a.e = function (e) { var t = [], r = o[e]; if (0 !== r) if (r) t.push(r[2]); else { var n = new Promise((function (t, n) { r = o[e] = [t, n] })); t.push(r[2] = n); var u, i = document.createElement("script"); i.charset = "utf-8", i.timeout = 120, a.nc && i.setAttribute("nonce", a.nc), i.src = function (e) { return a.p + "static/js/" + ({}[e] || e) + "." + { 3: "2ee565ab" }[e] + ".chunk.js" }(e); var c = new Error; u = function (t) { i.onerror = i.onload = null, clearTimeout(l); var r = o[e]; if (0 !== r) { if (r) { var n = t && ("load" === t.type ? "missing" : t.type), u = t && t.target && t.target.src; c.message = "Loading chunk " + e + " failed.\\n(" + n + ": " + u + ")", c.name = "ChunkLoadError", c.type = n, c.request = u, r[1](c) } o[e] = void 0 } }; var l = setTimeout((function () { u({ type: "timeout", target: i }) }), 12e4); i.onerror = i.onload = u, document.head.appendChild(i) } return Promise.all(t) }, a.m = e, a.c = n, a.d = function (e, t, r) { a.o(e, t) || Object.defineProperty(e, t, { enumerable: !0, get: r }) }, a.r = function (e) { "undefined" != typeof Symbol && Symbol.toStringTag && Object.defineProperty(e, Symbol.toStringTag, { value: "Module" }), Object.defineProperty(e, "__esModule", { value: !0 }) }, a.t = function (e, t) { if (1 & t && (e = a(e)), 8 & t) return e; if (4 & t && "object" == typeof e && e && e.__esModule) return e; var r = Object.create(null); if (a.r(r), Object.defineProperty(r, "default", { enumerable: !0, value: e }), 2 & t && "string" != typeof e) for (var n in e) a.d(r, n, function (t) { return e[t] }.bind(null, n)); return r }, a.n = function (e) { var t = e && e.__esModule ? function () { return e.default } : function () { return e }; return a.d(t, "a", t), t }, a.o = function (e, t) { return Object.prototype.hasOwnProperty.call(e, t) }, a.p = "/", a.oe = function (e) { throw console.error(e), e }; var i = this.webpackJsonpaccount = this.webpackJsonpaccount || [], c = i.push.bind(i); i.push = t, i = i.slice(); for (var l = 0; l < i.length; l++)t(i[l]); var f = c; r() }([])</script>
<script src="/static/js/2.334d9d36.chunk.js"></script>
<script src="/static/js/main.f5dbd263.chunk.js"></script>
<style>
<br>:root {
<br>--color-text: #3a3a3a;
<br>--color-text-rgb: 58, 58, 58;
<br>--color-body-text: #333232;
<br>--color-sale-text: #EA0606;
<br>--color-small-button-text-border: #3a3a3a;
<br>--color-text-field: #ffffff;
<br>--color-text-field-text: #000000;
<br>--color-text-field-text-rgb: 0, 0, 0;
<br><br>--color-btn-primary: #3a3a3a;
<br>--color-btn-primary-darker: #212121;
<br>--color-btn-primary-text: #ffffff;
<br><br>--color-blankstate: rgba(51, 50, 50, 0.35);
<br>--color-blankstate-border: rgba(51, 50, 50, 0.2);
<br>--color-blankstate-background: rgba(51, 50, 50, 0.1);
<br><br>--color-text-focus: #606060;
<br>--color-overlay-text-focus: #e6e6e6;
<br>--color-btn-primary-focus: #606060;
<br>--color-btn-social-focus: #d2d2d2;
<br>--color-small-button-text-border-focus: #606060;
<br>--predictive-search-focus: #f2f2f2;
<br><br>--color-body: #ffffff;
<br>--color-bg: #ffffff;
<br>--color-bg-rgb: 255, 255, 255;
<br>--color-bg-alt: rgba(51, 50, 50, 0.05);
<br>--color-bg-currency-selector: rgba(51, 50, 50, 0.2);
<br><br>--color-overlay-title-text: #ffffff;
<br>--color-image-overlay: #685858;
<br>--color-image-overlay-rgb: 104, 88, 88;
--opacity-image-overlay: 0.4;
--hover-overlay-opacity: 0.8;
<br><br>--color-border: #ebebeb;
<br>--color-border-form: #cccccc;
<br>--color-border-form-darker: #b3b3b3;
<br><br>--svg-select-icon: url(//cdn.shopify.com/s/files/1/0551/2567/2087/t/1/assets/ico-select.svg?v=2900367270910467858);
<br>--slick-img-url: url(//cdn.shopify.com/s/files/1/0551/2567/2087/t/1/assets/ajax-loader.gif?v=4135686330247201572);
<br><br>--font-weight-body--bold: 700;
<br>--font-weight-body--bolder: 700;
<br><br>--font-stack-header: Helvetica, 'Helvetica Neue', Arial, 'Lucida Grande', sans-serif;
<br>--font-style-header: normal;
<br>--font-weight-header: 700;
<br><br>--font-stack-body: Helvetica, 'Helvetica Neue', Arial, 'Lucida Grande', sans-serif;
<br>--font-style-body: normal;
<br>--font-weight-body: 400;
<br><br>--font-size-header: 26;
<br><br>--font-size-base: 15;
<br><br>--font-h1-desktop: 35;
<br>--font-h1-mobile: 32;
<br>--font-h2-desktop: 20;
<br>--font-h2-mobile: 18;
<br>--font-h3-mobile: 20;
<br>--font-h4-desktop: 17;
<br>--font-h4-mobile: 15;
<br>--font-h5-desktop: 15;
<br>--font-h5-mobile: 13;
<br>--font-h6-desktop: 14;
<br>--font-h6-mobile: 12;
<br><br>--font-mega-title-large-desktop: 65;
<br><br>--font-rich-text-large: 17;
<br>--font-rich-text-small: 13;
<br><br><br>--color-video-bg: #f2f2f2;
<br><br><br>--global-color-image-loader-primary: rgba(58, 58, 58, 0.06);
<br>--global-color-image-loader-secondary: rgba(58, 58, 58, 0.12);
<br>
}
<br>
</style>
<style>
*,
::after,
::before {
box-sizing: border-box
}
body {
margin: 0
}
body,
html {
background-color: var(--color-body)
}
body,
button {
font-size: calc(var(--font-size-base) * 1px);
font-family: var(--font-stack-body);
font-style: var(--font-style-body);
font-weight: var(--font-weight-body);
color: var(--color-text);
line-height: 1.5
}
body,
button {
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: 100%
}
.border-bottom {
border-bottom: 1px solid var(--color-border)
}
.btn--link {
background-color: transparent;
border: 0;
margin: 0;
color: var(--color-text);
text-align: left
}
.text-right {
text-align: right
}
.icon {
display: inline-block;
width: 20px;
height: 20px;
vertical-align: middle;
fill: currentColor
}
.icon__fallback-text,
.visually-hidden {
position: absolute !important;
overflow: hidden;
clip: rect(0 0 0 0);
height: 1px;
width: 1px;
margin: -1px;
padding: 0;
border: 0
}
svg.icon:not(.icon--full-color) circle,
svg.icon:not(.icon--full-color) ellipse,
svg.icon:not(.icon--full-color) g,
svg.icon:not(.icon--full-color) line,
svg.icon:not(.icon--full-color) path,
svg.icon:not(.icon--full-color) polygon,
svg.icon:not(.icon--full-color) polyline,
svg.icon:not(.icon--full-color) rect,
symbol.icon:not(.icon--full-color) circle,
symbol.icon:not(.icon--full-color) ellipse,
symbol.icon:not(.icon--full-color) g,
symbol.icon:not(.icon--full-color) line,
symbol.icon:not(.icon--full-color) path,
symbol.icon:not(.icon--full-color) polygon,
symbol.icon:not(.icon--full-color) polyline,
symbol.icon:not(.icon--full-color) rect {
fill: inherit;
stroke: inherit
}
li {
list-style: none
}
.list--inline {
padding: 0;
margin: 0
}
.list--inline>li {
display: inline-block;
margin-bottom: 0;
vertical-align: middle
}
a {
color: var(--color-text);
text-decoration: none
}
.h1,
.h2,
h1,
h2 {
margin: 0 0 17.5px;
font-family: var(--font-stack-header);
font-style: var(--font-style-header);
font-weight: var(--font-weight-header);
line-height: 1.2;
overflow-wrap: break-word;
word-wrap: break-word
}
.h1 a,
.h2 a,
h1 a,
h2 a {
color: inherit;
text-decoration: none;
font-weight: inherit
}
.h1,
h1 {
font-size: calc(((var(--font-h1-desktop))/ (var(--font-size-base))) * 1em);
text-transform: none;
letter-spacing: 0
}
@media only screen and (max-width:749px) {
.h1,
h1 {
font-size: calc(((var(--font-h1-mobile))/ (var(--font-size-base))) * 1em)
}
}
.h2,
h2 {
font-size: calc(((var(--font-h2-desktop))/ (...
<aside> 🚨 テーマ「Showcase」で発生する表示崩れを修正する場合には、下記をご覧ください。 テーマ Showcase利用時の表示崩れを修正する方法はありますか？
</aside>
<aside> <img src="/icons/checklist_purple.svg" alt="/icons/checklist_purple.svg" width="40px" /> ヘルプページ