Артур

проименную картинки. Пример, как в комментах: size_color.png [small_purple.png с фото в вопросе например]
через jquery меняй attr у картинки.

// предположительно получены по кликам выбора
let color = "purple",
size = "small";

function newImggen(){
//var whatNow = $(".blockImg").attr('src'),
gen = "/img/"+size+"_"+color+".png";

$(".blockImg").attr('src', gen);

}

посмотри что в коде вызывается по кликам на выборные кнопки и в этой части вызови функцию newImggen();

bootstrap + картинки замени на canvas отрисовку или помучайся блоками со свойствами css3 (наклоны, развороты)

очень просто либо синонимы либо близкие по значению
Например:

pays - таблица
в ней выплаты в структуре зовутся ['down']
вложения ['up']
адреса сайтов, как ['url']

а вообще называй так, чтобы тебе было понятно и ты не запутался.
например функции обращения к бд прописываю, как $sql = или $db =