FROM CACHE - en_header

Place Product Title On Top in Mobile Version (Warehouse Theme)

Solved
Fariss
Excursionist
22 0 12

Hi, guys, I want to make the product title appear on top of the product in product page like Innosupps.

Do you have a code/solution to make this happen? Thank you so much.

 

Screenshot 2022-04-20 103454.jpg

My current product page. I want to make it look like this.

 

Screenshot 2022-04-20 103535.jpg

 

Accepted Solutions (2)

Accepted Solutions
LitExtension
Shopify Partner
4438 905 936

This is an accepted solution.

Hi @Fariss,

Please change code:

{%- capture section_settings -%}
{
  "showShippingEstimator": {% if template == 'product.quick-view' or product.available == false %}false{% else %}{{ section.settings.show_shipping_estimator | json }}{% endif %},
  "showQuantitySelector": {{ section.settings.show_quantity_selector | json }},
  "showPaymentButton": {% if product.template_suffix == 'pre-order' %}false{% else %}{{ section.settings.show_payment_button | json }}{% endif %},
  "showInventoryQuantity": {% if product.template_suffix != 'pre-order' %}{{ section.settings.show_inventory_quantity | json }}{% else %}false{% endif %},
  "lowInventoryThreshold": {{ section.settings.low_inventory_threshold | json }},
  "galleryTransitionEffect": {{ section.settings.carousel_effect | json }},
  "enableImageZoom": {% if template == 'product.quick-view' %}false{% else %}{{ section.settings.enable_image_zoom | json }}{% endif %},
  "zoomEffect": {{ section.settings.zoom_effect | json }},
  "enableVideoLooping": {{ section.settings.enable_video_looping | json }},
  "productOptions": {{ product.options | json | escape }},
  "enableHistoryState": {% if template == 'product.quick-view' %}false{% else %}true{% endif %},
  "infoOverflowScroll": {% if template == 'product.quick-view' %}false{% else %}true{% endif %},
  "isQuickView": {% if template == 'product.quick-view' %}true{% else %}false{% endif %}
}
{%- endcapture -%}

<section data-section-id="{{ section.id }}" data-section-type="product" data-section-settings='{{ section_settings }}'>
  {%- if template != 'product.quick-view' -%}
    <div class="container container--flush">
      <div class="page__sub-header">
        <nav aria-label="{{ 'general.breadcrumb.title' | t }}" class="breadcrumb">
          <ol class="breadcrumb__list" role="list">
            <li class="breadcrumb__item">
              <a class="breadcrumb__link link" href="{{ routes.root_url }}">{{ 'general.breadcrumb.home' | t }}</a> {%- render 'icon', icon: 'arrow-right' -%}
            </li>

            <li class="breadcrumb__item">
              {%- if collection -%}
                <a class="breadcrumb__link link" href="{{ collection.url }}">{{ collection.title }}</a> {%- render 'icon', icon: 'arrow-right' -%}
              {%- else -%}
                <a class="breadcrumb__link link" href="{{ routes.all_products_collection_url }}">{{- 'collection.general.all_products' | t -}}</a> {%- render 'icon', icon: 'arrow-right' -%}
              {%- endif -%}
            </li>

            <li class="breadcrumb__item">
              <span class="breadcrumb__link" aria-current="page">{{ product.title | truncate: 40 }}</span>
            </li>
          </ol>
        </nav>

        {%- if collection.previous_product or collection.next_product -%}
          <div class="page__navigation">
            {%- if collection.previous_product -%}
              <span class="page__navigation-item page__navigation-item--prev">
                <a href="{{ collection.previous_product.url }}" class="link" rel="prev">{%- render 'icon', icon: 'arrow-left' -%} {{- 'product.general.previous_product' | t -}}</a>
              </span>
            {%- endif -%}

            {%- if collection.next_product -%}
              <span class="page__navigation-item page__navigation-item--next">
                <a href="{{ collection.next_product.url }}" class="link" rel="next">{{- 'product.general.next_product' | t -}} {%- render 'icon', icon: 'arrow-right' -%}</a>
              </span>
            {%- endif -%}
          </div>
        {%- endif -%}
      </div>

      <div class="product-block-list product-block-list--{{ section.settings.image_size }}">
        <div class="product-block-list__wrapper">
          <div class="product-meta__title-mobile hidden-tablet hidden-tablet-and-up">
            {%- if template.name == 'product' and template != 'product.quick-view' -%}
              <h1 class="product-meta__title heading h1">{{ product.title }}</h1>
            {%- else -%}
              <h3 class="product-meta__title heading h2">
                <a href="{{ product.url }}">{{ product.title }}</a>
              </h3>
            {%- endif -%}
          </div>
          {%- if product.media.size > 0 -%}
            <div class="product-block-list__item product-block-list__item--gallery">
              {% render 'product-gallery' %}
            </div>
          {%- endif -%}

          <div class="product-block-list__item product-block-list__item--info">
            {% render 'product-info' %}
          </div>

          {%- if product.description != blank -%}
            <div class="product-block-list__item product-block-list__item--description">
              <div class="card">
                {%- if section.settings.content_display_mode == 'collapse_all' -%}
                  <button class="card__collapsible-button" data-action="toggle-collapsible" aria-expanded="false" aria-controls="product-description">
                    <span class="card__title heading h3">{{ 'product.general.description' | t }}</span>
                    <span class="plus-button plus-button--large"></span>
                  </button>

                  <div id="product-description" class="card__collapsible">
                    <div class="card__collapsible-content">
                      <div class="rte text--pull">
                        {{ product.description | remove: 'data-section-type="product"' }}
                      </div>
                    </div>
                  </div>
                {%- else -%}
                  <div class="card__header">
                    <h2 class="card__title heading h3">{{ 'product.general.description' | t }}</h2>
                  </div>

                  {%- if section.settings.content_display_mode == 'show_all_and_expand_description' -%}
                    <div class="card__section">
                      <div class="rte text--pull">
                        {{ product.description | remove: 'data-section-type="product"' }}
                      </div>
                    </div>
                  {%- else -%}
                    <div class="card__section expandable-content" aria-expanded="false">
                      <div class="rte text--pull">
                        {{ product.description | remove: 'data-section-type="product"' }}
                      </div>

                      <button class="expandable-content__toggle">
                        <span class="expandable-content__toggle-icon"></span>
                        <span class="expandable-content__toggle-text" data-view-more="{{ 'product.general.view_more' | t | escape }}" data-view-less="{{ 'product.general.view_less' | t | escape }}">{{- 'product.general.view_more' | t -}}</span>
                      </button>
                    </div>
                  {%- endif -%}
                {%- endif -%}
              </div>
            </div>
          {%- endif -%}

          {%- comment -%}
          --------------------------------------------------------------------------------------
          TABS
          --------------------------------------------------------------------------------------
          {%- endcomment -%}

          {%- for i in (1..5) -%}
            {%- assign unique_tab_title = '' -%}
            {%- assign unique_tab_content = '' -%}

            {%- comment -%}First check for metafields{%- endcomment -%}

            {%- assign metafield_tab_title_option = 'tab_' | append: i | append: '_title' -%}
            {%- assign metafield_tab_content_option = 'tab_' | append: i | append: '_content' -%}

            {%- if product.metafields.sf_product_tabs[metafield_tab_title_option] != blank and product.metafields.sf_product_tabs[metafield_tab_content_option] != blank -%}
              {%- assign unique_tab_title = product.metafields.sf_product_tabs[metafield_tab_title_option] -%}
              {%- assign unique_tab_content = product.metafields.sf_product_tabs[metafield_tab_content_option] -%}
            {%- else -%}
              {%- assign tab_to_look = '__tab' | append: i | append: ':' -%}

              {%- for tag in product.tags -%}
                {%- if tag contains tab_to_look -%}
                  {%- assign unique_tab_handle = tag | split: tab_to_look | last -%}
                  {%- assign unique_tab_page = pages[unique_tab_handle] -%}

                  {%- unless unique_tab_page.empty? -%}
                    {%- assign unique_tab_title = unique_tab_page.title -%}
                    {%- assign unique_tab_content = unique_tab_page.content -%}
                    {%- break -%}
                  {%- endunless -%}
                {%- endif -%}
              {%- endfor -%}
            {%- endif -%}

            {%- if unique_tab_title != blank and unique_tab_content != blank -%}
              <div class="product-block-list__item product-block-list__item--content">
                <div class="card">
                  {%- if section.settings.content_display_mode == 'collapse_all_except_description' or section.settings.content_display_mode == 'collapse_all' -%}
                    <button class="card__collapsible-button" data-action="toggle-collapsible" aria-expanded="false" aria-controls="unique-tab-{{ i }}">
                      <span class="card__title heading h3">{{ unique_tab_title }}</span>
                      <span class="plus-button plus-button--large"></span>
                    </button>

                    <div id="unique-tab-{{ i }}" class="card__collapsible">
                      <div class="card__collapsible-content">
                        <div class="rte text--pull">
                          {{ unique_tab_content }}
                        </div>
                      </div>
                    </div>
                  {%- else -%}
                    <div class="card__header">
                      <h2 class="card__title heading h3">{{ unique_tab_title }}</h2>
                    </div>

                    <div class="card__section expandable-content" aria-expanded="false">
                      <div class="rte text--pull">
                        {{ unique_tab_content }}
                      </div>

                      <button class="expandable-content__toggle">
                        <span class="expandable-content__toggle-icon"></span>
                        <span class="expandable-content__toggle-text" data-view-more="{{ 'product.general.view_more' | t | escape }}" data-view-less="{{ 'product.general.view_less' | t | escape }}">{{- 'product.general.view_more' | t -}}</span>
                      </button>
                    </div>
                  {%- endif -%}
                </div>
              </div>
            {%- endif -%}
          {%- endfor -%}

          {%- for i in (1..3) -%}
            {%- assign global_tab_option = 'tab_page_' | append: i | append: '_handle' -%}
            {%- assign global_tab_page = pages[section.settings[global_tab_option]] -%}

            {%- unless global_tab_page.empty? -%}
              <div class="product-block-list__item product-block-list__item--content">
                <div class="card">
                  {%- if section.settings.content_display_mode == 'collapse_all_except_description' or section.settings.content_display_mode == 'collapse_all' -%}
                    <button class="card__collapsible-button" data-action="toggle-collapsible" aria-expanded="false" aria-controls="global-tab-{{ i }}">
                      <span class="card__title heading h3">{{ global_tab_page.title }}</span>
                      <span class="plus-button plus-button--large"></span>
                    </button>

                    <div id="global-tab-{{ i }}" class="card__collapsible">
                      <div class="card__collapsible-content">
                        <div class="rte text--pull">
                          {{ global_tab_page.content }}
                        </div>
                      </div>
                    </div>
                  {%- else -%}
                    <div class="card__header">
                      <h2 class="card__title heading h3">{{ global_tab_page.title }}</h2>
                    </div>

                    <div class="card__section expandable-content" aria-expanded="false">
                      <div class="rte text--pull">
                        {{ global_tab_page.content }}
                      </div>

                      <button class="expandable-content__toggle">
                        <span class="expandable-content__toggle-icon"></span>
                        <span class="expandable-content__toggle-text" data-view-more="{{ 'product.general.view_more' | t | escape }}" data-view-less="{{ 'product.general.view_less' | t | escape }}">{{- 'product.general.view_more' | t -}}</span>
                      </button>
                    </div>
                  {%- endif -%}
                </div>
              </div>
            {%- endunless -%}
          {%- endfor -%}

          {%- comment -%}
          --------------------------------------------------------------------------------------
          REVIEWS
          --------------------------------------------------------------------------------------
          {%- endcomment -%}

          {%- if section.settings.enable_reviews -%}
            <div class="product-block-list__item product-block-list__item--reviews">
              <span id="product-reviews" class="anchor"></span>

              <div class="card">
                <div class="card__section">
                  {%- assign reviews_count = product.metafields.spr.reviews | split: '<meta itemprop="reviewCount" content="' | last | split: '">' | first | times: 1 -%}
                  <div id="shopify-product-reviews" class="spr-reviews {% if reviews_count > 0 %}spr-reviews--has-reviews{% endif %}" data-id="{{ product.id }}">{{ product.metafields.spr.reviews }}</div>
                </div>
              </div>
            </div>
          {%- endif -%}

          {%- comment -%}
          --------------------------------------------------------------------------------------
          SECURITY BADGES
          --------------------------------------------------------------------------------------
          {%- endcomment -%}

          {%- if section.settings.show_payment_icons and shop.enabled_payment_types.size > 0 -%}
            {%- assign show_payment_icons = true -%}
          {%- else -%}
            {%- assign show_payment_icons = false -%}
          {%- endif -%}

          {%- if section.settings.custom_security_badge or show_payment_icons -%}
            <div class="product-block-list__item product-block-list__item--trust">
              <div class="card">
                <div class="card__header card__header--flex">
                  <h2 class="card__title heading h3">{{ section.settings.trust_title | escape }}</h2>

                  {%- render 'icon', icon: 'lock', width: 22, height: 24 -%}
                </div>

                <div class="card__section">
                  {%- if show_payment_icons -%}
                    {%- if section.settings.custom_security_badge -%}
                      <p class="card__subtitle heading h6">{{ 'product.general.payment' | t }}</p>
                    {%- endif -%}

                    <div class="payment-list">
                      {% for type in shop.enabled_payment_types %}
                        {{ type | payment_type_svg_tag: class: 'payment-list__item' }}
                      {% endfor %}
                    </div>

                    <p class="payment-list__notice">{{ 'product.general.payment_notice' | t }}</p>
                  {%- endif -%}

                  {%- if show_payment_icons and section.settings.custom_security_badge -%}
                    <hr class="card__separator">
                  {%- endif -%}

                  {%- if section.settings.custom_security_badge -%}
                    {%- if show_payment_icons -%}
                      <p class="card__subtitle heading h6">{{ 'product.general.security' | t }}</p>
                    {%- endif -%}

                    {%- assign badge_width = section.settings.custom_security_badge.width | at_most: 450 | append: 'x' -%}
                    <img class="product__trust-badge" style="width: {{ section.settings.custom_security_badge_width }}px"
                         src="{{ section.settings.custom_security_badge | img_url: badge_width }}"
                         srcset="{{ section.settings.custom_security_badge | img_url: badge_width }} 1x, {{ section.settings.custom_security_badge | img_url: badge_width, scale: 2 }} 2x"
                         alt="{{ section.settings.custom_security_badge.alt | escape }}">
                  {%- endif -%}
                </div>
              </div>
            </div>
          {%- endif -%}

          {%- comment -%}
          --------------------------------------------------------------------------------------
          ESTIMATE SHIPPING
          --------------------------------------------------------------------------------------
          {%- endcomment -%}

          {%- if section.settings.show_shipping_estimator and product.available -%}
            <div class="product-block-list__item product-block-list__item--shipping">
              <div class="card">
                <div class="card__header">
                  <h2 class="card__title heading h3">{{ 'product.general.estimate_shipping' | t }}</h2>
                </div>

                <div class="card__section">
                  <div class="shipping-estimator form" role="form">
                    <div class="form__input-row">
                      <div class="form__input-wrapper">
                        <label for="shipping-estimator-country" class="form__label">{{ 'cart.shipping_estimator.country' | t }}</label>

                        <div class="select-wrapper select-wrapper--primary">
                          {%- render 'icon', icon: 'arrow-bottom' -%}

                          <select name="country" id="shipping-estimator-country" data-default="{{ customer.default_address.country | default: section.settings.shipping_estimator_default_country }}" required>
                            {{- country_option_tags -}}
                          </select>
                        </div>
                      </div>

                      <div class="form__input-wrapper" style="display: none">
                        <label for="shipping-estimator-province" class="form__label">{{ 'cart.shipping_estimator.province' | t }}</label>

                        <div class="select-wrapper select-wrapper--primary">
                          {%- render 'icon', icon: 'arrow-bottom' -%}

                          <select name="province" id="shipping-estimator-province" data-default="{{ customer.default_address.province }}"></select>
                        </div>
                      </div>

                      <div class="form__input-wrapper" style="max-width: 155px">
                        <label for="shipping-estimator-zip" class="form__label">{{ 'cart.shipping_estimator.zip_code' | t }}</label>
                        <input type="text" name="zip" id="shipping-estimator-zip" class="form__field form__field--text" value="{{ customer.default.address.zip }}" required>
                      </div>
                    </div>

                    <button type="button" class="form__submit button button--primary" data-action="estimate-shipping">{{ 'cart.shipping_estimator.estimate' | t }}</button>

                    <div class="shipping-estimator__results rte" style="display: none;"></div>
                  </div>
                </div>

                {%- if section.settings.show_refunds_policy and shop.refund_policy != blank -%}
                  <div class="card__section card__section--tight">
                    <button class="product__refund-policy-link link link--accented" data-action="open-modal" aria-controls="modal-refunds-policy">{{ 'product.general.refund_policy' | t }} {%- render 'icon', icon: 'arrow-right' -%}</button>
                  </div>
                {%- endif -%}
              </div>
            </div>
          {%- endif -%}
        </div>
      </div>
    </div>

    {%- if section.settings.show_refunds_policy and shop.refund_policy != blank -%}
      <div id="modal-refunds-policy" class="modal" aria-hidden="true">
        <div class="modal__dialog" role="dialog">
          <header class="modal__header">
            <h3 class="modal__title heading h2">{{ 'product.general.refund_policy' | t }}</h3>
            <button class="modal__close link" data-action="close-modal">{%- render 'icon', icon: 'close' -%}</button>
          </header>

          <div class="modal__content">
            <div class="rte">
              {{ shop.refund_policy }}
            </div>
          </div>
        </div>
      </div>
    {%- endif -%}
  {%- else -%}
    {%- comment -%}We display the quick view within the product template so we can re-use the same settings{%- endcomment -%}
    <div class="featured-product">
      {%- render 'product-gallery' -%}
      {%- render 'product-info' -%}
    </div>
  {%- endif -%}
</section>

<style>
  .product-meta__title-mobile .product-meta__title {
    padding: 20px;
    background: #fff;
    margin-bottom: 0;
  }
  @media screen and (max-width: 640px) {
    .product-block-list__item--gallery .card {
      border-top: 0 !important;
    }
    .product-meta .product-meta__title {
      display: none !important;
    }
  }
</style>

{% schema %}
{
  "name": "Product page",
  "settings": [
    {
      "type": "checkbox",
      "id": "show_vendor",
      "label": "Show vendor",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "show_sku",
      "label": "Show SKU",
      "default": false
    },
    {
      "type": "checkbox",
      "id": "show_share_buttons",
      "label": "Show share buttons",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "show_taxes_included",
      "label": "Show price taxes notice",
      "default": false
    },
    {
      "type": "select",
      "id": "selector_mode",
      "label": "Selector type",
      "options": [
        {
          "value": "block",
          "label": "Block"
        },
        {
          "value": "dropdown",
          "label": "Dropdown"
        }
      ],
      "default": "block"
    },
    {
      "type": "select",
      "id": "color_mode",
      "label": "Color selector type",
      "info": "Variant image mode requires that all variant has an associated image. [Learn more](https://help.shopify.com/en/manual/products/product-variant-images#add-images-to-existing-variants)",
      "options": [
        {
          "value": "block",
          "label": "Block"
        },
        {
          "value": "dropdown",
          "label": "Dropdown"
        },
        {
          "value": "color",
          "label": "Color swatch"
        },
        {
          "value": "variant_image",
          "label": "Variant image"
        }
      ],
      "default": "color"
    },
    {
      "type": "checkbox",
      "id": "show_quantity_selector",
      "label": "Show quantity selector",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "show_payment_button",
      "label": "Show dynamic checkout button",
      "info": "Each customer will see their preferred payment method from those available on your store, such as PayPal or Apple Pay. [Learn more](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "show_pickup_availability",
      "label": "Show local pickup availability",
      "info": "Show customers where they can pick up the product. [Learn more](https://help.shopify.com/en/manual/shipping/setting-up-and-managing-your-shipping/local-methods/local-pickup#show-pickup-availability-to-your-customers)",
      "default": false
    },
    {
      "type": "header",
      "content": "Media"
    },
    {
      "type": "paragraph",
      "content": "Learn more about [media types](https://help.shopify.com/en/manual/products/product-media)"
    },
    {
      "type": "select",
      "id": "image_size",
      "label": "Size",
      "options": [
        {
          "value": "small",
          "label": "Small"
        },
        {
          "value": "medium",
          "label": "Medium"
        },
        {
          "value": "large",
          "label": "Large"
        }
      ],
      "default": "small"
    },
    {
      "type": "checkbox",
      "id": "enable_video_looping",
      "label": "Enable video looping",
      "default": false
    },
    {
      "type": "checkbox",
      "id": "enable_image_zoom",
      "label": "Enable image zoom",
      "default": true
    },
    {
      "type": "select",
      "id": "zoom_effect",
      "label": "Desktop zoom effect",
      "options": [
        {
          "value": "inside",
          "label": "Inside"
        },
        {
          "value": "outside",
          "label": "Outside"
        }
      ],
      "default": "outside"
    },
    {
      "type": "select",
      "id": "carousel_effect",
      "label": "Transition effect",
      "options": [
        {
          "value": "fade",
          "label": "Fade"
        },
        {
          "value": "slide",
          "label": "Slide"
        }
      ],
      "default": "fade"
    },
    {
      "type": "header",
      "content": "Inventory"
    },
    {
      "type": "paragraph",
      "content": "You can also add a stock countdown. [Learn more](https://support.maestrooo.com/article/177-product-show-an-stock-countdown-bar)."
    },
    {
      "type": "checkbox",
      "id": "show_inventory_quantity",
      "label": "Show inventory quantity",
      "default": false
    },
    {
      "type": "range",
      "id": "low_inventory_threshold",
      "label": "Low inventory threshold",
      "info": "Use low stock color when quantity is below the threshold. Choose 0 to always show in stock.",
      "min": 0,
      "max": 100,
      "step": 1,
      "default": 0
    },
    {
      "type": "header",
      "content": "Content"
    },
    {
      "type": "paragraph",
      "content": "You can also add per-product tabs. [Learn more](http://support.maestrooo.com/article/83-product-adding-different-tabs-per-product)."
    },
    {
      "type": "select",
      "id": "content_display_mode",
      "label": "Display mode",
      "options": [
        {
          "value": "show_all",
          "label": "Show all"
        },
        {
          "value": "show_all_and_expand_description",
          "label": "Show all and expand description"
        },
        {
          "value": "collapse_all",
          "label": "Collapse all"
        },
        {
          "value": "collapse_all_except_description",
          "label": "Collapse all except description"
        }
      ],
      "default": "show_all_and_expand_description"
    },
    {
      "type": "page",
      "id": "tab_page_1_handle",
      "label": "First page"
    },
    {
      "type": "page",
      "id": "tab_page_2_handle",
      "label": "Second page"
    },
    {
      "type": "page",
      "id": "tab_page_3_handle",
      "label": "Third page"
    },
    {
      "type": "header",
      "content": "Reviews"
    },
    {
      "type": "paragraph",
      "content": "You need to install [Shopify's free Product Reviews](https://apps.shopify.com/product-reviews) app before enabling those options."
    },
    {
      "type": "checkbox",
      "id": "enable_reviews",
      "label": "Enable",
      "default": false
    },
    {
      "type": "checkbox",
      "id": "show_reviews_badge",
      "label": "Show badge",
      "default": false
    },
    {
      "type": "header",
      "content": "Trust"
    },
    {
      "type": "text",
      "id": "trust_title",
      "label": "Heading",
      "default": "Payment & Security"
    },
    {
      "type": "checkbox",
      "id": "show_payment_icons",
      "label": "Show payment icons",
      "default": true
    },
    {
      "type": "image_picker",
      "id": "custom_security_badge",
      "label": "Security badge",
      "info": "800 x 200px .jpg recommended"
    },
    {
      "type": "range",
      "id": "custom_security_badge_width",
      "min": 100,
      "max": 500,
      "step": 10,
      "unit": "px",
      "label": "Security badge width",
      "default": 200
    },
    {
      "type": "header",
      "content": "Shipping estimator"
    },
    {
      "type": "checkbox",
      "id": "show_shipping_estimator",
      "label": "Show shipping estimator",
      "info": "Only show if product is available.",
      "default": true
    },
    {
      "type": "text",
      "id": "shipping_estimator_default_country",
      "label": "Default country",
      "info": "If the customer is logged in, the country of their shipping address will be used.",
      "default": "United States"
    },
    {
      "type": "checkbox",
      "id": "show_refunds_policy",
      "label": "Show refunds policy",
      "info": "Refund policy must be added into your store policies. [Learn more](https://help.shopify.com/manual/sell-online/checkout-settings/refund-privacy-tos).",
      "default": true
    }
  ]
}
{% endschema %}

Hope it helps!

LitExtension - #1 Shopping Cart Migration Expert
If our answer is helpful then please accept as solution!
Get your 1-month Shopify free trial from LitExtension. CONTACT US!
Are you looking for a solution to migrate to Shopify? Try our FREE DEMO now!

View solution in original post

LitExtension
Shopify Partner
4438 905 936

This is an accepted solution.

Hi @Fariss,

Please add code here:

Screenshot.png

Code:

text-align: center !important;

Hope it helps!

LitExtension - #1 Shopping Cart Migration Expert
If our answer is helpful then please accept as solution!
Get your 1-month Shopify free trial from LitExtension. CONTACT US!
Are you looking for a solution to migrate to Shopify? Try our FREE DEMO now!

View solution in original post

Replies 8 (8)
LitExtension
Shopify Partner
4438 905 936

Hi @Fariss,

Please send code product-template.liquid file, I will check and guide it in detail for you

LitExtension - #1 Shopping Cart Migration Expert
If our answer is helpful then please accept as solution!
Get your 1-month Shopify free trial from LitExtension. CONTACT US!
Are you looking for a solution to migrate to Shopify? Try our FREE DEMO now!
Fariss
Excursionist
22 0 12

@LitExtension 

Here I attached the file code. Looking forward to your solution 🙂

LitExtension
Shopify Partner
4438 905 936

This is an accepted solution.

Hi @Fariss,

Please change code:

{%- capture section_settings -%}
{
  "showShippingEstimator": {% if template == 'product.quick-view' or product.available == false %}false{% else %}{{ section.settings.show_shipping_estimator | json }}{% endif %},
  "showQuantitySelector": {{ section.settings.show_quantity_selector | json }},
  "showPaymentButton": {% if product.template_suffix == 'pre-order' %}false{% else %}{{ section.settings.show_payment_button | json }}{% endif %},
  "showInventoryQuantity": {% if product.template_suffix != 'pre-order' %}{{ section.settings.show_inventory_quantity | json }}{% else %}false{% endif %},
  "lowInventoryThreshold": {{ section.settings.low_inventory_threshold | json }},
  "galleryTransitionEffect": {{ section.settings.carousel_effect | json }},
  "enableImageZoom": {% if template == 'product.quick-view' %}false{% else %}{{ section.settings.enable_image_zoom | json }}{% endif %},
  "zoomEffect": {{ section.settings.zoom_effect | json }},
  "enableVideoLooping": {{ section.settings.enable_video_looping | json }},
  "productOptions": {{ product.options | json | escape }},
  "enableHistoryState": {% if template == 'product.quick-view' %}false{% else %}true{% endif %},
  "infoOverflowScroll": {% if template == 'product.quick-view' %}false{% else %}true{% endif %},
  "isQuickView": {% if template == 'product.quick-view' %}true{% else %}false{% endif %}
}
{%- endcapture -%}

<section data-section-id="{{ section.id }}" data-section-type="product" data-section-settings='{{ section_settings }}'>
  {%- if template != 'product.quick-view' -%}
    <div class="container container--flush">
      <div class="page__sub-header">
        <nav aria-label="{{ 'general.breadcrumb.title' | t }}" class="breadcrumb">
          <ol class="breadcrumb__list" role="list">
            <li class="breadcrumb__item">
              <a class="breadcrumb__link link" href="{{ routes.root_url }}">{{ 'general.breadcrumb.home' | t }}</a> {%- render 'icon', icon: 'arrow-right' -%}
            </li>

            <li class="breadcrumb__item">
              {%- if collection -%}
                <a class="breadcrumb__link link" href="{{ collection.url }}">{{ collection.title }}</a> {%- render 'icon', icon: 'arrow-right' -%}
              {%- else -%}
                <a class="breadcrumb__link link" href="{{ routes.all_products_collection_url }}">{{- 'collection.general.all_products' | t -}}</a> {%- render 'icon', icon: 'arrow-right' -%}
              {%- endif -%}
            </li>

            <li class="breadcrumb__item">
              <span class="breadcrumb__link" aria-current="page">{{ product.title | truncate: 40 }}</span>
            </li>
          </ol>
        </nav>

        {%- if collection.previous_product or collection.next_product -%}
          <div class="page__navigation">
            {%- if collection.previous_product -%}
              <span class="page__navigation-item page__navigation-item--prev">
                <a href="{{ collection.previous_product.url }}" class="link" rel="prev">{%- render 'icon', icon: 'arrow-left' -%} {{- 'product.general.previous_product' | t -}}</a>
              </span>
            {%- endif -%}

            {%- if collection.next_product -%}
              <span class="page__navigation-item page__navigation-item--next">
                <a href="{{ collection.next_product.url }}" class="link" rel="next">{{- 'product.general.next_product' | t -}} {%- render 'icon', icon: 'arrow-right' -%}</a>
              </span>
            {%- endif -%}
          </div>
        {%- endif -%}
      </div>

      <div class="product-block-list product-block-list--{{ section.settings.image_size }}">
        <div class="product-block-list__wrapper">
          <div class="product-meta__title-mobile hidden-tablet hidden-tablet-and-up">
            {%- if template.name == 'product' and template != 'product.quick-view' -%}
              <h1 class="product-meta__title heading h1">{{ product.title }}</h1>
            {%- else -%}
              <h3 class="product-meta__title heading h2">
                <a href="{{ product.url }}">{{ product.title }}</a>
              </h3>
            {%- endif -%}
          </div>
          {%- if product.media.size > 0 -%}
            <div class="product-block-list__item product-block-list__item--gallery">
              {% render 'product-gallery' %}
            </div>
          {%- endif -%}

          <div class="product-block-list__item product-block-list__item--info">
            {% render 'product-info' %}
          </div>

          {%- if product.description != blank -%}
            <div class="product-block-list__item product-block-list__item--description">
              <div class="card">
                {%- if section.settings.content_display_mode == 'collapse_all' -%}
                  <button class="card__collapsible-button" data-action="toggle-collapsible" aria-expanded="false" aria-controls="product-description">
                    <span class="card__title heading h3">{{ 'product.general.description' | t }}</span>
                    <span class="plus-button plus-button--large"></span>
                  </button>

                  <div id="product-description" class="card__collapsible">
                    <div class="card__collapsible-content">
                      <div class="rte text--pull">
                        {{ product.description | remove: 'data-section-type="product"' }}
                      </div>
                    </div>
                  </div>
                {%- else -%}
                  <div class="card__header">
                    <h2 class="card__title heading h3">{{ 'product.general.description' | t }}</h2>
                  </div>

                  {%- if section.settings.content_display_mode == 'show_all_and_expand_description' -%}
                    <div class="card__section">
                      <div class="rte text--pull">
                        {{ product.description | remove: 'data-section-type="product"' }}
                      </div>
                    </div>
                  {%- else -%}
                    <div class="card__section expandable-content" aria-expanded="false">
                      <div class="rte text--pull">
                        {{ product.description | remove: 'data-section-type="product"' }}
                      </div>

                      <button class="expandable-content__toggle">
                        <span class="expandable-content__toggle-icon"></span>
                        <span class="expandable-content__toggle-text" data-view-more="{{ 'product.general.view_more' | t | escape }}" data-view-less="{{ 'product.general.view_less' | t | escape }}">{{- 'product.general.view_more' | t -}}</span>
                      </button>
                    </div>
                  {%- endif -%}
                {%- endif -%}
              </div>
            </div>
          {%- endif -%}

          {%- comment -%}
          --------------------------------------------------------------------------------------
          TABS
          --------------------------------------------------------------------------------------
          {%- endcomment -%}

          {%- for i in (1..5) -%}
            {%- assign unique_tab_title = '' -%}
            {%- assign unique_tab_content = '' -%}

            {%- comment -%}First check for metafields{%- endcomment -%}

            {%- assign metafield_tab_title_option = 'tab_' | append: i | append: '_title' -%}
            {%- assign metafield_tab_content_option = 'tab_' | append: i | append: '_content' -%}

            {%- if product.metafields.sf_product_tabs[metafield_tab_title_option] != blank and product.metafields.sf_product_tabs[metafield_tab_content_option] != blank -%}
              {%- assign unique_tab_title = product.metafields.sf_product_tabs[metafield_tab_title_option] -%}
              {%- assign unique_tab_content = product.metafields.sf_product_tabs[metafield_tab_content_option] -%}
            {%- else -%}
              {%- assign tab_to_look = '__tab' | append: i | append: ':' -%}

              {%- for tag in product.tags -%}
                {%- if tag contains tab_to_look -%}
                  {%- assign unique_tab_handle = tag | split: tab_to_look | last -%}
                  {%- assign unique_tab_page = pages[unique_tab_handle] -%}

                  {%- unless unique_tab_page.empty? -%}
                    {%- assign unique_tab_title = unique_tab_page.title -%}
                    {%- assign unique_tab_content = unique_tab_page.content -%}
                    {%- break -%}
                  {%- endunless -%}
                {%- endif -%}
              {%- endfor -%}
            {%- endif -%}

            {%- if unique_tab_title != blank and unique_tab_content != blank -%}
              <div class="product-block-list__item product-block-list__item--content">
                <div class="card">
                  {%- if section.settings.content_display_mode == 'collapse_all_except_description' or section.settings.content_display_mode == 'collapse_all' -%}
                    <button class="card__collapsible-button" data-action="toggle-collapsible" aria-expanded="false" aria-controls="unique-tab-{{ i }}">
                      <span class="card__title heading h3">{{ unique_tab_title }}</span>
                      <span class="plus-button plus-button--large"></span>
                    </button>

                    <div id="unique-tab-{{ i }}" class="card__collapsible">
                      <div class="card__collapsible-content">
                        <div class="rte text--pull">
                          {{ unique_tab_content }}
                        </div>
                      </div>
                    </div>
                  {%- else -%}
                    <div class="card__header">
                      <h2 class="card__title heading h3">{{ unique_tab_title }}</h2>
                    </div>

                    <div class="card__section expandable-content" aria-expanded="false">
                      <div class="rte text--pull">
                        {{ unique_tab_content }}
                      </div>

                      <button class="expandable-content__toggle">
                        <span class="expandable-content__toggle-icon"></span>
                        <span class="expandable-content__toggle-text" data-view-more="{{ 'product.general.view_more' | t | escape }}" data-view-less="{{ 'product.general.view_less' | t | escape }}">{{- 'product.general.view_more' | t -}}</span>
                      </button>
                    </div>
                  {%- endif -%}
                </div>
              </div>
            {%- endif -%}
          {%- endfor -%}

          {%- for i in (1..3) -%}
            {%- assign global_tab_option = 'tab_page_' | append: i | append: '_handle' -%}
            {%- assign global_tab_page = pages[section.settings[global_tab_option]] -%}

            {%- unless global_tab_page.empty? -%}
              <div class="product-block-list__item product-block-list__item--content">
                <div class="card">
                  {%- if section.settings.content_display_mode == 'collapse_all_except_description' or section.settings.content_display_mode == 'collapse_all' -%}
                    <button class="card__collapsible-button" data-action="toggle-collapsible" aria-expanded="false" aria-controls="global-tab-{{ i }}">
                      <span class="card__title heading h3">{{ global_tab_page.title }}</span>
                      <span class="plus-button plus-button--large"></span>
                    </button>

                    <div id="global-tab-{{ i }}" class="card__collapsible">
                      <div class="card__collapsible-content">
                        <div class="rte text--pull">
                          {{ global_tab_page.content }}
                        </div>
                      </div>
                    </div>
                  {%- else -%}
                    <div class="card__header">
                      <h2 class="card__title heading h3">{{ global_tab_page.title }}</h2>
                    </div>

                    <div class="card__section expandable-content" aria-expanded="false">
                      <div class="rte text--pull">
                        {{ global_tab_page.content }}
                      </div>

                      <button class="expandable-content__toggle">
                        <span class="expandable-content__toggle-icon"></span>
                        <span class="expandable-content__toggle-text" data-view-more="{{ 'product.general.view_more' | t | escape }}" data-view-less="{{ 'product.general.view_less' | t | escape }}">{{- 'product.general.view_more' | t -}}</span>
                      </button>
                    </div>
                  {%- endif -%}
                </div>
              </div>
            {%- endunless -%}
          {%- endfor -%}

          {%- comment -%}
          --------------------------------------------------------------------------------------
          REVIEWS
          --------------------------------------------------------------------------------------
          {%- endcomment -%}

          {%- if section.settings.enable_reviews -%}
            <div class="product-block-list__item product-block-list__item--reviews">
              <span id="product-reviews" class="anchor"></span>

              <div class="card">
                <div class="card__section">
                  {%- assign reviews_count = product.metafields.spr.reviews | split: '<meta itemprop="reviewCount" content="' | last | split: '">' | first | times: 1 -%}
                  <div id="shopify-product-reviews" class="spr-reviews {% if reviews_count > 0 %}spr-reviews--has-reviews{% endif %}" data-id="{{ product.id }}">{{ product.metafields.spr.reviews }}</div>
                </div>
              </div>
            </div>
          {%- endif -%}

          {%- comment -%}
          --------------------------------------------------------------------------------------
          SECURITY BADGES
          --------------------------------------------------------------------------------------
          {%- endcomment -%}

          {%- if section.settings.show_payment_icons and shop.enabled_payment_types.size > 0 -%}
            {%- assign show_payment_icons = true -%}
          {%- else -%}
            {%- assign show_payment_icons = false -%}
          {%- endif -%}

          {%- if section.settings.custom_security_badge or show_payment_icons -%}
            <div class="product-block-list__item product-block-list__item--trust">
              <div class="card">
                <div class="card__header card__header--flex">
                  <h2 class="card__title heading h3">{{ section.settings.trust_title | escape }}</h2>

                  {%- render 'icon', icon: 'lock', width: 22, height: 24 -%}
                </div>

                <div class="card__section">
                  {%- if show_payment_icons -%}
                    {%- if section.settings.custom_security_badge -%}
                      <p class="card__subtitle heading h6">{{ 'product.general.payment' | t }}</p>
                    {%- endif -%}

                    <div class="payment-list">
                      {% for type in shop.enabled_payment_types %}
                        {{ type | payment_type_svg_tag: class: 'payment-list__item' }}
                      {% endfor %}
                    </div>

                    <p class="payment-list__notice">{{ 'product.general.payment_notice' | t }}</p>
                  {%- endif -%}

                  {%- if show_payment_icons and section.settings.custom_security_badge -%}
                    <hr class="card__separator">
                  {%- endif -%}

                  {%- if section.settings.custom_security_badge -%}
                    {%- if show_payment_icons -%}
                      <p class="card__subtitle heading h6">{{ 'product.general.security' | t }}</p>
                    {%- endif -%}

                    {%- assign badge_width = section.settings.custom_security_badge.width | at_most: 450 | append: 'x' -%}
                    <img class="product__trust-badge" style="width: {{ section.settings.custom_security_badge_width }}px"
                         src="{{ section.settings.custom_security_badge | img_url: badge_width }}"
                         srcset="{{ section.settings.custom_security_badge | img_url: badge_width }} 1x, {{ section.settings.custom_security_badge | img_url: badge_width, scale: 2 }} 2x"
                         alt="{{ section.settings.custom_security_badge.alt | escape }}">
                  {%- endif -%}
                </div>
              </div>
            </div>
          {%- endif -%}

          {%- comment -%}
          --------------------------------------------------------------------------------------
          ESTIMATE SHIPPING
          --------------------------------------------------------------------------------------
          {%- endcomment -%}

          {%- if section.settings.show_shipping_estimator and product.available -%}
            <div class="product-block-list__item product-block-list__item--shipping">
              <div class="card">
                <div class="card__header">
                  <h2 class="card__title heading h3">{{ 'product.general.estimate_shipping' | t }}</h2>
                </div>

                <div class="card__section">
                  <div class="shipping-estimator form" role="form">
                    <div class="form__input-row">
                      <div class="form__input-wrapper">
                        <label for="shipping-estimator-country" class="form__label">{{ 'cart.shipping_estimator.country' | t }}</label>

                        <div class="select-wrapper select-wrapper--primary">
                          {%- render 'icon', icon: 'arrow-bottom' -%}

                          <select name="country" id="shipping-estimator-country" data-default="{{ customer.default_address.country | default: section.settings.shipping_estimator_default_country }}" required>
                            {{- country_option_tags -}}
                          </select>
                        </div>
                      </div>

                      <div class="form__input-wrapper" style="display: none">
                        <label for="shipping-estimator-province" class="form__label">{{ 'cart.shipping_estimator.province' | t }}</label>

                        <div class="select-wrapper select-wrapper--primary">
                          {%- render 'icon', icon: 'arrow-bottom' -%}

                          <select name="province" id="shipping-estimator-province" data-default="{{ customer.default_address.province }}"></select>
                        </div>
                      </div>

                      <div class="form__input-wrapper" style="max-width: 155px">
                        <label for="shipping-estimator-zip" class="form__label">{{ 'cart.shipping_estimator.zip_code' | t }}</label>
                        <input type="text" name="zip" id="shipping-estimator-zip" class="form__field form__field--text" value="{{ customer.default.address.zip }}" required>
                      </div>
                    </div>

                    <button type="button" class="form__submit button button--primary" data-action="estimate-shipping">{{ 'cart.shipping_estimator.estimate' | t }}</button>

                    <div class="shipping-estimator__results rte" style="display: none;"></div>
                  </div>
                </div>

                {%- if section.settings.show_refunds_policy and shop.refund_policy != blank -%}
                  <div class="card__section card__section--tight">
                    <button class="product__refund-policy-link link link--accented" data-action="open-modal" aria-controls="modal-refunds-policy">{{ 'product.general.refund_policy' | t }} {%- render 'icon', icon: 'arrow-right' -%}</button>
                  </div>
                {%- endif -%}
              </div>
            </div>
          {%- endif -%}
        </div>
      </div>
    </div>

    {%- if section.settings.show_refunds_policy and shop.refund_policy != blank -%}
      <div id="modal-refunds-policy" class="modal" aria-hidden="true">
        <div class="modal__dialog" role="dialog">
          <header class="modal__header">
            <h3 class="modal__title heading h2">{{ 'product.general.refund_policy' | t }}</h3>
            <button class="modal__close link" data-action="close-modal">{%- render 'icon', icon: 'close' -%}</button>
          </header>

          <div class="modal__content">
            <div class="rte">
              {{ shop.refund_policy }}
            </div>
          </div>
        </div>
      </div>
    {%- endif -%}
  {%- else -%}
    {%- comment -%}We display the quick view within the product template so we can re-use the same settings{%- endcomment -%}
    <div class="featured-product">
      {%- render 'product-gallery' -%}
      {%- render 'product-info' -%}
    </div>
  {%- endif -%}
</section>

<style>
  .product-meta__title-mobile .product-meta__title {
    padding: 20px;
    background: #fff;
    margin-bottom: 0;
  }
  @media screen and (max-width: 640px) {
    .product-block-list__item--gallery .card {
      border-top: 0 !important;
    }
    .product-meta .product-meta__title {
      display: none !important;
    }
  }
</style>

{% schema %}
{
  "name": "Product page",
  "settings": [
    {
      "type": "checkbox",
      "id": "show_vendor",
      "label": "Show vendor",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "show_sku",
      "label": "Show SKU",
      "default": false
    },
    {
      "type": "checkbox",
      "id": "show_share_buttons",
      "label": "Show share buttons",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "show_taxes_included",
      "label": "Show price taxes notice",
      "default": false
    },
    {
      "type": "select",
      "id": "selector_mode",
      "label": "Selector type",
      "options": [
        {
          "value": "block",
          "label": "Block"
        },
        {
          "value": "dropdown",
          "label": "Dropdown"
        }
      ],
      "default": "block"
    },
    {
      "type": "select",
      "id": "color_mode",
      "label": "Color selector type",
      "info": "Variant image mode requires that all variant has an associated image. [Learn more](https://help.shopify.com/en/manual/products/product-variant-images#add-images-to-existing-variants)",
      "options": [
        {
          "value": "block",
          "label": "Block"
        },
        {
          "value": "dropdown",
          "label": "Dropdown"
        },
        {
          "value": "color",
          "label": "Color swatch"
        },
        {
          "value": "variant_image",
          "label": "Variant image"
        }
      ],
      "default": "color"
    },
    {
      "type": "checkbox",
      "id": "show_quantity_selector",
      "label": "Show quantity selector",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "show_payment_button",
      "label": "Show dynamic checkout button",
      "info": "Each customer will see their preferred payment method from those available on your store, such as PayPal or Apple Pay. [Learn more](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "show_pickup_availability",
      "label": "Show local pickup availability",
      "info": "Show customers where they can pick up the product. [Learn more](https://help.shopify.com/en/manual/shipping/setting-up-and-managing-your-shipping/local-methods/local-pickup#show-pickup-availability-to-your-customers)",
      "default": false
    },
    {
      "type": "header",
      "content": "Media"
    },
    {
      "type": "paragraph",
      "content": "Learn more about [media types](https://help.shopify.com/en/manual/products/product-media)"
    },
    {
      "type": "select",
      "id": "image_size",
      "label": "Size",
      "options": [
        {
          "value": "small",
          "label": "Small"
        },
        {
          "value": "medium",
          "label": "Medium"
        },
        {
          "value": "large",
          "label": "Large"
        }
      ],
      "default": "small"
    },
    {
      "type": "checkbox",
      "id": "enable_video_looping",
      "label": "Enable video looping",
      "default": false
    },
    {
      "type": "checkbox",
      "id": "enable_image_zoom",
      "label": "Enable image zoom",
      "default": true
    },
    {
      "type": "select",
      "id": "zoom_effect",
      "label": "Desktop zoom effect",
      "options": [
        {
          "value": "inside",
          "label": "Inside"
        },
        {
          "value": "outside",
          "label": "Outside"
        }
      ],
      "default": "outside"
    },
    {
      "type": "select",
      "id": "carousel_effect",
      "label": "Transition effect",
      "options": [
        {
          "value": "fade",
          "label": "Fade"
        },
        {
          "value": "slide",
          "label": "Slide"
        }
      ],
      "default": "fade"
    },
    {
      "type": "header",
      "content": "Inventory"
    },
    {
      "type": "paragraph",
      "content": "You can also add a stock countdown. [Learn more](https://support.maestrooo.com/article/177-product-show-an-stock-countdown-bar)."
    },
    {
      "type": "checkbox",
      "id": "show_inventory_quantity",
      "label": "Show inventory quantity",
      "default": false
    },
    {
      "type": "range",
      "id": "low_inventory_threshold",
      "label": "Low inventory threshold",
      "info": "Use low stock color when quantity is below the threshold. Choose 0 to always show in stock.",
      "min": 0,
      "max": 100,
      "step": 1,
      "default": 0
    },
    {
      "type": "header",
      "content": "Content"
    },
    {
      "type": "paragraph",
      "content": "You can also add per-product tabs. [Learn more](http://support.maestrooo.com/article/83-product-adding-different-tabs-per-product)."
    },
    {
      "type": "select",
      "id": "content_display_mode",
      "label": "Display mode",
      "options": [
        {
          "value": "show_all",
          "label": "Show all"
        },
        {
          "value": "show_all_and_expand_description",
          "label": "Show all and expand description"
        },
        {
          "value": "collapse_all",
          "label": "Collapse all"
        },
        {
          "value": "collapse_all_except_description",
          "label": "Collapse all except description"
        }
      ],
      "default": "show_all_and_expand_description"
    },
    {
      "type": "page",
      "id": "tab_page_1_handle",
      "label": "First page"
    },
    {
      "type": "page",
      "id": "tab_page_2_handle",
      "label": "Second page"
    },
    {
      "type": "page",
      "id": "tab_page_3_handle",
      "label": "Third page"
    },
    {
      "type": "header",
      "content": "Reviews"
    },
    {
      "type": "paragraph",
      "content": "You need to install [Shopify's free Product Reviews](https://apps.shopify.com/product-reviews) app before enabling those options."
    },
    {
      "type": "checkbox",
      "id": "enable_reviews",
      "label": "Enable",
      "default": false
    },
    {
      "type": "checkbox",
      "id": "show_reviews_badge",
      "label": "Show badge",
      "default": false
    },
    {
      "type": "header",
      "content": "Trust"
    },
    {
      "type": "text",
      "id": "trust_title",
      "label": "Heading",
      "default": "Payment & Security"
    },
    {
      "type": "checkbox",
      "id": "show_payment_icons",
      "label": "Show payment icons",
      "default": true
    },
    {
      "type": "image_picker",
      "id": "custom_security_badge",
      "label": "Security badge",
      "info": "800 x 200px .jpg recommended"
    },
    {
      "type": "range",
      "id": "custom_security_badge_width",
      "min": 100,
      "max": 500,
      "step": 10,
      "unit": "px",
      "label": "Security badge width",
      "default": 200
    },
    {
      "type": "header",
      "content": "Shipping estimator"
    },
    {
      "type": "checkbox",
      "id": "show_shipping_estimator",
      "label": "Show shipping estimator",
      "info": "Only show if product is available.",
      "default": true
    },
    {
      "type": "text",
      "id": "shipping_estimator_default_country",
      "label": "Default country",
      "info": "If the customer is logged in, the country of their shipping address will be used.",
      "default": "United States"
    },
    {
      "type": "checkbox",
      "id": "show_refunds_policy",
      "label": "Show refunds policy",
      "info": "Refund policy must be added into your store policies. [Learn more](https://help.shopify.com/manual/sell-online/checkout-settings/refund-privacy-tos).",
      "default": true
    }
  ]
}
{% endschema %}

Hope it helps!

LitExtension - #1 Shopping Cart Migration Expert
If our answer is helpful then please accept as solution!
Get your 1-month Shopify free trial from LitExtension. CONTACT US!
Are you looking for a solution to migrate to Shopify? Try our FREE DEMO now!
Fariss
Excursionist
22 0 12

Hi @LitExtension

Just tried. It works! Thank you very much!😊 This would be helpful for other members too.. as I see there isn't any solution for the warehouse theme.

Screenshot 2022-04-21 141939.jpg

 

But how to align the title at the center? Can you show me?

LitExtension
Shopify Partner
4438 905 936

This is an accepted solution.

Hi @Fariss,

Please add code here:

Screenshot.png

Code:

text-align: center !important;

Hope it helps!

LitExtension - #1 Shopping Cart Migration Expert
If our answer is helpful then please accept as solution!
Get your 1-month Shopify free trial from LitExtension. CONTACT US!
Are you looking for a solution to migrate to Shopify? Try our FREE DEMO now!
Fariss
Excursionist
22 0 12

Hi.

@LitExtension. Thanks for the code! and very very much thank you for helping me.
Screenshot 2022-04-22 091459.jpg

 

 

Fariss
Excursionist
22 0 12

@LitExtension Hi, I have a problem while using the code you gave to me. I noticed that the price is gone after I paste the new code. But the problem only happens on the product page with just only one product which doesn't have any variant. Could you help me figure this out? Or you can provide me with your email so I can reach you by email. See the reference below.

 

Screenshot 2022-05-11 122240.jpg

 

LitExtension
Shopify Partner
4438 905 936

Hi @Fariss,

I have checked and the code I provided should not affect this. Because the code that shows the price is in the product-info.liquid file.

You can create a question on the community and send me the link. I will check it.
Because this will help build a better community.
Thank you.

LitExtension - #1 Shopping Cart Migration Expert
If our answer is helpful then please accept as solution!
Get your 1-month Shopify free trial from LitExtension. CONTACT US!
Are you looking for a solution to migrate to Shopify? Try our FREE DEMO now!