Solved

How to move my compare at price to sit to the right of my Price on the same Line?

Maj79
Tourist
14 0 1

I would like to try and move my compare at price to the right or left of my price on the same line just like it shows in my collections page as at the moment it seems to clash with my afterpay text and is sitting below the text. 

https://www.livindreamz.com/collections/kids-cars/products/disney-captain-america-ride-on-car

Accepted Solution (1)

QuangN
Pathfinder
100 12 36

This is an accepted solution.

Hi @Maj79 

I think you can use this code, just paste it to the bottom of the style.css.liquid file.

 

 

.product-details-content .product-details-price{
	flex-direction: row!important;
    flex-wrap: wrap!important;
}
.product-details-content .product-details-price #ProductPrice {
	order: 1;
}
.product-details-content .product-details-price #ComparePrice {
	order: 2;	
	margin-bottom: 10px;
}
.product-details-content .product-details-price .afterpay-paragraph {
	order: 3;
}

 

 

If it works, please like and mark it as a solution :")😄

Footnote: The anatomy of a good product page.

- Tips to optimize website loadspeed: academy.pagefly.io/how-to-speed-up-website

- Do you need to customize your landing page, product page, blog, coming soon, FAQ, about us pages? Check out PageFly - Advanced Shopify Page Builder.

View solution in original post

Replies 6 (6)

QuangN
Pathfinder
100 12 36

This is an accepted solution.

Hi @Maj79 

I think you can use this code, just paste it to the bottom of the style.css.liquid file.

 

 

.product-details-content .product-details-price{
	flex-direction: row!important;
    flex-wrap: wrap!important;
}
.product-details-content .product-details-price #ProductPrice {
	order: 1;
}
.product-details-content .product-details-price #ComparePrice {
	order: 2;	
	margin-bottom: 10px;
}
.product-details-content .product-details-price .afterpay-paragraph {
	order: 3;
}

 

 

If it works, please like and mark it as a solution :")😄

Footnote: The anatomy of a good product page.

- Tips to optimize website loadspeed: academy.pagefly.io/how-to-speed-up-website

- Do you need to customize your landing page, product page, blog, coming soon, FAQ, about us pages? Check out PageFly - Advanced Shopify Page Builder.
Maj79
Tourist
14 0 1

Thank you this has worked by pasting to my style.css file.  I have one other question though as now from my collections page if i quick view a product the compare at price looks the same as my other price so 2 prices side by side the compare at price needs to show with the line through it. 

dmwwebartisan
Shopify Partner
12289 2547 3698

Hey @Maj79,

To do so you have to change your sections/product-template.liquid code a little bit. Just move to compare price code next to the price.

Please check the screenshot given below.

move-compare-price.jpg

 

Let me know if you can do that or provide me with code here.

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
Maj79
Tourist
14 0 1

@dmwwebartisan wrote:

Hey @Maj79,

To do so you have to change your sections/product-template.liquid code a little bit. Just move to compare price code next to the price.

Please check the screenshot given below.

 

Sorry my issue is now to do with no line through my compare at price in the product quick view clicking in from my home page. 

But This is my whole code in that file i cant see anything like your above code. 



{%- assign on_sale = false -%}
{%- if product.compare_at_price > product.price -%}
{%- assign on_sale = true -%}
{%- endif -%}

{%- assign sold_out = true -%}
{%- if product.available -%}
{%- assign sold_out = false -%}
{%- endif -%}

{%- assign current_variant = product.selected_or_first_available_variant -%}
<div class="product-details-area pt-100 pb-95">
<div class="container">
<div class="row{% if section.settings.content_handle == 'content_in_left' and section.settings.product_style != 'slider' %} flex-row-reverse{% endif %}">
{%- if section.settings.product_style == 'tab_style_1' -%}
{%- include 'tab-style-1' -%}

{%- elsif section.settings.product_style == 'tab_style_2' -%}
{%- include 'tab-style-2' -%}

{%- elsif section.settings.product_style == 'tab_style_3' -%}
{%- include 'tab-style-3' -%}

{%- elsif section.settings.product_style == 'gallery' -%}
{%- include 'gallery-style' -%}

{%- elsif section.settings.product_style == 'sticky' -%}
{%- include 'sticky-style' -%}

{%- elsif section.settings.product_style == 'slider' -%}
{%- include 'slider-style' -%}
{%- endif -%}
</div>
</div>
</div>

{% style %}
.dynamic_btn {
max-width: 340px;
margin-bottom: 20px;
}
.dynamic_btn button {
padding: 23px 38px;
border-radius: 0;
background-color: {{ section.settings.dynamic_btn_bg }};
font-size: {{ section.settings.dynamic_btn_size }}px;
}
.dynamic_btn button:hover {
background-color: {{ settings.color_primary }} !important;
}
{% if section.settings.show_variant_image %}
.swatch-element.color > label {
height: 30px;
width: 30px;
}
{% endif %}
{% endstyle %}

{% schema %}
{
"name": "Product",
"settings": [
{
"type": "header",
"content": "Product Style"
},
{
"type": "radio",
"id": "content_handle",
"label": "Content Position",
"options": [
{
"label": "Left",
"value": "content_in_left"
},
{
"label": "Right",
"value": "content_in_right"
}
],
"default": "content_in_right"
},
{
"type": "select",
"id": "product_style",
"label": "Product Style",
"options":[
{
"label": "Tab 1",
"value": "tab_style_1"
},
{
"label": "Tab 2",
"value": "tab_style_2"
},
{
"label": "Tab 3",
"value": "tab_style_3"
},
{
"label": "Gallery",
"value": "gallery"
},
{
"label": "Sticky",
"value": "sticky"
},
{
"label": "Slider",
"value": "slider"
}
],
"default": "tab_style_1"
},
{
"type": "header",
"content": "Product Zoom"
},
{
"type": "checkbox",
"id": "product_zoom_enable",
"label": "Product Zoom Enable",
"default": true
},
{
"type": "select",
"id": "zoom_type",
"label": "Zoom Type",
"options":[
{
"label": "Lens",
"value": "lens"
},
{
"label": "Window",
"value": "window"
},
{
"label": "Inner",
"value": "inner"
}
],
"default": "inner"
},
{
"type": "header",
"content": "Video Button"
},
{
"type": "checkbox",
"id": "show_video",
"label": "Enable Video Button",
"default": true
},
{
"type": "checkbox",
"id": "show_video_icon",
"label": "Show Video Icon",
"default": true
},
{
"type": "text",
"id": "video_btn",
"label": "Button Text",
"default": "View Video"
},
{
"type": "paragraph",
"content": "=> Use Shortcode in your product description to show Video tab- [product_video]Video ID[/product_video]"
},
{
"type": "paragraph",
"content": "[How to Get Video ID](https:\/\/image.prntscr.com/image/P7-HVQuzSlyPO2vOpHX5LQ.png)"
},
{
"type": "header",
"content": "Image Popup"
},
{
"type": "checkbox",
"id": "product_popup_enable",
"label": "Product Popup Enable",
"default": true,
"info": "When 'Product Zoom' enabled and product style 'Default' then it applicable"
},
{
"type": "header",
"content": "Product SKU"
},
{
"type": "checkbox",
"id": "product_sku_enable",
"label": "Show Product SKU",
"default": true
},
{
"type": "text",
"id": "product_sku_title",
"label": "SKU Title",
"default": "SKU:"
},
{
"type": "header",
"content": "Product Review"
},
{
"type": "paragraph",
"content": "To enable product review, go to 'Theme settings > Product Settings'"
},
{
"type": "header",
"content": "Product Description"
},
{
"type": "radio",
"id": "product_description_handle",
"label": "Description Handle",
"options":[
{
"label": "Full Description",
"value": "full_description"
},
{
"label": "Short Description",
"value": "short_description"
},
{
"label": "Without Description",
"value": "without_description"
}
],
"default": "short_description"
},
{
"type": "number",
"id": "truncatewords_count_handle",
"label": "Description Word Count",
"default": 35,
"info": "If 'Short Description' is selected and the shortcode is not used, then it will be applicable"
},
{
"type": "header",
"content": "Product Meta"
},
{
"type": "checkbox",
"id": "product_meta_enable",
"label": "Product Meta Enable",
"default": true
},
{
"type": "text",
"id": "product_meta_title",
"label": "Meta Title",
"default": "Book Name:"
},
{
"type": "text",
"id": "product_meta_author",
"label": "Meta Author",
"default": "Author Name"
},
{
"type": "text",
"id": "product_meta_type",
"label": "Meta Product Type",
"default": "Product Type"
},
{
"type": "text",
"id": "product_meta_date",
"label": "Meta Publish Date",
"default": "Item Publish Date"
},
{
"type": "text",
"id": "product_meta_barcode",
"label": "Meta Barcode",
"default": "Barcode"
},
{
"type": "header",
"content": "Product Variant"
},
{
"type": "radio",
"id": "product_variant_handle",
"label": "Variant Option",
"options":[
{
"label": "Select Option",
"value": "product_variant_select_option"
},
{
"label": "Swatch Option",
"value": "product_variant_swatch_option"
},
{
"label": "Without Variant",
"value": "product_variant_without_option"
}
],
"default": "product_variant_swatch_option"
},
{
"type": "checkbox",
"id": "show_variant_image",
"label": "Variant image enable",
"default": false,
"info": "The variant image will replace in color field if each variant each image selected. It's applicable for 'Swatch Option'"
},
{
"type": "header",
"content": "Dynamic Checkout Buttons"
},
{
"type": "checkbox",
"id": "dynamic_checkout_button_enable",
"label": "Enable Dynamic Checkout Buttons",
"default": true
},
{
"type": "color",
"id": "dynamic_btn_bg",
"label": "Button BG Color",
"default": "#1f2226"
},
{
"type": "range",
"id": "dynamic_btn_size",
"min": 12,
"max": 40,
"step": 1,
"label": "Button Font Size",
"unit": "px",
"default": 16
},
{
"type": "header",
"content": "Social Share Option"
},
{
"type": "checkbox",
"id": "social_share_enable",
"label": "Show Social Share",
"default": true
},
{
"type": "text",
"id": "social_share_title",
"label": "Social Share Title",
"default": "Share:"
},

{
"type": "header",
"content": "Category"
},
{
"type": "checkbox",
"id": "show_cat",
"label": "Show Category",
"default": true
},
{
"type": "text",
"id": "cat_title",
"label": "Category Title",
"default": "Categories: "
},
{
"type": "header",
"content": "Tag"
},
{
"type": "checkbox",
"id": "show_tag",
"label": "Show Tag",
"default": true
},
{
"type": "text",
"id": "tag_title",
"label": "Tag Title",
"default": "Tag: "
},
{
"type": "header",
"content": "Payment Option"
},
{
"type": "checkbox",
"id": "payment_option_enable",
"label": "Show Payment Option",
"default": true
},
{
"type": "text",
"id": "payment_information",
"label": "Information",
"default": "Guaranteed safe checkout"
},
{
"type": "image_picker",
"id": "payment_image",
"label": "Payment Image"
},
{
"type": "radio",
"id": "payment_icon",
"label": "Payment Icon",
"options":[
{
"label": "Automatic",
"value": "automatic"
},
{
"label": "Custom Icon",
"value": "custom_icon"
}
],
"default": "custom_icon"
}
],
"blocks":[
{
"type": "amazon_payments",
"name": "Amazon Payments",
"limit": 1
},
{
"type": "american_express",
"name": "American Express",
"limit": 1
},
{
"type": "apple_pay",
"name": "Apple Pay",
"limit": 1
},
{
"type": "bitcoin",
"name": "Bitcoin",
"limit": 1
},
{
"type": "dankort",
"name": "Dankort",
"limit": 1
},
{
"type": "diners_club",
"name": "Diners Club",
"limit": 1
},
{
"type": "discover",
"name": "Discover",
"limit": 1
},
{
"type": "dogecoin",
"name": "Dogecoin",
"limit": 1
},
{
"type": "dwolla",
"name": "Dwolla",
"limit": 1
},
{
"type": "forbrugsforeningen",
"name": "Forbrugsforeningen",
"limit": 1
},
{
"type": "google_pay",
"name": "Google Pay",
"limit": 1
},
{
"type": "jcb",
"name": "Jcb",
"limit": 1
},
{
"type": "klarna",
"name": "Klarna",
"limit": 1
},
{
"type": "litecoin",
"name": "Litecoin",
"limit": 1
},
{
"type": "maestro",
"name": "Maestro",
"limit": 1
},
{
"type": "master",
"name": "Master",
"limit": 1
},
{
"type": "paypal",
"name": "Paypal",
"limit": 1
},
{
"type": "shopify_pay",
"name": "Shopify Pay",
"limit": 1
},
{
"type": "sofort",
"name": "Sofort",
"limit": 1
},
{
"type": "visa",
"name": "Visa",
"limit": 1
}
]
}
{% endschema %}


{%- if section.settings.product_zoom_enable -%}
<script src="{{ 'jquery.elevateZoom-3.0.8.min.js' | asset_url }}"></script>
{%- endif -%}

{%- if section.settings.product_popup_enable -%}
{{ 'jquery.fancybox.css' | asset_url | stylesheet_tag }}
<script src="{{ 'jquery.fancybox.min.js' | asset_url }}"></script>

<script>
$(document).ready(function() {
$('.fancybox').fancybox();
});
</script>
{%- endif -%}

{%- if section.settings.product_style == 'product_sticky' -%}
<script src="{{ 'ResizeSensor-StickySidebar.js' | asset_url }}"></script>
<script>
var sidebar = new StickySidebar('#product-content', {
containerSelector: '#product-details-with-gallery',
innerWrapperSelector: '.product-content-inner',
topSpacing: 20,
bottomSpacing: 20,
minWidth: 992,
});
</script>
{% endif %}


<script>
var selectCallback = function(variant, selector) {
timber.productPage({
money_format: "{{ shop.money_format }}",
variant: variant,
selector: selector
});

if (variant) {

// Current variant select+
var form = jQuery('#' + selector.domIdPrefix).closest('form');
for (var i=0,length=variant.options.length; i<length; i++) {
var val = variant.options[i].replace(/'/g,"&#039;");
var radioButton = form.find(".swatch[data-option-index='" + i + "'] :radio[value='" + val +"']");
if (radioButton.size()) {
radioButton.get(0).checked = true;
}
}

// Current sku pass
$('.variant-sku').text(variant.sku);
}else {
$('.variant-sku').empty();
}

{% comment %}
// in stock / out stock product start
if (variant) {
if (variant.inventory_management == "shopify" && variant.inventory_policy != "continue") {
if (variant.inventory_quantity > 0) {
jQuery('#variant-inventory').text(variant.inventory_quantity + ' in stock');
} else {
jQuery('#variant-inventory').text("Out of stock");
}
} else {
jQuery('#variant-inventory').text("In stock");
}
} else {
jQuery('#variant-inventory').text("");
}
{% endcomment %}


{%- if section.settings.product_zoom_enable -%}
// product image zoom with variant
if (variant && variant.featured_image) {
jQuery('#ProductThumbs a[data-image-id="' + variant.featured_image.id + '"]').trigger('click');
}
{%- endif -%}

};

jQuery(function($) {
new Shopify.OptionSelectors('productSelect', {
product: {{ product | json }},
onVariantSelected: selectCallback,
enableHistoryState: true
});

// Add label if only one product option and it isn't 'Title'. Could be 'Size'.
{% if product.options.size == 1 and product.options.first != 'Title' %}
$('.selector-wrapper:eq(0)').prepend('<label for="productSelect-option-0">{{ product.options.first | escape }}</label>');
{% endif %}

// Hide selectors if we only have 1 variant and its title contains 'Default'.
{% if product.variants.size == 1 and product.variants.first.title contains 'Default' %}
$('.selector-wrapper').hide();
{% endif %}
});

{%- if section.settings.product_zoom_enable -%}
function productZoom(){
$(".product-zoom").elevateZoom({
gallery: 'ProductThumbs',
galleryActiveClass: "active",
zoomType: "{{ section.settings.zoom_type }}",
cursor: "crosshair"
});
{%- if section.settings.product_popup_enable -%}
$(".product-zoom").on("click", function(e) {
var ez = $('.product-zoom').data('elevateZoom');
$.fancybox(ez.getGalleryList());
return false;
});
{% endif %}
};
function productZoomDisable(){
if( $(window).width() < 767 ) {
$('.zoomContainer').remove();
$(".product-zoom").removeData('elevateZoom');
$(".product-zoom").removeData('zoomImage');
} else {
productZoom();
}
};

productZoomDisable();

$(window).resize(function() {
productZoomDisable();
});
{%- endif -%}

</script>

dmwwebartisan
Shopify Partner
12289 2547 3698

Hey @Maj79,

If your problem has been solved then no need to do that. 🙂

In that case, you have to modify the liquid code of sections/product-template.liquid file ( for your information ). Is this code of product-template liquid file?

But your problem solved then no need to change liquid code. If you feel that, you have problem with devices then you can think about it. But for now I can see everything is fine.

Thanks!

 

 

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app

explrcompany
Visitor
3 0 0

Am wondering if something like this can be done on our website. www.explrwear.com

The price is very large and bulky on the bottom of each product in the collection grid & also the product grid. 


I want the small price ( just the price ) beside the product name. here is a photo of what am wanting. Image 2023-09-16 at 2.19 PM.jpg